The Beginner's Guide to Responsive Web Design in 2024It's never been more critical for websites to look as good on mobiles as they do on desktops. This is where Responsive Web Design comes in.
Responsive web design is more important than ever before. With the use of smartphones and tablets exploding, it has never been more critical for websites to look just as good on small screens as they do on large ones. This article provides some tips you can use to make your web design more responsive to the needs of mobile users.
Life was so much easier when, as a web developer, all you had to worry about was Internet Explorer and a minimum screen resolution. Nowadays there are a plethora of devices, large and small, and an almost infinite array of screen sizes to code for. This is where Responsive Web Design comes in.
What is Responsive Web Design?
Simply put, responsive web design is a design pattern that allows the website appearance to adapt itself according to screen size. With one HTML document and responsive media queries, a website can adapt itself to look good on a small mobile device, a tablet and on a desktop. This not only saves time, money and resources developing individual desktop and mobile sites but it also provides a much better customer user experience, thus increasing sales and conversion rates.
In these two pictures, we can see the difference between a traditional web design and a responsive web design. In the image above, the website is not responsive. The smaller the window or device, the smaller the website is and the more difficult to read. In most cases, the users would have to zoom in to read the text and scroll around to see anything else that does not fit on the page.
In the image below, you can see that the layout of the site and the font size have responded to the size of the screen and ensure that the content remains visible. For example in the tablet and mobile views, the side navigation has been removed and replaced with a drop-down at the top to save space.
Why Should I Upgrade to Responsive Web Design?
Mobile devices account for almost 15% of online traffic (2014, source ) and this is expected to double or even triple. Update in 2014 - Mobile devices now account for nearly 60% of online traffic (source ).
Traditionally, a site would redirect to a "mobile-friendly" version of the website. This meant that companies had to develop and maintain two separate sites - one for desktop users and another for mobile users. A responsive website design allows all devices, regardless of screen size to show an optimised view, all from the same website.
Here are some more reasons to upgrade to a responsive web design.
Improved User Experience
✔
By presenting users with an optimised website for their display size, they can locate content and interact with the site much easier than an unoptimised site. For example, a standard non-responsive site may require a user to pinch-zoom in and scroll around to use a simple form, whereas a responsive site would naturally show the form in a way that the user does not require to put any effort into using it.
Increase sales and conversion rates
✔
If the user is not required to think about, or put effort into using the site they are much more likely to continue using it, revisit your site and successfully complete a transaction.
Consolidate your analytics and reporting
✔
If you are running two separate sites, you may be combining figures from Analytics programs to consolidate overall traffic and sales data. With a responsive website where all devices and platforms are running as one, you no longer have to do this as everything is already collected together. In Google Analytics you can create traffic segments to analyse and compare traffic from any platform and screen size to see how you are performing.
Save time and cost on mobile development
✔
If done correctly, responsive web design shouldn't cost any more than traditional web design. It's just a case of implementing the correct design pattern from the start. The simplest method is to use our responsive website design template which takes the mobile-first approach in that you code the site for a mobile device, then "add" screen sizes up to desktop. The benefit of this is that mobile devices only load content that is specific to mobile devices, not desktops. The main advantages of this are faster page loading times and reduced bandwidth.
Another solution is to implement the Twitter Bootstrap framework which handles responsive design.
It is Recommended By Google
✔
Responsive web design is not only recommended by Google, it is also becoming an important ranking factor in search results. Sites optimised for mobile show a little "mobile friendly" icon next to them in search results when viewing on a mobile device.
Why is responsive design important?
Responsive Web Design is not a new concept, it has in one form or another been around for decades. It's only the recent proliferation of mobile and tablets which have made the problem more apparent. Back in the day, it was common for websites to state "Best viewed at 1024x768". Even back then we were aware of how various screen resolutions affect user experience. Some websites went down the route of ignoring smaller screens, while others developed separate "mobile only" versions of their websites. It wasn't until recently that there was a universal solution to the problem, one that is so easy and accessible there isn't any excuse not to. It can be a challenge for existing websites, as it requires a shift in design thought and many older website designs will not be compatible with this technique.
The "new" technique uses media queries which are supported by IE11+, Edge and all the other browsers supporting CSS3. Media queries allow you to define "breakpoints" and set styles for each breakpoint.
These top tips will help you get started using media queries for responsive web design.
Use a mobile-first strategy
Start building your website for mobile-size screens. Not only does this make the design and development easier, but you can load additional content for desktops, without affecting performance on mobile devices. An example of this would be to load a small-resolution photo on mobile devices, and as the screen size increases so does the photo size. This saves allows the mobile to only use the content it can use, and the desktop still gets the high-resolution photo.
Building mobile first is also a good way of ensuring that mobile devices are not forgotten.
Navigation
Navigation is a critical component of every web design, especially easy-to-use navigation. Those large "mega menus" may look good on desktops and offer all the navigation options you could need, but on a mobile they are unusable.
Simplify mobile navigation with a drop-down menu. Consider adding a single icon to open a drop-down menu with additional choices. This icon is often called a hamburger menu, and when clicked a simpler menu can be shown on mobile devices.
Start by designing for 3 breakpoints
A responsive website design should have at least 3 layouts for different browser widths. There are no set rules for this, but a common set of breakpoints is:
- Small - Under 600px. This is suitable for most mobile devices
- Medium - 600px - 900px. This will be used for tablet display
- Large - over 900px. These will be the styles used for desktops and larger screens
Each of these layouts would include the same text and graphical elements, however, the style at each breakpoint should allow the design to best display that content based on the screen size.
Flexible Images
One of the major problems with responsive web design is displaying images. There are several techniques to resize images proportionately, and many are easily done. The most popular option seems to be to use the CSS3 max-width property for an easy fix.
img { width:100%; max-width: 1024px } Where 1024px is the native width of the image. This will make the image scale fit across the full width of the screen at different sizes, but it won't stretch past its native size on larger screens.
Don't forget to test on real mobile phones
Most designers will use either an on-screen tool for testing responsiveness or just adjust desktop browser window sizes. While this does work during development, it is critically important to test on actual devices. Mobile phones come in all kinds of different screen sizes and each one of these variants alters how the website shows up on the screen. Try to determine your target audience's primary devices, and at least test on those. You can use something like Google Analytics to determine what devices your website visitors use.
Test, Test, Test! And then test again!
I can't stress this enough, but design layouts need to be tested, tested and tested again. And when you think you've created a design that works on every display ever built and tested everything a million times, there's bound to be at least one screen size, resolution or browser that breaks your design. The best you can hope for is that you cover all of the most common sizes, resolutions and aspect ratios.
