Four considerations when building and deploying a responsive website

“90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV”

That is according to the latest research from Google on the topic. This strongly suggests that the majority of web users are now consuming their digital media using mobile devices. This causes a massive problem for developers due to the vast amount of devices with varying screen resolutions. iPad, Kindle, iPhone and Blackberry… all of these devices need different approaches when crafting sites and those are only the market leaders.

The three most common ways that mobile users move between devices are:

1. Repeating a search on another device
2. Navigating directly to the destination site on the second device
3. Sending themselves a link (email or Slack is great for this) to revisit at their convenience later

Imagine how hard it would be to create a version of your website for each of these devices, and that's without even considering the likelihood of screen sizes changing in the future. We need an approach which allows us to design for multiple devices, even if those devices haven’t been created yet.

We need responsive design!

Responsive design is an approach which helps us to provide our users with the optimum viewing experience regardless of the device they’re using. It’s a concept which lets the individual elements of a website - such as its text or images - to be adjusted in both size and layout by responding to the behavior of the user and the behavior of the device being used.

The other option is to build a dedicated mobile or tablet app. We will look at that approach in another post.

In essence, responsive design is not a single technology, but instead a set of practices which make your website more efficient for ease of use and maximum conversion. Using various techniques - such as fluid grids and some CSS media queries - a website can be made to respond automatically based on the visual preferences set the by the user's device.

In this post we will look at a number of considerations to be made when building and deploying a responsive website.

Understanding media queries

A media query can be used to allow you to target a specific set of CSS rules in your stylesheet for implementation on a particular device. This means that a media query can tell the elements on your site how to behave when they come across specific devices. Using these rules we can crop an image for display on a mobile device and have it oriented in landscape on a desktop without changing the HTML for the site. A good repository to see an all-inclusive list of media queries can be found here.

Fluid grids

Fluid grids help us to keep our web content responsive when we are using devices with dynamic screen sizes. These work by defining the maximum layout size for a design and then dividing the grid into a number of columns. The elements are then designed with proportional dimensions as opposed to pixel based ones, so that whenever the screen size is changed, the elements can adjust their dimensions in their parent container by the specific proportions of the device. Creating a fluid grid from scratch can be a time consuming task, but can be made simpler by using free CSS grid systems and generators.

Dealing with Images

Bitmap images (as opposed to vectors like the SVG format) are not fluid by default, and as such tend to have issues when scaled. This can cause an image to lose its visual appeal or even worse, its clarity and context. One way to tackle this is to size your images in relative units instead of pixel dimensions.

Relative units use percentages to help the image react to each device’s specifications. The most common way to use a relative unit is to set the ‘max-width’ property of the image to 100%. This simple CSS instruction will allow an image to display its own natural dimensions as long as there's enough real estate on the device’s screen. It will also cause an image to shrink in scale as its window narrows.

Touchscreen Considerations

It is important to consider that your site may be used on devices with a variety of inputs. Gone are the days when a mouse was the only viable input format for a website and with the influx of mobile devices, touchscreen inputs have become much more popular. The user experience can be improved on these devices by implementing small features such as performing “swiping” gestures to advance through a carousel of images or “pinching” to zoom into an infographic.

Act while you can!

Responsive design is all about the creation of websites that dynamically tweak themselves to ensure your users will receive the optimum User Experience (UX). Responsive websites eliminate the need to develop any other type of mobile website, thus making them a cost effective way to boost your website’s reach. Using fluid grids, media queries and flexibility, we can start to leverage ourselves to take advantage of the influx of mobile device users and potentially even generate higher revenues.

As the latest mobile technologies are introduced, the biggest businesses in the technology world are following suit. Even Google has recently recommended responsive web design and have announced they are checking if websites are mobile-friendly in their search results. This could negatively affect your website’s ranking if not implemented correctly, so why not start to make sure your website is mobile friendly today by using the helpful Infragistics Layout Manager tool!

Create modern Web apps for any scenario with your favorite frameworks. Download Ignite UI today and experience the power of Infragistics jQuery controls.