Good mobile websites (and tutorials)?

Discussion in 'Web Design' started by Nick1, Feb 5, 2012.

  1. Nick1

    Nick1 Junior Member

    Oct 16, 2009
    Likes Received:
    Hey guys,

    I'm just trying to get into this mobile website biz. I have a tiny bit of experience around the "normal" web design (read: Ok, I played around javascript, PHP, Google maps,wordpress and HTML a bit, but stayed well away from Dreamweaver and CSS/all this shit), but I'm really loathe to get a smartphone so I haven't been up to date with the lastest "geek" trends.

    Question #1: What examples would you uphold as good websites?
    Question #2: In what respect do mobile websites differ from "normal ones"? What general

    (on top of my head, I can think of: lower resolution, no fancy javascript or flash to accomodate older/non-smartphone /legacy phones, what else?)

    Still, if I could just be lazy and do a wordpress mobile website, I'd be happy too.:D
    Last edited: Feb 5, 2012
  2. olystyle

    olystyle Regular Member

    Jan 6, 2012
    Likes Received:
    Hi Nick

    I will try to answer your questions:

    As for Question #1:

    In my opinion - excellent examples for mobile ready websites are G***le, Facebook, Amazon, Diesel (Jeans Brand), Flickr and Twitter

    As for Question #2:

    As you correctly pointed out: The most visible difference is the lower resolution of mobile devices ? considering the amount of
    different screen sizes its pretty tricky to provide every user with the appropriate resolution / matching the one from his device.
    It gets even more complicated when you want to meet the expectation of all users who have a device containing a gravity sensor
    and are used to change the orientation of the screen when turning it from vertical to horizontal (example: eiphone).

    Another thing one should consider when creating a mobile website is its size / pageload time: they should be as short as possible!!
    You should keep the size of each page below 100K (Take this value just as a guideline - can of course be bigger).
    One reason for this size is that you cannot compare the bandwith which you use to browse the web from home to the bandwith
    of a moblie connectivity. Another reason is that not all users have a data flatrate and are keen to keep their traffic low.
    So keep in mind to think small when designing a website for mobile devices.

    I can completely follow your tought that one shouldn't use technology which isn't supported from all mobile devices such as
    you correctly mentioned: Flash (They were developing a mobile version of Flash but stopped it in favor of HTML5)
    I highly doubt that flash will ever work on all/most mobile devices.
    But actionscript/javascript, Jquery, AJAX, java and HTML5 are supported by most (not all - but certainly by the majority )
    mobile devices ( wich is +5000 ) and can be used (with care... always keep the pageload in mind).
    Concerning pop-ups and pop-unders on mobile websites - you will have to bid goodbye to these...

    Even when it may sound strange pointing it out ? if the users has to scroll make em scroll in only one direction
    and use short descriptive titles (imagine how fucked up a title looks going over severel lines) to support readability as well bookmarking.

    Side note: Not pretty well known but big G. has a separate index for mobile content - needless to say that its still pretty empty
    compared to the vast "regular" index. Thus ranking a mobile website in the topspot is fairly easier than ranking a regular site in the topspot.

    But lucky enough for everyone who doesnt want to go through the trouble of creating a mobile website from scratch.
    There are a lot of wordpress themes with built in mobile support (most call it responsive) - my favorite is the theme iFeature
    its built using parts of HTML5 and CSS3 (you should stay on guard with HTML5 and CSS3 since there are still a lot people who
    use old versions of IE, Firefox, Opera... which don't support that technology).

    Another solution is to make use of the almost classical plugin WPtouch and turn your regular website into a mobile ready one.
    There is also a paid version of that plugin called WPtouch Pro with additional features but i haven't tried it yet.

    Hope i was able to help you

    Cheers olystyle
    • Thanks Thanks x 1
  3. EvilEmperor

    EvilEmperor Regular Member

    Sep 5, 2011
    Likes Received:
    Wheeler and Dealer
    Right now in the virtual landscape
    WPTouch is good but I still can't figure out how to embed the thumbnails when the mobile site loads. Anyone know how to do this? It still comes out as empty boxes even when I add the featured image on the wordpress post.