Book Image

Responsive Web Design with HTML5 and CSS3

By : Ben Frain
Book Image

Responsive Web Design with HTML5 and CSS3

By: Ben Frain

Overview of this book

Tablets, smart phones and even televisions are being used increasingly to view the web. There's never been a greater range of screen sizes and associated user experiences to consider. Web pages built to be responsive provide the best possible version of their content to match the viewing devices of not just today's devices but tomorrow's too.Learn how to design websites according to the new "responsive design"ù methodology, allowing a website to display beautifully on every screen size. Follow along, building and enhancing a responsive web design with HTML5 and CSS3. The book provides a practical understanding of these new technologies and techniques that are set to be the future of front-end web development. Starting with a static Photoshop composite, create a website with HTML5 and CSS3 which is flexible depending on the viewer's screen size.With HTML5, pages are leaner and more semantic. A fluid grid design and CSS3 media queries means designs can flex and adapt for any screen size. Beautiful backgrounds, box-shadows and animations will be added ñ all using the power, simplicity and flexibility of CSS3.Responsive web design with HTML5 and CSS3 provides the necessary knowledge to ensure your projects won't just be built "right" for today but also the future.
Table of Contents (16 chapters)
Responsive Web Design with HTML5 and CSS3
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Why smart phones are important (and old IE isn't)


Whilst statistics should only ever be used as a rough guide, it's interesting to note that according to gs.statcounter.com, in the 12 months from July 2010 to July 2011, global mobile browser use had risen from 2.86 to 7.02 percent. The same statistics show that usage of Internet Explorer 6 fell from 8.79 to 3.42 percent. Even Internet Explorer 7 had fallen to 5.45 percent by July 2011. If clients often ask you to "make our site work in Internet Explorer 6 and 7", a fair riposte might be "maybe we should be concentrating our efforts elsewhere?" Far more people are now browsing websites on a mobile phone than with a desktop or laptop running Internet Explorer 6 or 7. That deafening noise you just heard is the collective celebratory whoops of frontend developers around the globe!

So, there are a growing number of people using small screen devices to browse the Internet, and the Internet browsers of these devices have typically been designed to handle existing websites without problems. They do this by shrinking a standard website to fit the viewable area (or viewport to give it the correct technical term) of the device. The user then zooms in on the area of content they are interested in. Excellent, so why do we, as frontend designers and developers, need to take any further action?

Well, the more you browse websites, such as the one shown in the preceding screenshot, on iPhones and Android powered handsets, the more apparent the reasons become. It's a tedious and frustrating task to constantly zoom in and out of page areas to see them at a readable size and then move the page left and right to read sentences that are hanging out of the viewport just enough to be annoying, whilst not inadvertently tapping a link you don't want to. Surely we can do better!