Mobile Website Design
https://bdolphin.co.uk/news/mobile-website-design/
Mobile considerations
Today, almost 50% of users access the web from mobile devices. What does this mean for us web designers? It means that we must have a mobile strategy for every mobile website design.
Responsive design
It’s essential to optimise your website for various screen sizes and resolutions. Some core guidelines to follow include:
- Aim for a single-column layout. A single-column layout usually works best on mobile screens because it scales well between different device resolutions and between “landscape” and “portrait” mode.
- Use the “Priority plus” pattern to prioritize navigation across breakpoints. Priority plus is a term coined by Michael Scharnagl to describe navigation that exposes the most important elements and hides away less important items behind a “more” button. This type of navigation uses the available screen space; as space increases, the number of exposed navigation options increases as well, which leads to better visibility and more engagement.
This pattern is especially good for content-heavy websites with a lot of different pages and sections, such as a large retailer’s e-commerce store or a news. An example of this would be to use Priority+ pattern for section navigation and when the user hits the “All” button less important items show up.
- Size images appropriately for different platforms and displays. A website must adapt to look perfect on all of the different devices and in all of the various resolutions. Creating great-looking images on the web is one of the main challenges web designers face when building responsive websites. Tools like the Responsive Image Breakpoints Generator simplify this generating breakpoints for images interactively.

From clickable to tap
On the mobile web, finger taps (not mouse clicks) create interactions. This means that different rules apply when you’re designing touch targets and interactions.
- Correctly sized touch targets. All interactive elements (such as menus, buttons and links) should a bit larger and suitable for tapping. To choose a proper size for your buttons the work of MIT Touch Lab’s study is useful – click here
- The MIT study found that 10mm ×10mm is a good minimum touch target size. This rule works for both designing apps and websites.
- On mobile, there is no hover state to provide additional visual feedback to your user. Therefore stronger visual signifiers of interactivity are required, to allow users to correctly predict how an interface element will behave just by looking at it. With buttons, for example, consider using a square shape with a subtle shadow.
Accessibility
Another essential website design guideline is accessibility. Today’s websites must be accessible to everyone, regardless of a person’s abilities. Designing for users with impairments should be an integral part of product designAdd description for your Article from here.
Leave a Reply