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

Educating our clients that websites shouldn't look the same in all browsers


The final hurdle to clear before embarking on a responsive design is often one of mindset. And in some ways, this is perhaps the most difficult to overcome. For example, I'm often asked to convert existing graphic designs into standards compliant HTML/CSS and jQuery-based web pages. In my own experience, it's rare (and when I say rare, I mean it's never happened) for graphic designers to have anything other than a fixed-width "desktop version" of a site in mind when producing their design composites. My remit is then to create a pixel perfect rendition of that design in every known browser. Failing or succeeding in this task defines success in the eyes of my client, the graphic designer. This mindset is especially entrenched in clients with a background in printed media design. It's easy to understand their reasoning; a composite of the design can be signed-off by their own clients, they hand it to the frontend designer/developer (you or I), and we then spend our time ensuring the finished code looks as close as humanly possible to that design in all the major browsers. What the client sees is what the client gets.

However, if you've ever tried to get a modern web design looking the same in Internet Explorer 6 and 7 as it does in a modern standards compliant browser such as Safari, Firefox, or Chrome, you will understand the inherent difficulties. It's often taken me as much as 30 percent of a project's allocated time/budget to fix the inherent flaws and failings in these older ailing browsers. That time could have been spent building on enhancements and economizing code for the growing number of users viewing sites in modern browsers, rather than patching and hacking the code base to provide rounded corners, transparent images, correctly aligned form elements, and so on for a shrinking number of Internet Explorer users.

Unfortunately, the only antidote to this scenario is education. The client needs an explanation as to why a responsive design would be worthwhile, what it entails, and why the finished design won't and shouldn't look the same across all viewports and browsers. Some clients get there, some don't. Unfortunately, some still want all the rounded corners and drop shadows to look identical in Internet Explorer 6 too!

When I approach a new project, whether a responsive design is applicable or not, I try and explain the following points to my client:

  • By allowing older browsers to display the pages slightly differently, it means that code is more maintainable and cheaper to update in the future.

  • Making all elements look the same, even on older browsers (for example, Internet Explorer 8 and lower versions) adds a significant amount of images to a website. This makes it slower, more expensive to produce and more difficult to maintain.

  • Leaner code that modern browsers understand equates to a faster website. A faster website ranks higher in search engines than a slow one.

  • The number of users with older browsers is shrinking, the number of users with modern browsers is growing—let's support them!

  • Most importantly, by supporting modern browsers, you can enjoy a responsive web design that responds to the differing viewports of browsers on different devices.