Web Design for Smart Phones

Posted by & filed under Uncategorized.

Times change.

In the not so distant past, people primarily accessed the Internet using their desktop or laptop computers. Now, with the advent of smartphones and tablets, many people are choosing these methods to go online – and that number is steadily increasing. Programmers have to change with the times and format their websites with mobile and tablet users in mind. The concern about seamless access on a mobile phone or tablet should always be in the forefront of a web designers mind.

To be clear, websites and apps are different animals. The fact that they are both accessed via the Internet on a mobile device is where the similarities end; the programming is created in using entirely different languages. Most websites are HTML based and are accessible on almost every device that has a web browser. Websites don’t require approvals or the same level of programming on each platform that apps need. Websites function using a combination of server side programming languages, like PHP, and client side programming, like JavaScript. Apps are stand-alone programs designed for specific devices, platforms, or operating systems. A developer has to create different versions for each platform using programming languages such as Objective-C and Java. Some platforms require an app to be approved before they can be designated for sale on devices using that format.

When designing websites to be viewed on mobile devices…Consider these few website design tips:

1. Steer clear of Adobe Flash elements. Adobe Flash elements usually don’t work on mobile devices. There are alternatives to Adobe Flash elements:

  • JavaScript and jQuery can recreate sliding content and fading pictures
  • Standard HTML can be used in place of applets or plug-ins

2. Rethink the traditional hover state. On a computer, users can hover their cursor over a menu item and either a drop down menu will appear or the color of a link will change. That functionality doesn’t exist on mobile devices since action is taken when a user touches the device. That doesn’t mean that you can’t have a drop down menu – it just means that the coding must be different to achieve the same result. Simplifying navigation choices is something to consider, as is recoding the drop down menu to be activated with a click rather than hover.

3. Revisit the use of forms. Forms are difficult to navigate on the smaller screens of mobile devices, especially when a standard keyboard is not in place. A higher rate of errors inputting data will be found using forms on mobile devices than on desktop or laptop computers, resulting in user frustration. Users may decide they will fill out the form when they get to a desktop computer at a later time… and then may forget to do so. Businesses can avoid this by using forms sparingly.

4. Consider the variety of screen resolutions on mobile devices. The screen resolutions on mobile devices vary greatly and are constantly changing. Websites may not fit the screen completely, as opposed to apps, which are designed for specific screen resolutions. Websites can be accessed using any device at random, therefore, the screen resolution has the potential of changing with every hit. Since they are not individually coded for each screen resolution as apps are, websites may fill the screen differently. Higher resolution allows for more content to be shown on the screen at one time, but that does not reflect its usability. Scrolling and enlarging goes hand in hand with mobile devices; the size of the screen predicates the need.

Here is a list of the screen resolutions of current smartphone and tablet devices.

5. Connectivity Issues. Speed and connectivity on mobile phones and tablets will not be the same as you are used to on desktop and laptop computers. A website with lots of images may not load as quickly and could possibly time out.

Perhaps the most important thing programmers must decide is whether they want to provide the same web experience across all device types. This would require web designers to create different sites for desktop and handheld devices. The type of website and how the site is used must come into play when making this decision. Budget constraints and development timelines must also be considered. Websites are often a user’s introduction to a company. Creating a footprint that is reflective of the company’s capabilities and respectful of the user experience is paramount. Companies would do well to make a decision based upon all of the pertinent variables.