What is Responsive Design?
At this moment, almost everyone in the web world has heard of responsive web design, but not everyone actually knows what it is.
I recommend you check out this interesting article: How to Transform Your Marketing Strategy with Digital Innovation and a GSM Agency.
.
Now in this post, you’ll learn the basics of what it means for a website to be responsive. After that, we’ll review a bit of the history of web design, so you can understand where the idea of responsive design came from and how it compares to the old way of doing things.
We’ll also look at why responsive design is usually the best option for creating websites that work well on different <a href="https://www.empresadeserviciosweb.com/stripe-en-wordpress-es-la-forma-mas-facil-de-aceptar-pagos-en-linea-desde-devices-moviles/” title=”Stripe on WordPress is the easiest way to accept online payments from mobile devices.”>devices and screen sizes, and how it means less work in the long run. We’ll also look at a less obvious effect of choosing a responsive design: how it affects your search engine ranking.
If you picked up this book because you’ve heard of responsive design but aren’t quite sure what it means, this section will help you understand the basics.
Even if you have some <a href="https://www.empresadeserviciosweb.com/que-es-uso-de-deep-linking-para-mejorar-la-experiencia-del-user-desde-resultados-de-busqueda/” title=”What is the Use of deep linking to improve user experience from search results”>experience with responsive design, you’ve probably found that it can be hard to explain to others without using overly technical language. This section will give you a better idea of how to explain responsive design to users, clients, less technical team members, or your mother, who wonders what you get paid to do all day.
Responsive design, in general, is a way of creating websites that can be viewed and used easily on any type of <a href="https://www.empresadeserviciosweb.com/pedir-google-encuentre-device-android-encontrar-mi-dispositivo-localizacion/” title=”How to Ask Google to Find My Device?”>device and screen size, from the smallest mobile phones to the widest <a href="https://www.empresadeserviciosweb.com/como-abrir-whatsapp-web-business-de-empresa-en-el-desktop-de-tu-ordenador-con-chrome/” title=”WhatsApp Business Web: how to use it on desktop with Chrome, troubleshoot, protect privacy, and manage your documents”>desktop monitors.
The easiest way to explain it is to compare responsive websites with sites that aren’t, and see how each type of site looks on smartphones.
Imagine you’re using your phone smart to view a fixed-width website, that is, a site that is designed to always display at a set width, such as 960 pixels. You’ll see the entire website as it appears on your desktop monitor, but it will initially display at a small size so it fits on the screen. You’ll have to constantly zoom in and out to read the text and navigate the site, as you can see in Figure 1-1. It’s a lot of extra work.
Figure 1-1. When viewing a fixed-width website on a mobile phone, you have to zoom in to see the text at a readable size.
And then, for some websites, there’s a mobile website that is separate from the regular desktop site. This type of site displays at full size when you load it on your smartphone (no need to zoom), but you’ll notice that it’s often very different from the same website when you view it on your desktop monitor; there’s often a lot of content missing, so the site owner can reduce the work involved in maintaining multiple versions of the site.
And because mobile sites are usually made for a specific device size, such as an iPhone, if you have a different device, the website may not fit as well on the screen.
Mobile Websites separate are usually optimized to work on one device size, but there are many different devices on the market, and building a mobile site to work on one device can mean leaving behind all the users who have different devices.
As an example, Ikea has a mobile website optimized to fit phones of a certain size. In Figure 1-2, the navigation for Ikea’s desktop site is at the top. At the bottom left is the site on an iPad, and the bottom right shows the site on an iPhone.
Figure 1-2. The Ikea desktop site (at the top) is the same as what you see on an iPad (bottom left), while the iPhone gets a special mobile website (bottom right).
The three screenshots are to scale, so you can compare the sizes of everything you see on the screen. When viewing the mobile site on the iPhone, you only have a few navigation links, but they’re similar in size to the links on the desktop site. But on the iPad you don’t get the mobile site, you get the desktop site, and everything is really small to fit on that small screen. You’ll have to zoom in a lot to use the site.
Ikea worked hard to create a good mobile site, but if your device is a tablet, you won’t be able to use it, and you’ll get a suboptimal experience. If Ikea had a responsive site, it could ensure that people using devices of any size would get a suitable interface.
With a responsive design, there’s only one version of the website, so you get all the content, but the layout [19659003] rearranges itself to fit perfectly on any screen size, with full-size text so you don’t have to zoom in and out, as you can see in Figure 1-3.
Figure 1-3. A responsive site viewed on a phone, a tablet, and a desktop monitor.
There are many more technical details (which we’ll cover later in the book), but from the user’s perspective, the key to describing a responsive site is that things can resize and move to fit the screen.
Before learning where responsive design came from, it’s helpful to know a little about the history of web design.
Although most monitors were a few fixed sizes, there were some much wider monitors on the market, and also some older, narrower monitors still in use. Web designers wanted their designs to look exactly the same no matter which monitor was being used, so they would generally create fixed-width designs to fit the most common monitor size, such as 960-pixel-wide sites to fit easily on 1,024-pixel-wide screens. Wider screens would simply display the sites with empty space (called whitespace in design terms) filling the extra space on each side of the design, as you can see in Figure 1-4.
Figure 1-4. The fixed-width MSN site is the same width on any size screen, leaving whitespace on each side when the screen is wider than the site.
These fixed-width designs are still quite common.
The ideas of fluid design and liquid design gained some traction in the early 2000s. These techniques use percentage-based widths to allow a web page‘s layout to flow to fit the screen width, so you could take advantage of the available space on wider screens. Although this sounded good in theory, giving up control of the layout meant you could end up with super-long line lengths and odd column breaks on wide screens, which led most web designers to stick with easier-to-manage fixed-width designs. 19659039] When mobile phones with Internet access first became available in the mid-1990s, they generally didn’t even have the ability to display real websites, and instead only provided data that could be displayed as text, such as weather forecasts, stock reports, and sports scores. Early mobile browsers could only display basic HTML, often in grayscale instead of color. It wasn’t until the mid-2000s that mobile browsers were able to display “real” web pages using technologies like CSS2 and JavaScript, on more advanced devices known as smartphones such as the iPhone in Figure 1-5.
Figure 1-5. The iPhone 4S.
The iPhone, which came out in 2007, was a game changer. It had a beautiful interface that could take advantage of all current web technologies to display web pages as they would look on a full-size monitor.
Although touchscreen devices had been around for years, the iPhone was one of the first mobile devices with multitouch, a technology that allows the device to recognize more than one simultaneous point of contact with the screen, necessary for the navigation behaviors we now take for granted, such as pinch-to-zoom.
All of this led to the iPhone being continuously referred to as one of the most innovative products of that year, but there was a problem. Web pages were designed to be viewed on full-size monitors, not small phones, so almost all web pages were 960 pixels or more. The iPhone’s screen, on the other hand, was only 320 pixels wide. Apple’s solution was to automatically shrink web pages to fit within the screen’s viewing area (the graphical window), and then allow the user to tap or pinch to zoom in on any area of the page.
But viewing small pieces of a page is not a good user experience.
Web designers knew that this was not an optimal way for people to use the Web, and that they would need to find a way to create web pages that were easier to view on the iPhone’s small screen.
Users were often automatically redirected to the mobile version of the site if they were using a mobile phone. Otherwise, they could choose to go to the mobile website by clicking a link or visiting the site through a different URL, commonly using an m subdomain (such as http://m.sprint.com). This practice led to these separate mobile sites being referred to as m-dot websites.
Of course, this meant extra work for the web team, but they generally made the work easier by making the mobile site a simplified version of the regular website with only a small portion of the content, as in Figure 1-6.
Figure 1-6. The desktop version and the mobile version of the The Washington Post website.
Their justification, that mobile phones were only used “on the go” or for certain basic activities, was probably true for most users at that point. But as mobile phones became more ubiquitous, people began using these devices for more and more tasks that they had previously performed only on their desktop or laptop computers.
Having an “iPhone website,” as they were often called, worked fine in the early days, since for a while the iPhone was the only major player in the smartphone market. But that didn’t last long. Other mobile phone companies soon jumped on the bandwagon and came out with their answers to the iPhone.
But these new smartphones were not all the same size. Compared to the iPhone’s 320-pixel width, many had narrower screens (240 pixels or less), and others had wider screens than the iPhone’s, especially those designed to be used with the screen held horizontally rather than vertically. A 320-pixel-wide iPhone website didn’t fit perfectly on all those screens.
So web designers began trying to find a solution: how can we make websites that work on screens of any size? There was no easy answer.
Then, in 2010, Apple released the iPad. Again, this was a game changer. Mobile websites were too small to take advantage of the iPad’s much larger screen, but desktop-sized fixed-width sites were too large to be easily viewed in portrait mode on an iPad.
Although some designers reacted by creating separate iPad websites (so now they had three separate websites), most realized that as more and more device sizes came to market, it was no longer sustainable to create separate websites for every possible screen size.
The web design community returned once again to the concept of fluid layouts, using percentage-based widths, and tried to figure out how to turn that into a solution for smaller mobile devices.
Using percentages instead of pixels allows a web page and sections of the page to change width to fit any screen size, so it is easy to account for the differences between devices of similar size.
But once you look at the full range of devices, you have a problem. Limiting a three-column layout to the width of a smartphone makes the text columns too narrow to be readable. Similarly, a one-column layout that looks good on a smartphone screen would be too wide to read easily when viewed on a desktop monitor.
Essentially, the problem was this: without having to create separate sites, how can a website be displayed in one column on narrow screens and in multiple columns on wider screens? How can you ask the browser to make changes to the layout, based on the qualities of the device on which the site is being viewed?
The CSS rule @media that allows different CSS styles to be displayed based on the qualities of the device was actually part of CSS2 more than a decade ago, but back then it only supported queries for media types such as screen or print. This was commonly used to create a print version of a website’s design (which can include changes as basic as removing background colors that would waste printer ink), but its usefulness stopped there.
It was not until CSS3 that the [19659003] specification (that is, a formal and detailed description of how something is required to work) for media queries allowed more precise queries based on media (device) features, such as width, height, and color capability. Media queries do not affect the HTML (the actual content and structure of the underlying page), only the styles that are applied to the page through CSS. Browsers began supporting CSS3 media queries around 2009.
So what do these media queries do?
As a basic example, let’s say we have a website with two separate sections of content. We could create a one-column layout that fits well on smartphones, displaying the two sections stacked vertically. On wider screens, we might want to display the two content sections as two separate columns, side by side.
Using a media query, we can ask the device how wide its screen is. Then we can tell it to display the content in two columns only if its screen is wide enough for the columns to fit well.
To code this, we simply start with CSS that will display the content in one column. Then we add a CSS media query that asks whether the screen is 40 ems or wider (you will learn about ems in Chapter 4; 40 ems is a little narrower than the width of a typical tablet, but you can specify any width in the media query).
Inside the media query, we add the CSS that will display the content in two columns instead of one. The browser will only use this CSS if the media query is true (that is, if the screen is 40 ems or wider). If the screen is narrower, it ignores this CSS and the content remains in one column.
Therefore, we can give our website a different layout for different screen sizes, without having to create separate websites.
By using media queries, we can change any aspect of the website’s styling, not just the number of columns. Media queries can be used to move elements, change text size, hide or show pieces of content, adjust margins and spacing, and adjust any other style that can be applied with CSS.
Note
In this section, I referred to media queries that request the screen width of a device. In reality, the media queries that are common in responsive design request the viewport width of a device, not the screen. The viewport is the area of the screen (inside the browser window) in which a website is displayed.
On desktop computers, you can resize a browser window, so the window is not always the maximum width of the screen. The media query examines the space inside the browser window, so its viewport will change if you resize the browser window. On mobile devices, the screen and the viewport always have the same width, since the window cannot be resized.
Although viewport width is the correct term, you will often hear people refer to screen width when talking about media queries and responsive design. While they are not technically correct, they most likely mean viewport width (as I do in this book, unless I specify otherwise).
There are other media queries that measure the actual width of the device screen instead of the viewport width, but they are not commonly used at this time.
Media queries can rearrange your layout, but responsive design would not work without a foundation of flexibility.
To begin with, almost all horizontal measurements on your site should be in flexible units instead of inflexible pixels. This means that the width of columns and other layout elements will be in percentages, and text will be measured in a relative unit called em.
The size of images on the page works a little differently, because you do not necessarily want them to change size depending on the screen width; you want photos large enough to see ample detail, as long as there is space on the screen. The problem is that, depending on the device screen size, there may not always be space to display an image at full size. You will need to make sure that the image is not cut off if it does not fit. In Chapter 6 we will look at a CSS trick that will ensure images always fit in the space where we place them.
None of these ideas (media queries or flexibility) were new or innovative on their own. But in 2010, web designer Ethan Marcotte figured out a way to use these concepts together to create websites that respond to different screen sizes.
Marcotte coined the term responsive web design and first wrote about it in an article for A List Apart ( http://alistapart.com/article/responsive-web-design ) in 2010, and followed it up with the book [19659003] Responsive Web Design ( http://www.abookapart.com/products/responsive-web-design ) in 2011.
The concept of responsive web design has been widely debated since it was first introduced. Like any new technology idea, some people embraced it and others dismissed it.
Getting the Right Design on Every Device
The most compelling reason to use responsive design is that you’ll create a website that not only looks good and works properly on the devices that are on the market now, but is likely to look good and work properly on any new device that will be available in the future.
Also, with responsive design you don’t run the risk that users will see the mobile version of a site on their desktop monitors, or vice versa.
If you have separate websites, this can definitely be a problem, whether you use device detection to send the correct version of the site to each device or you use a set of URLs (for example, an m-dot subdomain) to serve a mobile site.
Sites that have a separate mobile version commonly use device detection (which happens on the website’s server before the page is displayed) to determine which version of a web page (mobile or desktop) should be sent to a particular device. That way, each page on the site will only have one URL, even though there are actually two separate versions with different HTML. However, this process is not 100% accurate and sometimes the wrong version of the page is sent. Also, the device detection process can increase page load time.
Using a different URL for your separate mobile site (that is, an m-dot site) is easier to implement, but it depends on the user to access it. The correct version of the site. With links being passed back and forth between users via social media or email, getting to the correct version of a page will often add extra burden to users, or sometimes they won’t have the option.
For example, if a desktop user emails a link from The New York Times to a mobile user, the mobile user will receive a message at the top of the screen informing them that there is a mobile version of the site, as in Figure 1-7. Nice, but it requires extra work on the user’s part and extra time for the user to click and then load a completely separate page.
Figure 1-7. Visiting a link from the desktop version of The New York Times takes you to the desktop site with a message that a mobile site is available.
On the other hand, if I’m visiting The New York Times mobile site on my phone and email a link to an article to someone who opens that link on a desktop computer, they get what you see in Figure 1-8: a page optimized for mobile devices, with no clear way to go to the full desktop website. The user can read the article, but will have to click to see full-size versions of any images, and won’t see many of the complementary links and recommended articles found on the desktop version of the site. [19659012] Figure 1-8. Clicking a link from the mobile version of The New York Times gets you the mobile version of the page, even if you’re on a desktop computer.
With responsive design, you only have one web page, so you’ll never get the “wrong version.” The site will display correctly no matter what device it’s being viewed on.
The most obvious advantage of using responsive design is that you only have to create one website, one design, one set of code, and one set of content.
If you have a separate version of your site just for mobile devices, you’ll need to create and maintain two (or more) completely separate sets of HTML. Changes will need to be made on each site, and even if you’re trying to keep them the same, there are sure to be problems and something will end up not matching. While using a content management system (CMS) or a templating system can make the job easier, there’s more code and content to maintain, and more things that can potentially break.
With a responsive site, you only have one set of content, and it will display correctly no matter the screen size. Future design adjustments can be made by making changes to the stylesheet.
For someone with no experience in responsive design, the initial task of creating a responsive website (as you learn how everything works) may require more effort than creating a fixed-width site, but in the long run you’ll have less work maintaining the website.
A separate mobile site, with a separate set of URLs, can create problems with your site’s placement in search results.
If you have two separate versions of a page with the same or similar content but different URLs (that is, http://www.example.com and http://m.example.com), search engines need to know that they’re considered the same page so that the page can be indexed correctly and displayed as one entry in the search results list.
Although this is possible using JavaScript or code on your server, it’s a bit tricky, and if you don’t do it correctly you can end up with both versions of a page appearing in search results, confusing users. It can also negatively affect your search ranking.
Google has recommended responsive design for smartphone-optimized websites since 2012, not only because it creates a better experience for users but also because it allows Google’s site crawler to retrieve your content more efficiently, which means changes to your site will likely be updated in search results more quickly.
Bing recommends using a method that results in only one set of URLs, but hasn’t specifically endorsed responsive design as a way to do that. [19659153] Until responsive design was introduced, websites were generally fixed-width, which meant that the website’s design was the same width no matter what screen size it was displayed on. When smartphones appeared, that really didn’t work, because websites looked tiny on small screens and users had to constantly zoom in and out to read anything.
Mobile websites followed shortly after, and many companies built these second websites separately from their main or desktop websites. Mobile websites often contained only a fraction of the content and functionality available on normal websites, so mobile users missed out.
As more devices appeared, designers soon realized that it wasn’t practical, if not impossible, to create multiple websites to fit each of the different screen sizes. The concept of responsive design was introduced as a way to create websites that could respond to a device’s screen width and display the site’s content appropriately for that screen size.
Responsive web design consists of two main components: flexibility, which means that horizontal measurements need to use relative units such as percentages so they can respond to screen size, and media queries, which allow you to use CSS to change the website’s layout depending on the device’s screen width.
Responsive design allows you to provide an appropriate layout for any screen size using just one set of code. Not having to maintain separate sets of code means less work. And implementing responsive design means your site will be optimized for search.
Next, in Chapter 2, we’ll talk about why content is important and how to make sure you’re designing content that works well on responsive websites.
