Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Lots Of Mobile Web Design Questions


  • Please log in to reply
4 replies to this topic

#1 Pookie

Pookie

    Unlurked Energy

  • Members
  • 5 posts

Posted 21 January 2010 - 10:28 PM

I'm looking for information about how to make a site mobile friendly in the best possible way. At the very least, it's past time that I learned to make a good mobile stylesheet!

I have questions and hunches to go with my lack of experience.

- Page load should be fast -- how lightweight is light enough?

- Relative widths (100%) or pixels?
- Are certain things more likely to give wonky results - floats, margins, whatever?

- How different are the various mobile browsers?
- How many of them are there that I should be testing for?
- Is there a list somewhere of their various quirks?
- Are displays different on different phones that use the same browser?
- How hard is it to make a design that works for all?

- Are visible skiplinks more important for mobiles?

- How is user behavior effected by the fact that real reading is a pain on a mobile?
- It makes sense to me that easy social media & email-it-to links would be important, to mark posts for later reading and take advantage of any viral properties the content may have. I usually put that stuff at the bottom of an article, but should these go higher up in the text for mobiles, maybe right under a blog post title?
- I think the same sort of thing may be true for ecommerce. Those who want to bookmark & view later should be able to do so easily. Those who have come back for purchase should be able to skip straight to "buy now."

- I'm guessing that people are more likely to get lost, because it's harder to see what's there. Maybe people who know the site from large screen would have an easier time getting around in a mobile version if it has a look and layout that is similar to the full size version.
- Any tips for accomplishing this with minimum page load and maximum readability?

I'm looking forward to your input.

#2 eKstreme

eKstreme

    Hall of Fame

  • 1000 Post Club
  • 3399 posts

Posted 22 January 2010 - 04:13 AM

[quote name='Pookie' post='303353' date='Jan 22 2010, 03:28 AM']
I'm looking for information about how to make a site mobile friendly in the best possible way. At the very least, it's past time that I learned to make a good mobile stylesheet!
[/quote]
Sorry to start off on a "tough love" note, but I bet it's not good yet. There are lots (lots!) of horrible details in mobile web dev, and what you think is good now is probably just OK and has a long way to go to becoming good.

As a tip, get Firefox and get the User Agent Switcher addon. Find Android's or the iPhone's user agents, add to them and switch to them, and then browse some famous mobile websites. To get you started:

m.guardian.co.uk
mobile.nytimes.com
mobile.osnews.com
m.en.wikipedia.org


[quote]
- Page load should be fast -- how lightweight is light enough?
[/quote]
Two considerations:
1. The absolute number of bytes transferred. You need to be as low as possible. Optimize images like mad. Compress CSS files. Browser-side caching helps here (if it's saved it's not retrieved again) so use a proper content delivery network (CDN) that has proper HTTP caching headers configured like E-Tags and expiry headers.

2. The number of DNS lookups and number of new connections needed. Every single item on the page that needs to retrieved separately will add a horrible delay. Horrible is the only word to use here because a new connection is expensive. So use sprites, merge multiple JS files into one, and anything needed to remove the need for a new lookup.

Here is a subtle tip: For a file size x, it is much faster to download one file that is 2x than to download two separate files that are x a piece in size.

[quote]
- Relative widths (100%) or pixels?
- Are certain things more likely to give wonky results - floats, margins, whatever?
[/quote]
Not pixels. Let the browser deal with the layout as much as possible, so no floats if you can avoid them. Think really hard about the page's content and how it can be unfolded linearly. That's what you're going for.
[quote]
- How different are the various mobile browsers?
[/quote]
Very different. Even browsers with similar code bases (Webkit is the most common on) but on different devices (iPhone, Android) can have different behaviors.
[quote]
- How many of them are there that I should be testing for?
[/quote]
As many as you can get your hands on, as many as you can afford, but don't kill your self. If you follow the layout tip above (think linearly), you'll be fine for the most part.
[quote]
- Are displays different on different phones that use the same browser?
[/quote]
Yes. Different screen resolutions, so different widths and heights, if that's what you meant. Android and Blackberry devices are good examples.
[quote]
- How hard is it to make a design that works for all?
[/quote]
Just follow the tips: Unfold content linearly, minimze downloads, minimize the use of JS and other funky stuff, and you'll be fine.
[quote]
- Are visible skiplinks more important for mobiles?
[/quote]
It's a balance between the amount of screen real-estate they use vs their utility. On a long page, yes, they're helpful. On other pages, maybe not so much.
[quote]
- How is user behavior effected by the fact that real reading is a pain on a mobile?
[/quote]
It's affected a lot. Some websites diable zooming (I'm looking at you freakin GMail, yes, you Google, and also the Guardian) so don't do that: different screen resolutions and different finger sizes make for very different interactions and reading behaviors.

