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 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.
This can result in the subject of the image not being displayed properly. There are several ways to cater for this:
Point of Interest
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.