Website Designing For Touchscreens

Back in the Bad Old Days of the Browser wars, you had to design your web site for two or three browsers because some followed standards more closely than others. These days we still have to maintain a separate mobile site or CSS – and, increasingly, we have to take touchscreens into account. Whether or not tablet computing continues its meteoric rise or not, one things appears certain: Touchscreens are the wave of the future, and sooner or later (an it ought to be sooner) you’ll have to accommodate the paradigm into your web design .

Touchscreens Ain’t Mouses

Content is king for Website Design

Website Designing For Touchscreens

It might seem simplistic, but the most important thing to remember about touchscreens is that they are not mouse-and-keyboard interfaces. The venerable mouse is a fairly accurate way to move a pointer around screen space, and the pointer itself shows the user precisely what pixel they are currently resting on. Say whatever you will about the QWERTY keyboard, it’s time-tested and just about everyone in the world can use it fairly effectively without any training. The touchscreen uses your finger, the least accurate pointing device in the known universe save using your foot, and the keyboards on most touchscreens (at least until touchscreen desktops take off) are designed for elves. When figuring out your website design for touchscreens, there are some basic tenets to keep in mind.

Touchscreen Design Basics

Sizing. The most important aspect of touchscreen web design is the fat fingers that will be used to navigate your site. You have to give The Worst Pointing Device in the Universe a lot of space for tap areas, buttons, and swipe points, or it’s going to be a frustrating experience for your user. This is especially important for text links. If you can go without any text links at all, all the better. But if you must have some, make sure the tap space around them is generous.

Swiping. Remember, people are using the Worst Pointing Device in the Universe, their finger. Using your finger makes a lot of standard interface stuff difficult on a touchscreen; what works well is swipeable content that can be quickly scrolled through. Make sure your swipeables are big and bold, with plenty of screen real estate for dragging.

Forms. Forms are necessary in a lot of website design because it’s still the only way to get some information from your users. But forms are bad enough on desktops; on touchscreens they can be a nightmare. Make sure your form fields are big enough for the Worst Pointing Device in the Universe, and make their use as convenient as possible by pulling whatever information you can automatically from the device or the GPS, and make sure forms retain error-state info so the user doesn’t have to start over if they make one small mistake.

Content That Works For Your Website

