It’s no secret that handheld devices are becoming an increasingly more prominent part of our lives. Mobile and tablet usage has been steadily increasing for years now, and with Google announcing last year that there are now more searches on mobiles than desktops, there are no signs that this trend will slow down anytime soon.

With so many different devices in use today comes a plethora of different screen sizes and resolutions. With so many variations available, how is it possible to create a website that looks good on all of them?

The answer, of course, is responsive design! Websites need to move away from fixed page sizes and pre-defined pixels, and start embracing the more modern, fluid approach of design.

Below are several points detailing some of the basic elements that are considered when designing a modern, responsive website.

Responsive vs Adaptive

Both methods are perfectly acceptable. What you choose to use should depend on the content of the website. Does it look good with a smooth transition, or does it need fixed breaking points to keep better consistency?

Relativity

As mention above, screen sizes can be anything from a small mobile to a large desktop with many variations in-between. Instead of using a fixed pixel sizes for elements, they should be implemented as percentages. If an area has a width of 50% it will always take up half of the screen size no matter the device, allowing it to be both consistent and fluid.

Breaking points

Adding breaking points allows you to modify the positioning of your content depending upon the width of a device. For example, on a desktop site, you may have four columns of different content. On a smaller screen those four columns would be very thin. Adding a breaking point would allow you to shift the columns so that they appear one under the other if the screen size of the device is below a specified threshold.

Static vs Flow

On smaller devices, the decrease in width will cause the content to need to take up an increasing amount of horizontal space. Separate content elements below need to respond to this by also being pushed further down the page.

Element Nesting

With relative positioning, it can be difficult to keep predictable control over content areas that are reliant on the location of each other. Therefore, to keep grouped content together they can be wrapped together in a container.

System fonts vs Web fonts

There are a lot of awesome fonts out there that are available to use and very simple to add to your website. This is fine, and they will look amazing, however each one will need to be downloaded by the user which will increase the load time of your website. Try to limit how many you use. On the other hand, system fonts will load near instantaneously although if the user does not have the font locally they will see a default font instead.

Width limits

Having content that dynamically resizes based upon screen size is fantastic for fluid design, but sometimes you will want to put minimum or maximum limits on it to stop content going too far in either direction and looking out of place. For example, if you have an element that has a fixed maximum of 800px while also having a width of 100%, it will stretch across the entire screen but won’t ever be wider than 800 pixels.

Desktop or Mobile first

Designing for desktop first means that you build the site with a larger desktop screen in mind, then later adjust the content to fit different screen sizes as they gradually get smaller. Designing for mobile first is the opposite. Both ways are perfectly acceptable and the end result is more or less the same. It is largely down to personal preference as to what you go with.

Vectors vs Bitmaps

If you have a simple image its better to use vectors in the form of SVGs or icon fonts. The file size is often much smaller with the added benefit that they will scale to any size without any deformation or loss in quality. Bear in mind that some older browsers don’t support vectors though. If your image is more detailed then it will likely be better to stick to more common image types (png, jpg or gif). As always, ensure that all of your images are optimised for web use to keep the size down as much as possible.

Images sourced from here

Nick Wearing

Developer

Although Nick only has only been in the web design industry for a couple of years, he quickly became a valuable member of the Nexus Websites team.