Our services

How to Build a Mobile Site

mobilefriendlysite

With most people now also using their mobile phones, smartphones, tablets and other mobile devices to access the Internet, it is very important that you should have a mobile-friendly site.

Mobile friendly sites are also useful if you are going to use a QR code to direct to an URL.

This is to ensure that you provide a good user experience, instead of irritating your users with graphics that are too large, text that are too small, or having your layout screwed up when viewed on smaller screens.

Here are our top five tips on building a mobile site:

1. Keep it short and simple. A mobile site needs to be kept very simple and very direct. If you overload it with graphics or links, it might not display well. Also, keeping a simple layout will make it easier for you to get your pages to display correctly on different screen sizes.

Also, keep it short. By short, we mean that every element should be smaller. Your logo, your content, your navigation bar, your footer should be short. You should have clickable links on your navigation bar to make it easy for people to visit other main pages of your site. A short content would lessen the need for scrolling up and down or even left to right just to read your page.

File sizes should be small too. You can render your logo beautifully and still have a small file size.

2. Avoid Flash animation. While more and more devices are now coming out with Flash compatibility, you are still risking turning some of your mobile users off because of lengthy load times!

3. Use valid code. There are times when website encoders use codes that are optimized for PCs. Remember that even if the mobile device has a good browser, it will still be limited in terms of what it could display or not. Using valid code lessens the chances of pages not displaying well.

This would also tell you to avoid fancy scripts such as Javascript.

4. Fluid layouts. Fluid layouts are when you specify % or ems rather than pixels. Using a CSS style of width:400px; for example tells the browser to display your content 400 pixels wide, no matter if the mobile device only has 250 pixels of screen. Instead use width: 100%, so that no matter how big or small the screen is, your page will take up the whole screen.

5. Use different stylesheets for different media types. You can specify different stylesheets depending on what media is being used. A simple addition of this code to your section:

<link rel=”stylesheet” href=”mobile.css” type=”text/css” media=”handheld”/>

would tell the mobile browser to access the mobile.css and use it for optimum page display on mobile phones.

More articles in this topic

Martell Noblige Cognac Shows Marketers How It Is Done

Talk about marketing and you will get differing opinions on what works and what is effective. We have seen a lot of success stories as far as marketing is concerned, and this one is no exception. Martell Noblige Cognac brought together different types of marketing to come up with its latest campaign. The theme for […]

Read more
QR Codes Help You Dispose of Garbage Properly

When it comes to the environment, we all have to pitch in. While it is best to minimize the amount of waste we produce, there is still garbage that we have to take care of. One of the best ways to dispose garbage is to segregate it. You can always sell recyclable materials such as […]

Read more
Keep Me Safe: QR Codes for Protecting Children with Autism

Parents of kids with autism have many fears. One of them is losing their kids as they wander off to some place they are not familiar with. QR codes have been helping parents with autistic kids. It is a fact that most kids with autism will wander and get lost with their parents. It happened […]

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*

ten − 10 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>