Kleinburg Brewery
- design
- / web
Look around: just about everyone has their heads buried in their mobile device, whether it’s a smartphone, tablet, or any other digital device. And while they may be using it to call or text a friend, they’re also using it to browse the web.
But how long they stay on certain websites depends on what type of user experience they have on it. If the site isn’t optimized for mobile use, odds are more viewers aren’t sticking around for long. That’s why optimizing your website with a mobile design is critical.
Here are 7 tips to make sure your site is user-friendly on mobile devices.
1. Use Various Image Sizes With Media Queries
Media queries are essentially CSS modules that allow content rendering to act based on specific conditions, such as screen resolution and browser dimensions. It’s important that mobile optimization is kept in mind when devising media queries, rather than allowing them to be an afterthought.
That’s because new screen sizes and dimensions are always coming out, so thinking about media queries based on mobile optimization from the get-go will allow your site to be more efficient and adaptable to these new screens and resolutions.
2. Optimize Your Site’s Images
It’s pretty annoying to have to sit there and wait while a webpage loads. And more often than not, it’s usually the images that are the culprit of long load times. But viewers still expect to see crisp images, so it’s important to figure out how to give them both fast load times and clear imagery.
The best way to do that is to keep the size of the image files down while still retaining high quality. There are various plugins that can help with this, including EWWW Image Optimizer, WP Smush, TinyJPG and TinyPNG. These help to create much smaller file sizes without making any apparent changes to the viewer.
3. Choose the Right Fonts
In addition to optimizing images on your site, it’s important to give some attention to font as well when it comes to optimizing for mobility. It’s essential to decide which fonts should be used that will have a positive effect on your designs, considering the fact that the majority of websites use text as the predominant way to provide information.
When picking the right fonts, stay away from complex letterforms, or those with not much spacing between the letters. Consider fonts within the sans serif class, which usually scale better on the majority of resolutions.
4. Start Using SVGs
SVGs – or ‘Scalable Vector Graphics’ – make use of a type of XML markup language rather than an image format. They’re highly useful for simplified graphics like icons, logos, infographics, and so forth. The reason why they are so useful is that they’re scalable, which means there’s no need to be concerned about formatting them for various viewports.
In addition, they are easily animated through the use of CSS. Tools like Adobe Illustrator, Sketch, and Inkscape all include support for this type of format, so they’re worth giving a shot.
5. Text Should be Treated as Part of the UI
The type of font you use shouldn’t be your only concern when it comes to readability. Ideally, your mobile designs should seriously consider text as a part of the whole UI experience from the start to optimize readability. Media queries should be used to maintain a certain number of characters per line – a good rule of thumb is somewhere around 45 to 75 characters.
You might want to use vw, vh, and vhmin (in relation to to viewport percentage lengths) CSS3 values so that the font size stays relative to the container size on a variety of viewports.
6. Design Mobile Menus
Your WordPress theme should ideally include mobile menus. If it doesn’t, consider installing plugins to help. Superfly is a great option, it allows you to generate all sorts of additional menus that you can use in place of your theme’s default ones. This plugin also allows you to create icon-based vertical menus.
Hero Menu is also another great option, which makes the creation process easier thanks to the drag-and-drop editor and fully responsive features. There are plenty of pre-built menu layouts, customized icons, and color combinations to make every menu a unique one. When on a mobile device, the menus built using this plugin will automatically display with a lighter version.
7. Whenever Possible, Use CSS3 Rather Than Images
Instead of using additional images, consider using CSS3 when possible. It doesn’t have to be complicated, either. Simply using a little CSS3 imagination can garner lots of seemingly complex effects that would otherwise necessitate more complicated graphics to achieve.
These tips are only a few of the many that can be applied to create a mobile-optimized website. But as helpful as they are, one thing that should always be kept in mind is that mobile optimization needs to be kept tabs on a regular basis, since viewers usually don’t have the patience to deal with confusing designs.