PC desktops might started to become an unfamiliar word. Laptop, tablet and mobile is to head the coming years. Mobile web, back then we called it as WAP site. But now, the mobile web become, somehow standard web, there shouldn’t be any more mobile version and web version, they both works well in all devices (currently checked: iPad, iPhone, Opera Mini, Symbian Browser). At least in my opinion. I’ve been playing with some devices and research recently to get more understanding on how it works.
Responsive web design become quite common nowadays, any site can easily become responsive, just a few code. I am strongly agree to apply that in all website I developed possible.
There are of cource some differences applied on mobile and desktop or I should say bigger screen and smaller screen.
Width
On desktop design, it can be fixed width. On mobile or some other tablet design, it is still best to work with fluid width (Damn lucky I started with fluid width back then). For iPad and iPhone, they seems to be able to zoom out the whole layout and let you “pitch” zoom it, consider that a bad user experience, that bring me to another point:
Font size
For mobile version, it is best to zoom at least 100% of the original font, just to accommodate with those browser that will zoom out the site when browsing.
display: none
Although mobile need to be low bandwidth, but in this case, especially I’m working with WordPress system, I’m more comfortable to cut bandwidth with the design itself. So display: none is the best friend to go.
I would definitely go with responsive design than create another mobile version. Of course, there too are pros and cons, especially when there is no option to go for desktop version, missing link on some hidden element and etc.
Hello,
It’s important to be aware that display: none, unfortunately does not prevent content from downloading (even though it is hidden from the user). So display:none cannot help cut the bandwidth.
You can find more information about this in this presentation
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
There are also some tools available to cut the bandwidth caused by images. The Sencha IO tool will detect the screen size of the requesting device and automatically adapt the images that are on your blog to make them smaller to download. http://www.sencha.com/products/io/
There are also techniques that you can use locally. If you Google “responsive images” you can find some examples of recent techniques that use JavaScript on the device.
Hope this helps!
Thanks for the information. Most helpful, just what I’m looking for. I do understand the display:none, that’s why I prefer to cut down by the design itself. Maybe we need to think about the “Mobile First” soon