Hi all,
Just taken a look at the mobile site at http://bigfishclothing.co.uk/. I’m a newbie when it comes to this - how have they done it?
Thanks for any tips.
Richard
Can you be more specific? All I’m seeing here is a crappy fixed width layout that doesn’t adapt to any of the small screen devices I have. In fact that fat bloated slow mess is EXACTLY the type of thing I’m always talking about when it comes to buggy broken/useless inaccessible websites. From the broken fixed width, bandwidth hogging gee ain’t it neat scripted crap, to the use of px metric fonts on EVERYTHING – laundry list of how NOT to build a website and the “But I can do it in Photoshop” nonsense that’s been making the Internet less useful than it was a decade ago.
I’m not seeing it rendering at all useful in Opera Mobile, Opera Mini, on a iPod touch; it’s just the same useless fixed width garbage I’m saddled with on desktop class machines; which is to say useless on the netbook too.
Mobile version? What are you using that’s showing a mobile version? I’m not seeing it.
It looks cool on my device - but obviously you’ll know more on the topic than me.
I’m unsure of how to create a mobile website, using the same content from the main website. Is it basically a separate stylesheet? How do you determine the width of the device and display the site correctly (in this case, they haven’t).
Richard
what ‘device’ would that be – it’s hard to relate without a frame of reference.
IDEALLY when marking up the page you use semantic markup with obvious containers, then you can use CSS3 media queries to add/remove/refactor the layout for each potential target… with maybe some .js as a fallback, though I really stopped doing that.
That’s really what you want to look into is CSS3 media queries – some people advocate mobile first then building it up, but that falls apart on legacy desktops that don’t know media queries giving IE8/lower users a really crappy narrow stripe. I prefer to make a semi-fluid desktop layout first, then use media queries to strip away the stuff that doesn’t fit. Older handhelds that don’t know media queries typically are used to dealing with people making desktop only layouts anyways as that’s what they’ve always had to deal with.
Though a LOT of the crap people put on websites – like the massive banners for nothing, idiotic image rotators, equal width columns – all shoe-horn you into a fixed width layout in the first place; which on the whole is pissing on accessibility and destroying your chances of even targeting multiple devices in the first place. Fixed width == /FAIL/ at web design, anyone telling you otherwise is probably thinking “But I can do it in photoshop”.
I’m using a HTC Desire. I see what you mean about the bloat - the footer image is 600+kb. Nice.
I took a look on my iPhone and it seems like a normal mobile template. There is some HTML5 animation going on. You need to master the basics and you can easily make one of these mobile sites.
Wow! This really is fantastic! I had tried one of the tips here but it didn’t work for me unfortunately. Can this be elaborated?
@Mae Rose, which tip did you try?