Thursday, January 12, 2012

The Future of Website Design

Smartphones and tablet PCs are exponentially growing in numbers in the computing market. These days, people can literally carry a computer in their pocket or in their bag. However, to compensate for convenience, the size of the screens being used must be sacrificed to often times just slightly larger than a credit card. So how do we adjust for this? Mutlitouch compatibility introduced pinch to zoom and that made it slightly easier. It allowed users to zoom in to what would be tiny text then scroll around the page to read the material. This worked for a while (and is still in use in a lot of website) but can be frustrating to those who use smartphones and/or tablets to read regularly. So this is where HTML5, CSS3, and responsive web design come into play.

HTML5 is the next generation of HTML (Hypertext Markup Language) that allows developers to incorporate media objects such as video and sound without the use of a flash player. CSS3 is the next generation of CSS (Cascading Style Sheet) that allows the customization of objects through CSS, something that was also done through the use flash at most times. So basically these two things are replacing flash. And why replace flash? From what I understand, because flash is technically a third party application, it continues draining battery on the mobile device much faster than if the page were to simply render the HTML and CSS codes and nobody likes carrying around a dead mobile device. The combination of HTML5 and CSS3 allow web developers to create responsive websites that are easily read on any device rather it be on a 24" desktop monitor or a 4" smartphone screen. Below are some links to the various topics mentioned. Some give very distinct examples, some offer API information, and others are simply a more detailed explanation of the topic.


Links to helpful HTML5 pages
http://www.w3schools.com/html5/default.asp
http://www.switched.com/2010/05/11/what-is-html5-and-why-should-you-care/
http://msdn.microsoft.com/en-us/ie/aa740476
http://www.inmotionhosting.com/infographics/html5-cheat-sheet/
http://www.apple.com/html5/

Links to helpful CSS3 pages
http://www.w3schools.com/css3/default.asp
http://webdesign.about.com/od/css3/a/differences-css2-css3.htm
http://coding.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
http://css3generator.com/

Links to helpful responsive web design pages
http://ux.fusionapps.com/2011/12/23/what-is-responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx

No comments:

Post a Comment