Here at Adao Design we are focusing on creating optimised mobile content and websites. We have some exciting projects in the pipeline for 2012, so watch this space. Meanwhile, we thought we would share some tips and tricks for creating mobile websites that work.
Design Finger Friendly Web Pages
Finger tips are usually 40-80 pixels in size, it’s important to consider this when creating buttons, and elements on the page. Design for the finger and not the stylus, make sure interactive elements are easy to use without needing to zoom.
Fingers can do more than just click, a lot of phones have access to gesture controls that can make the mobile experience a lot more interactive.
Optimize for “on rails” vertical scrolling
This simplifies the consumption of content for the user. Vertical only scrolling allows the user to navigate the site with one hand and reduces the likelihood of users missing content if they don’t pan left or right.
Avoid Web Technologies that don’t work well on mobile
It’s important to consider that mobile devices have different capabilities than desktop browsers. The following examples are elements that we should look to avoid when developing optimised mobile websites.
Framesets: they work but take up a lot of room and content can be hard to read. Scrolling the content of the frame can also cause difficulty.
Tables: Don’t use tables for layout or positioning elements, that’s what CSS is for. This is best practice on desktop, but even more important on mobile websites and devices. However, you can still use tables for tabular data, in fact that’s exactly what they were designed for.
Image Maps: These typically rely on mouse over behaviour, most devices don’t support this.
Hover effects: Take for example drop down menus. There is no hover state on most mobile phone browsers so these should be avoided for maximum compatibility.
Plug-ins: Most mobile devices don’t support binary plug-ins.
Mobile Design Considerations
Design content to match the size of the viewport and test across the range of mobile browser platforms. Simplify your content, try to think of the users needs. They are more likely to require important information like an address or contact details that read about your company history. Make sure that text is easy to read and that images chosen are easy to comprehend.
Loading Speed
Be cognisant of the loading speed of your website. Your user is likely to be on a slower connection that they would be on the desktop. Google Mobile Search also puts great emphasis on the page load speed within its algorithm. Sites that work better on mobile devices are likely to rank better.
OK time for a plug. Adao Design provides and range of web design and mobile website solutions. If you are looking for a fresh new mobile website to take advantage of the fastest growing technology trend in history, why not contact us for more information.