Best Practices of Responsive Web Design

Bradley Nice
Feb 18, 2017 · 4 min read

by Bradley Nice, Content Manager at ClickHelp.com — software documentation tool

Google has officially recommended Responsive Web Design as their preferred method for building mobile websites. If you have a website or a blog, it is time to consider switching to responsive design instead of maintaining separate mobile- and tablet-friendly websites.

If you are new to the concept of Responsive Web Design (RWD), here are the common questions that you may have around this technique.

Your website looks great of the desktop screen but it may not be true when your site is viewed on a smartphone or a tablet. Once you make the design responsive, the website will look good (and readable) on all screens.

With Responsive Design you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

  • It saves time and money as you don’t have to maintain separate websites for desktops and mobile phones.
  • Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while others link to your desktop site.
  • Your Google Analytics reports will paint a better picture of your site’s usage since the data from mobile and desktop users will be consolidated.
  • The same will be true for the social sharing stats (Facebook Likes, Tweets, +1’s) since the mobile and desktop versions of your web pages will have the same URL.
  • Responsive Designs are easier to maintain as they do not involve any server-side components. You just have to modify the underlying CSS of a page to change its appearance (or layout) on a particular device.

Responsive Design is pure HTML and CSS. You create rules in CSS that change style based on the screen size of the user’s device.

For example, you can write a rule that says if a user’s screen-size is less than 320 pixels, don’t show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the font size of the body text to 15px.

That’s easy. Open that website in any desktop browser and resize the browser. If the site’s layout changes as you resize, the design is responsive.

Mostly yes. RWD uses CSS3 media-queries and HTML5 (for better semantics) that are not supported in older versions of IE. However, there are JavaScript based solutions — respond.js and modernize for example — that bring the power of CSS3 and HTML5 to older browsers including IE6.

If you using ads on your website, you should carefully choose the formats because wide units (like the 728×60 pixel leaderboard) may not fit on a 320px mobile screen. I prefer using standard rectangular units (like 300×250) since they easily fit on smartphone screens and widescreen desktops.

I would recommend setting break points for at least the following viewports in your CSS3 Mediaqueries — 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android Tablets), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape and desktops).

Here are online resources to help you get started:

Websites: Net Magazine, Smashing Magazine, CSS Tricks and Web Designer Wall

Video Tutorials: YouTube, Net Tuts

Presentations: PowerPoint Decks

Podcasts: Shop Talk, 5by5 Web Show and The Industry

Twitter: @RWD, @NetMag and @SmashingMag

  • Extra kilobytes to your web page as they will have to download CSS styles and JavaScript files that were otherwise unnecessary.
  • Images. You don’t want to serve higher-resolution images on your mobile site but that is hard to achieve in responsive design (unless you resort to a server-side workaround like Adaptive Images and Sencha.io).
  • Efforts to add a responsive layer to your existing website. Sometimes it makes more sense to start from scratch rather than making your existing fixed-width website fluid.

You may also like: Responsive Layouts Free EBOOK

Have a nice day!

Bradley Nice,
Content Manager at ClickHelp.com — best online documentation tool for SaaS vendors

Level Up!

Stories for technical writers, web developers and web…

Level Up!

Stories for technical writers, web developers and web designers. It's time to level up your skills!

Bradley Nice

Written by

Content Manager at https://medium.com/level-up-web 👈. I write about web design, web development and technical writing. Follow me on Twitter and Facebook

Level Up!

Stories for technical writers, web developers and web designers. It's time to level up your skills!