Web design for smart phones

The increase in smart devices available in the marketplace has made it somewhat of a challenge for those wanting to settle on an effective website design. Screen sizes of mobile devices have been changing year after year and for the web developer, it can be hard to keep up. Even screen resolution has changed, creating a lot of confusion among buyers and designers. So with so many options and new technologies available what is the best answer?

Responsive design is the answer!” is what many people are saying, but the practicalities of this for the small businesses make it a time consuming and expensive process, and for those with limited resources responsive design might not always be the best solution. Chances are a lot of clients and customers view a business’s website on one of their smart devices, so making a website for mobile friendly is in the interest of both business owners and their customers.  Here are some tips and tricks on how your current site can become more mobile friendly, without having to spend a bucket of time and money on a responsive design.

(Updated Note – 25.04.16: Responsive web design is now industry standard for Brisbane web design companies and worldwide, so always ask for this to be included, as retrofitting certainly will cost you more)

Is responsive the answer right now?

Don’t get me wrong. A responsive design is on the wish list for most businesses. Who wouldn’t want a website that’s perfectly optimised for a wide range of devices and screen sizes? However since a responsive website needs to work on a minimum of three screen sizes, meaning three separate designs, a lot of businesses simply can’t afford it.

Additionally, responsive designs can also confuse users if they are expecting traditional desktop formatting and navigation and can even make them even do the unthinkable and leave the site out confusion. Cat for Codes is an example of this, where they have removed the top navigation and made the user rely solely on the footer sitemap.

What you’re up against

Phone screens have been getting better and better over the years and modern screen larger than 4.5” are all equipped with a generous 720*1280px screen – that’s a lot of pixels. Additionally, the terms “Retina display” from Apple and “HD Super AMOLED display” from Samsung are commonly spoken. Essentially these terms just mean “really good screen,” and as they have more pixels which can fit more content. However as technology develops the physical size of the screen hasn’t changed in many cases and this is the area that can cause problems.

Smart phone pixel density - web design
Smart phone pixel density – web design

Get Font Display & Size Right

Font size is the big one. There are a few ways to display text on a web page, the most common are Ems and Pxs. The problem with px is 14px on a 4 inch screens is a lot smaller than 14px on your monitor. Luckily most mobile browsers do their best to correct this, however it’s always best practice to use Ems since they also scale better than px for font size. Needless to say font size on mobile devices is vital.  If they can’t easily read your company information on your website, you’ve destined your site for lost potential on a mobile site.

Use the 960 Grid

I’d suggest the ideal width for a fixed width website is 960px. The reason is it’s the same also width as an iPhone 4 in landscape format. While the 960 grid is not new, it is a great tool for designers to help organise information. Since the grid is divisible by 2,3,4,5 and 6, different layouts can also be easily made. By having a website 960 in width, it means a site will display full width on the iPhone 4, and on larger screens like the Samsung Galaxy S3 you’ll get nice padding on the side which allows the user to zoom if needed.

Be Mindful of Mobile

When designing your websites for the best user experience, it pays to remember how people use their smart devices. Rollover menus don’t work on smartphones, because the finger is either touching the screen or not at all. Fitt’s Law is a very simple but useful thing to keep in mind, if something is bigger it is easier to select.

If you use Android and iPhone app icons as a guide, both are roughly 64px by 64px. If your navigation’s clickable area is 16px, that will be 4 times smaller than a single icon on a phone –that’s tiny. As always design with smaller screens in mind. Large buttons will help people move through your website faster and easier whether mobile or not. Also using a 960px width and being mindful of mobile screens during the site’s development, it becomes easier to create or tweak a current website to be more mobile friendly.

For businesses with limited financial resources this makes the most sense as they can still get an optimised site for various smart devices without needing to take the plunge of a fully responsive design, and without it costing an arm and a leg. Now that’s what I call smart web design.