Responsive Web Design (RWD) became an important trend as web professionals sought to provide a consistent user experience to the rising use of mobile devices and tablets.
\r\nLast year, we saw the tipping point for digital media where more time was spent on mobile devices (51 percent) than the desktop (42 percent).
\r\nThis staggering change was anything but a surprise.
\r\nAnd the trends in mobile web use continue upward as evidenced by other statistics:
\r\nSo if that’s not enough reason, consider the fact that Google really likes responsive web design. According to Joe Ardeeser of Jordan Crown Web Design, “Google is penalizing website owners because their page isn't responsive. Some of the latest algorithm updates for the search engine are factoring in whether a website is mobile friendly and responsive. This has made a big impact, in our case actually helping us climb in rankings because some of our competitors’ websites aren't mobile friendly and have gone down on Google.”
\r\nRelated Article: One Size Fits All: How Responsive Web Design Helps Get You More Conversions
\r\nIt is evident that making your site mobile friendly is a must. Professional firms are working hard to ensure that their clients pick the best technology available and understand the importance of making your website responsive. Here are some of the ways you can implement responsive design:
\r\n
Before you get to the actual design phase, it helps if you think of this process as making your website fluid to meet the different screen sizes that your visitors will use. So first, you need to decide on the breakpoints you will be designing for. Commonly, you are going to want to include a min-width and a max-width for:
Once you determine the breakpoints you are designing for, it’s time to sketch out some wireframes. These visuals can help you determine where the different elements will fit in as the screen shrinks or expands. You want to see how it will look as three columns on a desktop flows into two on a tablet and then one on a smartphone.
\r\n
Media queries, defined by the breakpoints you established, detect the size of the browser a visitor is using. To make the website flexible, you need to rely on a layout for your site. Early on in responsive design the grid systems were fixed and divided into a set number of columns like 12 or 16 with the columns growing more narrow as more were added.
Related Article: Informative and Visually Appealing: 5 Important Website Design Considerations
\r\nSince screen sizes now range from a hand held device to a large screen television, more flexibility is needed so fluid grid systems are the way to go. Instead of a layout based solely on pixel size, the fluid grid has a set number of columns, but then each element of the site is designed with proportional widths and heights instead of pixel based dimensions.
\r\nWhile making your site flexible, it is important to make sure you don’t neglect any images. When creating your stylesheets, make sure to assign a max-width to any images in your design using: img {max-width:100 percent}. This snippet of CSS will resize the images to 100 percent of the width available in their parent elements so they will scale according to the size of the visitor’s screen.
\r\nIn addition to the images, you want to include code to make sure that your visitors’ mobile devices don’t offer a zoomed out version of your site. If you don’t set the viewport to instruct the browser to display the site based on the screen size, not make an assumption as to what it should be.
\r\nThis can be done by adding <meta name=\"viewport\" content=\"width=device-width> to the <head> tag. This sets the viewport width to the layout width of the device. Since IE10 decided to ignore this meta data, you will also need to add the following viewport rule to your CSS:
\r\n@viewport{ zoom: 1.0; width: device-width;}
\r\n
Going responsive doesn’t automatically mean your website is mobile friendly. It may scale to smaller screens, but there is more to good user experience than just moving the elements around.
One key element to remember when it comes to RWD is that at your smallest breakpoint your site should be no more than one column wide. Remember, the average space needed to tap a mobile screen is 44px. It's easier to fit all of your elements into a long, linear page that the user scrolls through than trying to force them to navigate using small links and buttons.
\r\nWhile you are thinking about mobile users, remember that responsive design allows you to eliminate elements as you reduce the number of columns using conditional loading in the CSS. Hide any non-essential content as your screen real estate begins to scale down.
\r\n
If you have designed your site, you should notice how easily it scales as you resize your browser window. That, however, is not a sufficient test. Make use of different testing tools available to you from your editing tool as well as the different automated testing tools out there. Of course, you should also test your site on as many devices as you have access to.
Related Article: How to Identify and Correct Problems in Your Web Design
\r\nThe goal of every website is to create the best experience possible for its visitors so that they can find exactly what they are looking for. When people can’t access the pages on your site, they get frustrated and leave. Instead of trying to mold your mobile experience into a specific box that might render well on all devices, why not adopt an approach to mobile web design that ensures that your site will scale perfectly to your visitors screen no matter the size of the display or the platform the device runs on. Only with responsive design will you not have to worry if your visitors are going to leave because things just don’t look right and don’t work on your website.
\n","docType":"article","guid":"articles_6dfca9d87e78fecb0fa0de384167e3f1","lastModified":"2016-04-18T20:00:00.000Z","published":"2016-04-18T20:00:00.000Z","structuredData":null,"subtitle":null,"template":"legacy","title":"Get With the Times: How to Implement Responsive Web Design","type":"article","author":{"avatar":null,"bio":"Ayrald Hubert is a Senior Analyst at Clutch responsible for research and analysis of web design agencies. Ayrald is originally from France and regularly returns to his native country during the year. In his free time, he enjoys studying up on marine life, specifically sharks, and playing soccer with his friends. Ayrald’s academic background includes a Bachelor’s Degree from Georgetown University in Washington DC.","name":"Ayrald Hubert","image":null,"slug":null,"social":{"facebook":"","linkedin":"https://www.linkedin.com/in/ayraldhubert","twitter":"https://twitter.com/clutch_co","website":"https://clutch.co/web-designers"},"status":"enabled","title":null,"type":"Old BDC Member","user":{"imagePath":"https://staging.business.com/images/undefined","profile":{"company":"INVESTAURA Management Consultants","jobTitle":"Managing Consultant","website":""}}},"breadcrumbs":null,"channels":{"primary":{"name":"Marketing","slug":"marketing"},"sub":{"name":"Marketing Solutions","slug":"marketing-solutions"}},"meta":{"robots":"index, follow","description":"The trends in mobile web use continues upward as evidenced by statistics. Learn how to implement responsive web design.","title":"How to Implement Responsive Web Design - business.com"},"parsedContent":{"toc":[],"json":[{"component":"p","children":["Responsive Web Design (RWD) became an important trend as web professionals sought to provide a consistent user experience to the rising use of mobile devices and tablets. "]},{"component":"p","children":["Last year, we saw the ",{"component":"a","props":{"href":"http://www.smartinsights.com/internet-marketing-statistics/insights-from-kpcb-us-and-global-internet-trends-2015-report/","target":"_blank","rel":"nofollow"},"children":["tipping point"]}," for digital media where more time was spent on mobile devices (51 percent) than the desktop (42 percent)."]},{"component":"p","children":["This staggering change was anything but a surprise. "]},{"component":"p","children":["And the trends in mobile web use continue upward as evidenced by other ",{"component":"a","props":{"href":"http://www.mediative.com/mobile-stats-for-2015/","target":"_blank","rel":"nofollow"},"children":["statistics"]},":"]},{"component":"ul","children":[{"component":"li","children":["80 percent of Internet users own a smartphone"]},{"component":"li","children":["67 percent of consumers are willing to buy a product or use a service on a mobile-friendly site"]},{"component":"li","children":["89 percent of people admitted to searching for a local business on their smartphone once a week or more with 58 percent searching at least daily"]},{"component":"li","children":["U.S. adults spend an average of two hours and 51 minutes a day using mobile devices"]},{"component":"li","children":["40 percent of searchers will click another mobile result if a site’s not mobile friendly"]}]},{"component":"p","children":["So if that’s not enough reason, consider the fact that Google really likes responsive web design. According to Joe Ardeeser of Jordan Crown Web Design, “Google is penalizing website owners because their page isn't responsive. Some of the latest algorithm updates for the search engine are factoring in whether a website is mobile friendly and responsive. This has made a big impact, in our case actually helping us climb in rankings because some of our competitors’ websites aren't mobile friendly and have gone down on Google.”"]},{"component":"p","children":[{"component":"em","children":["Related Article:"]}," ",{"component":"Link","props":{"href":"http://www.business.com/web-design/how-responsive-web-design-helps-get-you-more-conversions/"},"children":["One Size Fits All: How Responsive Web Design Helps Get You More Conversions"]}]},{"component":"p","children":["It is evident that making your site mobile friendly is a must. ",{"component":"a","props":{"href":"https://clutch.co/web-designers/new-york","target":"_blank","rel":"nofollow"},"children":["Professional firms"]}," are working hard to ensure that their clients pick the best technology available and understand the importance of making your website responsive. Here are some of the ways you can implement responsive design: "]},{"component":"h3","children":[{"component":"em","children":["Planning for RWD"]}]},{"component":"p","children":[{"component":"br"},"Before you get to the actual design phase, it helps if you think of this process as making your website fluid to meet the different screen sizes that your visitors will use. So first, you need to decide on the breakpoints you will be designing for. Commonly, you are going to want to include a min-width and a max-width for:"]},{"component":"ul","children":[{"component":"li","children":["Smartphones, both portrait and landscape (at least less than 480px)"]},{"component":"li","children":["Tablets, both portrait and landscape (at least less than 768px)"]},{"component":"li","children":["Common desktop screen resolutions (greater than 768px)"]}]},{"component":"p","children":["Once you determine the breakpoints you are designing for, it’s time to sketch out some wireframes. These visuals can help you determine where the different elements will fit in as the screen shrinks or expands. You want to see how it will look as three columns on a desktop flows into two on a tablet and then one on a smartphone. "]},{"component":"h3","children":[{"component":"em","children":["Get Flexible"]}]},{"component":"p","children":[{"component":"br"},"Media queries, defined by the breakpoints you established, detect the size of the browser a visitor is using. To make the website flexible, you need to rely on a layout for your site. Early on in responsive design the grid systems were fixed and divided into a set number of columns like 12 or 16 with the columns growing more narrow as more were added."]},{"component":"p","children":[{"component":"em","children":["Related Article:"]}," ",{"component":"Link","props":{"href":"http://www.business.com/web-design/informative-and-visually-appealing-5-important-website-design-considerations/"},"children":["Informative and Visually Appealing: 5 Important Website Design Considerations"]}]},{"component":"p","children":["Since screen sizes now range from a hand held device to a large screen television, more flexibility is needed so ",{"component":"a","props":{"href":"http://www.cssauthor.com/grid-systems/","target":"_blank","rel":"nofollow"},"children":["fluid grid systems"]}," are the way to go. Instead of a layout based solely on pixel size, the fluid grid has a set number of columns, but then each element of the site is designed with proportional widths and heights instead of pixel based dimensions."]},{"component":"p","children":["While making your site flexible, it is important to make sure you don’t neglect any images. When creating your stylesheets, make sure to assign a max-width to any images in your design using: img {max-width:100 percent}. This snippet of CSS will resize the images to 100 percent of the width available in their parent elements so they will scale according to the size of the visitor’s screen."]},{"component":"p","children":["In addition to the images, you want to include code to make sure that your visitors’ mobile devices don’t offer a zoomed out version of your site. If you don’t set the viewport to instruct the browser to display the site based on the screen size, not make an assumption as to what it should be."]},{"component":"p","children":["This can be done by adding to the tag. This sets the viewport width to the layout width of the device. Since IE10 decided to ignore this meta data, you will also need to add the following viewport rule to your CSS:"]},{"component":"p","children":["@viewport{ zoom: 1.0; width: device-width;}"]},{"component":"h3","children":[{"component":"em","children":["Make It Mobile Friendly"]}]},{"component":"p","children":[{"component":"br"},"Going responsive doesn’t automatically mean your website is mobile friendly. It may scale to smaller screens, but there is more to good user experience than just moving the elements around."]},{"component":"p","children":["One key element to remember when it comes to RWD is that at your smallest breakpoint your site should be no more than one column wide. Remember, the average space needed to tap a mobile screen is 44px. It's easier to fit all of your elements into a long, linear page that the user scrolls through than trying to force them to navigate using small links and buttons."]},{"component":"p","children":["While you are thinking about mobile users, remember that responsive design allows you to eliminate elements as you reduce the number of columns using conditional loading in the CSS. Hide any non-essential content as your screen real estate begins to scale down."]},{"component":"h3","children":[{"component":"em","children":["Test, and Test Again"]}]},{"component":"p","children":[{"component":"br"},"If you have designed your site, you should notice how easily it scales as you resize your browser window. That, however, is not a sufficient test. Make use of different testing tools available to you from your editing tool as well as the different automated testing tools out there. Of course, you should also test your site on as many devices as you have access to."]},{"component":"p","children":[{"component":"em","children":["Related Article:"]}," ",{"component":"Link","props":{"href":"http://www.business.com/web-design/how-to-identify-and-correct-problems-in-your-web-design/"},"children":["How to Identify and Correct Problems in Your Web Design"]}]},{"component":"p","children":["The goal of every website is to create the best experience possible for its visitors so that they can find exactly what they are looking for. When people can’t access the pages on your site, they get frustrated and leave. Instead of trying to mold your mobile experience into a specific box that might render well on all devices, why not adopt an approach to mobile web design that ensures that your site will scale perfectly to your visitors screen no matter the size of the display or the platform the device runs on. Only with responsive design will you not have to worry if your visitors are going to leave because things just don’t look right and don’t work on your website."]}]},"resource":null,"sponsorship":null,"thumbnail":{"path":null,"caption":"NanoStockk / Getty Images","isBlurred":true},"bestPicks":null},"related":{"relatedArticles":[{"title":"Get With the Times: How to Implement Responsive Web Design","canonical":"https://www.business.com/articles/how-to-implement-responsive-web-design/","slug":"how-to-implement-responsive-web-design","thumbnail":"https://www.business.com/images/channel/marketing.jpg","dek":"The trends in mobile web use continues upward as evidenced by statistics. Learn how to implement responsive web design.","lastModified":"2016-04-18T20:00:00Z","published":"2016-04-18T20:00:00Z","sponsored":false},{"title":"Follow the Leader: Top 50 Features Every Small Business Website Must Have [INFOGRAPHIC]","canonical":"https://staging.business.com/articles/top-50-features-every-small-business-website-must-have-infographic/","slug":"top-50-features-every-small-business-website-must-have-infographic","thumbnail":"https://staging.business.com/images/content/56f/b4d173187b10e41d5f853/1500-0-","dek":"Before you design your site, be sure to check out this Infographic on 50 features every small business website must have.","lastModified":"2019-07-31T20:55:33Z","published":"2016-03-30T21:00:00Z","sponsored":null},{"title":"Follow the Leader: Top 50 Features Every Small Business Website Must Have [INFOGRAPHIC]","canonical":"https://www.business.com/articles/top-50-features-every-small-business-website-must-have-infographic/","slug":"top-50-features-every-small-business-website-must-have-infographic","thumbnail":"https://www.business.com/images/channel/marketing.jpg","dek":"Before you design your site, be sure to check out this Infographic on 50 features every small business website must have.","lastModified":"2016-03-30T21:00:00Z","published":"2016-03-30T21:00:00Z","sponsored":false},{"title":"Top 7 Professional Website Builders for Small Businesses","canonical":"https://staging.business.com/articles/top-7-professional-website-builders-for-small-businesses/","slug":"top-7-professional-website-builders-for-small-businesses","thumbnail":"https://staging.business.com/images/content/572/39ffd2f87b1694ceb902b/1500-0-","dek":"There are some awesome website builders today, which do just the same work as a professional developer would do. Check out the top 7.","lastModified":"2016-05-02T17:00:00Z","published":"2016-05-02T17:00:00Z","sponsored":null},{"title":"Above the Fold Tips that will Help Your Website Rise Above the Rest","canonical":"https://staging.business.com/articles/above-the-fold-tips-that-will-help-your-website-rise-above-the-rest/","slug":"above-the-fold-tips-that-will-help-your-website-rise-above-the-rest","thumbnail":"https://staging.business.com/images/content/573/f258c3287b1775ca42b57/1500-0-","dek":"Learn the best above the fold practices for your site so you can captivate your audience and help achieve your online goals faster.","lastModified":"2016-05-20T17:00:00Z","published":"2016-05-20T17:00:00Z","sponsored":null},{"title":"The DIY Dilemma: Should You Outsource Web Design or Do It Yourself?","canonical":"https://staging.business.com/articles/the-diy-dilemma-creating-or-refreshing-a-company-website/","slug":"the-diy-dilemma-creating-or-refreshing-a-company-website","thumbnail":"https://staging.business.com/images/content/570/d09a13087b15b7c13e961/1500-0-","dek":"If you’re up for the challenge, and you have the knowledge necessary to create a great site, should you forego outside contractors?","lastModified":"2016-04-12T12:00:00Z","published":"2016-04-12T12:00:00Z","sponsored":null},{"title":"Sidebar Magic: How Your Sidebar Can Get You More Leads","canonical":"https://staging.business.com/articles/sidebar-magic-how-your-sidebar-can-get-your-more-leads/","slug":"sidebar-magic-how-your-sidebar-can-get-your-more-leads","thumbnail":"https://staging.business.com/images/content/56f/987722f87b12c66ea352f/1500-0-","dek":"Don't let your website's sidebar go to waste. With the right techniques and strategies, it can help you get more leads.","lastModified":"2016-03-29T18:00:00Z","published":"2016-03-29T18:00:00Z","sponsored":null},{"title":"First Impressions Are Everything: How to Pique Website Visitors’ Interest","canonical":"https://staging.business.com/articles/first-impressions-are-everything-how-to-pique-website-visitors-interest/","slug":"first-impressions-are-everything-how-to-pique-website-visitors-interest","thumbnail":"https://staging.business.com/images/content/57e/1839b2f87b19a66f0599b/1500-0-","dek":"Your visitors form an opinion about your website in just 0.2 seconds. Make sure you give them the best first impression.","lastModified":"2016-09-21T19:00:00Z","published":"2016-09-21T19:00:00Z","sponsored":null},{"title":"Just Say No: 7 Website Design Mistakes That Can Hurt Conversion","canonical":"https://staging.business.com/articles/7-website-design-mistakes-that-can-hurt-conversion/","slug":"7-website-design-mistakes-that-can-hurt-conversion","thumbnail":"https://staging.business.com/images/content/574/7cc2e2f87b1a06d9eec0a/1500-0-","dek":"Business owners should be hard-pressed to pursue a more targeted, proactive approach to developing their websites.","lastModified":"2017-02-22T23:58:16Z","published":"2016-05-27T21:00:00Z","sponsored":null},{"title":"Just Say No: 7 Website Design Mistakes That Can Hurt Conversion","canonical":"https://www.business.com/articles/7-website-design-mistakes-that-can-hurt-conversion/","slug":"7-website-design-mistakes-that-can-hurt-conversion","thumbnail":"https://www.business.com/images/channel/marketing.jpg","dek":"Business owners should be hard-pressed to pursue a more targeted, proactive approach to developing their websites.","lastModified":"2016-05-27T21:00:00Z","published":"2016-05-27T21:00:00Z","sponsored":false},{"title":"One Size Fits All: How Responsive Web Design Helps Get You More Conversions","canonical":"https://staging.business.com/articles/how-responsive-web-design-helps-get-you-more-conversions/","slug":"how-responsive-web-design-helps-get-you-more-conversions","thumbnail":"https://staging.business.com/images/content/56a/f9ce83287b1f810480629/1500-0-","dek":"Since April 2015, Google's algorithm have been incorporating the mobile friendliness of a website into its ranking factors.","lastModified":"2019-07-31T20:55:58Z","published":"2016-02-01T18:00:00Z","sponsored":null},{"title":"One Size Fits All: How Responsive Web Design Helps Get You More Conversions","canonical":"https://www.business.com/articles/how-responsive-web-design-helps-get-you-more-conversions/","slug":"how-responsive-web-design-helps-get-you-more-conversions","thumbnail":"https://www.business.com/images/channel/marketing.jpg","dek":"Since April 2015, Google's algorithm have been incorporating the mobile friendliness of a website into its ranking factors.","lastModified":"2016-02-01T18:00:00Z","published":"2016-02-01T18:00:00Z","sponsored":false}],"relatedReviews":[{"doc_type":"category","thumbnail":"https://staging.business.com/images/rz/5b99633151ee47a8528b4582/Call_center_bbernard.jpg","canonical":"https://staging.business.com/categories/call-center-services/","title":"The Best Call Center Services for 2021","dek":"Our team has compared the best call center services for 2021. See up-to-date reviews for the top-rated answering services.","slug":"call-center-services","lastModified":"2021-02-26T14:22:00Z"},{"doc_type":"category","thumbnail":"https://staging.business.com/images/rz/5df7b1b69c658a61728b4567/Answering_Service_scyther5_Getty.jpg","canonical":"https://staging.business.com/categories/best-answering-services/","title":"The Best Answering Services of 2021","dek":"Our teams have compared the best answering services for 2020. See up-to-date reviews and prices for these top-rated services.","slug":"best-answering-services","lastModified":"2021-02-26T14:18:00Z"},{"doc_type":"category","thumbnail":"https://staging.business.com/images/rz/5d4c65367b43741a258b4572/Laptop_Sfio_Cracho.png","canonical":"https://staging.business.com/categories/crm-software/","title":"The Best CRM Software of 2021","dek":"Looking for the best CRM software? We have easy-to-read, expert unbiased reviews and feature comparisons of the best and cheapest programs.","slug":"crm-software","lastModified":"2021-02-24T14:09:00Z"}],"relatedSponsoredArticles":null}},"pageContext":{"displayModified":"2016-04-18T20:00:00.000Z","template":"legacy","title":"Get With the Times: How to Implement Responsive Web Design","meta":{"robots":"index, follow"},"docType":"articles","slug":"how-to-implement-responsive-web-design","canonical":"https://staging.business.com/articles/how-to-implement-responsive-web-design/","skipTOC":false}},"staticQueryHashes":[]}