Designing Websites for Mobile Devices

With the arrival of the Smartphone has come a change in the way we use the internet. Searching the web from a mobile device is now an every day activity. With these changes, websites must adapt and be usable on a variety of devices. It looks terrible for a website to just shrink way down in order to fit on an iPhone or an iPad. The mobile design must be incorporated with the original design to provide a smooth and usable transition from device to device.

With developing technology, screens on our cell phones and tablets are getting to be better and better quality, almost rivaling our desktop computers. The biggest constraint is taking a large, wide website full of information and changing it into a format a fraction as wide. With a small screen usability and user experience become the priority. The first step is prioritizing what absolutely needs to stay and what may be expendable on your site. Things like addresses and phone numbers become the most important (and can be made into easy to use buttons that either call or navigate to your destination) while things like excess images and large banners become unimportant.

With the space constraints the site’s navigation become your key to using the mobile site. Instead of a nav bar with all of your pages listed horizontally, you are now forced to rethink how you navigate the site. A common solution to the nav problem is creating a drop down menu that can be expanded and hidden as you need to use it. This way, you are able to keep all of your pages, and see them when necessary, while saving a significant amount of space. Some mobile sites also add buttons towards the top of the design that feature some of the most commonly used or most important pages in the site. This way the user may not even have to scroll or click any extra buttons to find the destination they are looking for.

One last important thing to remember when designing for mobile is size and readability. If possible, you do not want the user to have to zoom in to read the text or press a button. Text may need to be made bigger and it is nice to leave plenty of room in the margin so the user has somewhere to scroll with their finger without selecting something or accidently moving to another page. Also, buttons are a good graphic way to show the user “Hey, this is clickable!” just remember to make it large enough so that the person does not have to struggle to press it.