Responsive Web Design with jQuery

5 (1 reviews total)
By Gilberto Crespo
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Exploring Responsive Web Design

About this book

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.

"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.

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.

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.

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.

Publication date:
November 2013
Publisher
Packt
Pages
256
ISBN
9781782163602

 

Chapter 1. Exploring Responsive Web Design

These days, the word responsive is one that we are hearing a lot in the website development environment, isn't it? No worries, together we will see the real meaning of it and its impact on our website development.

One factor that influences decision making (but is sometimes ignored) when starting the development process is the number of devices and different screen sizes that we need for previewing the responsiveness of website layout. Some time ago, we used to work with some definitions of website dimensions, for example, 1024 pixels. This happened because we thought the only way to access the content was on a desktop. But, as you know, technology is bringing us more and more devices (that can show websites), improving the way we interact with sites, such as large desktop monitors, tablets, smartphones, smart TVs, outdoor displays, and other good things.

These advances in mobile technology and the quick evolution of website navigation and viewing techniques have pushed everyone to review the concept of limited dimensions of sites, to start thinking of a structure that can adapt itself, and to offer the right content for each situation.

In this chapter we will learn:

  • Understanding the concept of responsive web design

  • Comparing responsive, fluid, and adaptive web

  • Adapting the screen with media queries

  • Mobile-first concept and tips

  • Using wireframe tools

  • Practicing mobile-first development in wireframes

 

Understanding the concept of responsive web design


I cannot start this theme without citing Ethan Marcotte, who released the book Responsive Web Design in 2011, which has become a reference for many other books and articles from across the frontend community.

In my understanding of Marcotte's book, the meaning of responsive web design is to provide different experiences for the user to see the same site depending on the available screen area. Technically speaking, it involves the use of the following three main techniques:

  • Flexible grid-based layout

  • Flexible images and video

  • Smart use of CSS splitting the website behavior (media queries)

More details about each technique will be shown later, but just to clarify this concept visually, have a look at the following example, which represents a website as displayed on a small device (smartphone) on the left, medium device (tablet) in center, and on a large screen (desktop) on the right:

Note

There are many more challenges than just creating fluidic dimensions and applying some media queries.

We will talk about many minor and major challenges throughout the book. Some of them are:

  • Replacing mouser-over events with touch events

  • Facilitating the filling of data in the form fields

  • Prioritizing the content

  • Site loading optimization

 

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..

 

Adapting the screen with media queries


Luke Wroblewski, author of popular web design books and a good reference for many articles, posted a recent device-sizes classification announced by technology companies as follows:

  • 4"-5" smartphones

  • 5"-6" phone / tablet hybrids

  • 7"-8" tablets

  • 9"-10" tablets

  • 11"-17" laptops and convertibles (tablet/laptop)

  • 20"-30" desktops

Labels such as smartphone are just friendly labels as long as we know that the responsive web design makes the structure respond to the device's screen resolution, not to the type of device. But, we must analyze if it is better to offer a different approach for a specific width. This is the improved feature of this module, where CSS2.1 was focused on media types such as print, screen, and handheld; in CSS3, the focus is on media features.

Media queries are mostly used and most browsers adopt it natively (Firefox 3.6 and above, Safari 4 and above, Chrome 4 and above, Opera 9.5 and above, iOS Safari 3.2 and above, Opera Mobile 10 and above, Android 2.1 and above, and Internet Explorer 9 and above). And now, here comes the question: what about IE6-IE8? For these browsers there is a known lightweight solution called Respond, which helps a lot when support for old browsers is needed (more in Chapter 10 , Ensuring Browser Support).

Trying to keep concise on this topic, the following are the features mostly used when we are specifying media queries:

  • Width: min-width / max-width

  • Height: min-height / max-height

  • Orientation: It checks whether a device is portrait or landscape in orientation

  • Resolution: For example, min-resolution: 300dpi

Check the following CSS code for a better understanding of the use of media queries and their syntax:

/* Standard desktop screens */
@media only screen and (min-width:1025px) {
 CSS GOES HERE
}
/* Tablets */
@media only screen and (min-width:481px) and (max-width:1024px) {
 CSS GOES HERE
}
/* Smartphones */
@media only screen and (max-width:480px) {
 CSS GOES HERE
}

