HOLE WORLD: About Web Design / HTML: How Important is Mobile Design?

If you can't see this email, click here

Web Design / HTML

Web Design / HTML

Design Basics

Learn HTML CSS XML

Careers

From Jennifer Kyrnin, your Guide to Web Design / HTML

It seems like every day I'm reading another article talking about how mobile is taking over web usage. More and more people are viewing websites with mobile devices--phones, tablets, ereaders, etc. By one measure, this implies that mobile design is critical. After all, if more people are viewing pages on mobile devices, shouldn't we be designing our pages for them? But what does designing for mobile really mean? This week I take a look at design for mobile and discuss some of the things you should and shouldn't do when considering your mobile device using customers.

Basic Rules for Mobile Friendly Web Pages

The number one thing most people think of when thinking of mobile design is the screen size. After all, mobile devices are small compared to the large monitors most people use these days. But there are a number of things you want to think about when designing for mobile, not just screen real estate.

Compliated HTML--Things like frames and Java are not always supported on mobile devices. Sticking with basic HTML and CSS is a good rule of thumb
Large images--Even on the 4G networks, downloading web pages is slow over a cellphone connection, and so images should be optimized for speed so that they don't slow down the whole page. But not just file size needs to be small. You should also consider adjusting the dimensions of your images so that they better fit on mobile devices.
Don't limit the content--The same people who visit your site from computers and laptops visit your site from tablets and smarktphones, and they want the same content. It used to be very popular to give mobile users a sub-set of the site content, but that just drove them away to other sites. Let mobile users see your whole site.

Search Related Topics: mobile web design palmtops wml

Pros and Cons of Building a Mobile Friendly Site

I almost never create a separate mobile site for my websites these days. The time, cost, and effort required doesn't make sense. Instead, I rely on features like responsive design, like I talked about last week, to create designs using the same content, the same page itself, and just displaying it differently depending upon what browser or device was viewing it.

In fact, I first became disenchanted by mobile pages when I viewed a site I used to read all the time on my iPad. They had an automatic mobile design that detected my iPad and forced me to use it. I couldn't switch to the desktop design. This might have been okay, except that the design had a couple of fatal flaws:

It displayed the content in a narrow window, as if I were viewing it on a smartphone, even when I had my iPad in landscape mode. This was annoying and a stupid mistake on the developer's part. But not as annoying as,
The content was limited to only the last 10 posts on the site. As a mobile user, I was not allowed to view anything older than one of the last 10 posts. If I tried (by, say, typing in a URL) I would be redirected to their mobile home page. From a management standpoint, I guess it made sense, but to me as the customer, I would get extremely annoyed. The worst was when I was reading a post that was one of the 10 most recent, then I clicked away to read another post, clicked back and the post had been removed from the mobile site! I couldn't even finish the article I was in the middle of.

I now try very hard to treat my mobile customers just like I would any other customer. They are not second class citizens viewing my pages on a toy browser, they are my customers and they want the content or products my websites provide them. So that's what I give them.

Search Related Topics: mobile web design cell phone web design tablet web design

More Help Building Mobile Pages

But even though I don't treat my mobile customers as second-class, I do recognize that some design concessions need to be made to allow them to view my pages more effectively. For example, lots of links close together can be very difficult to tap on an iPhone, especially for those of us with fat fingers. :-)

The following links should help you create mobile and smaller-screen designs in your responsive design scenario that work better for mobile customers.