5 Considerations and Best Practices of Responsive Design

There are many design and technical considerations when creating a webpage that will be suitable for many device screens. This section of the prompt will discuss some of the ones I have found to be important. First we will look at 3 technical considerations and then 2 design considerations to improve the user experience.

1. Set the Viewport

Using a meta tag, it is possible to set the viewport, the visible area of the devices screen. Doing so allows a design to better adjust to a given device's width instead of trying to interpret a design from a desktop's standards. To do so, we need to use a meta tag and have it say the following:

< meta name="viewport" content="width=device-width, initial-scale=1" >

This now tells the device to interpret the HTML/CSS code to adapt to the current devices width and pixel density. It is also possible to disable user scaling (pinch-to-zoom) during this process, but that is not ideal in cases of accessibility.

2. Use Media Queries

Media queries allow you to adjust the CSS of a page based upon screen size, orientation, and a host of other elements. Adjusting for screen size is one of the key elements in responsive design. Below is an example from a Google tutorial of what a media querie looks like. It's possible to have different stylesheets for each device width that you intend to design for to help keep things organized.

3. Size Images in Responsive Terms

When sizing images in a responsive design it is best to set their width to 100% and the height to auto. An example is below. This allows for an image to be resized easily with the increase/decrease of a screen's size.

img {
width: 100%;
height: auto;
}

4. Use Large Clickable Areas for Touch

It is important to design areas, that are intended to be clicked, with large areas of space. This is important to allow for a finger to easily click on it. Having to zoom in or move around the page in order to access the link can be a frustrating process. User testing will help identify if clickable items need to be resized.

5. Reduce Image File Sizes or Eliminate Them

Reducing image file sizes helps a design in a number of ways. It helps loading times, especially on slower mobile connections. It also helps reduce the impact on a users data plan. Using image sprites is one solution to this problem, especially when many images need to be used. Keeping them in one file that only needs to be loaded once helps this process. Another consideration is to reduce images all together to help speed things up. Using the HTML canvas or CSS to create some images will make the loading process much snappier as well as the resizing of the site for mobile designs.