Responsive Website Design

Not only does a website need to look great on a mobile device, it also needs to look fantastic when it is brought up on an 80-inch screen in the boardroom. Responsive design is the answer. Responsive web design is an approach that allows design and code to respond to the size of a display. This provides a great user experience on a 4-inch android mobile phone, iOS device, Windows Surface touchscreen, or that 80-inch LED in the boardroom.

Most sites achieve this design using a set of tools created by Twitter called Bootstrap.  Bootstrap is a CSS framework for developing responsive and mobile-first websites.

There are a number of considerations your web designer will make including:

1) Brand representation

2) Overall design feel

3) Goal of the web page

4) A focus on a call to action

Responsive web design allows the web designer to build a single site that can look different on different sized devices. This includes images that might change size and/or placement and text that might become bigger or smaller. It also means that the menu will respond differently.

The touch action might also be different; for example, allowing a user on a mobile or touch screen device to swipe and pan.

In North America, most sites get between 50% and 80% of their traffic served to mobile devices.  This means that potentially half of your users are on bigger screens. One approach to design is to think in terms of three different screen sizes: under 5 inches, 6 to 10 inches, and over 11 inches. Between those widths your content can scale freely or you can keep three fixed layouts. Having three (or more) fixed layouts and adding margins when necessary is usually easier to design and implement than fluid scaling.

Since 2016, responsive web design has become the standard for designing websites that look great on any device. Responsive web design was also Google’s recommend web design pattern for mobile SEO. At the 2017 Chrome Dev Summit, Google announced their Progressive Web App technology and Accelerated Mobile Pages to push web retailers to create beautiful (and fast) mobile websites that are optimized for SEO, with a focus on engagement and conversion rates.

Google is pushing designers away from responsive design and suggesting that Progressive Web Apps are the answer for today’s mobile shoppers. That said, a responsive website design is the best foundation for creating a next-generation mobile web experience with fast, app-like interactions and engagement.

To start a responsive web design development process you first must define your objective. You want a clear idea of what you want to communication to your site visitors. With your goal in mind you can set out to select the images, text and other content like video and audio.

How do you make images more responsive? This means the image is supposed to scale and properly fit on any screen size. Consider these points:

1) The width of the image is typically a percentage of the width of the screen. On a mobile device it might be set to 100% and change to 75% of a larger screen.

2) Maximum width -- another feature worth pointing out is the maximum width property of an image. An image with a maximum width of 100% can scale down if necessary but it will never scale up wider than the device.

3) Changing the image -- an image of a tiny climber on a mountain face will work on a big screen, but the climber might be lost on a small screen. It is possible to have different images appear on different screen sizes.