Website development and design blog, tutorials and inspiration

Smart Tips for Responsive Web Design

Top tips for creating Responsive Web Designs

By , 2nd July 2015 in Internet

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.

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.

Responsive Web Design
Responsive Web Design

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 about.

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 possibly need, but on a mobile they are unusable.

Example of Responsive Web Design
Example of Responsive Web Design

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:

  1. Small - Under 600px. This is suitable for most mobile devices
  2. Medium - 600px – 900px. This will be used for tablet display
  3. Large - over 900px. This 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 a number of 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.

  1. img { width:100%; max-width: 1024px }

Where 1024px is the native width of the image. This will make the image scale to 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 audiences primary devices, and at least test on those. You can use something like Google Analytics to determine what devices your website visitors use.

Google Analytics
Google Analytics

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.

Further Reading
Comments

There are no comments for this post. Be the first!

Leave a Reply

Your email address will not be published.