You maybe wondering how your website will display on all device types (mobile, tablet & desktop) with such a huge range of screen sizes. The quick answer is that the layout will adapt based on the screen’s width.

For example, if a page layout comprises three columns of information on a desktop device, this can be rearranged into a single column of stacked elements on a mobile phone. I will go through this in more detail in this article and also highlight some of the considerations that may need to be made.

The ability of a website to adapt to any screen size is known as ‘Responsive Design’. Please be assured that our websites are always created with this ability.

Layout Changes

The image compares a three column layout on a desktop and mobile phone. See that the blocks representing the content areas form a single row on a desktop and rearrange to stack one above the other on a mobile phone.
The image compares a three column layout on a desktop and mobile phone. See that the blocks representing the content areas form a single row on a desktop and rearrange to stack one above the other on a mobile phone.

The easiest way to understand the layout changes is to take a simplified example. Consider the diagram above which shows how the layout will adapt on desktop and mobile-sized devices.

Both layouts show a header, 3 areas of content and a footer.

See that on a mobile device the content areas are rearranged into a single column, they are colour coded so you to make the comparison easier.

The exact number of columns can be set for different screen widths, for example 3 for desktop, 2 for tablets and 1 for mobiles.

On a desktop, the header usually contains the logo, menu, search icon, social media button and so on. The content of the page in this example is represented by 3 equal width columns with a footer shown at the bottom of each page.

Sometimes this basic behaviour will not suffice, so it’s possible to create completely different layouts, let’s one each for mobile, tablet and desktop devices and simply show the appropriate layout on each device. This will mean duplication of content however and also a larger page size resulting in slower load times however this may be slight however.

Not all content may be required on all device types, in this case it can be set to only display where required.

NEED TO TALK TO SOMEONE ABOUT YOUR NEW WEBSITE?

Just give us a call or send a message, we’ll be happy to set up a meeting to discuss your exact requirements.

Menus

On a desktop the menu can be displayed horizontally with either dropdowns or a mega menu as shown in the screenshot.

On a mobile the menu is displayed vertically and can expand and collapse to allow a vistor to drill down to the required page links.

No Mouse Hover on Touch Screens

Remember that touch screen devices cannot use mouse hover effects, everything is done with just taps and swipes.

For example, for the menu, at least two taps may be required. The first tap has the same effect as hovering, sections of the menu can then be expanded with further taps and a final tap is required to navigate to the desired page.

Image Aspect Ratios

What may not be immediately apparent is that the aspect ratio of the images can change drastically from being a wide image to being narrower and relative taller a shown in the two screen shots above for desktop and mobile devices respectively.

Note that the aspect ratios of the images shown highlighted with an orange border are very different for a desktop and mobile phone.

This can result in the subject of the image not being displayed properly. There are several ways to cater for this:

  • Display different images for each screen size with an aspect ratio which matches the available space. This allows you to ensure that the correct part of the image is displayed.
  • Create a ‘point of interest’ on the image which as far as possible the image will be centred on.
  • Display the image at it’s original aspect ratio, this may cause a border area to the left and right of the image if the space available is wider than the actual image.

Point of Interest

WordPress editor showing point of interest for an image.
WordPress editor showing point of interest for an image.

The image left shows the WordPress image editor with a ‘point of interest’ indicated by the small blue circle.

The aspect ratio for images may change for different device types. As this happens, each image will be centred on it’s point of interest.

Scaling Font Sizes


Font sizes will be scaled to an extent by the device but further adjustments can be made based on the screen size if required.

For example, if large text is used on a desktop layout, it can be reduced in size for tablets and reduced even further for mobile phones.
 

Leave a Comment

Your email address will not be published.