Mobile Web Design

Mobile devices are limited by display size and require a different approach to the content layout.

A variety of different screen sizes exist across mobiles, tablets, desktops, game consoles, TVs, and laptops. Screen sizes are always changing, so it’s important that your site can adapt to any screen size, today or in the future.

Optimize text for reading

An ideal column should contain 70 to 80 characters per line.

Each time the width of a text block grows past about 10 words, it’s best to add a breakpoint.

Don’t hide content

Have a think about what content you may hide or show depending on the screen size.

It’s recommended to show all content by default – don’t hide content because you can’t fit it on the screen.

Hiding product information on an e-commerce website may have a negative impact as users can’t find the answer to their question. For example, what size a TV is.

Use CSS media queries

Media queries are filters which can be applied to CSS styles within the code.

These queries make it possible to change styles based on the characteristics of the mobile device displaying the content, including the display type, width, height, orientation and resolution.

Use relative sizes for images

It’s recommended to use relative units when specifying image widths to stop them from overflowing the viewport. For example, width: 50%; causes the image width to be 50% of the containing element (not 50% of the viewport or 50% of actual pixel size) See more about responsive image

Quick tip: CSS allows content to overflow its container, so you may need to use max-width: 100% to stop images and other content from overflowing.

Do you have a project in mind? Get An Estimate for your campaign

Speak to our dedicated and experienced project managers to begin planning your digital campaign today.