Make Your Website Mobile Friendly
19 Tips for Improved Accessibility

– by Mike Hamers, Lightspeed– Edited by Kirsten Nelson, C3 Writing

The challenge of the small screen size of smartphones is to make your site easier to read and accessible without excessive zooming and scrolling. Smartphone touchscreen technology makes it dicey to click tiny links with our fingertips. To address the needs of smartphone browsers, designers are well advised to create variations of websites tailored for "mobile sites". Tip #19 briefly describes a new paradigm of dealing with the plethora of new and emerging screen sizes, resolutions and functionality automatically.

Despite the amazing multimedia capabilities of the internet, the primary mode of information delivery is still text, and the interface is largely visual. Here are a few interface design best practices that are easy to implement:

                          
#1. Prioritize business objectives.
A big mistake when building a mobile version of a site is to assume that every piece of information on the full-size site needs to be included in the mobile environment which only results in a cluttered mobile website that is frustrating to navigate! As with any design work, prioritize your objectives and inject them into your design work. Don’t over do it of course – with limited content area it is best to focus on one or two key objectives for mobile “mini-sites”. Remember, simplicity does not mean your site still can’t look beautiful. 
                   
#2."Tap" is the new "click".
Don't skimp on the size of your hotlinks/buttons. Web design revolves around a small precise area for links, buttons, etc., an area easily found moving your mouse. However, mobile links and buttons need to be larger to tap with a finger and easier to see on a smaller screen with limited viewable area. Make clickable areas at least 29 X 44 pixels – the area needed for most fingertips.
             
#3. Avoid popups.
While preferable on traditional monitors and tablets, the hover state action behaves badly on smartphones and may even mask other content on an already tiny screen.

#4. Avoid Flash and Java.
The same concerns that make popup banners a bad idea on mobile sites apply to Flash as well. Since they have the potential to completely disrupt the user experience on mobile devices, it’s best to avoid Flash completely. Similarly, many phones do not support Java, and even if they do, using Java can be a huge drag on load time. If you decide to not deploy a mobile-friendly site, choose an option that will allow you to deliver a different, text-based content for visitors using mobile browser.

#5. Match branding elements between sites.
It’s important to use similar visual brand elements on both your standard and mobile site formats for two reasons. Your mobile site is a brand touchpoint and should reflect and promote your brand essence. Also, users already familiar with your company, a similar design will make them feel like they’re visiting an old friend – an important consideration for your most loyal customers.

  
#6. Avoid scrolling in more than one direction.
Nothing wastes more time than having to scroll in multiple directions to get the information you desire.

#7. Optimize for speed.
Load times are still an issue on some Smartphones. Keeping file sizes, load times and navigation down ensures your site loads quickly and efficiently – which is the number one reason customers leave your website in search for something slick.

#8. Provide a link back to the main website.
Have a “persistent” link back to your home page. Designers frequently use the logo graphic (usually in the top left-hand corner of the site) as a live link back to the home page.
                            
#9. Place all navigation and important content “above the fold”.
Make it viewable with no need for scrolling.                      
                       

#10. Do not capture text within your image graphics.
Screen readers can't read words that are built into graphics. Search engines can't either, so this hinders your SEO.
         
#11. Make type scalable.
Browsers typically allow users to increase type size for readability. But this only works if the font settings for the Web page are configured to allow it.

#12. Provide "alt-text" for all graphics.
Again, screen readers can't read graphics. Most WYSIWYG page editors have a field for you to enter alternative text (atl-text) for any graphics in your layout. Alt-text is like a mini-caption for your graphic, viewable only by screen readers and search engines. Also, you can manually enter alt-text into page HTML. When alt-text includes keywords, it also improves SEO.

#13. Underline hyperlinks.
It's good practice to make links change in some way on a mouseover. However, if the only change is a color change, the colorblind may not be able to see it. Underlines make links more obvious. Avoid using underlines except for indicating links.

#14. Use color to help organize.
Color is an easy and efficient way to organize and order a site, especially with a complex one. Since people recognize color much faster than they can read text, using color as a sort of label is another opportunity for improving efficiency with color.
                    

#15. Use only broadly-supported animation.
Use only broadly-supported animation and video file formats to avoid headaches and loosing viewers.

#16. Consider a "breadcrumb" trail.
Breadcrumbs help your visitors to see where they've been and how to get back. Their biggest weakness but it does not help visitors figure out where they are going. Some experts say that a well-designed site should not require crumb trails.

#17. Provide a search box.
For complex sites, a simple search box can be the best tool ever.

#18. Test It!
As with any project, your hard work will amount to very little if you do not implement some sort of testing post-design. Test your site on as many devices as possible. Don’t rely on just Android and Apple as they are market leaders – look into Windows platforms and other tablet devices. The differences between the two could be the make or break for your mobile website. – MH

#19. Responsive Web Design – A New Paradigm
The exponential rate at which new resolutions and devices arises now carries the industry to a new paradigm and approach to creating websites. Sites that intuitively and automatically respond to user end resolution and device. Responsive Web design consists of a mix of flexible grids and layouts, images, and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website automatically switches to accommodate for resolution, image size and scripting abilities. The website technology automatically respond to the user’s preferences. Responsive Web design requires a different conception of what constitutes a website. In lieu of the static, multi-page site, responsive websites utilize a systems-based approach incorporating fluid layouts, along with automated media queries and scripts that reformat Web pages in real time. For the more technically savvy reader interested in building a responsive website, look for our future newsletter on this topic. – MH

     To Read Past Issues of the Newsletter – Link to Index

Get help with all your graphic design needs — Call if you have
any questions, suggestions, or wish to schedule a free consultation:
Mike's cell: 303-527-1222 or email: mike@lightspeedca.net

Read what others are saying > Testimonials

More Award-Winning Logos (pdf) > click here  

More Business Cards (pdf) > click here  


 Online Portfolio > 

mproved A