Key Takeaways
- Responsive Web Design (RWD) is a design approach that allows websites to adapt to screens of all sizes, making it a crucial tool for supporting the increasing array of devices used to browse the web.
- RWD subscribes to the development maxim “Don’t Repeat Yourself” (DRY), aiming to use a single codebase that adapts to each device. This means writing one set of HTML, CSS, and JavaScript, and displaying elements appropriately for each platform.
- There are various schools of thought within RWD, including Progressive Enhancement, Graceful Degradation, and Mobile First. These approaches focus on different aspects, such as making content available to all users, starting with a fully featured version of a site, or starting with the smallest or least capable supported device respectively.
- Responsive design is crucial for SEO as it allows one website to provide a great user-experience across many devices and screen sizes, making it easier for Google to understand and index the content. This leads to longer site visits and increased conversions.
The following is an exclusive extract from our new book, Jump Start Responsive Web Design, 2nd Edition, written by Chris Ward. Copies are sold in stores worldwide, or you can buy it in ebook form here.
It used to be so simple: you’d design a website or application for a 15-inch monitor, and—incompatibilities between browsers aside—you were done.
Then mobile phones with web browsers came along and ruined our easy lives. Worst of all, people loved browsing the Web on them! In 2016, browsing the web on mobile devices overtook desktop browsing for the first time.
Just as developers and designers got used to building websites for phones, along came tablets, watches, TVs, cars, glasses, larger desktop screens, high-resolution screens, and even web browsers built into walls. (Okay, I made that last one up.) Supporting this seemingly endless stream of new devices is becoming ever more challenging.
So how do we support this ever-increasing array of devices? The answer is responsive web design, which harnesses technologies that allow websites to adapt to screens of all sizes.
A lot of older sites, or projects maintained by people with little spare time, are unresponsive. For example, the site for the Vassal game engine:
Many other sites, like SitePoint.com, are fully responsive:
Responsive web design (RWD) subscribes to the popular development maxim “Don’t Repeat Yourself” (usually abbreviated to “DRY”). Instead of maintaining multiple codebases for each device that you wish to support, RWD aims to use a single codebase that adapts appropriately to each device. Using RWD techniques, you write one set of HTML, CSS, and JavaScript, and display elements appropriately for each platform. Many of these styles and elements can even be reused or built upon for maximum code efficiency.
Sound good to you? To begin, let’s go back in time a few years.
History
“Responsive” design is not necessarily new and is a term that can mean different things to different people, making its exact history hard to track down.
In theory, developers have been creating responsive designs since there was more than one browser. Browsers have always had subtle (and not so subtle) rendering differences between them, and developers have been learning how to cope with these quirks for decades. If you’re new(er) to web development, be thankful the dominance of Internet Explorer’s earlier versions is mostly over. The days of dealing with their quirks were dark.
Since 2004, responsive design has adopted the more specific meaning of adapting your designs to suit a user’s device of choice—typically based on screen size, but also other capabilities. The concepts for responsive design solidified in 2008, but the term is also referred to as “flexible”, “liquid”, “fluid”, and “elastic” design.
It was the inclusion of media queries in the CSS3 specification that fully gave responsive design the potential it needed to be a genuine and more usable concept. We’ll cover media queries in detail in Chapter 2, but in summary, they allow you to change what you show in a web page based on pre-defined screen sizes or types. Ethan Marcotte formally coined the term “responsive web design” in an article for A List Apart in 2010.
This led to a growth and consolidation of other techniques and technologies alongside media queries, such as flexible images and grids, all of which we’ll cover in this book.
To me, “responsive design” is something of a combination of all these ideas and principles. It’s not just adapting a design to screen sizes, but also to other factors such as color depth, media type (say, a laptop screen, or an eReader), or location.
Schools of Thought Within Responsive Design
There are as many schools of thought about how to use responsive design as there are interpretations of it. Some have come and gone, and others have stuck. We won’t cover any in detail explicitly in this book, but we’ll touch upon their practical applications. Let’s quickly cover a few of them now.
Progressive Enhancement
When following the more traditional principle of progressive enhancement, your primary focus is on making the site content available to all users, however simple their device or slow their connection. Then extra features—such as more sophisticated design and functionality—are added for devices that can utilize them.
Graceful Degradation
The proliferation of mobile browsing has reversed the more traditional path of design. In the past, you started a design on the platform you worked on (typically a computer) and then stripped away style and functionality to support devices with smaller screens or less support for certain features.
While graceful degradation is typically applied to the lack of browser support for particular features, you can also think of it more generally. Its principle is that you start with a fully featured version of a site, running on your ideal device and browser, while also ensuring that essential functionality will work for any user on any (supported) device, even if they lose out on nice-to-have features.
Mobile First
Mobile first is similar to progressive enhancement, but more specific to responsive design. It proposes that you start with your smallest or least capable supported device (typically a phone when the principle was created) and then add functionality and style as you increase the device scale.
As a term, “mobile first” can be confusing, especially to non-designer/developer audiences, giving a skewed impression of the priority that mobile will receive in a project.
In theory, the practice ensures that smaller devices don’t end up getting second best—that all devices are treated with equal importance.
What Do You Need To Support?
Before starting or enhancing any web-based project, it’s important to know if it’s worthwhile, and to assess the (potential) userbase for all your hard work.
If you have an existing website, it may be worth analyzing website traffic to see what types of devices your visitors are using to access your website. If 90% of visitors have consistently visited on a desktop machine, this shows that either your mobile experience is poor, or that your visitors are not big mobile device users. You could embark on extensive research to find out the exact answer, or simply use responsive design techniques to build a mobile-friendly site that may attract new visitors.
If you’re working on a new project, analyzing the needs of your potential users is equally important. This can be done by using traditional market research techniques, creating simple test sites, or looking at your competitors to build a picture of who your customers will be.
Computers
Despite the slow decline in sales, there are still lots of desktop and laptop computers out there, and lots of web browsers running on them. These computers include everything from low-quality (and low-resolution) 11-inch netbooks to high-powered desktops with 28-inch, high-resolution monitors in a variety of proportions and orientations, all of which greatly affect the screen area you have to work with.
Mobile Phones
The percentage of people browsing websites on mobile phones has now reached parity with desktop browsing, so catering for users of mobile browsers is of equal (and likely, growing) importance. For more details on the rise of mobile web browsing, I recommend the Smart Insights report on Mobile Marketing Statistics and Statcounter’s desktop and mobile usage comparison.
On iOS, mobile browsing is generally through just one browser, and the device’s sizes are more consistent.
Android has a wide variety of browsers and screen dimensions available. Increasing numbers of devices running mobile operating systems also have high-density screens of varying resolutions.
You also need to consider that users are largely browsing with touch and not point-and-click devices, which affects behavior a great deal.
Tablets
Tablet sales may be shrinking, but there will still be a significant userbase for the foreseeable future, and you shouldn’t think of tablets as large mobile phones or small desktops. Also, users may be using touch screens or mice to interact with your site.
Hybrid Devices
If handling computers and tablets wasn’t enough for you, there are now hybrid devices, such as Microsoft’s Surface Pro, that can switch between being a computer and a tablet. While each mode can be treated discretely, it’s worth noting that users may switch context while using your site.
Wearables
Most wearables are yet to gain a web browser, but it may happen. In the meantime, it’s still possible to re-purpose parts of your content on wearables, and these will need to be delivered in short bursts with an easy follow-up action.
TV
Smart TVs and related devices such as Apple TV come with simplified web browsers, and users will generally use them for browsing particular sites, but they’re likely to become increasingly popular. TVs have very large screens, often with low resolution, so sites viewed on them need to be clear enough to see properly and also usable from a distance.
Cars
Really? Yes, really. This is new territory, but an increasing number of cars now have dashboards with access to the internet in some form or another. For the time being, sites rendered on car dashboards will need to present information clearly on a small screen, and be designed not to distract or overwhelm a driver and thus cause an accident. However, many cars now have screens for passengers, who will have much fuller access to the web and content.
Game Consoles
Most modern game consoles spend some of their time connected to the internet, and some of that time with a web browser. This is typically for media consumption and social networks. Browsers on these devices will likely be limited, and a physical keyboard may not be available. For home consoles, design principles from TV will apply, and for handhelds, a limited mobile experience.
In summary, you can’t predict how and where anyone will view your website, so build it to be adaptable, flexible, and responsive.
Print? Isn’t this a web design book? Yes, but print versions of your web pages will still be frequently accessed, whether for actual physical printing or for rendering your content on offline readers such as Instapaper or Pocket. For certain content, “print” is still relevant.
My recently released book Jump Start Responsive Web Design, is available now on SitePoint. It aims to get you started understanding, and using, the suite of CSS and HTML tools available for responding to this new world of devices. It’s highly practical, with plenty of examples throughout, covering:
- The Meaning and Purpose of Responsive Web Design
- The Building Blocks of Responsive Design
- Better Responsive Structures with Grid Systems
- Responsive Text
- Responsive Images and Video
- Responding to User Context
My book is suitable for beginner-level designers and developers with understanding of HTML and CSS. Some JavaScript experience is useful for the later chapters.
Frequently Asked Questions about Responsive Web Design
What is the main difference between responsive and adaptive web design?
Responsive and adaptive web designs are both aimed at optimizing the user experience across different devices. However, they achieve this in different ways. Responsive design uses CSS media queries to modify the layout of a website based on the screen size. It’s fluid and adjusts to the size of the screen no matter what the target device’s screen size is. On the other hand, adaptive design uses static layouts based on breakpoints which don’t respond once they’re initially loaded. So, the website detects the type of device and delivers the pre-set layout for that device.
Why is responsive web design important for SEO?
Responsive web design is crucial for SEO for several reasons. Firstly, Google recommends it as a best practice because it allows one website to provide a great user-experience across many devices and screen sizes. Secondly, it makes it easier for Google to understand and index the content. A single URL for each piece of content makes it easier for Google’s algorithms to assign the indexing properties for the content. Lastly, users find it easier to share and link to content with a single URL.
How does responsive web design improve user experience?
Responsive web design improves user experience by ensuring that your website looks and functions well on all devices. This means that regardless of whether a user is accessing your site from a desktop, tablet, or mobile device, they will have a consistent experience. This includes easy reading and navigation with a minimum of resizing, panning, and scrolling. A positive user experience leads to longer site visits and increased conversions.
What are the key elements of responsive web design?
The key elements of responsive web design include a flexible grid-based layout, images that resize and scripts that can recognize different devices. The flexible grid-based layout uses relative sizing to fit the screen size. Flexible images are also sized in relative units to prevent them from displaying outside their containing element. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
How does responsive web design affect loading times?
Responsive web design can significantly improve loading times, especially on mobile and tablet devices. This is because responsive design ensures that the layout of a webpage adjusts to the device on which it is being viewed. Therefore, devices with smaller screens will be served smaller images, which can reduce loading times. Additionally, by using a single code base for all devices, you can use CSS to hide unnecessary elements on smaller devices, further improving loading times.
Can I convert my existing website to a responsive design?
Yes, it is possible to convert an existing website to a responsive design. This process involves implementing flexible grid layouts, flexible images, and media queries. However, it can be a complex process, especially for larger websites. It may be more efficient and cost-effective to redesign the site from scratch with a mobile-first approach.
What is the cost of implementing responsive web design?
The cost of implementing responsive web design can vary greatly depending on the complexity of the site, the number of pages, and the specific features required. However, it’s important to consider that the cost of not implementing responsive design can be much higher in the long run. Websites that are not mobile-friendly can suffer from lower search engine rankings, lost traffic, and decreased conversions.
How can I test if my website is responsive?
There are several ways to test if your website is responsive. One of the simplest ways is to resize your browser window to see if the layout adjusts. You can also use online tools like Google’s Mobile-Friendly Test or Responsive Design Checker. These tools will show you how your website looks on different devices.
What is the future of responsive web design?
The future of responsive web design is likely to be influenced by advancements in technology and changes in user behavior. With the increasing use of mobile devices, designers will need to continue to focus on mobile-first design. Additionally, with the rise of wearable technology, responsive design will need to adapt to new devices and screen sizes.
What are some common mistakes in responsive web design?
Some common mistakes in responsive web design include not designing for all screen sizes, not considering touch as a primary input method, and not testing the design on actual devices. Other mistakes include using too many heavy images that slow down load times, not using flexible images, and not considering the user experience on different devices.
Developer Relations, Technical Writing and Editing, (Board) Game Design, Education, Explanation and always more to come. English/Australian living in Berlin, Herzlich Willkommen!