With the mobile web growing at a steady rate and Google confirming it ranks pages based upon their responsiveness, it\u2019s crucial that your website can adapt to a variety of different devices and screen sizes.<\/p>\n
But responsive web design is about more than simply stretching or squeezing your layout to adapt. It\u2019s about delivering a single website in a number of different ways\u00a0while retaining content and functionality.<\/p>\n
With that in mind, here are seven best practice tips for responsive web design.<\/p>\n
When responsive web design began, designers started by planning for the biggest screens then scaled down until they\u2019d reached the smallest. All too often, they included fancy elements that didn\u2019t break down well to fit a smaller screen, which led to the mobile version being a watered-down copy of the original and feeling like somewhat of an afterthought.![\"responsive-web-design-watered-down\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-watered-down.png\")
Today, mobile devices comprise the largest volume of traffic for many websites, so mobile users expect, and deserve, the same quality of browsing experience as other users. But that doesn\u2019t mean the larger screen sizes should be ignored either. Many people still use a large desktop, and even more jump between different screens throughout the day.<\/p>\n
The best way to tackle this is by adopting a \u2018mobile first\u2019 approach, designing for the smallest screen first then adding elements as necessary as you move up the screen sizes.<\/p>\n
Focus on designing for the popular breakpoints, but do account for the gaps in between as well \u2013 new devices come onto the market every day and a screen size hardly used today could be the new big thing next month. And remember to consider people who use their tablets in portrait mode \u2013 this can slip under the radar and end up looking like a squashed desktop or a basic mobile layout with a lot of wasted space.<\/p>\n
Don\u2019t fall into the trap of a \u2018fit-to-size\u2019 approach, where your focus is on fitting all the elements onto a page without considering their context. Start by concentrating on the content and features that are the most important, and being brutal about which elements face the chop. As you move up the different screen sizes, question their inclusion at each stage \u00a0\u2013 if you have to think about it for too long, it probably doesn\u2019t need to be there.![\"responsive-web-design-content\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-content.png\")
Once you\u2019re clear on the content and features you require, you can start work on the layout. The sheer variety of screen sizes means the traditional concept of \u2018above the fold\u2019 is pretty much dead. People are used to scrolling \u2013 the advent of sites like Facebook and Twitter has seen to that \u2013 so design your sites in a way that encourages scrolling, but retains the most important information towards the top of a screen. This includes contact details, CTAs, and on eCommerce sites, the all-important \u2018Add to Basket\u2019 button.<\/p>\n
Prioritize elements based on their importance to the user, so if you can fit text next to an image on a desktop, think carefully about which is best at capturing your users\u2019 attention on a mobile device, and ensure that comes first. Other elements, such as an accompanying blog image on a preview page, could be left off the mobile version altogether, leaving the focus on the content itself.<\/p>\n
Navigation is one of the most challenging aspects of responsive web design, but it\u2019s also one of the most important. Contrary to most web design rules, this is one place you don\u2019t need to be consistent \u2013 large, complex menus used on big screens simply won\u2019t work on mobiles, so it\u2019s perfectly acceptable to create a different type of navigation for different screen sizes.![\"responsive-web-design-navigation\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-navigation.png\")
Hidden navigation is popular on many mobile sites, with a simple icon such as the burger indicating the presence of the menu. You can either slide the menu down over the content below, or have it overlay on the entire screen. Another option is to plump for the horizontal swipe, where content obviously disappears off the side of the screen and users can swipe across to engage it.<\/p>\n
Whichever you choose, don\u2019t negate consistency altogether \u2013 your menu should have a similar feel to other versions in terms of visual characteristics, even if it has different functionality.<\/p>\n
The quality of images on websites is crucial, as they form a large part of a visitor\u2019s first impressions of a site. But large images have a negative effect on the download speeds of mobile devices with their lower bandwidth capabilities.![\"responsive-web-design-images\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-images.png\")
Much like the content, you should question the inclusion of each image for each screen size and only include those that are absolutely necessary, while reconsidering elements such as sliders that contain multiple large images.<\/p>\n
Optimize your remaining images, making them flexible with adaptive sizing, and store them using the appropriate format. Remember, you\u2019re unlikely to need the \u2018enlarge image\u2019 functionality on a mobile, as the image will probably be full screen anyway. If you need to include image galleries, opt for long-scrolling navigation, or use horizontal swiping to move between them.<\/p>\n
The typography you choose requires careful consideration as many typefaces that work on a medium or large screen become too difficult to read properly when reduced for the smaller screen sizes, so always test thoroughly across different screens.![\"responsive-web-design-typography\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-typography.png\")
Balance your headings carefully \u2013 their function needs to be obvious, although if they\u2019re too large they can appear overly dominant \u2013 and ensure there is adequate contrast between the background color and the font.<\/p>\n
As you move up the different screen sizes, pay attention to the line length of your content \u2013 if a line is too long it can be difficult to read. Keep line lengths to approximately 60\u201375 characters and on wider screens fill in the space with a sidebar or images.<\/p>\n
Responsive web design doesn\u2019t only need to account for different screens sizes; it must also be optimized for different input methods. And touchscreens can be tricky, so it\u2019s best to be generous with your button sizes and links, aiming for a clickable area of roughly 44 points square.![\"responsive-web-design-touchscreen\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-touchscreen.png\")
You also need to optimize your user experience for touchscreens. Yes, they\u2019re intuitive by their very nature, but subtle navigation aides, such as swipe gestures, are a valuable addition.<\/p>\n
Finally, while planning your design is a crucial step, don\u2019t rely on theory alone. There are mobile emulators that will help to check your designs and CSS breakpoints, but nothing beats testing on the real thing \u2013 many of these emulators only replicate the various screen sizes but not the functionality of different operating systems.![\"responsive-web-design-test\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/01\/responsive-web-design-test.png\")
Ensure you have a variety of different sized screens to play with and a number of different users, and test your designs thoroughly. This will often bring up a fresh viewpoint, and confirm you\u2019re on the right track or show you where improvements can be made.<\/p>\n
Responsive web design is continually evolving and growing, and we\u2019ve only scratched the surface here. Best practices for this field are changing frequently too, so it pays to keep up to speed with the latest developments. Remember, many users have a weak bandwidth, low resolution, and small processing power on their devices, so your site should be simple, well organized, clean, easy to use, and look good across a variety of different screens.<\/p>\n","protected":false},"excerpt":{"rendered":"
With the mobile web growing at a steady rate and Google confirming it ranks pages based upon their responsiveness, it\u2019s crucial that your website can adapt to a variety of different devices and screen sizes. But responsive web design is about more than simply stretching or squeezing your layout to adapt. It\u2019s about delivering a…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":156045,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-14826","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n