Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Being Really Mobile Friendly


  • Please log in to reply
8 replies to this topic

#1 bwelford

bwelford

    Peacekeeper Administrator

  • Admin - Top Level
  • 8995 posts

Posted 24 September 2011 - 12:58 PM

I have now had my new Samsung Galaxy Fascinate 3G Android phone for some weeks and I'm enjoying my new window on the world. What strikes me is the almost night and day difference between using the various 'phone functionalities versus checking out the Internet. Very few websites are really mobile friendly to the same level as the basic phone system. In particular my own websites were OK if you had really good vision but could not be rated as satisfactory. On my blogs, I used Wordpress WPTouch that allows you to see excerpts of what is on offer, but you're back to the normal view once you go to single articles.

I started a new blog using a child theme from the twentyeleven theme that Wordpress now promotes as the latest and best. I was really impressed with how mobile friendly the resultant is. In consequence I've switched all my blogs to child themes of twentyeleven and I'm pleased with the result.

I would be interested to have reactions to the above and to the actual newly themed blogs. If you can dip in and check with mobile devices other than Android, that would be useful too.

The blogs are
http://www.bpwrap.com
http://www.otherbb.com
http://www.staygolinks.com
http://www.seniormoneymemos.com
http://www.seniorhealthmemos.com

I have only one major concern at the moment but will raise that in a separate thread.

#2 AbleReach

AbleReach

    Peacekeeper Administrator

  • Admin - Top Level
  • 6457 posts

Posted 24 September 2011 - 06:17 PM

I designed this theme for my mom's braille transcription business: http://cmbrailleservices.com/

Compare with the original Twentyeleven demo site.

Right now, it's still an edited twentyeleven. I haven't moved it over to its own theme, yet. I'll be tinkering with functions.php to allow for a sidebar on all pages. Probably the only individual templates I'll need to edit are header.php and footer.php - maybe not the footer.

I *love* the way you can re-size all the way down to iphone width and still have a good looking layout. It took a little tinkering with the responsive structure part of the CSS. Totally worth it. This sort of thing has been possible for a while. The combo of having it in a WordPress default theme and the gradual updating of browsers will help it take off.

At a first, when I looked at Twentyeleven I saw design details that I wasn't crazy about. Poking around inside has been a great learning experience. There are a bunch of neat little css treats worked in there to investigate and make your own.

#3 DCrx

DCrx

    Hall of Fame

  • 1000 Post Club
  • 1270 posts

Posted 24 September 2011 - 07:08 PM

A really frienndly mobile verion wouldn't be a rehash.

Mobile users are more task driven. RIAs, one page destinations, listings. Think Reader's Digest version.

It simply isn't realistic to lean on layout to do what shouldn't be done in the first place. That's gimmick thinking. Strip out the whole site, rethink it, and redeliver a mobile version that treats the mobile user differently from the redular user.

Do not strive to replicate the desktop version via mobile. That's fashionable now. Force fitting your desktop browser website to a mobile user won't last.

Edited by DCrx, 24 September 2011 - 07:12 PM.


#4 AbleReach

AbleReach

    Peacekeeper Administrator

  • Admin - Top Level
  • 6457 posts

Posted 24 September 2011 - 07:43 PM

Responsive CSS seems like a great first step to me. I'll be gradually incorporating it into all of my sites. I think it should be a baseline for all desktop-sized views.

DCRX, would you host a separate version at a .mobi destination? Maybe give users the choice? Or automagically send them to the most likely version?

This Adobe video about media querries is pretty neat. Granted, we're still talking about resizing the same design, but once the items to be re-sized are identified, they can be addressed with device-specific information later.

#5 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 24 September 2011 - 09:27 PM

Elizabeth, there is a good number of WP plugins that can show a different theme to a mobile visitor. At first, I thought this wasn't necessary, if the blog uses teasers on the main homepage, but more functional websites could probably use them, I'd imagine. In fact, this kind of experience that DCrx described is what responsive mobile design tries to achieve.

#6 DCrx

DCrx

    Hall of Fame

  • 1000 Post Club
  • 1270 posts

Posted 25 September 2011 - 08:56 AM

DCRX, would you host a separate version at a .mobi destination? Maybe give users the choice? Or automagically send them to the most likely version?



It would depend first on knowing the mobile user goals.

Could be the .com would be a content site, the .mobi would be better as an RIA. That would fit what I'm talking about.

And futher, the .com might be for prospects, while the better route for the mobile version to take would be to cater specifically to customers. Now that makes some sense.

A mobile user could realistically want, for instance, to check order status. ...from a mobile office. ...out in the flield. ...while somebody who needs the information is on hold. Providing a instant way to do that -- conceivably even to the point of not having to log in -- serves the user ...not the browser.

One more time, try putting the user into the picture and things change. It's not just a browser on a cell phone to force fit the site into.

Browsers are not going to your site, disconnected from any human presence or motivation. A lot of these kind of discussions surgically remove any notion of what's going on with the user that they're looking at your site with a mobile -- when they have a desktop or laptop as well.

Simple rule-of-thumb: No user. No UI.

Sorry to say, but no sane person visits a site just to see if it looks the same on their iPhone as it does on their desktop. Yet that is the alpha and omega of discussion.

Being browser friendly can mean the mobile user is left out of the discussion. ...Which is really unfriendly. Start testing for user compatibility and the browser compatibility will follow.

Edited by DCrx, 25 September 2011 - 09:36 AM.


#7 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 27 September 2011 - 09:53 AM

Barry, just now I've checked staygolinks at a very narrow screen width (around 250-300px) in desktop Opera and I've noticed that:
- your slogan width is larger, than what words need
- your ads don't decrease in width
- the Facebook button text doesn't wrap, too.

Edited by A.N.Onym, 27 September 2011 - 09:54 AM.


#8 jonbey

jonbey

    Eyes Like Hawk Moderator

  • Moderators
  • 4291 posts

Posted 27 September 2011 - 01:19 PM

Never tried WP Touch. I use WordPress Mobile Edition plugin with the Carrington Mobile theme and everything is in a mobile format, no hopping from excerpts to desktop pages.

And that reminds me, I need to make some changes.....

For mine the site is different really, the homepage is a list of latest posts, like most blogs are. Menu still cat links but all trimmed down to the basics. Logo more like a favicon (but not) than the main site logo.

Edit - ignore that, homepage is now a Page and shows same, I had forgotten about that!

Not touched it in over a year, really needs updating ....

Edited by jonbey, 27 September 2011 - 01:21 PM.


#9 bwelford

bwelford

    Peacekeeper Administrator

  • Admin - Top Level
  • 8995 posts

Posted 27 September 2011 - 03:07 PM

Hi, Yura. That small-width Opera rendering looks very similar to what you get on my Android phone. However the slogan and the Facebook buttons do fit within the screen, whereas the Google banner Adsense ad is too wide as with Opera.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users