Web Design Glossary: Responsive Web Design

Responsive Web Design Illustration
 

What is responsive website design?

You have content on your website that users want to consume from all of their devices.

Responsive web design is a method of creating websites so that they can be viewed on different screen sizes without sacrificing usability. Responsive website design is also often called mobile-friendly design. Today websites are visited on desktop computers, laptops, mobile phones, iPads and TVs. Instead of creating a different website for each device, web designers develop fluid and adaptive layouts that automatically adjust to fit the size of the screen or viewport they are viewed in. Gone are the days of redirecting your mobile users to a separate mobile-friendly website like www.M.website.com, at least for most new modern web design applications. Today's responsive websites detect screen sizes and apply different formatting based on the user's screen size so that your website is displayed in an intelligent and user-friendly way.

Web designers carefully plan out how each element on a webpage will respond at specific screen sizes. For example a large full-screen image on a desktop computer may be a small postage-stamp sized thumbnail on a mobile phone. It is common for web designers to make four designs aimed at mobile, tablet, desktop and large desktop displays. These four sizes are called breakpoints.They are called breakpoints because at a certain screen size a design will no longer function correctly or cause the site layout to break, and at that point a new set of design rules are applied.

Usability is one of the most important aspects of designing a good website. Websites designed for mobile phones often have larger buttons for the larger click radius that fingers have as opposed to mouse pointers on laptop or desktop computers. Websites designed for TVs have large text for viewing far away from a couch across a room.

Why do I need a responsive website?

Over half of all Google searches are done on mobile phones (Source: Adwords Blog). The number of mobile website users has steadily been increasing and finally overtook desktop user numbers in 2015. Customers are using their phones more than ever to carry out day-to-day tasks and make purchases. You wouldn't want to throw out half of your business would you? If your website isn't mobile optimized you are missing out. And now even search engines like Google agree that mobile users should view mobile-friendly websites.

To test to see if your website is mobile-friendly, visit Google's own Mobile Friendly Test page and submit your website to see if you pass the test.

Google Mobile-Friendly Test

Google gives demerits to websites that are don't have mobile-friendly web design when serving search results to mobile users. Google's goal here is to provide users with a quality search experience. If a user needs to pinch and zoom to view your website the user will have a poor experience, and Google prioritizes this in the results it serves to anyone doing searches on a mobile device.

 

Other things to consider when designing for mobile

  • Optimize Images Mobile phone users are usually bound to limited data plans and slower connection speeds. To make pages load quickly, carefully designed websites can be built to serve only the minimum image resolution needed for the image to display properly. Keep in mind that mobile phones usually have a higher density of pixels than desktop computers, so images still need to be high quality, but file size and total resolution should be considered in case it could become a factor. Skilled web designers will delicately balance resolution, file-size and compression for images used in their web designs.
  • Avoid Flash and optimize video content. Most modern phones no longer play Flash media-player content. Flash video should be converted to new supported formats. Video content should be encoded with multiple codecs and resolutions to match your audience's needs. One more thing to note is that Safari and Chrome on mobile will not allow video content to automatically play, a user must first tap the play button.

How can I make my site responsive?

If you are designing a new website many WordPress themes come pre-built with responsive features and layouts. Choosing responsive WordPress themes or website templates can save you time and money during your web design process. These pre-built website themes have varying degrees of responsiveness. Our web design team are skilled in customizing WordPress themes to match your brand and creating a unique theme to match your web design needs.

If you have an old non-responsive website, a careful examination of your site is required to determine the best way to convert your website to having responsive design properties. Smaller sites may be able to be modified while larger sites often need to be completely rebuilt. Please contact our web designers to discuss your website and the options available for converting to a responsive mobile-friendly web design format.

Return to Glossary

Scroll to Top