Beginning Drupal 8
Todd Tomlinson - Beginning Drupal 8 (The Expert's Voice in Drupal) - 2015
Todd Tomlinson - Beginning Drupal 8 (The Expert's Voice in Drupal) - 2015
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Chapter 18<br />
Creating a Responsive Site<br />
Just a few short years ago, smartphones and tablets didn’t exist, yet here we are today living in a world where<br />
analysts predict that web traffic from these devices will surpass that of laptops and desktops in 2014. We live<br />
in a mobile world, and as <strong>Drupal</strong> site builders, it’s important to address the growing usage of smartphones<br />
and tablets and begin to think about mobile first as we build new sites. If the majority of users visiting our<br />
sites are on smaller screens, it would be wise for us to deliver an amazing user experience regardless of the<br />
device they are using.<br />
Fortunately for us, <strong>Drupal</strong> 8 addresses many of the challenges of rendering our sites on a variety of<br />
screen widths (phones, phablets, tablets, laptops, desktops, televisions), and in this chapter we will look at<br />
leveraging <strong>Drupal</strong> 8’s responsive tools and responsive themes, as well as stepping into basic CSS theming to<br />
address responsiveness.<br />
Responsive Defined<br />
You hear all of this talk about “responsive” and “mobile friendly,” but what does it really mean for a website<br />
to be responsive? Simply stated, responsive means that your site is viewable and usable on a variety of<br />
devices with different screen widths, without having to scroll great distances, and that the content is still<br />
large enough to read on smaller devices. Responsive also means that the user experience on your site is<br />
tailored to best fit the device that the user is accessing your site on. For example, if certain elements on<br />
your site don't display well on smaller devices, you may choose not to display those elements to visitors<br />
using smaller devices, but still display them to visitors viewing your site on a laptop or desktop. Responsive<br />
may also mean leveraging a device’s capabilities, such as gestures or swiping, to navigate through your site<br />
instead of requiring more traditional point-and-click interfaces. Regardless of the definition that you choose,<br />
the fundamental concept of responsive design is to make your site usable across all devices.<br />
How Responsive Web Design Works<br />
Responsive web design works through a combination of detecting the width of the screen that the site visitor<br />
is using and leveraging CSS that defines how elements are displayed on the page based on the width of the<br />
screen. Take for example a page that has three equal-width columns that are each 33% of the width of the<br />
screen. If you view the page on a laptop with a 15-inch screen at a resolution of 1,680 pixels, each column is<br />
approximately 560 pixels wide and the site looks great (see Figure 18-1).<br />
193