It’s Monday, December 11, 2017 and 67°F in Austin, Texas

Website Design Tips for Smartphones and Tablets

Wesite Design Tips for Smartphones and Tablets

These days, people are often accessing the internet through mobile devices like smartphones and tablets - the number of mobile  users is only increasing. When designing a website, one should always remember to consider these users and their needs -- with the ultimate question being "Will my website work on a cell phone or tablet?"

First, one should remember that "websites" and "apps" are different -- even though they both are accessed over the internet on a mobile device. Generally the programming is done in entirely different languages.

Apps are generally custom "stand alone" programs designed for a particular device, platform or operating system -- like Android or iOS.  A developer must program different versions for each platform, and Apple's platform requires "apps" to be "approved" before they can be downloaded or sold. Apps are generally programmed in languages like Java or Objective-C.

Most websites are HTML based and thus more likely to be accessible on almost all devices that include a web browser, without the constraints of programming different apps for each platform or getting app approval.  Websites generally function using a combination of server side programming languages like PHP, and client side programming like JavaScript which is executed in the web browser.

Some important considerations when designing websites for mobile devices:

1) Don't use Adobe Flash elements as those elements aren't viewable on most mobile devices.

Many effects like "pictures that fade in and out" and "sliding content" can be recreated with JavaScript programming like jQuery.

One should use standard HTML and avoid applets or plugins whenever possible.


2) Be aware that there is no "hover" state on mobile devices. On a standard computer, most users are familiar with hovering their cursor over a menu item and having a drop down menu appear, or the color of a link change.

Since users can't "hover" on a mobile device -- either their finger is touching the device or it's not -- that means interaction with a "drop down" or "fly out" type of menu is going to behave differently. Generally, If coded properly, the first click will open the menu drop down, and the second click will open the page of choice.

One should consider simplifying navigation choices whenever possible.


3) Remember that forms are particularly challenging on mobile devices. Generally users dislike filling in forms anyway, but forms are particularly tricky on devices that lack normal keyboards.

Filling in forms on mobile devices can be extremely slow and prone to user input errors, and inadvertent clicks.

One should keep forms simple and use them only when it is truly necessary.


4) Be aware of the extremely wide variety of screen resolutions on mobile devices.

The screen resolutions vary widely, are constantly changing. and differ considerably from standard computer monitor resolutions.

It's best to move away from the misguided concept of "I want my website to exactly fit the screen on my phone or tablet" -- that concept maybe appropriate to an "App" which is custom designed for a specific device's screen resolution, but it is not generally applicable to a website that maybe run on a wide variety of devices with different resolutions.

Here is a great list that shows the screen resolutions of today's smartphone and tablet devices:

http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/

They range from "240 × 320 pixels" smartphone, all the way up to a "2048 x 1536 pixels" tablet (which is a higher resolution than most laptops")

Remember that while higher resolutions may allow more content to display on the screen at one time, it doesn't mean that the content is large enough to read or click on. So in that sense a higher resolution is not always better.

With the smaller screens on most smartphones, scrolling is almost always going to be required.

Thankfully, most smartphone and tablet users are familiar with zooming in and scrolling to view content.


5) Be aware of speed and connectivity issues on mobile device -- a website with lots of images may not load as quickly, and may in fact time out.

Finally, given all of the above considerations, a choice should be made as to whether you want to serve up the same website to all users, or alternatively design/program a separate "simpler" version of the site that will only be used by mobile users.

Usually that decision depends on the type of website, what your customers use the website for, your budget, your development timeline, and the experience you want your mobile users to have.