Site   Web

September 4, 2012

5 Essentials for a Mobile-Friendly Website — A SPN Exclusive

spn_exclusive1

“Come 2014, there will be at least one billion mobile payment users around the world.” These are the findings of a study undertaken by IE Market research. Given these stratospheric statistics, it is safe to say that at least some of your current website users are visiting on their mobile phones. Subject them to the torturous navigation of a desktop version using their iPhones or Androids and you can be certain of one thing – they will leave. And never come back.

The world of technology is rapidly evolving, so much so that what was relevant yesterday is often obsolete today. It therefore pays to be as informed (and flexible) as possible when developing your site. Here we’ll look at some absolute essentials that need to be implemented on-site to ensure that your mobile visitors don’t head out the door immediately after arriving.

5 Basics – Get These Right First

Create a Mobile Sub-Domain

The first step in becoming mobile friendly is providing a separate mobile-friendly website. It’s just not wise to try serve both desktop and mobile users on one site. Create a subdomain (generally something like m.yoursite.com) and install a detection and redirection script (there are many options to choose from) on your desktop version to ensure that mobile visitors are automatically sent (or at least given the option to go) to your mobile site.

Create a Smart Navigation

The second thing you should do is to create a smart navigation. What this means is generating a clean and unobtrusive navigation for your website by considering the practical implications for a mobile user:

* Are the key areas of the website easy to access using big buttons (or is it more likely that a mobile user is going to hit another button by mistake?)

* Are important pages prioritized and other de-prioritized? It’s unlikely that mobile users are that interested in your privacy policy or community initiative. Get them out of the way and make buying/inquiring easier for the mobile user.

Basically, you need to offer visitors distinct and clear methods for getting to your most essential content.

Write Clear, Concise Content

Next on the agenda is content. Ensure that your writing is clear, concise and to the point. Now more than ever, you will want to seize the reader’s attention right away. Ensure you have persuasive headlines which enable readers to know what they are going to experience. Content should also be unique, original and informative. Get to the point and initiate a call to action as quickly as possible. As far as mobile copy is concerned, less is definitely more.

Scrap the JavaScript and Flash

The fourth essential is to avoid all JavaScript and Flash. All justifications aside concerning the significance (and aesthetic appeal) of Flash, it is typically a safe wager that not all cellular devices can support both of these technologies. The ideal practice would be to maintain plain HTML standards for your mobile website. Remember that you’d rather have a user see a slightly less “exciting” page than no page at all.

Mobile Preview

The last step is always to run your website through W3C Mobile to ensure compatibility across web browsers and devices. Be sure to dig as deep as possible and not just settle for a simple homepage check. The last thing you want is a poor conversion rate caused by a dysfunctional contact page script.

Wrapping Up

Whether we like it or not, the fact is that more and more users are accessing the web via mobile, and we as marketers need to adapt to this. The mobile space is incredibly dynamic and ever-evolving, and as such it really does pay to stay informed and up-to-date with mobile web development, or partner with someone who does.


Derek Jansen is the Search & Social Director at Sekari Dubai, specializing in both SEO and social optimization.

