Internet Development


Stunning!

The View of the World Depends on the Glasses I Wear


Purchasing mobile devices with internet access has just gotten much better, and let me say until this day I wasn't considering buying one for the exact reason that I will show you here, and now, with the new development of "Media Queries" it changed the whole picture, not "exactly", it is simply adapted my "glasses".
Over with metaphors, lets get it explained.

If you are here, you certainly know the feeling of imagining yourself browsing on the web on a portable device which the screen is not optimal for web experience, right? Not only that but, it wasn't as enjoyable as on a desktop, and why? Mostly because the web pages had already a default set on the width of the screen they were meant to be "experienced from". And seriously, let us not make the "same" website again, for a different device.
Imagine three websites, same information, just different screen optimizations, for different devices. From mobile phones, to tablets, laptops, televisions all the way to desktops.
Websites would multiply, and what a big mess would be!

So here is where Media Queries sparks and fires the web on portable devices!

Media Queries comes together with CSS3 as a feature built in, and what is actually "Media Queries"?

Media Queries is a feature that allows you to make a <tag> where you set a @rule, in which it will be applied your website layout/design, to be responsive to the maximum width of your screen, this way optimizing your experience.
Further in the movie it is explained that even on devices which you can rotate to give you a different screen width, that is not exactly true, the max width doesn't change, it is applied an amplification, "like a magnifier", sorta.


There is a video link posted, which is where I learn't all of it.
Websites already using this amazing feature are held on the example links, please take a look and move your browser width gradually, you will be amazed.
I am really looking forward to see how this is changing websites in some time.

Mind if I am not saying the exact correct terms, I am no web designer, thank you.




LINKS:
VIDEO SOURCE:
MEDIA QUERIES EXAMPLE HOSTING WEBSITE:
EXAMPLE WEBSITES WITH "MEDIA QUERIES":
OPEN SOURCE JAVA SCRIPT LIBRARY:
http://www.modernizr.com/ - Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.