Building Responsively

Posted on Monday, July 16, 2018

Harvey Ball

The surge in mobile web usage has quickly turned website responsiveness from a luxury to an industry standard. But from a developer’s point of view, what do we look at when building responsively?

Continue reading
Get updates from Miramar direct to your inbox

Firstly, let’s just clarify what we mean by responsive: a website design that can automatically adapt to fit the screen size of any device on which it is viewed. This ensures that visitors receive an optimal browsing experience no matter whether they are using a desktop, laptop, tablet or mobile.

Mobile browsing now makes up the majority of worldwide website traffic and mobile friendliness has long been used as a significant factor in ranking websites in search results. On March 26th, Google went a step further by announcing that it would begin rolling out mobile-first indexing. Mobile-first indexing means that Google will now prioritise the mobile version of the content for indexing and ranking.

 

Clearly, developing web sites that are responsive and mobile-friendly is important - take a look at the stats below and read on to hear a few considerations we take into account when developing responsive design.

Statcounter GlobalStats

Key things to consider include…

Typography

Developing a responsive website requires developing fluid and responsive typography. Typically, this involves scaling font sizes to ensure they remain in proportion to the rest of the design when viewed at different sized screen resolutions.

However, typography is very much part of design; font type, colour and size influence the psychological response of the reader. This means that modifying the way that text is displayed on different devices can change its psychological impact.

Responsive typography requires careful consideration, yet it’s not always possible to develop multiple resolution-specific designs within a particular budget and timeframe. To get around this, it’s valuable to have developers who understand fundamental design principles and can ‘improvise’ the implementation of one design across multiple resolutions.

It’s also good for us developers to work closely alongside design: reviewing work together before it passes over to our account managers. Sitting opposite to our creative team really helps with this – we’re on hand to cast an eye and give (or receive) advice.

Responsive line breaks

One of the difficulties in developing pages with responsive designs is handling the way text breaks across different resolutions. For example, a desktop design for a web page may require a block of text overlaid on an image to break onto another line after a certain point in order to give emphasis to selected words and make the text easier to read.

However, as the image and text scale down to fit smaller resolution screens, the point at which the line needs to break also needs to change. The default static behaviour of the
tag causes the line to break earlier or later than desired and the end result is a messy looking design with lines containing lone words.

One solution is to wrap each line in a and create custom CSS line break classes for different breakpoints. This way, you can control precisely the resolution at which each line breaks and create the desired look and feel of the text for every device.

Heading tags

Heading tags should be chosen for their semantic meaning rather than their font size. For example, h1 tags should be used for top level headings, h2 tags for a sub heading of h1, h3 tags for a sub heading of h2 and so on.

If the default font size for a heading tag is too large, rather than selecting a heading tag with a more closely matching font size, the style of the heading should be modified using CSS.

Similarly, heading tags can be used outside of their hierarchical order in the document flow. For example, there’s nothing wrong with using an h3 tag above an h2 tag if it’s describing a lower-level heading in the design. As we discussed earlier, different devices provide different browsing experiences and consequently it may be advantageous to change the order in which headings appear on the page.

Typically, however it’s recommended to keep h1 headings at the top of the page to help establish page context for users and search engine robots.

Selecting heading tags for their purpose rather than their font size not only makes it easy for search engine robots to determine what your page is about but also ensures that the content remains separate from the layout.

 

A lot goes into making sure a website or landing page is responsive. It starts for us with the wireframes our designers produce, which we (the development team) get to have a look at and have input into. Once a site is built we then carry out a great deal of testing across browsers and devices to put our designs and builds to the test.

It all boils down to process and quality control: our thorough digital processes ensure we deliver mobile responsive landing pages and websites that are optimised for great user experience and ROI. If you’d like to find out more about how we can approach your digital project and ensure your website, landing pages are responsive in a way that works, please get in touch.

You can take a look at some of the sites we have built here.

Recent blogs

Like what you've read? Let's get started

Tell us what you need and one of our experienced team will get straight back to you to discuss your objectives and how we can help you achieve them.

Chat to us