19 Responses to “5 Essentials for a Mobile-Friendly Website — A SPN Exclusive

    avatar Paul Tebbutt says:

    Why is it not a good idea to serve both desktop and mobile on the same site? You mention it, but do not offer a reason why. . . .

    Google prefers this!
    Sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device.
    This is Google’s recommended configuration.

    A responsive site would cover all aspects and it is less work.

    avatar Jake Burdess says:

    Hi Derek,

    Thanks for posting, though I would have to disagree with a few points you make…

    1. Maintaining a separate site on a subdomain is in my mind both an arduous task (in that as a separate installation), could be detrimental to SEO efforts (if there is a lot of duplicate content) and is clumsy in terms of navigation (unless you are using media queries to direct different users to different subdomains). And what of those resolutions you didn’t address with the mobile site: you made one that looks fine at 320px wide, but what about all the other device widths, including tablets? that’s a lot of subdomains and sites to create and maintain.

    2. With the advent of all the great resources you can find for creating and testing responsive layouts these days, I would say that your suggestion that “It’s just not wise to try serve both desktop and mobile users on one site” is no longer true: on the contrary, as more and more users move to mobile devices, shouldn’t we start thinking narrow to wide, rather than the opposite?

    3. While your suggestion that all Flash should be ditched is definitely sound advice, I would wholeheartedly disagree with applying the same logic to JavaScript. Most JavaScript libraries are compatible with mobile devices (and vice versa) and help hugely in creating interaction and enhancing UX on websites and mobile apps. Also, your advice to “install a detection and redirection script on your desktop version to ensure that mobile visitors are automatically sent to your mobile site” seems kind of contrary to this suggestion…

    In short, you may find it useful to embrace the responsive web design world – it’s really not that complex, particularly with solutions like Zurb Foundation and Twitter Bootstrap out there.

    Good luck!

    avatar Tom Shivers says:

    Nice post Derek, I agree with lots of this. What’s missing is how responsive web design is superior to creating a separate mobile site. Just my two cents.

    avatar Website Design Leicester says:

    Hi, I enjoyed your article on Mobile friendly website design. As more and more people are using mobile phones & tablets – it is paramount to get website designers and developers optimising their websites for these devices. We develop Joomla websites for clients – and agree that it is easy to include all of the ‘Bells and Whistles’ of Flash & Java script plugins on the main website – but forget that these do not transfer well to mobile web platforms. Sometimes keeping things in a simple format like HTML works best across all web platforms – or alternatively developing & designing a separate mobile friendly website – which is located on the web server.

    Hi Derek, thanks for the article. It’s only quite recently that I’ve been making efforts to create sites that are mobile friendly. I wondered why you suggest putting mobile sites on a subdomain as opposed to a sub directory and which devices do you redirect to your mobile sites?

    Also, when you are designing a website to be tablet friendly, what is the max resolution you use. I just created a site 1000px wide and used the Android SDK to help test. Just interested in what people use.

    Thanks!

    avatar Jerry says:

    I am in the process of completely redesigning our firm’s website. I just about have it complete. Where do I find an example of a detection and redirection script? Wouldn’t it have to be javascript, the very thing that you suggest is unwise? Also, I am interested in the question about why not just use a sub-directory as opposed to a sub-domain?

    Thanks for the suggestions…

    avatar Barb says:

    Great article with good info, but putting a mobile site on a subdomain you would need to re-write your content or you run the risk of duplicating it. In addition, I read some time ago that the use of subdomains is ill advised.

    I would be interested to know the real percentages of people accessing sites from their desk top as opposed to using their phones.

    avatar Steve Randall says:

    Or you could always get a .tel tld.

    avatar Pamela says:

    Great post, it is a real issue that needs some developer focus.

    @Jerry, @Barb

    Personally, my feeling is to go with a subdirectory because your main site is likely to already have better reputation in the eyes of the search engines and so your mobile site can use that. If it is on a sub directory then it is seen as a separate site which means you are starting from scratch SEO-wise and need to work harder to build that reputation with the search engines. Also, when you develop links to your main site, these are also helping your mobile site if it is a subdirectory.

    @Jerry, you can check out http://detectmobilebrowsers.com. This site has a number of methods you can use.

    I have used the following in the past:


    //

    NOTE: You need to customize and test for your needs!

    Hope that helps.

    Sorry… can’t seem to get this right. Must be too late for me..

    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { document.location = "http://www.yourwebsite.com/mobile/"; }

    Put this in javascript tags in the HEAD of your page.

    (Crossing my fingers that this post works. Apologies for the multiple posts – can someone edit the others?)

    avatar jual mobil says:

    many factors like the format and the mobile screen resolutions for created mobile website.

    avatar Derek Jansen says:

    Hi All

    Thanks for diving in and all the comments you’ve left – it’s great to see some discussion and constructive disagreement around this topic!

    On the note of subdomain use:

    This is just a personal preference which allows maximum flexibility from a content and SEO perspective. Yes, it is more work and does have its disadvantages (as does any solution), but (for me at least), its great to have a separate site which you can target different keywords (mobile focused).

    Thanks for all the feedback guys!

    avatar samuel says:

    I design html5 pages. I do not need to do anything for tablets, but mobile, I think it’s more interesting to create a subdomain when it has a resolution of 640 pixels or less.
    I guess that’s what you mean when you talk about subdomain.

    For javascript, I do not know what to say, because I think that it is necessary for the contact page and is implemented well, for calls, SMS messages, contact via your social networks … jQuery and HTML5 are highly complementary

    For Flash, totally agree

    For SEO, it is not difficult to treat the mobile web with different keywords and texts and other resolutions as laptops, PCs, tablets with a single site is easy. If you think for one can think for 2. We have to remember that the mobile site should be fast, fun and call to action.

    And the mobile screen resolutions tend more to the tablet format to mobile format 320 pixels or less. I think that

    I will translate your article for the Spanish public

    Sorry for my english

    avatar Edwin says:

    Interesting post! I agree with the others that putting mobile site in a subdomain requires more work that’s why I prefer HTML5 for responsive web design. Less work and you don’t have to maintain separate websites for desktops and mobile devices.

    I need information for make mobile in the blogspot.

    I just couldn’t leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. Cara Membersihkan Ginjal Secara Alami Dengan Cepat Dan Mudah

    avatar Mark says:

    Nice post share I guess, well we must use a mobile friendly version of our blogs.

Submit a Comment

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






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

Please leave these two fields as-is:

Protected by Invisible Defender. Showed 403 to 5,493,653 bad guys.

css.php