Web Design and Development Tips for a Mobile World

Published on 17 May 2012 at 7:03 pm.
Filed under Informative,Mobile,Web Design.

Even the most beautiful and creative website may need you to reconsider your web design when creating a mobile friendly website. So what web design and developmental tips do we recommend? Glad you asked.

Web Design and Development Tip: Button Size

Small buttons might have worked well with your desktop design, but they can very troublesome to click on when you are working on a mobile device. Apple recommends that all tappable user interface elements measure at least 44×44. To keep your users happy bigger is better when it comes to mobile users.

Web Design and Development Tip: Rethink Dropdowns

Dropdowns have been a popular design construct since the birth of DHTML — buzzword created around the year 2000 that stands for Dynamic HTML. Dropdowns typically displayed when a user mouses over a design element to show the hidden content. Unfortunately, this does not make sense in a mobile world where you can touch on two elements at the same time.

As it stands now there are only three touch events that are widely supported by mobile browser manufacturers:

• touchstart – when a finger/stylus is placed on a touch screen.
• touchend – when a finger/stylus is removed from a touch screen.
• touchmove – when a finger/stylus moves across a touch screen.

You might think that with these events you could update your drowndown navigation script to just add events for touchstart and touchend that mimic mouseover and mouseout, but this is not the case. These events are equal to mousedown and mouseup so you can only fire your events if a user touched the exact element but if they touched elsewhere first and then moved their finger over the element.

There are a few other touch events that would be useful to have, but are not yet supported:

• touchenter -when a finger/stylus is moved over an element.
• touchleave – when a finger/stylus leaves an element.

So eventually you will be able to add simple events to do your dropdown script, but you cannot do that today. Instead we recommend having some type of button to click or touch to toggle your navigation. Something like an arrow that points up or down depending upon the state. Besides, including an arrow to show a dropdown has always been a user interface design best practice.

Example of website navigation that uses dropdown navigation as an alternative for mobile users

Those are just two web design and development tips we recommend. Look back for future posts with additional tips. Do you have any that you recommend? Let us know.

This post was originally published as Web Design and Development Tips for a Mobile World for The BrandBuilder Company.