Book Image

Responsive Web Design with jQuery

By : Gilberto Crespo
Book Image

Responsive Web Design with jQuery

By: Gilberto Crespo

Overview of this book

<p>Owing to the different types of devices that offer Internet browsing today, responsive web designing has become a booming area. The heightened use of CSS3 and JavaScript libraries such as jQuery has led to shorter responsive web design times. You can now create a responsive website swiftly that works richly in any device a user might possess.</p> <p>"Responsive Web Design with jQuery" is a practical book focused on saving your development time using the useful jQuery plugins made by the frontend community. Follow the chapters, and learn to design and augment a responsive web design with HTML5 and CSS3. The book presents a practical know how of these new technologies and techniques that are set to be the future of frontend web development.</p> <p>This book helps you implement the concept of responsive web design in clear, gradual, and consistent steps, demonstrating each solution, and driving you to practice it and avoid common mistakes.</p> <p>You will learn how to build a responsive website; right from its structure, conception, and adapting it to screen device width. We will also take a look at different types of menu navigation and how to convert text, images, and tables so as as to display them graciously on different devices. Features such as the carousel slider and form elements will also be covered, including the testing phase and the measures to create correct fallbacks for old browsers.</p> <p>With "Responsive Web Design with jQuery", you will learn to create responsive websites quickly by using CSS3 and the incredible jQuery plugins. You will also learn to save your time by tailoring solutions created and tested by the community.</p>
Table of Contents (19 chapters)
Responsive Web Design with jQuery
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Comparing responsive, fluid, and adaptive web


Responsive web design is a little different from fluid design. Fluid design is about adjusting the website's structure and dimensions automatically (by using relative units for widths, such as em or percentage) but does not offer a varied approach to the user to see the content layout.

Also, it would be fair to say that responsive web design is not a unique solution for all mobile device challenges. As we saw before, responsive web design is an idea, and can give the user a better experience when implemented correctly, but it may not work for everyone or every device. This is the reason we should improve our knowledge of new technologies.

There is a quote that I like very much, written by Aaron Gustafson, the author of the Adaptive Web Design book:

"Adaptive Web Design is about creating interfaces that adapt to the user's capabilities (in terms of both form and function)."

Note

Adaptive web design implements new HTML5 functionalities only for newer devices, say to provide an enhanced experience. It misses out these functionalities on older devices, thus ensuring that the basic setup still works on them.

There are many ways to implement adaptive features. The following are the most common practices to achieve them:

  • Using jQuery plugins to enable the touch event interactions in mobile devices (more in Chapter 6, Building Responsive Image Sliders)

  • Transforming common table structures into responsive tables (more in Chapter 7, Designing Responsive Tables)

  • Visual customization of form elements only for desktop (more in Chapter 8, Implementing Responsive Forms)

  • Using geolocation functionality to bring more relevant content to the user

  • Changing information hierarchy where the correct priority of content is set

Diego Eis, a Brazilian known to disseminate some best practices and the creator of the Tableless.com.br website, drew up an excellent comparison between responsive web design and non-responsive web design in one of his articles. Imagine if we were planning to travel to two or more destinations, you would certainly organize many clothing combinations such as jackets, pants, shorts, and shirts which would result in one big heavy bag. This is because you never know what the climate will be like in each place. In the same way, to be prepared for all events, sometimes it can slightly reduce the performance of the website..