Don't Let Your Menu Take Over
On This Page:
The CSS3 Media Queries Module is fast becoming the love of the 'modern web designer'. It's great, I love it. It's fantastic what you can do these days whilst creating a website compared to the nested tables I was dealing with when I first started out.
But there's a problem, only a slight problem but one that is increasingly annoying me (hence this little rant).
The iPhone is an excellant device, it's advanced web design for mobile devices at a phenomanal pace (I can remember attempting to build a WAP site, once). With the iPhone (there are other devices available) you get 320px by 480px of 'screen real estate' to play with.
My gripe/moan/rant?
A lot of you are filling this space with your navigation!
I use my iPhone everyday, almost too much. As my real world job is nothing to do with web design and is two miles up a farm track near the back of beyond I access the internet, twitter, ebay and my RSS via my iPhone as that's the only access I have for at least 9 hours of the day.
When I visit a website, I don't mind if it doesn't use CSS3 Media Queries, hey it's only just started to get implemented. I've got my fingers so I can pinch and zoom to my hearts content, but if your site uses CSS3 Media Queries please don't show me a whole screen of your navigation to start with.
I know that screen size is small, I know that you think it looks good but honestly it doesn't have to be that big, you're not designing a Fisher Price 'My First Website'. The Apple Human Interface Guidelines suggest an optimum size of 44px by 44px for a tappable area. That's not 44px high by 320px wide that's a 44px by 44px square. I know you're probaly saying to yourself that you can't fit the links in that space, I agree, but you can fit more than one link in a line on a screen size that has a width of 320px or more.
So please, be a bit careful when using Media Queries so that your site adapts to the browser window. I don't need a screen of navigation, I don't know what's on the rest of your homepage yet.