Just to clarify this code, the following figure is a visual interpretation of this code, where it shows that the layout could be displayed in different ways depending on the device's screen:

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

 

Mobile-first


Let's start this section by analyzing the use case of this project:

This result is commonly seen when the project starts with desktop-first, and the web design creation just fills the blank space with banners or pictures, less relevant links, animations, and so on. We are probably forgetting the obvious and basic flow that the user follows. We know that sometimes these other items look important to the project, but it is evident that this project design requires an information architecture review.

In the previous example, we can notice (on the right side) how simple the communication with the user can be, and it may be more efficient with less visual clutter. And that is the trend: make it simple. The next quote by Bill DeRouchey summarizes it:

"Designing the mobile app first forced us to strip down to essentials."

Note

In other words, mobile-first is good for business because objectivity brings money. The content you are adding to your website is valuable and important to the end user. The implementation of these new features will allow visitors to have a far better user experience with quicker and more intuitive access to content on the go.

In this case, when the mobile-first concept was applied, a specific link could be found only on the interior pages. However, the objective of the homepage is to direct the user to the correct page, following the website flux information. For non-relevant links this scenario is acceptable.

Take a look at the following screenshot, and notice the many differences about the organization of information and focus on important links in a desktop version:

 

Using wireframe tools


Wireframe is a visual guide that helps to craft your website structure, and its main focus lies in functionality, behavior, and priority of content. It should be the first step of any project because it makes it easier to analyse the information architecture and arrangement of the visual elements.

Wireframe.cc (http://wireframe.cc/) is an easy way to start our project. This tool is great to do something quick but with low fidelity. For detailed works, there are better tools such as Balsamiq Mockups or Pencil.

The usage of Wireframe.cc is very simple. After entering in the tool's site, perform the following:

  1. On the top-left corner choose the device.

  2. Then click on setting to redefine our container width if necessary.

  3. Now click-and-drag to draw.

  4. After this, select the appropriate stencil.

  5. If you chose a wrong stencil, just double-click on it to edit it.

Tip

When you finish using the wireframe, do not forget to click on the Save button that will generate a URL for further access.

 

Exercise 1 – practicing mobile-first development in wireframes


Visit http://mediaqueri.es/ and take your time to get inspired. Let's start our website project creating three website wireframes for these dimensions: smartphone, tablet, and desktop, by applying the mobile-first concept.

The following three wireframes will be used as reference for Exercise 1:

 

Summary


In this chapter, we reviewed the concept of responsive web design. We have also learned what mobile-first is. We learned about the media queries and how they can be different on our site implementation. We also created a wireframe drafting our site. This will connect us to the next chapter which will code this wireframe.

Now, let's move on in our project by learning how to use the three distinct responsive grid systems: Fluid Baseline Grid, 1140 Grid, and my favorite Foundation4 Grid. Also, we will look at adapting the website's behavior by using JavaScript. All of these topics will be explained in the next chapter.

About the Author

  • Gilberto Crespo

    Gilberto Crespo is a skilled frontend developer who started frontend developing using CSS2, HTML4, and tableless HTML in 2005. He has always focused on increasing his knowledge by following strong trends, such as HTML5, CSS3, and jQuery. In the past five years, he has helped improve the web development process by creating and spreading best development practices for CI&T where he currently works. For the past two years, he has been working exclusively on responsive websites on the job and supporting other web developers by answering questions on responsive websites. He has been connected with new technologies and design trends. He is passionate about creating themes for Drupal CMS and websites' look and feel in general since 2011. Currently, he is writing technical articles and giving presentations in Brazil, sharing his knowledge with students and with the Drupal community and friends. Outside of work, he enjoys a normal life, trying to learn something new every day. Feel free to contact him at www.gilcrespo.com.

    Browse publications by this author

Latest Reviews

(1 reviews total)
I ordered the book to supplement my learning for a web programming course. It was very useful as a reference and learning tool.
Book Title
Access this book, plus 7,500 other titles for FREE
Access now