5 Important Things to Keep in Mind When Making a Responsive Web Design?

  • read

1. Write your CSS mobile first

Write as though you are only targeting a mobile device.

2. Work in gradual stages

Once the mobile device looks good add styles in media queries for larger viewports in stages working your way to larger sizes.

3. Keep your media queries grouped by component and not in a separate section or stylesheet

If you make a code change 2 months in the future you will forget about the media query style in the separate stylesheet.

4. Limit the number of pictures

Mobile devices have slow connection speeds so limit the number of pictures. Mobile first pictures should be sized for mobile viewports and as you scale swap out for larger images. This Picturefill helps a lot to get the <picture> element to work across browsers.

5. Test early and test often

I try and do each section or component at a time… if you wait until the end you will be hunting through tons of line of code.

Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn

Category: Articles

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?