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

Can HTML5 and CSS3 work for us today?


Any tool or technique should only be used if the application requires it. As frontend developer/designers, our projects typically come with a finite amount of time and resources available to make them financially viable.

As Internet Explorer 7 and 8 don't support the new semantic HTML5 elements or CSS3 properties as standard, if the vast majority of visitors to a site use Internet Explorer 7 or 8, it doesn't make a lot of sense to concentrate your resource on producing a responsive HTML5 and CSS3 based design for it. That doesn't mean doing so is an impossible task. As we shall see in Chapter 9, Solving Cross-browser Responsive Challenges, there are a growing number of tools (referred to as polyfills as they cover the cracks in older browsers) to patch browsers (mainly Old IE) lacking support for more recent browser features, but adopting a sensible approach to the implementation of a responsive web design from the outset is always the best policy.

In my own experience I typically ask the following from the outset:

  • Does the client want to support the largest growing market of Internet users? If yes, responsive methodology is suitable.

  • Does the client want the cleanest, fastest, and most maintainable code base? If yes, responsive methodology is suitable.

  • Does the client understand that experience can and should be subtly different across different browsers? If yes, responsive methodology is suitable.

  • Does the client require the design to look identical across all browsers, including IE 8 and lower versions? If yes, responsive design is not best suited.

  • Are 70 percent or more of the current or expected visitors to the site likely to use Internet Explorer 8 or lower versions? If yes, responsive design is not best suited.

It's also important to re-iterate that where the budget allows, there may be times when a fully bespoke "mobile" version of a website is a more relevant option than a responsive design. For the sake of clarification, I term entirely mobile focused solutions that provide different content/experiences to their mobile users as 'mobile websites'. I don't believe anyone advocating responsive web design techniques would argue that a responsive web design would be a suitable substitute for a 'mobile website' in every situation.