Try this: Get a bunch of free eBook readers for your phone and try to read the same book on all of them. Look how vastly different the experiences are. It's eye popping.
[quote]
- It makes sense to me that easy social media & email-it-to links would be important, to mark posts for later reading and take advantage of any viral properties the content may have. I usually put that stuff at the bottom of an article, but should these go higher up in the text for mobiles, maybe right under a blog post title?
[/quote]
Again, screen real-estate vs utility. I can't give you any specific advice here, so test it. Run these links through a redirector and log which position is more used and other metrics. It may be that top-placed ones shorten the time on page because it annoys users that they have to scroll through yet more fluff to get to the content.
[quote]
- I'm guessing that people are more likely to get lost, because it's harder to see what's there. Maybe people who know the site from large screen would have an easier time getting around in a mobile version if it has a look and layout that is similar to the full size version.
[/quote]
That's why I gave you lots of mobile news sites. Look at their navigation :)

Hope this helps.

Pierre

#3 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9019 posts

Posted 22 January 2010 - 09:44 AM

Welcome to the Forums, Pookie. :wave:

I believe you may have phrased your question incorrectly. I believe you have to design a mobile website from the bottom up. It's not just taking your current website and making it mobile friendly. There is a huge difference in the amount of content that is suitable for a desktop PC resolution versus what works on a smartphone.

The issues you raise are the right ones to consider but as Pierre points out look at how the news sites are handling this. You'll find many other related issues in our forum on Cross-Browser Device Assessment Panel.

#4 Pookie

Pookie

    Unlurked Energy

  • Members
  • 5 posts

Posted 23 January 2010 - 07:05 PM

m.guardian.co.uk
mobile.nytimes.com
mobile.osnews.com
en.m.wikipedia.org

Interesting how very "small" changes can make a site look so different. I googled around for [mobile usability], [mobile (sitename) problem] and got a taste of the variety of problems that crop up on different phones. The one howl that sticks in memory most is a rant over a site that disabled zooming. People hate it when sites don't let them do what they need to do.

Thanks for a heads up on the Firefox User Agent Switcher addon.


I believe you have to design a mobile website from the bottom up.

I see what you mean. Super-optimized images and excerpts with links to "more" could be a better fit. A mobile stylesheet is not enough. I've also been googling around for redirect methods, but redirecting is only one step. There'd have to be a way to serve up content with a customized template.

Do you have any favorite WordPress plugins that help with mobile sites?

Edited by Pookie, 23 January 2010 - 07:07 PM.


#5 Pookie

Pookie

    Unlurked Energy

  • Members
  • 5 posts

Posted 27 January 2010 - 05:12 PM

I looked around for reviews of WordPress plugins that help with mobile sites, and found a few in the top ten SE results that have good, long lists.

7 Amazing Plugins to view your Wordpress Blog on any Mobile Device (iPhone, PDA…) is on an active site that has good techie articles, but it's a year and a half old.

10 Mobile Plugins for WordPress, September 9, 2009, is from a less active, less well-known site.

Top 10 mobile WordPress plugins is from the Summer of 09.

Should you use a Mobile WordPress Plugin? is also from the Summer of 09. It lists seven plugins and does a little bit of evaluation.

None of these do much in the way of comparing the plugins.

This one did some comparisons: WordPress Mobile Plugins - review of four plugins, with "an overview of how the plugin works and a screen shot of the plugin in the iPhone and Opera Mini Simulator." Much more useful!

I could be missing something, but this looks like an opportunity for WordPress niche bloggers. Someone needs write an extensive compare and contrast post with screenshots of what more of the various plugins do or don't do well, on more than two emulators. A list of emulators in the same post would be a good match for that sort of post's audience. It would rank, get inlinks, and provide opportunities to link to specific related topics in the same blog. Updating it on a regularly scheduled basis would seal the deal.

...................

I also found a Bookmarker for Mobile Websites. Is this a good idea?


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users