Recently, CERN celebrated 20 years of the free, open World Wide Web by re-posting the very first web page (you can see it in all it’s terrible non-glory here: http://info.cern.ch/hypertext/WWW/TheProject.html). One glance shows you why the WWW took off so quickly: This was something just about anyone could do. If you learned about a dozen HTML tags and had server space, you could code your own web page. And for a long time that’s how it was done: You hand-crafted HTML, uploaded the file, and you had a web page.

Content is king for Website Design

Content that works for your website

Time marches on, and today web pages are complex beasts. And the longer your web site’s been up and running, the more complex it is. And if your web site actually started out as a collection of hand-coded static pages like that, but today looks at least superficially like an awesome CMS-run example of great website design, then chances are you have a lot of content buried there. Like an iceberg: Most people will only see the newest stuff poking up over the water line. Underneath? A metric ton of content that may or may not work with your current web design  and CMS.

Content Auditing

You shouldn’t throw away that content. Okay, maybe you should throw away some of it. But instead of thinking in terms of what to delete in order to make your site work better, why not think instead about how to make your content work with your design? That starting point is always going to be a Content Audit.

A Content Audit is simple in concept and complex in execution. You have to drill down deep into your iceberg and take those core samples, and build a model of your content. What kind of content is it? What are the features? What do your users get from it? Once you can answer these questions clearly, then you can set about Step Two, which is creating a website design around your content based on the way your content displays and is used.

The Hard Stuff

Now, of course, comes the difficult part: Restructuring your content. Making everything consistent is a mountain, especially if your content dates back to early days, but the reward is huge, because you’ll end up with a sleek, fast web site where all of your content is available. And that’s important because your older content is likely still valuable. Certainly some of it may be dated, or in need of a modern revision, but some of it is probably perfectly good, and you put a lot of effort into creating it. The effort of making it work with a consistent design will bring you rewards in the form of attracting more search results and more engagement with your users.

You spent the effort to create this content, it deserves a better fate than being rendered in a choppy, ugly fashion by a CSS that it was never intended to run through. Save your content from this terrible experience and restructure it for the modern day!

On-Site and Off-Site Dusting For SEO Benefits

Running a web site is like having a big walk-in closet in your house. When you first moved in, you bought some closet-organising kits and made your closet into a thing of beauty: Clean and efficient.

On-Site and Off-Site Dusting For SEO Benefits

On-Site and Off-Site Dusting For SEO Benefits

And then … you let things get out of hand. Hangers are on the floor. The paint’s been scuffed. Clothes are piled up everywhere and there’s a thick layer of dust on top of everything. What was once a shining example of closet mastery is now just a place where stuff sits.

Benefits of Site Dusting

If you haven’t performed an on- and off-site dusting recently, that closet is your web site. No matter how great your web design is to begin with,
you need to perform some basic yearly maintenance to make sure your
site is performing at peak efficiency.

An on- and off-site dusting will speed up your site, make it more reliable, improve your SEO performance, and raise your overall profile in your field. There are few more effective actions that are as simple and easy to implement as a thorough dusting.

On-Site Dusting How To

For your site, there are four aspects to consider -

Authorship – Google now allows you to link directly back to a Google+ account so that links to your content display a verifiable identity for your content. This is an absolute must, as people are much more likely to click on links that have been verified as being generated by real people.

Broken Links – Over time some links will get broken, it can’t be helped. A site dusting should always include a thorough search for broken links, using the free tools that either Google or Bing offer.

Metadata and Design – You’re running SEO tools on your site, now’s the time to review everything from your designated keywords to whether all the pages on your site are being effectively indexed by search engines. This is also a great time to consider whether you need to refresh your website design. If your site was clean and cutting edge two years ago, is it still?

New Linking – Does a Google +1 button appear next to your posts? Is there a Pinterest button so people can pin your content easily? Time moves fast on the Internet, and if you built your site a few years ago you need to make sure you’ve kept up.

Off-Site Dusting

There are two important things you have to do outside of your site, as well:

Raise Your Profile – When was the last time you did a Blog Tour or posted some guest posts on other popular Blogs? Get out there and get outside your established comfort zone.

Socialise – Author ranking at Google hasn’t happened yet – but it will, and when it does it’s going to take into account not just your content and activity, but how often you comment on other people’s posts and content. So get out there and start making it your business to connect as often as possible.

Responsive Web Design – For the Multi-Screen World

The rise in mobile web usage has brought the Responsive Website Design phenomenon into limelight. This infographic explains what responsive web design is all about and uses statistics to support the idea that it is a better alternative to dedicated mobile websites. This infographic explains the need to move towards a Responsive Web Design to prepare your business for future.

Responsive Web Design - For the Multi-Screen World

Responsive Web Design – For the Multi-Screen World

The Advantages of Mobile Websites

We’ve seen it all. After working with so many clients on so many websites, it would be surprising if we hadn’t. But we can still be surprised – like when new clients tell us they’re not concerned about optimising their site for mobile platforms. Usually this is because they think that just because smartphones and tablets have web browsers built in, their site is accessible and that’s all that’s required. We try very hard to keep our faces blank when this sort of thing comes up, because it’s tragically wrong.

Mobile Friendly Website Design VS normal web design

Mobile Friendly Website Design VS normal Web Design

Almost half of all Americans routinely search the web and access websites from mobile devices, and this number is rising at an incredible pace. And most non-optimised websites look absolutely awful on a tiny smartphone screen, in a built-in browser that has none of the bells and whistles of standard desktop browsers – the web design is just all wrong. The end result? A muddled mess that people make a face at and back out of, going to the next site in the search results until they find one that loads crisply, neatly, and usefully on their device.

Why should you have a mobile-optimised version of your website? We could go on, but here are just a few of the most important considerations:

Don’t Waste Your Marketing

You’re paying good money and putting a lot of effort into search engine optimisation, pay-per-click campaigns, and your Google Local listing – just for starters. And it’s working! Your site comes up in the first rank of search results, often in the top spot. All that hard work and money paying off. Except, when they tap on the link, the website that comes up is chaotic, requiring a lot of scanning around with their finger on the screen, the text too small to read and the links difficult to hit.

We once had a dentistry practice as a client. The three partners were all great people we enjoyed working with. We did website design for them, and it was a work of art, and they were very happy. We tried to convince them that they needed a mobile-optimised site as well, but they disagreed – no one made dentist appointments while running for the bus, they argued. A few weeks later, we sent them some analytics that showed some very discouraging numbers – people were finding their site via mobile searches, but weren’t clicking past the home page. No interaction at all. The culprit? Not having a mobile site.

Concentrate on Your Customers

The people who are finding your sight via mobile searches are either your existing customers looking for convenience and service, or potential customers you would like to convert. Your website should serve them. It should serve them through smart and customer-oriented web design, and it should serve them by making all aspects of your business convenient for them to use.

Our dentist’s office found that the main thing their patients wanted from a mobile site was the ability to make and change appointments, instead of having to call in every time, and a way to easily contact their dentist. They wanted to be empowered and connected. After our analytics convince the three partners that they need a mobile website, we got to work, and created a clean, elegant mobile site that offered their patients easy access to information, appointment widgets, and easy contact forms. And business thrived. The mobile site was also a lot faster to download on expensive data plans, which their patients really appreciated.

Grab Every Opportunity

website design on different devices

Website Design on Different Devices

You might not think that people look for your type of business while out and about – but they do. There were more than half a million location-based searches in 2012, and this number is growing constantly. In today’s day and age people are looking to make every moment of their day count, and often this means locating a business near them when it’s convenient. The right web design for mobile platforms can be the difference between them finding your business or finding someone else’s.

Our dentists learned this the day a woman booked a morning appointment through their new mobile site and arrived breathless, dressed for work, and told them she’d been on the bus heading to her office when a filling had worked loose. She’d found them using a local search and made the appointment on her phone, and they had her in the office within the hour, happy and contemplating switching dentists.

We can’t guarantee that new business will magically appear if you create a mobile-optimised version of your site. But we can guarantee it won’t if you don’t.