IntroductionWelcome| 00:04 | Hello, I am Chaz Chumley, and I would like to
welcome you to Responsive Design with Drupal.
| | 00:09 | In this course we'll explore exactly what
Responsive Design is, why it's important when
| | 00:14 | creating or modifying websites, the different
techniques involved, and how that is applied to Drupal 7.
| | 00:21 | We will begin by quickly setting up our Drupal
environment and installing the fixed-width theme
| | 00:26 | and then progress to how we make
that theme scalable for mobile devices.
| | 00:31 | Along the way we will take a look at various
techniques involved in the mobile workflow,
| | 00:35 | such as CSS 3 Media Queries, fluid layouts,
fluid images, responsive forms, and how to
| | 00:43 | apply these techniques
within the Drupal 7 framework.
| | 00:47 | So let's get started with
Responsive Design with Drupal.
| | Collapse this transcript |
| Using the exercise files| 00:00 | In order to better follow along through each
chapter of our series, we've provided a set
| | 00:04 | of exercise files for you to use.
| | 00:07 | However, keep in mind that if you are not a
premium lynda.com subscriber, the contents
| | 00:12 | of these exercise files may vary.
On my Desktop I have the Exercise Files folder.
| | 00:16 | It is broken into four sections.
| | 00:19 | The Final folder holds the final source
files for our Drupal 7 Responsive Design, and it
| | 00:24 | is what you're striving toward
completing as we finish the series.
| | 00:28 | The next folder is our HTML folder.
| | 00:30 | This folder contains a static HTML version
of our website in various stages, from fixed
| | 00:35 | to fluid, and may be referenced
at various points in the chapter.
| | 00:40 | Next is a Lessons folder.
| | 00:41 | The Lessons folder contains both readme
files for everyone as well as a JavaScript or CSS
| | 00:48 | files that we'll be using throughout the series.
| | 00:49 | Since we're also dealing with Drupal 7, you
may find .info or template files that we'll
| | 00:56 | be using for theming.
The final folder is our Start folder.
| | 01:00 | The Start folder actually contains the
starting Drupal installation and SQL file that we will
| | 01:05 | use to create multiple instances of Drupal
that will represent various techniques with
| | 01:10 | fixed, adaptive, and responsible websites.
| | 01:13 | You may have noticed that I've also broken
them out into a Drupal folder that will hold
| | 01:18 | these three instances that we will be
utilizing as we progress through each section.
| | 01:23 | Let's get started.
| | Collapse this transcript |
| Exploring the finished project| 00:00 | Someone once said Responsive Design is responsible
design, meaning that we cannot just design
| | 00:05 | for the Desktop browser anymore.
| | 00:07 | We need to think outside the box and understand how more
and more people are viewing websites on mobile devices.
| | 00:13 | In this video we'll take a look at our
finished Drupal 7 Theme and discuss how we moved from
| | 00:17 | a fixed-width layout to a more fluid one.
| | 00:19 | Let's begin by looking at the fixed
width theme on various screen sizes.
| | 00:23 | As we resize the browser, we will notice that
the content stays fixed or constrained based
| | 00:28 | on the pixel width measurement at the site that was
designed against. Images and content just don't scale.
| | 00:34 | However, comparing it against our finished
theme, we can see that our design now reacts
| | 00:38 | the various breakpoints, from browser,
to tablet, all the way down to mobile.
| | 00:43 | We have taken a look at both the fixed-width
theme and our completed responsive theme
| | 00:47 | and how mobile workflow needs be
considered when creating any website today.
| | 00:52 | Understanding these concepts and how to best
overcome the challenges associated with it
| | 00:56 | will be covered in more detail later in our series,
but first, we must set up our development environment.
| | Collapse this transcript |
|
|
1. Setting Up the EnvironmentInstalling Acquia Dev Desktop| 00:00 | To eliminate the confusion between Windows,
Mac, and Linux, and to make sure everyone can
| | 00:05 | follow along easily, I want to introduce you
to a platform-independent application by Acquia,
| | 00:11 | known as the Dev Desktop.
| | 00:13 | This tool will allow us to quickly set up
a local app stack that's Apache, MySQL, and
| | 00:18 | PHP so that we can easily work with Drupal.
| | 00:22 | Let's begin my browsing into acquia.com/downloads and choosing
the version of Dev Desktop suitable for your environment.
| | 00:30 | If we scroll down to the Dev Desktop section, we want
to make sure that we choose the Drupal 7 Instance
| | 00:35 | and the platform that best suits you.
| | 00:39 | In this case, I am going to go ahead and select
Mac, and then I'll click on the Download button.
| | 00:43 | The Dev Desktop is actually
the fastest way to Drupal.
| | 00:46 | This includes the Acquia Drupal stack
and allows us to set up new instances.
| | 00:51 | It allows us to import existing instances
and have a self-contained platform that we
| | 00:57 | can easily do our development on.
| | 00:59 | Once our download is complete, go ahead
and close the download window if you have one
| | 01:03 | and then go ahead and minimize the browser.
| | 01:05 | At this point I want to go ahead and
locate my Downloads folder and then double-click
| | 01:10 | on the Acquia Drupal Installer, minimize my
Downloads window and then go ahead and double-click
| | 01:15 | on the Installer to start
the installation process.
| | 01:19 | If you happen to be on a Mac or Windows environment and
are prompted with a message, Do You Want to open this File?
| | 01:25 | By all means, it is safe. Go
ahead and click on the Open button.
| | 01:28 | Also, if you're prompted for your credentials,
go ahead and entry those now, Click on OK
| | 01:33 | and then the installation process will begin.
The first screen is the Acquia Welcome Screen.
| | 01:39 | We want to go ahead and just click Next to
begin, go ahead and click Next again on the Overview
| | 01:43 | screen, and then we are at the License agreement,
go ahead and choose Yes and then click on Next.
| | 01:49 | You're perfectly fine leaving the default
installations as is by clicking on Next, and
| | 01:54 | then go into the Port settings screen.
| | 01:56 | From here, you may see some non-standard ports
being used. That's fine as is because we're dealing
| | 02:02 | with a self-contained app stack, so I'm
going to leave those as is and click on Next.
| | 02:07 | From here, this is the screen that is
asking us for some information regarding the site
| | 02:11 | name, our username, password, and an email.
| | 02:14 | Acquia out of the box likes to
set up a default Drupal Instance.
| | 02:19 | We're finally leaving the Site name as is,
your Username is going to be whatever your
| | 02:23 | Username is, for a Password I am going to go
ahead and put in admin, all lowercase, and
| | 02:28 | then go ahead and put an email.
| | 02:29 | Once I have the information in there for
Drupal Settings, go ahead and click Next.
| | 02:34 | Go ahead and Review your information,
everything looks great, click on Next.
| | 02:38 | From here we're ready to ready to install, go ahead and
click on Next, and the installation process will begin.
| | 02:44 | Once your installer has completed, go ahead and click on
the Finish button to launch the Acquia Dev Desktop.
| | 02:50 | From here we want to go ahead and take a look
at that default Drupal Instance that was created
| | 02:55 | as part of the installation process.
| | 02:57 | Go ahead and click on the Go to my site button,
that will go ahead and open up the browser
| | 03:01 | window for us and take us to the site.
| | 03:04 | Go ahead and say hello as well as goodbye
to this instance, because this is the last
| | 03:08 | time we will be using a default Drupal Instance.
| | 03:12 | At this point, everyone regardless of your
respective experience level with web servers
| | 03:16 | or app stacks that you have already installed
prior to this video should be on even plain field.
| | 03:22 | We reviewed the Acquia Dev Desktop environment,
| | 03:26 | how to install and configure the default
instance, but next we're going to go ahead and take
| | 03:30 | a look at how easy it is to actually import
existing Drupal Instances using the Dev Desktop.
| | Collapse this transcript |
| Importing a Drupal website| 00:00 | In most cases you won't be
dealing with a default Drupal Instance.
| | 00:04 | More than likely you already have an
existing Drupal site that you're working with.
| | 00:08 | So let's take a look at exactly how easy it is
to import a site using the Acquia Dev Desktop,
| | 00:14 | and not just one site, but three different
instances that we will be using as a basis
| | 00:18 | for fixed, adaptive, and responsive designs.
| | 00:23 | Let's begin by creating a
Folder on our Desktop called Drupal.
| | 00:26 | This'll be where our three Drupal Instances will live
while we work through the different stages of Responsive Design.
| | 00:31 | I am going to right-click and say New
Folder and give it a name of Drupal, and then next
| | 00:37 | we actually need to have a
Drupal Instance to work with.
| | 00:40 | So, if we open up the exercise files and
locate the Start, drupal, and start.sql files.
| | 00:47 | Something that I've done is provide both the free
and premium subscribers with access to these files.
| | 00:53 | This way everyone has an even playing field
to start with, and we have a basis to build
| | 00:59 | upon as we progress through each
chapter in our series on Responsive Design.
| | 01:04 | Go ahead and copy the Drupal folder over
to the Drupal Desktop and paste it in place.
| | 01:11 | Since we're going to be working with three different
Instances of Drupal, I want to repeat this process real quick.
| | 01:18 | First, let's go ahead and give this folder name
of drupal.fixed and then since I still have
| | 01:24 | in memory that Drupal Instance,
I am going to paste it again.
| | 01:27 | The second folder, we'll go ahead and call this
drupal.adaptive or adaptive design, we'll be working with.
| | 01:34 | And then I'm going to paste one more time.
| | 01:37 | Let's go ahead and name third
instance, drupal.responsive.
| | 01:42 | Now that I have the three instances created,
go ahead and close the folders, and before
| | 01:47 | we actually go ahead and start the import
process, it's very important to know that
| | 01:51 | once you've created a folder--especially on
the Mac--that you need to make sure that it
| | 01:55 | has Read-Write permissions for
all users and the enclosing files.
| | 02:00 | So quickly right-click on the Drupal folder, Click
on Get Info, and locate the Sharing & Permissions.
| | 02:07 | You may need to unlock the permissions, we'll
do so now, and then change it to Read & Write,
| | 02:14 | and then Apply to enclosed items.
| | 02:17 | You'll be prompted, yep, we want to
go ahead and do that, so click OK.
| | 02:20 | And once those privileges have been applied,
go ahead and click the Window and then with
| | 02:26 | the focus back on the Acquia Dev
Desktop Control panel, choose Settings.
| | 02:31 | From here, click on the Site's
tab and then only Import button.
| | 02:35 | We're going to be repeating this process
three different times, so it's very important that
| | 02:39 | we get it right the first time.
| | 02:41 | By clicking on the Browse button for the site
path and then locating the Drupal > drupal.fixed
| | 02:47 | instance and double-clicking
on it, we can set the Site path.
| | 02:50 | Next, since we already have a database backup,
go ahead and click on the Browse button for the
| | 02:56 | dump file, locate the exercise file's
start folder and double-click on start.sql.
| | 03:03 | Let's give the Database a name, in this case
drupal_fixed, and then for the Domain name,
| | 03:09 | let's go ahead and repeat this, but instead of
an underscore, we'll call this drupal.fixed.
| | 03:14 | This is more in line with URL naming
conventions, go ahead and click the Import button, and
| | 03:18 | if prompted for permissions, go ahead and put
in your Username, Password and then click OK.
| | 03:24 | With our first instances imported, we
need to repeat this process two more times.
| | 03:28 | I'm going to go ahead and let you take care
that now, remembering to name both the URL
| | 03:34 | and the database files appropriately based
off the responsive and adaptive instances
| | 03:40 | that we have inside our Drupal folder.
| | 03:43 | Importing out of the way, we now have three
different Drupal Instances for us to use to modify.
| | 03:48 | Comparing, as well as add different
responsive techniques throughout the chapters.
| | 03:52 | However, as we work along, you may find
yourself needing to back up your work.
| | 03:57 | So let's move on to see how we can easily
use the backup and migrate modules inside
| | 04:02 | of Drupal, to back up and
restore existing Drupal Instances.
| | Collapse this transcript |
| Restoring database snapshots with the Backup and Migrate module| 00:00 | Being able to back up and migrate your Drupal site
is an important part of the development workflow.
| | 00:06 | As we progress through each chapter, you
may find yourself wanting to back up your work
| | 00:10 | or restore from one of the many
database snapshots that we will be using.
| | 00:14 | Let's take a moment to discuss how to best
work with the database snapshots that are
| | 00:18 | part of the exercise files
provided to premium subscribers.
| | 00:22 | The Backup Migrate module itself is
located at drupal.org/project/backup_migrate, and
| | 00:29 | it is stable for any Drupal developer
needing a consistent mechanism for backing up and
| | 00:35 | restoring their Drupal sites.
| | 00:37 | As part of the import of both our
fixed, adaptive, and responsive Drupal sites,
| | 00:41 | I have taken care of the installation
and enabling of this module for you.
| | 00:46 | If you need a refresher on how to download and
enable modules, please take a look at the various
| | 00:51 | Drupal 7 Lessons at lynda.com. So that we can
take a look at to configuration for our site,
| | 00:57 | you will need a first log in to the
Drupal Instance we set up earlier.
| | 01:01 | Go ahead and open up a New Tab and
type in the drupal.fixed and import 8082.
| | 01:09 | You're now getting your first glance
at our responsive designed website.
| | 01:13 | So what we need to do
now is sign in to the site.
| | 01:16 | You can do that by typing /user, and then from
the user account, type in the user credentials.
| | 01:23 | In this case, admin, all lowercase as well
as the Password being admin, all lower case.
| | 01:29 | Go ahead and click on the Login button, and
now you're in the backend of our Drupal Instance.
| | 01:34 | In order to see the Backup Migrate module
where it is and how it is configured, we need
| | 01:39 | to actually navigate to
that section of the site.
| | 01:43 | Under Configuration > System > Backup and Migrate.
| | 01:47 | We're now on the landing
page for Backup and the Migrate.
| | 01:50 | I'm not going to go into too much detail on
the configuration of this module, but focus
| | 01:55 | more on the backup and the restore.
| | 01:59 | Right now, the quick backup is set for the
default database to download using the default settings.
| | 02:05 | That's perfectly fine for our needs.
| | 02:07 | Go ahead and click on the Backup now button
and then browse over to our Downloads folder,
| | 02:12 | and there we can see the
database snapshot that was taken.
| | 02:15 | We're going to go ahead and repeat this process,
but in the opposite manner, in this case we're
| | 02:20 | going to restore from the
backup that we just took.
| | 02:24 | This will be the same process you will be using for the
database snapshots found throughout the exercise files.
| | 02:29 | In this case, go back to the
browser and then click on the Restore tab.
| | 02:33 | From here, go ahead and click on Choose File,
locate at the Downloads folder and then the .mysql file.
| | 02:39 | Go ahead and click on Open and
then Restore now button.
| | 02:44 | Once the Restore is complete, you will get
a confirmation from Drupal telling you that
| | 02:48 | the restore was successful.
| | 02:50 | We now have a better understanding how the
Backup Migrate module can be used to both
| | 02:54 | take database snapshots, as well as restore
database snapshots, as we progress through
| | 03:00 | our series on Drupal 7 Responsive Design.
| | 03:03 | Before we dive into the concepts behind
Responsive Design, I want to take a look at one more
| | 03:08 | tool that will help you in
developing your themes in Drupal 7.
| | Collapse this transcript |
| Understanding the Devel module| 00:00 | If you've been developing or designing in
Drupal 7 for any length of time, then you
| | 00:04 | may have come across a module called Devel.
| | 00:07 | If not, you may have asked yourself if
there was any way to see exactly what variables
| | 00:11 | Drupal 7 outputs and how to
best work with those values.
| | 00:16 | To make theming easier for us, let's take
a look at where to find the Devel Module and
| | 00:20 | some of the best ways to use
this module for our own needs.
| | 00:24 | The Devel Module is located at drupal.org/project/devel,
and is another staple for any Drupal developer
| | 00:31 | needing a way for debugging their own Drupal sites.
| | 00:34 | As part of the import of our fixed, adaptive,
and responsive Drupal sites, I've taken care
| | 00:40 | of the installation and enabling of this
modules for you. So that we can take a look at the
| | 00:45 | configuration of our site, you are going to need
to first log in to the Drupal Instance we set up.
| | 00:50 | Go ahead and tab back over to our site or
go ahead and bring it up in the browser at
| | 00:54 | drupal.fixed:8082/user and then go
ahead and log in with the admin credentials.
| | 01:02 | In this case, all lowercase, the word admin, the same
for the Password, and then click on the Login button.
| | 01:09 | With the admin toolbar present, go ahead and navigate
to Configuration > Development > Devel Settings.
| | 01:17 | The Devel Module has numerous configuration
settings that assist the Drupal designer or
| | 01:21 | developer with a lot of information
that you may not ever see otherwise.
| | 01:26 | Such items as Query logs, page
timers, memory usage, and page arrays.
| | 01:32 | Let's see an example of that now.
| | 01:34 | If I go ahead and click on the Display
query log and then click on Save configuration,
| | 01:39 | I see some options have been saved, but where
is the information that I'm expecting to be seen?
| | 01:44 | Let's scroll down at the bottom of the
page, and I'll show you exactly where it's that.
| | 01:49 | We can see that 34 queries
have been executed in 15.33 ms.
| | 01:54 | And obviously, the number of queries in
time doesn't have concern, what would be is if
| | 01:59 | any of these queries were highlighted, that
would indicate that there was something wrong
| | 02:03 | with the database calls being made by Drupal.
| | 02:07 | If I continue scrolling down, I do not see any
highlighted areas. That's a good thing for us.
| | 02:12 | Let me go ahead and turn this off for now
and then click on the Save configuration button
| | 02:17 | and quickly scroll down to make sure the
information is no longer being displayed.
| | 02:21 | In most cases I use the Devel Module not from
this interface, but actually from within templates,
| | 02:27 | and Drupal functions when theming, the
ability to see page, node, region, blocks, and even
| | 02:33 | view variables that I can use to override or
assist me with modifying the Drupal Instance
| | 02:39 | output, makes the Devel Module something
that I always make sure to install and configure
| | 02:45 | within a Drupal Instance.
| | 02:47 | In order to get a better idea how we would
use this with theming, let's go ahead and
| | 02:52 | tab over to our favorite Editor and then
browse to the Drupal/drupal.fixed/sites folder,
| | 02:59 | and inside of there we want to open the all/themes/responsive
folder, which is the theme that we're currently using.
| | 03:07 | And in here you are seeing some different
files that you may or may not have seen before.
| | 03:12 | One is this template.php.
| | 03:15 | This template.php has code that does a lot
of overriding or hooks into or pre-processing
| | 03:22 | or processing of the Drupal API and
the output that it is displaying for us.
| | 03:28 | We have the ability to, as a Drupal
themer, manipulate all these variables.
| | 03:34 | If I go ahead and expand the Includes folder and
take a look at, for instance, the process_include
| | 03:40 | and then look for the specific function called
responsive_process_region, I can see a function
| | 03:46 | here that's been commented out.
| | 03:48 | This is the KPR function, and this is a
function that's built into the Devel Module.
| | 03:53 | So even though I'm currently not having anything
enabled from the admin interface, I do have
| | 03:58 | ability to still use Devel to
output information to the page.
| | 04:02 | Let's see what happens when I uncomment this, save it,
and then tab back over to our browser and go to the homepage.
| | 04:11 | I'm now seeing some areas
with some different content.
| | 04:14 | Since we're dealing with the regions inside
of Drupal, I can see that these are actually
| | 04:18 | printing out page bottom,
toolbar, branding, slider.
| | 04:22 | If I tab back to over to our Editor,
comment this out and save it and then scroll down
| | 04:28 | a little bit to the responsive_process_page
function, and then uncomment the KPR function
| | 04:34 | here, and then save it and then tab back
over to our browser and refresh, I'm now seeing
| | 04:40 | even more information available to us.
| | 04:43 | If I actually expand this array, I can see
that there is are tons of variables that if
| | 04:48 | I wasn't using this function, I may not know
it existed or that I actually had the ability
| | 04:53 | to use these or manipulate these
when it comes to Responsive Design.
| | 04:58 | So that we don't display this information
on every page, let's tab back to over to our
| | 05:02 | editor, comment out that function again, save
the page, and then refresh it in the browser.
| | 05:08 | Now we're back to where we were before.
| | 05:10 | While there are many features that the
Devel Module provides us, the ability to output
| | 05:15 | Drupal variables is the most useful.
| | 05:18 | Now that we've walked through how to
configure and use the Devel Module for our theming
| | 05:23 | needs, it's time to move on to discussing
what responsive and adaptive design is and
| | 05:29 | the workflow involved in
Drupal 7 Responsive Design.
| | Collapse this transcript |
|
|
2. Adaptive vs. Responsive DesignWhat is responsive design?| 00:00 | So what is Responsive Design?
| | 00:02 | In simple terms, Responsive Design is making
sure your design responds to all environments,
| | 00:08 | from mobile, to tablet, to browser, and even
television screens, ensuring your design displays
| | 00:14 | the most important content, comparable to
the amount of viewing area now needs to be
| | 00:19 | considered on all web design moving forward.
| | 00:22 | Let's take a look at some websites that take
Responsive Design into consideration and discuss
| | 00:27 | why you would want to design responsibly and the
concepts, and techniques that make up Responsive Design.
| | 00:35 | When you think responsive, you generally
think fluid, and a layout that scales from large
| | 00:39 | to small as the browser resizes.
| | 00:42 | If we take a look at our drupal.fixed theme,
as we begin the resize the browser, we notice
| | 00:49 | that number one, we get horizontal scrollbars.
Number two, we start to lose content.
| | 00:56 | Number three, our menu disappears, and pretty
much the site is starting to look, well, not
| | 01:02 | very much like a site should look.
| | 01:04 | If I expand the browser back out, and we take a
look at our favorite coffee company, Starbucks,
| | 01:09 | we're going to start to see what
Responsive Design is all about.
| | 01:14 | Let's take a look some of the features
first, the most important, the content.
| | 01:18 | As we begin to resize our browser, the content
begins to scale, items start getting smaller,
| | 01:25 | yet all the content is still visible.
| | 01:27 | If I scroll down the page a little bit to
where I see even more of the content area
| | 01:32 | and then begin to resize down even further,
we can see some shifting taking place.
| | 01:37 | Content that was smaller in the right sidebar now
becomes bigger and is part of the main content flow.
| | 01:44 | As I continue to resize our browser down
to what we would expect to be the view in an
| | 01:49 | iPhone or in Android device, we can see that
those images and content take even more focus,
| | 01:55 | and the content becomes more important.
| | 01:57 | Also, if we take a look at the menu,
the menu has completely changed.
| | 02:02 | These are all responsive characteristics.
| | 02:05 | As I begin to expand the site out, I can watch the
menu change back into what we expect menus to look like.
| | 02:12 | And if I keep going even wider, I can
notice that the menu itself starts to get larger.
| | 02:17 | And if I hover over items, I have as a
dropdown effect that displays even more content.
| | 02:23 | So taking that in mind how does the
page exactly react to smaller screen sizes?
| | 02:29 | This is one of the major implementations of
Responsive Design, known as a Media Queries,
| | 02:34 | the ability to detect screen sizes, and then
manipulate the CSS Hide, Show, or Scale content accordingly.
| | 02:44 | Another concept you may have seen is moving
from a fixed-width pixel-based design to a
| | 02:49 | percentage based fluid design so that this
layout scales according to the browser itself.
| | 02:54 | Finally, how about the
images and how they scale?
| | 02:58 | This is another common responsive
characteristic that we're seeing in the mobile sphere.
| | 03:03 | We've discussed what Responsive Design is.
| | 03:05 | We've taken a look at some examples of
responsive websites, and why it's so important to consider
| | 03:11 | this when trying to reach your target audience.
| | 03:14 | However, before we begin to dive into some
different techniques of Responsive Design,
| | 03:19 | you may have heard another term that describes the
same approach we just viewed, Adaptive Design.
| | 03:26 | Let's take a minute and discuss this term
and how it compares to Responsive Design.
| | Collapse this transcript |
| Understanding adaptive design| 00:00 | While Responsive Design generally deals with
fluid layouts and techniques, Adaptive Design
| | 00:06 | can be considered a hybrid approach.
| | 00:08 | That is designing for different fixed-width
layouts, one layout browser, one layout for
| | 00:14 | tablets, and multiple
layouts for mobile devices.
| | 00:18 | Pictures are worth a thousand words, so let's see an
example of adaptive layouts in motion with dribbble.com.
| | 00:25 | This is a great example of Adaptive Design.
| | 00:28 | The minute you browse to the site and
begin to resize the browser, you may think that
| | 00:33 | this is a fixed-width design
at first. What do I mean?
| | 00:37 | Once I get to a certain section, I notice
horizontal scrollbars appear, this screen
| | 00:42 | is fixed with design to me.
| | 00:44 | However, if I keep resizing the browser down,
once I hit a certain breakpoint, the site
| | 00:50 | becomes completely fluid.
So what exactly is going on here?
| | 00:56 | Dribbble itself is a fixed-width browser design, but
fluid for mobile devices, such as tablets and phones.
| | 01:04 | Adaptive Designs like this use a lot of the
same techniques that Responsive Designs use,
| | 01:09 | however, unlike strictly fluid designs that
start off fluid and remain fluid, Adaptive
| | 01:16 | Designs generally don't worry about scaling 100%, and
instead serve various layouts based off different breakpoints.
| | 01:25 | The disadvantage, though, of this type of design
is that all the data is served to all devices
| | 01:31 | and may not respond to various screen sizes as
we first saw when trying to scale the site down.
| | 01:37 | This works if you're only worrying about
the user experience on specific devices, such
| | 01:41 | as the browser or tablet.
| | 01:44 | At this point, though, we've
taken a look at Adaptive Design,
| | 01:47 | the various concepts that make up an adaptive approach
and why you may prefer this method over a fluid one.
| | 01:53 | Generally, though, your client, the budget, and
the time constraints will dictate this approach.
| | 02:00 | But no one approach is better than the
other just as long as you're thinking about one
| | 02:04 | and implementing it with each new site.
| | 02:07 | Concepts and terms are great, but what type
of workflow should we use in reaching our
| | 02:12 | goal of Responsive Design?
Let's discuss that next.
| | Collapse this transcript |
|
|
3. The Adaptive ApproachDiscovering fixed-width layouts| 00:00 | Before mobile devices started evolving,
we were only concerned with the desktop.
| | 00:05 | However, screen resolutions quickly began
getting bigger as monitors became larger and
| | 00:10 | different standards started
to become more formalized.
| | 00:14 | As a designer, the need to be able to control
the layout regardless of the browser or monitor
| | 00:19 | size, introduced this concept of fixed widths.
| | 00:21 | Let's take a look at our fixed-width
website and discuss some of the pros and cons for
| | 00:28 | using such design methodologies, along
with taking a look at CSS grid frameworks, and
| | 00:33 | how we can use these to our advantage.
| | 00:36 | Let's begin by opening the browser and
browsing to our drupal.fixed website.
| | 00:41 | The website we are viewing is a
great example of a fixed-width design.
| | 00:44 | Meaning, until layout was designed using pixel-based
measurements, targeted for a specific screen
| | 00:49 | size to be viewable on most common browsers.
| | 00:52 | And this is evident the minute you begin
to resize the browser, everything just stays
| | 00:58 | right where it's supposed to be.
So what dimension are we staying at?
| | 01:02 | Well, let's use Chrome to our advantage here.
| | 01:05 | Command+Option+I opens the developer toolbar, and
from here we can inspect the HTML that's being output.
| | 01:12 | And if we start looking around at the structure
of our document, specifically the main region,
| | 01:18 | and if we expand this and then start taking a
look at some of these Divs that are in place,
| | 01:23 | the container Div, we notice that over in the
CSS Style panel, we have a width of 960 pixels.
| | 01:31 | That number, 960, may sound familiar to you.
| | 01:36 | You may have heard that before, because it
is a common width used by a lot of different
| | 01:41 | designs seen on the web today.
| | 01:43 | So much so that CSS grid frameworks have
been developed to assist the web developer and
| | 01:48 | designer with quickly
building sites using this standard.
| | 01:53 | If we browse over to 960.gs,
we see the 960 Grid System.
| | 01:58 | The Grid System provides a user with a 12
column layout that are each 60 pixels wide,
| | 02:04 | or a 16 column layout that are each 40 pixels wide, with
each layout having gutters for spacing between each column.
| | 02:12 | And if I scroll down a little bit on the page, I can
see an example of one site in particular that uses this.
| | 02:19 | And that is drupal.org itself.
| | 02:21 | If I click on the Show Grid button, you
get a representation of exactly how this grid
| | 02:26 | is laid out, and how these sites fit
perfectly within the 960 pixel width dimension.
| | 02:34 | So what are the challenges, though,
with using a 960 pixel dimension?
| | 02:38 | So far we've seen that using a CSS Grid Framework
to design fixed-width layout can assist us
| | 02:44 | definitely for making our work look
great, and it performs well on desktop.
| | 02:48 | But how about the mobile sphere?
| | 02:50 | When Apple introduced the iPhone, there was
an explosion in the growth of mobile devices,
| | 02:54 | and we were faced with the challenge of how to get
fixed-width layouts to function on a smaller screen size.
| | 03:00 | Then Apple went ahead and introduced the iPad,
and we had another screen size to deal with.
| | 03:05 | And then the competition, different form
factors, this explosion in the mobile arena created
| | 03:10 | so many different screen sizes that are
fixed-width design just didn't work that great.
| | 03:16 | So as you can see, fixed-width
designs work best in the browser.
| | 03:21 | They're meant for the browser,
they're meant for a fixed dimension.
| | 03:25 | Knowing where to start or even better yet
how to start a fixed-width design can be a
| | 03:29 | challenge in itself, though, unless you are
going to use the 960 Grid Framework for everything.
| | 03:34 | How does this fixed-width design handle small
resolutions and mobile devices that we become accustomed to?
| | 03:40 | Let's being to answer that question as we take a look at
various resolutions and a concept known as Breakpoints.
| | Collapse this transcript |
| Understanding breakpoints| 00:00 | You may have heard the term Breakpoints when taking a look
at Responsive Design and wondered, what are they talking about?
| | 00:06 | Well, a Breakpoint is a process in which
the display changes based on the resolution of
| | 00:12 | the device that it's being viewed
in, so what does that really mean?
| | 00:16 | Well, in simpler terms it means that as your viewing area
becomes smaller, your content becomes more important.
| | 00:22 | And a three-column layout may need to become
a two-column layout, et cetera, to avoid
| | 00:29 | unwanted effects like horizontal scrollbars.
| | 00:32 | To help understand this, let's take a look
at some different examples of known device
| | 00:35 | widths based on browser, tablet, and
phones, a great tool for resizing our design.
| | 00:43 | Here we have our fixed-width
design opened up in the browser.
| | 00:46 | We know from previous discussions that a design
is number one, fixed, but also fixed at 960 pixels.
| | 00:54 | This ensures that looks good at 1024 pixel
based resolution, which most common browsers use.
| | 01:01 | So 1024 pixels, well,
that's a Breakpoint in itself.
| | 01:05 | We've been designing for that regardless
of you were even aware that it was a Breakpoint.
| | 01:09 | But what about non-browser devices?
| | 01:11 | This is a tricky question, since there are
so many different form factors now for mobile
| | 01:16 | devices, ranging from tablets, to Android devices,
to the iPhone and even the new Retina Display.
| | 01:22 | Trust me, you would either go crazy trying
to design multiple versions of your website for
| | 01:27 | all these resolutions, or you
would have your work cut out for you.
| | 01:31 | Well, one tool that assists us in this
is the Responsive Design Bookmarklet.
| | 01:36 | If you browse over to responsive.victorcoulon.fr,
we have a handy tool for Responsive Design testing.
| | 01:46 | To install it, simply grab the RDW
Bookmarklet, and drag it to your Bookmark bar.
| | 01:53 | Once it's installed, we can use this by simply tabbing
back over to our site, and then clicking on this Bookmarklet,
| | 02:01 | what it does is it provides us with an
interface to take a look at the different breakpoints.
| | 02:07 | Let's begin with iPad landscape.
| | 02:09 | The iPad landscape is 1024x768
and our site looks great in this.
| | 02:16 | And the reason being is 960 pixels was built
for this particular Breakpoint, but what happens
| | 02:22 | at the iPad portrait breakpoint?
| | 02:25 | 768 pixels, things don't quite look
the way they we are expecting them to be.
| | 02:31 | But not bad, we could do a little bit
of work maybe to get this to look good.
| | 02:36 | But once we go down to the iPhone landscape,
we get it to 480 Breakpoint and then iPhone
| | 02:44 | in its normal state, were
getting down to 320 pixel Breakpoint.
| | 02:48 | So now if we take a look at the most common
Breakpoints for different devices, how does
| | 02:53 | our fixed-width design look
in those various screen sizes?
| | 02:57 | Well, we know that it doesn't look great in
three out of the four, but we need to start
| | 03:02 | thinking about how we can improve on the design,
and make those other Breakpoints at various
| | 03:08 | sizes more important to us.
| | 03:11 | Well, there are various tools for testing
your design widths, and this RWD Bookmarklet
| | 03:15 | is great for assisting us
with making those decisions.
| | 03:19 | Once we have made the decision of what
Breakpoints we want to design for, how do we go about
| | 03:24 | applying those different fixed widths?
| | 03:27 | Well, one such tool is adapt.js,
and we will take a look at that next.
| | Collapse this transcript |
| Using Adapt.js with Drupal| 00:00 | We started with a fixed-width layout design
for the browser but quickly realized that
| | 00:04 | everyone doesn't use a browser solely for
viewing our design and that different Breakpoints
| | 00:09 | exist that we need to take into consideration.
| | 00:12 | So, now we decide to make a tablet version
of our site and a mobile version of our site,
| | 00:16 | and I have created three different style
sheets based on these breakpoints.
| | 00:20 | But how do I tell the browser
which style sheet to use?
| | 00:22 | One such way is by using a
JavaScript file known as Adapt.js.
| | 00:28 | Adapt.js will help us to determine the device that
we are using and apply a style sheet accordingly.
| | 00:33 | Let's take a look at Adapt.js, how to use it,
and best practices to integrate it with Drupal.
| | 00:39 | In my browser I have adapt.960.gs open.
| | 00:43 | The Adapt.js file is just a JavaScript file
that will help us determine which CSS files
| | 00:50 | to load when the browser renders a page.
| | 00:52 | This is going to allow for us for designing
fixed-width layouts based on certain Breakpoints,
| | 00:57 | and then displaying those layouts accordingly.
| | 01:00 | As you can see, Adapt.js has some already
predetermined Breakpoints, ranging from mobile,
| | 01:05 | all he way up to large monitors or possibly
even browsers being displayed on televisions.
| | 01:11 | Let's begin resizing the page so that we can
see the different breakpoints being reached
| | 01:15 | and the different design changes taking effect.
| | 01:18 | As I begin to resize a page, we go from browser
to tablet to even mobile, always they are
| | 01:24 | taking effect based off the different breakpoints
being reached, and a substitution of the style
| | 01:29 | sheet for that particular breakpoint.
So how do we utilize this technique with Drupal?
| | 01:35 | Your first thought might be to search for a
module to integrate Adapt.js into your Drupal 7
| | 01:39 | website, and while I would tend to agree
with you that in most cases the module approach
| | 01:44 | is best, we don't have that option this time.
| | 01:47 | So, let's take a look at ways to integrate any
JavaScript file into your Drupal theming arsenal.
| | 01:53 | Let's go ahead and start by clicking on the
Download button, so we can download the Adapt.js
| | 01:57 | file to use with our Drupal Instance.
| | 02:00 | Next, let's go ahead and open up the
Downloads folder, and extract the file.
| | 02:05 | Now that it has been extracted, we need to
open up the assets js folder, and I want to
| | 02:10 | copy the adapt.js script
over to my Drupal Instance.
| | 02:15 | Let's go ahead and choose Desktop/Drupal/
drupal.adaptive and then locate our sites
| | 02:20 | folder, and I'm looking for the theme, in
this case the responsive theme, and inside
| | 02:25 | of here I have an assets JavaScript folder
and I want to place inside of the library.
| | 02:30 | Once I have this in my library, I need go
ahead and call this from Drupal, let's close
| | 02:35 | this window and then open up over Editor and then locate
the drupal.adaptive/sites/all/themes/responsive folder.
| | 02:45 | Once inside the responsive folder, I want
to make reference to that Adapt.js library.
| | 02:49 | so let's go ahead and click on the responsive.info
file, and one thing to note here is that we
| | 02:54 | want to make sure we call this after any
script that's calling this Adapt.js library.
| | 02:59 | So, I am simply going to copy the last scripts
lines, paste it in, and then change the custom.js
| | 03:05 | to be calling the library adapt.js files.
| | 03:09 | So, now I have the library in place, I have
a reference to inside my .info file, the next
| | 03:15 | thing I need to do is I need to actually
set this up so that the configuration settings
| | 03:21 | call the correct style
sheets when this is fired.
| | 03:23 | We can do that by looking
at the custom.js file next.
| | 03:28 | Go ahead and save that .info file and then
browse back over to assets/js/custom.js.
| | 03:35 | Another thing to note is we do not want place
this inside of the (document) .ready (function().
| | 03:39 | So, I am just using a variable that needs
to be accessible to the script at all times,
| | 03:44 | we want place this on the outside
of our (document) .ready (function().
| | 03:48 | Go ahead and hit Enter a couple of times to
create some space, and then we are going to
| | 03:51 | go ahead and first make a comment.
| | 03:53 | This will be our Adapt.js Settings, that
way if we come back here, we know exactly what
| | 03:59 | this particular script is calling.
| | 04:01 | Then next what you do is create a variable,
this variable is for the ADAPT_CONFIG, inside
| | 04:07 | the ADAPT_CONFIG, there are three
different settings that I would like to call.
| | 04:11 | The first is the Path, the path is going to
be where is the CSS folder that contains the
| | 04:16 | style sheets I want to
use, let's enter that now.
| | 04:19 | That would be the sites/all/themes,
the name of the theme, in this case
| | 04:19 | responsive, the assets folder, and then the CSS folder.
| | 04:30 | Since I'm entering multiple settings,
I need to make sure I have a comma after
| | 04:32 | here, and then go ahead
and enter our second setting.
| | 04:36 | The second setting is dynamic, meaning that
when the page is called, and as the page resizes,
| | 04:42 | I want this to continuously fire.
So, in this case dynamic is true.
| | 04:46 | We'll add another comma so
that we can add our last setting.
| | 04:50 | This last setting is the range, the range
is when one particular pixel Breakpoint is
| | 04:56 | reached, what style sheet would get called.
| | 04:59 | Since there were three different Breakpoints
that we are interested in, mobile, tablet
| | 05:03 | and browser, we need to go and enter that range.
Let's go ahead and add some square
| | 05:08 | brackets, since this is going
to having multiple ranges inside
| | 05:10 | of here, and then the first range is going
to be from 0px to 760px, and this is going
| | 05:17 | to call our mobile.css file, I will place
a comma, and then put in my second range.
| | 05:24 | My second range is going to be from 760px,
all the way up to 980px and for this I want
| | 05:32 | the tablet.css style sheet to be called.
| | 05:36 | Our last and final range is going to be
from 980px to 1280px and for this I just want
| | 05:45 | the standard grid that we already have in place
to be called, so this will be for our browsers.
| | 05:50 | Now that I have the configuration in place,
let's go ahead and save this, and then our
| | 05:55 | third and final step that we need to do is we need to
actually create the mobile and tablet style sheets.
| | 06:01 | So, if we actually open our css folder and
right-click on it and say New Text Document,
| | 06:06 | I want to go ahead and create a mobile.css file,
as well as, I want create a tablet.css file.
| | 06:15 | Inside the mobile.css file I want to create
something that is visually different so that
| | 06:18 | I can actually see this being fired
off once we reach that Breakpoint.
| | 06:22 | The most common element on the pages is the header,
so let's look at just changing the background color.
| | 06:26 | So, let's go ahead and target the header, and we
are going to change the background-color:,
| | 06:31 | and we are going to change this to be
#98C4DA, this will give us kind of a bluish tint.
| | 06:40 | I am going to go ahead and copy this, make
sure I save this file and then go over to
| | 06:45 | my tablet and paste this in and just
change the value of my background-color: So, for
| | 06:51 | our tablet, I want to be kind of a grayish
color, so in this case, 757575, save this.
| | 07:00 | Now with all the steps completed, let's go
ahead and browse back over to our Instance
| | 07:04 | of Drupal, and then one thing to keep in
mind is since we made a change the .info file,
| | 07:11 | we want to make sure that
we flush the Drupal cache.
| | 07:13 | In order to do that we need to be logged in.
| | 07:16 | Go ahead and log in by going to /user, and
then putting in the User credentials of lowercase
| | 07:22 | admin, same for the
Password, and then logging in.
| | 07:25 | From here let's go ahead and flush the Drupal
cache, go back to our Home page and then begin
| | 07:30 | to resize the browser, there is our great
color, so we reached the tablet, as I continue,
| | 07:35 | we get to our blue color,
so we reached on mobile.
| | 07:37 | So, you can see the adapt.js script is being fired off.
Sticking with our fixed-width approach,
| | 07:43 | we'll now take a look at using adapt.js to
apply different styling for our design based
| | 07:48 | on the Breakpoints we identified.
| | 07:50 | Having such a tool available to help us and
applying the different styling and in turn
| | 07:54 | making our design more responsive for our end users is
a great way to integrate the Adapt.js script into Drupal.
| | 08:02 | While taking an Adaptive approach to Responsive
Design may work for you, it may not work for everyone.
| | 08:07 | Keeping that in mind, let's move on creating a
fluid theme that will allow for a more flexible approach.
| | Collapse this transcript |
|
|
4. Fluid LayoutsDiscovering fluid layouts| 00:00 | Unlike their pixel-based, fixed-width counterparts,
fluid layouts use percentage-based measurements,
| | 00:06 | and are designed to fit any browser size.
| | 00:08 | In the case of Responsive Design this allows for the
design to render appropriately in mobile, tablet, and browsers.
| | 00:16 | Instead of having to design various fixed-width
designs, fluid layouts allow you to design
| | 00:21 | a single layout and then worry about how content will flow
within your document through various responsive techniques.
| | 00:28 | Let's take a look at some examples of fluid
layouts, some CSS frameworks that use fluid
| | 00:33 | layouts, and why you would want a fluid
design as part of your Responsive toolbox.
| | 00:39 | Trying to find a good fluid layout only site
is actually more difficult than you may think,
| | 00:44 | since everyone is now doing
Responsive Design on top of it.
| | 00:47 | If we tab over to Google, and we Google the
word fluid layouts, we will see that we return
| | 00:52 | results that date all the
way back to 2006 and older.
| | 00:57 | So, fluid layouts have been around for quite a while,
the question is why are we just worrying about it now?
| | 01:03 | So that we don't confuse ourselves with fluid layouts
that more than likely have responsive characteristics.
| | 01:09 | Let's go ahead and open up the HTML
Rendition of our drupal.responsible website that is
| | 01:14 | part of the exercise files
for our premium subscribers.
| | 01:17 | You can locate the inside of Exercise Files/HTML/
responsive.fluid, let's go ahead and double-click
| | 01:23 | on the index.html file to open up in the browser so
that we are not distracted with the scrolling slider.
| | 01:30 | I'm going to go ahead and click on the
right arrow once to stop it from scrolling.
| | 01:35 | The first thing you should notice is that the layout seems
a little wider than our fixed-width version of our theme.
| | 01:40 | The reason is that unlike the 960 pixel-based
design, this fluid layout starts off at 1140 pixels,
| | 01:46 | which is more the standard
today with larger monitors.
| | 01:50 | Next, let's grab the right-hand side of our
browser and slowly shrink the width of our
| | 01:55 | viewing area and notice how the content
begins to reflow without truly breaking our design.
| | 02:01 | Unlike our fixed-width design which is based on
pixels, and there is a set unit of measurement,
| | 02:06 | our fluid width design utilizes
percentage-based measurements.
| | 02:10 | So, as the user resizes the browser, the content is
able to grow and shrink in response to the viewing area.
| | 02:17 | Already you should be able to see the advantage of
using a fluid design, such as a more user-friendly
| | 02:22 | design, the amount of extra white space,
similar designs that look good on different screens
| | 02:26 | and most important, the elimination of those horrid,
horizontal scrollbars produced by fixed-width designs.
| | 02:34 | However, though, you might be asking
yourself what fluid framework if any I am using?
| | 02:38 | I have actually Bookmarked a
few for us to take a look at.
| | 02:42 | The first is the 1140pxl CSS Grid, which the responsive.fluid
theme that we are looking at is based off of.
| | 02:50 | Another Grid for you to take a look at
would be the twitter Bootstrap, this is another
| | 02:54 | good CSS framework to use as a starting point when
you are thinking about fluid in Responsive Designs.
| | 03:01 | The last and not necessarily the least is Skeleton.
| | 03:03 | Skeleton is a Beautiful Boilerplate for
Responsive, Mobile Friendly Development and the great
| | 03:09 | thing about these three frameworks is that
there is a Drupal theme equivalent that you
| | 03:13 | can use as a starting point for any design.
| | 03:16 | We now review what fluid layouts are, how
they differ from fixed-width, and some of the
| | 03:21 | CSS frameworks that help us
in creating a fluid layout.
| | 03:25 | But how do we actually go about converting
our fix-width layout into a fluid width layout?
| | 03:29 | The answer is all relative, well, so to speak.
| | 03:32 | Simple math is involved in converting the
pixel-based widths to percentage-based widths,
| | 03:37 | and we will discover that next, as we
begin to convert our theme into a fluid layout.
| | Collapse this transcript |
| Exploring fluid widths| 00:00 | We know that pixel-based
widths are static in measurement,
| | 00:03 | meaning they do not resize based on our
browser size, but we can overcome this by converting
| | 00:08 | our pixel-based measurements
to percentage-based ones.
| | 00:11 | This all starts with a little math and a top-down
approach to tackling our fixed-width theme.
| | 00:16 | Let's begin, and I am going to take a look
at our Responsive Drupal theme in the browser.
| | 00:20 | Let's quickly look to see what happens
when we begin shrinking the browser window.
| | 00:24 | Once we hit our fixed-width dimension, we
have the presentation of horizontal scrollbars.
| | 00:29 | Knowing this, how do we first go
about making our fixed-width fluid?
| | 00:33 | You may think percentage based dimensions? But
exactly how do we ensure our design still looks good?
| | 00:39 | Well, let's just take a moment and open up our
Chrome developer tools, that is Command+Option+I
| | 00:43 | on the keyboard, or if you right-click
anywhere in the HTML and click on Inspect Element,
| | 00:47 | it will also open up the tools.
| | 00:50 | One of the things I want to take a look at
is what's actually constraining our design?
| | 00:53 | And if I take a look at the different
sections, I am going to see this div.
| | 00:57 | This <div class= "container, and this
repeats throughout most of the design.
| | 01:03 | Here it is for the section "toolbar",
here it is for the <header.
| | 01:05 | If I scroll down to main, here it is up
around the main > section, and if I actually take
| | 01:10 | a moment and select this or highlight this
particular div, I'll see that over in the
| | 01:14 | CSS panel, I have a width of 960 pixels.
| | 01:19 | We can change this on the fly by simply
selecting the pixel value and changing it by either
| | 01:24 | moving our arrow up and down or
by simply typing a value in place.
| | 01:28 | Let's see what happens when
we change this to be 100%.
| | 01:32 | Let's go ahead and minimize the upper tools a
little bit, and while 100% it definitely turns our
| | 01:37 | design from fixed to somewhat fluid, we
do lose our design flow a bit as well.
| | 01:42 | Thinking about this for a second, while we
want the layout to be fluid, we also want
| | 01:46 | to set a maximum width that it can
confine to so that our design still looks good.
| | 01:52 | Expanding the Chrome developer tools a little bit,
let's go ahead and take a look at this container class again.
| | 01:57 | Let's add an additional CSS rule to a
container by using the Tab key to drop down to line
| | 02:02 | and enter max width of 960 pixels, go ahead and
close the Chrome developer tools, now that
| | 02:10 | looks a little bit better.
| | 02:11 | We constrained to 960 pixels when we are on a
full browser width, but as we begin to shrink
| | 02:17 | the browser, it becomes fluid.
| | 02:20 | So this is step one of converting our
fixed-based width, to be more fluid.
| | 02:24 | We've set the container, which is wrapping
all of our elements to be 100% width, with
| | 02:30 | a max width of 960 pixels.
| | 02:33 | If I Refresh the page, you can see this snap
right back to where it was, and that's because
| | 02:37 | we've only used the Chrome
developer tools to make the changes.
| | 02:40 | At this point let's now open over favorite
Editor and choose the grid.css stylesheet
| | 02:45 | located inside the asset
css folder for our Drupal theme.
| | 02:49 | Opening up the Editor I want to browse to
Drupal/drupal.responsive and then locate
| | 02:55 | the sites/all/themes/responsive/assets/css folder.
| | 03:01 | Then if I take a look at the grid.css, this is
the CSS that makes up our framework for a layout.
| | 03:08 | Let's go ahead and make the changes that we
did on the Chrome developer tools permanent,
| | 03:12 | by actually modifying the container class.
| | 03:15 | We are going to go ahead and change 960 pixels to
be 100%, and we are going to add that max
| | 03:20 | width rule and set it to 960 pixels.
| | 03:23 | I am going to go ahead and hit Save to save
my changes, then I am going to go ahead and
| | 03:27 | tab back over to the browser, hit Refresh,
and go ahead and resize real quick just to make
| | 03:32 | sure that it took effect, and it did.
| | 03:34 | One thing you may notice, though, is when I get to a
certain width, I have a column begin to drop out.
| | 03:41 | Responsive layout section, which was right
next to HTML5 in CSS 3 is not quite fluid,
| | 03:48 | and we need to take a look
at how we can change that.
| | 03:51 | Go ahead and open up the Chrome developer
tools again, let's go ahead and inspect this
| | 03:55 | particular section that's inside the <div main,
inside the container=class, and inside this features section.
| | 04:02 | From here I can see three different asides
that have a class of four columns, and in
| | 04:08 | this we have a width of 300 pixels.
| | 04:10 | So, how do we go about converting
300 pixels to be percentage based?
| | 04:17 | Well, it's simple, it's math, and that math is Target
divided by Context equals Results, or the percentage
| | 04:25 | that we are looking at.
Well, what's our context?
| | 04:28 | In this case it's our container, so 300 divided by the 960,
that will give us the result that we are looking
| | 04:35 | for, and that's what we are going to need to change
that pixel, too, in a percentage based measuring.
| | 04:41 | Let's do that now.
| | 04:42 | We are going to take a look at the fourcol class,
so it's currently 300 pixels and do the math now.
| | 04:49 | We have 300 pixels divided by 960 pixels gives us 0.3125,
but since we are looking at a percentage base,
| | 04:59 | we need to round that up.
| | 05:01 | So let's multiply that by 100,
and that gives us a 31.25%.
| | 05:07 | Let's go ahead and make that change to our rule.
| | 05:09 | What I generally like to do is actually make a CSS comment
that has the Target divided by the Context equaling the Result
| | 05:17 | inside the common as well so that I have a
baseline of what my context is as I go back
| | 05:22 | and look through the CSS style sheets
later on. So 300/968=31.25%.
| | 05:34 | Now let's go ahead and change the 300 pixels to
that percentage that we just calculated, 31.25%.
| | 05:43 | Let's save this, tab back over to
our browser, and let's hit Refresh.
| | 05:47 | Now let see what happens when I begin to
resize the browser, looks a lot better, the column
| | 05:53 | doesn't drop out until it reaches certain
Breakpoint, and that's actually being dropped
| | 05:57 | out due to another asset on the page.
So, the fluid widths are actually taking affect.
| | 06:02 | I want to take a look at one more example here,
and that is if we scroll down to the bottom
| | 06:07 | and take a look at the footer, I now have four columns here
at the bottom that are still not a fixed-width dimension.
| | 06:12 | I want to go a head and take a look at these
in the Chrome developer tools by opening up
| | 06:16 | the Footer and then the Container, and
there is a row here that has these particular A
| | 06:21 | sites, and if I select this I see
that the width on here is 220 pixels.
| | 06:26 | Well, knowing that our math here is Target
divided by Context equals Result, let's go ahead
| | 06:31 | and calculate what the percentage for this should be.
| | 06:34 | Find the threecol class, I am
going to copy this comment real quick.
| | 06:38 | We will go ahead and change the
value, so in this case 300 will be 220.
| | 06:42 | Our context is still same, it's still 960 pixels,
however, our math is going to change a little bit.
| | 06:47 | So, let's go ahead and open up the calculator,
go ahead and clear it out and say to 220/968 equals--
| | 06:54 | remember, we got to turn this into a percentage--
we are going to multiply this times 100, and
| | 07:00 | this is going to give us 22.9166666667%.
| | 07:06 | At first you maybe thinking, I am just going
to round that number up, and I am going to
| | 07:11 | say, stop, leave that number exactly how it is.
| | 07:14 | Most browsers today can do that type of math,
and the more accurate that calculation is
| | 07:19 | the better fluid design we are going to
have when we go to look at this in the browser.
| | 07:22 | So, knowing that we have that number, I am
just going to go ahead and actually select
| | 07:26 | the calculate itself, and Command+C, or Ctrl+C
on a Windows machine, and copy that value
| | 07:32 | and then actually go ahead and paste it in.
| | 07:35 | Do the same over here for the pixels, add
a percentage sign to the end, go ahead and
| | 07:39 | save my changes, tab back
over to my browser, and Refresh.
| | 07:44 | Now at the Footer section, highlight it on
a browser, let's go ahead and resize and see
| | 07:48 | what takes place, again, you saw the one
column dropout, and that's because it has to do with
| | 07:53 | images, which we are going to tackle a little
bit later, but the column themselves are shrinking
| | 07:57 | the way they were expecting them to shrink.
| | 07:59 | At this time I am going to let you go ahead
and modify the remaining classes inside of
| | 08:04 | the grid.cssstylesheet to convert the
pixel-based measurements to percentage based ones.
| | 08:11 | Now that we have converted all of our pixel-based
to percentage based measurements, we are one
| | 08:16 | step closer to making sure that
our fixed-width design is more fluid.
| | 08:20 | Now that we have a good understanding of how to
convert pixel-based measurements to percentage-based
| | 08:25 | measurements, let's move on to tackling
the margin and padding our containers so that
| | 08:29 | they flow better within our HTML
document, as we resize the browser.
| | Collapse this transcript |
| Working with fluid margins and padding| 00:00 | Now that we know the math, we should probably
continue cleaning up our design by addressing
| | 00:04 | the margins and padding of our containers.
| | 00:06 | Without addressing this, we would have content
that doesn't flow nicely as our browser resizes.
| | 00:12 | Before we start, though, it's not as easy as
it sounds, unless you know that margins and
| | 00:16 | padding are handled a little bit differently.
It's all about context.
| | 00:20 | Let's explore what these differences are as
we look at making margins and paddings fluid.
| | 00:25 | Utilizing our Target divided by Context equals Results
rule, we'll want to modify the margins and paddings
| | 00:30 | on a layout by keeping in mind that the context
can change based on the relative parent element.
| | 00:36 | Let's continue by tabbing back over to our Editor, and
I have the grid.css open from the previous video.
| | 00:42 | If we scroll down on the bottom,
we'll find our first instance of margin.
| | 00:46 | In this case, margin-right, which is
actually assigned to every single class that deals
| | 00:51 | with columns and currently it's
set at margin-right of 20 pixels.
| | 00:57 | So how do we do the math on this? Simple.
The same way that we've been doing it.
| | 01:01 | Since these columns are actually contained
within the container, the context has not changed.
| | 01:07 | So our math would actually be 20 pixels divided
by 960 pixels to give us our percentage-based
| | 01:13 | measurement that we're looking for.
| | 01:16 | Like usual, I'm going to go ahead and create a
comment first, and actually put in my figures
| | 01:19 | that I'm going to be dividing against so that I
actually can reference these numbers again later.
| | 01:24 | So 20px/960px =, and close the comment and
then I'm going to go ahead and open up the
| | 01:30 | Calculator, doing the math 20 divided by
960 equals, and then multiplying this by 100,
| | 01:37 | since we're dealing with percentages,
gives us 2.083333333333, to infinity.
| | 01:44 | Based off this calculator, let's go
ahead and just copy this and paste the figure in.
| | 01:49 | Make sure to put the percentage mark on the end of it,
and then let's change the 20 pixels to that number.
| | 01:55 | Now that I have that, let's go ahead and save
it, tab back over to our browser, and Refresh.
| | 02:00 | I'll go ahead and scroll down to the bottom
now, previously we had this wrapping taking
| | 02:06 | place with our gallery section.
| | 02:08 | So if I resize the browser now, you can notice
that that column no longer drops off the page,
| | 02:13 | and that's due to the margin right now
being a fluid measurement percentages.
| | 02:18 | The same held true for our responsive
layout column up in our features section.
| | 02:23 | We can now see that this is becoming more
responsive and more fluid, because not only
| | 02:27 | does our container and our columns contain percentages,
but now our margin for those columns does as well.
| | 02:34 | Let's continue this conversion with tabbing
back over to our Editor, and this time let's
| | 02:39 | take a look at the layout.css.
| | 02:42 | Let's focus on the primary layout areas first.
Toolbar, Header, Main, Footer, and Copyright.
| | 02:48 | Since all these regions share the same
context of 960 pixels, doing the math that we did
| | 02:52 | previously should be pretty simple.
| | 02:54 | A simple rule of thumb, however, when I
develop a Responsive Design is to only worry about
| | 02:58 | the widths and the left and
right margins or paddings.
| | 03:02 | There's no reason to actually go ahead and convert
the tops and bottoms, because we're not dealing
| | 03:07 | with a browser that stretches from
top to bottom, but from left to right.
| | 03:11 | Let's go ahead and scroll down layout.
css page until we find the footer section.
| | 03:16 | To better help visualize the changes that
are going to take place, I'm going to do
| | 03:19 | some real quick clean-up.
| | 03:21 | I'm going to go ahead and move this down
from a single line to multiple lines so that we
| | 03:25 | can actually add our comments like we did
before when we get ready to tackle the padding
| | 03:30 | here on the footer element.
| | 03:31 | And now that we take a look at the padding
here, the first figure that we need to actually
| | 03:35 | calculate for is the 10 pixels, the 43 pixels is
for the top and the 40 pixels is for the bottom.
| | 03:42 | Knowing that, let's go ahead
and take a look at our conversion.
| | 03:45 | Adding our comment in again as usual, we have
10 pixels divided by, in this case our context
| | 03:51 | is still 960 pixels, equals, and
let's go pull up the calculator again.
| | 03:56 | I have 10 divided by 960 equals, multiply that times 100,
and that gives us our figure that we're looking for.
| | 04:04 | Now copy that, paste it in, add the percentage,
and then go over to my 10-pixel increment
| | 04:11 | and change that as well.
Go ahead and save my changes.
| | 04:14 | One of the areas I want to take a
look at really quick is the Copyright.
| | 04:16 | We're going to modify the
padding on this as well.
| | 04:19 | Let's go ahead and do a little bit of house cleaning,
and since we're dealing with--you guessed
| | 04:23 | it--10 pixels again, we should
have the same calculation as before.
| | 04:26 | Add the comment first, 10 pixels divided
by 960 pixels equals, our 1.04166667%, close
| | 04:38 | our comment and make sure we
replaced the 10 pixels with that percentage.
| | 04:43 | Again, save the page.
| | 04:45 | So now our footer and copyright for
our padding has been taken care of.
| | 04:49 | Let's go ahead and refresh the page in
the browser to take a look at what happened.
| | 04:52 | So we're dealing with the footer and with
the copyright section, and so the padding
| | 04:56 | now has become fluid as well.
| | 04:59 | So far we learned to deal with the context of
960, but earlier I'd stated that the context
| | 05:04 | changes depending on the
relative parent element.
| | 05:07 | This happens once you begin
nesting elements inside one another.
| | 05:11 | For example, let's take a look at
the gallery section of our footer.
| | 05:14 | We have a list with four images,
all containing margin and padding.
| | 05:18 | The first parent element has a
width of the three-column class.
| | 05:21 | So our new context in this case will be
the value that that three column class had.
| | 05:27 | Let's go ahead and tab back over to our Editor,
locate the image list, here it is here, do
| | 05:32 | some real quick house cleaning.
| | 05:34 | Here we have multiple
elements that we need to convert.
| | 05:36 | We have a width, we have a margin right, we
have a margin bottom, and we have padding.
| | 05:42 | So based off of the conversion here we
need to look at what the context was, and like
| | 05:46 | I had said previously, our context for
this instance is no longer 960 pixels.
| | 05:52 | This is based off of our grid stylesheet for
the three columns, which in this case--and
| | 05:57 | this is a reason why I do comment is
because we need to know what that figure was.
| | 06:02 | Trying to figure out what 22.91666, et cetera,
was in pixels would be nearly impossible,
| | 06:09 | but knowing that the three column class
actually had a container size of 220 pixels, that gives
| | 06:15 | us our new context to divide for.
| | 06:18 | So if we go back to the image list, back
on the layout.stylesheet, we can then do the
| | 06:22 | math, add a comment in again.
| | 06:25 | Here we have 80 pixels divided by 220 pixels,
because that's the parent elements container is equal to.
| | 06:33 | Let's go ahead and open up the calculator,
clear out the previous value, and do 80 divided
| | 06:38 | by 220 equals, multiply that times by 100,
and we get 36.3636 et cetera, percentage.
| | 06:46 | Let's simply copy that, paste it in place,
add the percentage, and then make sure we
| | 06:52 | replace the width with that percentage base.
| | 06:55 | At this point I'm going to let you make the
remaining changes to any margin and padding
| | 06:59 | inside this specific stylesheet.
Keep in mind, though, that the context may change.
| | 07:05 | So make sure you take a look at what the parent
element is in order to determine that context.
| | 07:10 | Now that we have finished our conversions,
this is the main reason your parents told
| | 07:15 | me that you would use math when you grew up.
| | 07:17 | Understand the subtleties of how context comes
into play when converting pixel-based margins
| | 07:22 | and paddings is important to
making sure content flows properly.
| | 07:26 | Knowing how to locate that context is even more
important when you're dealing with nested parent elements.
| | 07:32 | Speaking of content, how about text itself?
| | 07:35 | How do I make sure that it's
responsive or fluid in my design?
| | 07:39 | Let's explore that next.
| | Collapse this transcript |
| Making text fluid| 00:00 | When you start to look at making text fluid and
flexible, you need to begin with an understanding
| | 00:04 | of baselines for your CSS and the differentiation
between pixels and em based units of measurement.
| | 00:11 | Let's begin by taking a look at what a baseline
is and how it sets the basis for how our font
| | 00:16 | size will render in the browser.
| | 00:18 | Everything we've been doing so far is
dealt only with widths, margins, and padding.
| | 00:22 | However, our text has remained the same size.
| | 00:25 | As we have found out by now, this is due
to the pixel-based nature of measurements.
| | 00:30 | Instead, though, it makes more sense to
convert those pixels to be em based. And you may be
| | 00:34 | asking yourself what is an em?
| | 00:36 | Well, an em is a relative unit of
measurement based on the letter M.
| | 00:40 | The size of em is determined in
relation to the size of its context.
| | 00:44 | So we need to make sure we set a baseline for
us to even have a starting context to begin with.
| | 00:49 | Go ahead and tab back to your Editor and open up
the base.css stylesheet and take a look at
| | 00:53 | the CSS rule for the body element.
| | 00:56 | Not the first one, but the one
that actually deals with typography.
| | 01:00 | In this case we're looking at a font of
16 pixels with a line height of 26 pixels.
| | 01:06 | Both of these measurements we will
look at converting to be em based.
| | 01:10 | However, we need to have a baseline to start with,
and in most browsers 16 pixels is the equivalent
| | 01:16 | of 100% when dealing with font size.
| | 01:19 | This rule sets our baseline font size, and
once we begin converting our pixels to ems
| | 01:23 | it will allow for us if needed to increase or
decrease the font size throughout our entire
| | 01:29 | document by simply changing that percentage.
| | 01:32 | Let's take a look at actually how that
works before we start our conversions.
| | 01:36 | I'm going to add a new rule here for the body.
| | 01:38 | And I'm simply going to say font
size is 100%, so 16 pixels is 100%.
| | 01:46 | If I save this real quick, and I tab back
to our browser, and I Refresh, you're not
| | 01:51 | going to see anything happen, okay.
| | 01:53 | The font remains the same, and that's because
the browser is already defaulting to that 100%.
| | 01:58 | Let's go ahead and change this
real quick and see what we get.
| | 02:00 | I'm going to go ahead and change 100% to be 60%.
| | 02:04 | Save this, tab back over,
and then let's Refresh.
| | 02:07 | We notice some changes, more specifically with
the body text or text that's inside paragraphs.
| | 02:13 | And the reason being is because there is
not a pixel-based measurement set on those.
| | 02:17 | So, when we start our conversions, and we
actually start modifying our headings for
| | 02:22 | both of the font size, as well as a line height, when
that percentage changes, those will respond to that.
| | 02:29 | So they will be more fluid and flexible when we
start resizing our browser down to tablet and to mobile.
| | 02:36 | Tab back over to our Editor, let's go ahead and
change that percentage back to 100% because
| | 02:40 | we're really not going to deal with currently.
| | 02:42 | What I do want to take a
look at, though, is our headings.
| | 02:45 | And let's do some real quick housecleaning
just to make it easier for us to do commenting.
| | 02:48 | First thing I want to do is
talk about converting font sizes.
| | 02:52 | Let's begin by converting our h1.
In this case our context is 16 pixels.
| | 02:57 | Remember, our body sets the context.
| | 03:00 | So let's go ahead and add the comment, and
we're going to do 46 pixels divided by 16
| | 03:07 | pixels to give us our, not
percentage, but em-based value.
| | 03:12 | Let's go ahead and open up the calculator and
do the math, 46 divided by 16 equals 2.875 ems.
| | 03:22 | Remember, there's no
conversion to percentages here.
| | 03:25 | So we're not multiplying this number by 100.
So the actual value that we want is truly 2.875.
| | 03:31 | I'll copy this, I'll paste it in, and then add
em, since we're doing an em based conversion,
| | 03:37 | close my commenting, and then
change my 46 pixels to be 2.875 ems.
| | 03:42 | I'm going to go ahead and save the work,
tab back over to the browser and then Refresh.
| | 03:49 | Really do not see a change, and that's because the pixel-based
measurement and em based measurement currently match.
| | 03:55 | Tab back over to the Editor and do the
same thing for the font size of the h2.
| | 04:00 | Again, some real quick
housecleaning, and let's do the math.
| | 04:04 | We have 28 pixels divided by 16 pixels,
open up the calculator, clear out the previous
| | 04:10 | value, 28 divided by 16, that gives
us 1.75 ems, go ahead and close our comment.
| | 04:18 | Go ahead and actually physically
change the font-size over here.
| | 04:21 | Make sure it's em based and save.
So that's conversion of the font sizes.
| | 04:27 | What about the line height?
| | 04:28 | One thing to note is when we convert our line
height that our context is no longer the base
| | 04:33 | of the body element, but it's the base of the actual
element that we're dealing with, in this case the h2.
| | 04:41 | So the conversion would be, in the case of our
h1, it would be 50 pixels divided by 46 pixels.
| | 04:47 | And this is something that's
often missed when doing conversions.
| | 04:52 | In most cases or for reason your text looks off, it's
more than likely that you've used the wrong context.
| | 04:58 | Let's go ahead and do the conversion now, 50
pixels divided by 46 pixels is equal to 50 divided
| | 05:06 | by 46 equals--and we have this really large
number here, but again, we want to keep these
| | 05:12 | exactly the way the
calculator spits it out to us.
| | 05:14 | So go ahead and copy this, paste it, add the
em to the end, close the comment, and let's
| | 05:19 | change it for the line height over here,
paste it in, make sure that em is there, save.
| | 05:24 | Let's go ahead and tab back
over the browser and then Refresh.
| | 05:27 | Again, we're not seeing a change,
and this is exactly what we want.
| | 05:30 | If you saw huge fluctuation, again is because
you've used the wrong context for your math.
| | 05:36 | I'm going to tab back over to the Editor and
at this point I want you to go ahead and go
| | 05:40 | through the remaining font sizes inside of our base,
grid or layout.stylesheets and do the conversions.
| | 05:48 | With the conversion done and our work
saved, let's tab back over to the browser.
| | 05:51 | Let's go ahead and Refresh, and let's
see what happens if we start resizing.
| | 05:56 | We haven't seen much change, and that's
because the base font-size hasn't changed.
| | 06:00 | Little bit later when we start talking
about Media Queries, we'll actually take a look
| | 06:04 | at modifying that base font size.
| | 06:06 | In fact, let's see a real
quick sample of that now.
| | 06:09 | Tab back over to your Editor, currently our
font-size was set at 100%, and when we had
| | 06:14 | changed this, we only saw the
paragraph and the body copy changing.
| | 06:18 | But now that we have converted our headings
both the font size and the line heights, let's
| | 06:23 | go ahead and modify this number back down to 60%, save
our work, tab back over to the browser and Refresh.
| | 06:30 | Now we can see that both the headings, the
line height, and all the text has become fluid.
| | 06:36 | Everything is responding to the
environment based off that base font-size changing.
| | 06:40 | Make sure to tab back over to your
Editor and change that back to 100%.
| | 06:44 | We want to make sure the font size stays at
100% for right now, because we do not want
| | 06:49 | any confusion later when we start
viewing this with Media Queries.
| | 06:53 | Responsive typography by itself could be a
profession, but having a basic understanding
| | 06:57 | of baselines and pixel to em conversions,
should give you a good foundation to build upon.
| | 07:03 | By now our design is starting to flow
much better as our browser window is resized.
| | 07:08 | But so far we've only been dealing with
textual elements and their containers.
| | 07:11 | What about images or videos, which
generally have a fixed width and height?
| | 07:16 | Let's take a look at that now and how we can make images
in media more flexible with Drupal 7, Responsive Design.
| | Collapse this transcript |
|
|
5. Fluid Images and MediaDiscovering fluid images| 00:00 | Of course, most designs have images as part
of their layout, whether in the form of a
| | 00:04 | featured image in a blog post or another piece
of content, and again, in backgrounds in your
| | 00:09 | CSS for various visual interfaces.
| | 00:12 | So how does an image flow in the content of your
design? With layout containers using percentages
| | 00:17 | and text using ems, how does
the pixel-based image look?
| | 00:22 | Let's take a look at images in our design
and see exactly for ourselves what happens.
| | 00:26 | Let's start by opening up the drupal.responsive
website in our browser and navigate to our blog page.
| | 00:31 | Next, let's adjust the browser width we
can see that most of our page responsive with
| | 00:36 | the exception of our blog post images.
| | 00:39 | What we're seeing is that the image is breaking
out of the parent image and is not constrained
| | 00:43 | within its container when resized.
| | 00:46 | So how do we force an image to be constrained within
its parent element so that it becomes fluid? Simple.
| | 00:51 | Set the max-width of the property of the
image to 100%, let's try that now by tabbing back
| | 00:57 | to our Drupal Instance in the
Editor and open up the base.css document.
| | 01:02 | With our Editor open, navigate to Drupal/drupal.responsive/
sites/all/themes/responsive/assets/
| | 01:11 | CSS and then base.css, let's locate the CSS
common for images and add the following CSS rule.
| | 01:19 | Once we want to target the image element,
we'll create a rule like such, and from here
| | 01:24 | we actually want to add a max-width of 100%,
save your changes and then tab back to the
| | 01:30 | browser and Refresh the page.
| | 01:33 | Now when we resize the page, we'll notice
that the actual image for our blog post scales.
| | 01:38 | Now it doesn't scale perfectly,
but it does shrink in the width.
| | 01:42 | Our blog post image is now
constrained to the parent element and resizes.
| | 01:47 | What a change one simple rule does?
| | 01:49 | The other nice thing about the CSS rule is that it also
applies to most fixed-width elements like HTML5 video.
| | 01:56 | To do this let's modify our CSS rule to
include other elements, such as embed, object, video,
| | 02:00 | go ahead and tab back over to the Editor
and on our image element let's add a comma and
| | 02:06 | actually add embed, object, and video.
| | 02:10 | So now the max-width of 100% will be targeted
against image, embeds, objects, and video elements.
| | 02:17 | One thing to note about this technique, though,
is the lack of browser support in IE 6 and below.
| | 02:23 | Now that we understand how to make images fluid,
we are all set for mobile viewing. Or are we?
| | 02:27 | While we are telling our images to scale, we are
still serving at the same size image to mobile devices.
| | 02:33 | In most cases that may not be an issue, but
if your bandwidth impaired, imagine the user
| | 02:37 | experience trying to set up a large
image that has just been scaled down.
| | 02:41 | We'll discuss some ways to handle
these challenges a little later.
| | 02:45 | For now we've viewed how images can become fluid,
the pros of ensuring our image is responsive
| | 02:49 | in relation to mobile
audiences and fluid image techniques.
| | 02:53 | Now that we have seen just how simple it is
to make images fluid ourselves, let's move
| | 02:57 | on to making changes to our Drupal design
to ensure our images don't break the flow
| | 03:01 | of our content, as we make it more responsive.
| | Collapse this transcript |
| Exploring fluid image techniques| 00:00 | While working with images in static HTML is
simple, there is always a challenge with Drupal
| | 00:05 | and the HTML it outputs.
| | 00:07 | We know how to make images
be fluid within our design.
| | 00:10 | However, Drupal automatically adds both
width and height to any images that it displays,
| | 00:16 | this will break our fluid technique.
| | 00:18 | So let's dive into Drupal and see how we
can modify how image attributes are displayed
| | 00:22 | to ensure our max-width
properly displays in all browsers.
| | 00:27 | Let's begin with viewing the
responsive.drupal website in our browser.
| | 00:30 | If we browse to the blog post page and then
began resizing the browser, we can see that
| | 00:35 | while our image is scale in
width, they don't scale in height.
| | 00:39 | So how do we go about fixing that?
| | 00:41 | At first thought you may think, well, can
I just override the CSS? Well, let's see.
| | 00:46 | Go ahead and open up the Editor locate the
image element CSS rule, and let's add another
| | 00:52 | CSS class here called height: auto.
| | 00:56 | In other words, we're telling the height to
automatically adjust for any images, embedded,
| | 01:01 | or objects, and videos, save the work, Tab
back over to the browser Refresh, and now
| | 01:06 | let's try resizing again. Perfect. Or is it?
| | 01:11 | One thing that we do know about Drupal is width
and height attributes are automatically added.
| | 01:17 | So even though they seem to work perfectly, it
only works in major browsers and IE 9. So now what?
| | 01:24 | Well, Drupal allows us through their API
to override various functions through altar,
| | 01:29 | preprocess, process, and theme functions.
| | 01:32 | Knowing this we can take advantage of the function
that outputs images and their image attributes.
| | 01:37 | You'll need to know how to do a little PHP,
but even with a limited knowledge you can
| | 01:41 | achieve the results that you want.
| | 01:43 | First, let's inspect our images inside of Chrome by
right-clicking on the element and choosing Inspect Element.
| | 01:50 | This will open up the Chrome developer tools and
highlight the image element for this particular image.
| | 01:56 | We can quickly see that there is a width,
and there is a height, and we need to make
| | 02:00 | sure that we modify this image element to
remove those attributes, to ensure that both
| | 02:05 | are max-width and height
attributes work properly in all browsers.
| | 02:10 | So how do we go about doing that?
| | 02:12 | Go ahead and tab back to over to our Editor, and
inside our editor there is a file called template.php.
| | 02:19 | The template PHP files where you can place
any functions that override the Drupal API.
| | 02:24 | As we can see, I already have references to
a multitude of different overrides which are
| | 02:27 | just best practices for our theme already,
but you can ignore those for now and feel
| | 02:32 | free to look at them later.
| | 02:33 | What I want to do is focus on creating our
first override, so go ahead and scroll down
| | 02:37 | to the bottom of the page, and let's add a
quick comment, so two forward slashes, and
| | 02:43 | this function is actually going to remove
the height and the width from Drupal images.
| | 02:48 | Next, we want to create a function.
| | 02:50 | The name of this function is going to be the
name of our theme, in this case responsive_
| | 02:56 | and then the name of the preprocess function that we
want to override, in this case, responsive_preprocess_image.
| | 03:03 | Now this function actually takes an attribute, and
this attribute is actually the variables attribute.
| | 03:08 | The variables attribute represents the variables
array that holds multiple values that are
| | 03:13 | output by Drupal. Let's go
ahead and add that attribute now.
| | 03:16 | We're going to pass it by reference, let's
say &$variable, let's go ahead and open and
| | 03:22 | close our function, and then we're going to
tab through, and we're going to do a simple
| | 03:26 | foreach loop, so foreach, open and close
foreach loop, and what we want to iterate through
| | 03:32 | is the width and height setup as
an array so that we can unset these.
| | 03:39 | In other words remove these as
this image is being preprocessed.
| | 03:44 | Inside of our array it's going to width and
height, and we want to do this as a key, and
| | 03:49 | then inside the foreach loop we want to
unset the variables key value, with the key value
| | 03:55 | holding the array of width and height.
| | 03:57 | So what we're saying here is as you go and
iterate through the loop, please remove the
| | 04:01 | width and height from any
image that you are about to output.
| | 04:05 | Let's go ahead and save our work, and the first
thing I want to do is make sure that any time
| | 04:09 | we add anything to the template.php file or
any code in general that's overriding Drupal,
| | 04:14 | we need to make sure that we flush the cache.
| | 04:16 | So let's go ahead with our work saved, tab
back over to the browser, go ahead and close
| | 04:20 | the Chrome developer tools, and
we need to make sure we log in.
| | 04:24 | So let's go ahead and replace the word blog
with /user and then from here go ahead and
| | 04:28 | log in with your credentials, lower case admin,
both for the username and password, let's
| | 04:33 | go ahead and flush the cache, go back to
our blog page, and then I want to scroll down,
| | 04:39 | right-click and inspect the element, and we can
see now that the width and height has been removed.
| | 04:45 | Modifying Drupal output through the use of
preprocess functions may seem a little challenging
| | 04:49 | at first, but you truly do not need
to be a PHP guru to accomplish it.
| | 04:54 | We have seen how we can change the HTML output
of Drupal to remove width and height to images
| | 04:58 | and modify our CSS properties to
make image to display at max-width.
| | 05:03 | How about video, though?
Let's explore that next.
| | Collapse this transcript |
| Working with fluid media techniques| 00:00 | Making images flexible or fluid
was simple, but how about videos?
| | 00:05 | That depends on what your definition of video
is and how you display video in your design.
| | 00:10 | If you'll be using the HTML5 video on it then the
answer is yes, but nothing is quite that simple is it?
| | 00:16 | Best practices would suggest that you
do not serve video from your web server.
| | 00:21 | Most users are using a
service such as Vimeo or YouTube.
| | 00:25 | let's take a look at using one of these
services, any issues you may face, how to work around
| | 00:30 | them to ensure your video is fluid, and
how to implement these techniques in Drupal.
| | 00:35 | Previously, we saw that by adding a simple
max width of 100% and height auto rules to
| | 00:40 | the image element assisted us
with making images responsive.
| | 00:43 | You may not have noticed, though, that these
same rules were also applied to the video,
| | 00:48 | object, and embed elements.
| | 00:49 | While this trick works for HTML5 video, it
doesn't yet work for non-HTML5 video elements.
| | 00:56 | So, how we go about ensuring that video
services such as YouTube and their use of frames or
| | 01:01 | embedded code work responsibly as well?
| | 01:04 | Let's go ahead and take a look at how we can
do that by browsing back to our Drupal instance
| | 01:09 | to our Blog page and then
for the specific blog itself.
| | 01:13 | So let's go ahead and
click on Responsive Design.
| | 01:15 | If you're not logged in, make sure and log in, because
what we are going to do is actually edit this page.
| | 01:20 | I want to go ahead and click on the Edit tab.
| | 01:22 | I then want to scroll down to the Body section, and this
where we are actually going to put in some embed code.
| | 01:27 | In a New tab, I actually have open YouTube,
and you can use any YouTube video that you
| | 01:32 | want, but I have one here from lynda.com and what I
want to do is I want to share this on the blog post.
| | 01:38 | So if I actually scroll down a little bit
and click on the Share button, this opens
| | 01:43 | up an option for me to use a link, in this
case of an email, or what I am actually looking
| | 01:48 | for is the Embed code.
| | 01:51 | We'll notice real quickly here that embedding
YouTube link actually uses iframes, and iframes
| | 01:57 | do not work with the max,
width, and height auto rules.
| | 02:01 | We need a way to work around this.
| | 02:03 | Go ahead and copy this, tab back over to
our Drupal instances, and let's actually click
| | 02:09 | on the Source button for a
WYSIWYG, and then paste this in.
| | 02:12 | Now once again by itself this won't work.
| | 02:15 | So what I want to so is actually wrap a
div tag around this and give it a class and in
| | 02:21 | this particular class we will call it video container,
make sure I close it, with a closing > </div >.
| | 02:28 | Then I want to save this.
| | 02:30 | At first you may not see
the actual video show up.
| | 02:33 | In the reason being is we need to refresh
the page in order for that to take effect.
| | 02:37 | Now that we have refreshed the page we
can actually see the Embedded YouTube video.
| | 02:40 | If we begin to resize the browser, we can actually
see that our flow for a media here actually is broken.
| | 02:47 | You can see that we are back to fixed-width
issue with our embedded video not scaling at all.
| | 02:51 | However, when we added the embedded video, we wrapped
it in a <div container with a class="video-container > ".
| | 02:56 | We are going to use this to apply two different CSS
declarations to force our embedded video to be fluid.
| | 03:03 | Go ahead and open up the Editor.
| | 03:04 | I want go ahead and navigate to Drupal/drupal.responsive/
sites/all/themes/responsive/assets/css/layout.css stylesheet.
| | 03:17 | I want to go ahead and scroll on down to where
I find the elements that are for our blog post.
| | 03:22 | So here I have post-title, post-image, and
right after the button for readmore is where
| | 03:27 | I am going to actually add my CSS rules for
the video-container and how any iframes, objects,
| | 03:34 | or embedded elements flow
inside of that container.
| | 03:38 | Let's go ahead and create a comment.
| | 03:39 | In this case I am going to call it Video and then I
want to go ahead and create a class for a video container.
| | 03:44 | So .video-container open and close my class, and inside here I want
to make sure the position is relative, a padding
| | 03:54 | on the bottom of 56.25%, a padding on the top
of 30 pixels, a height of 0, because remember
| | 04:05 | we want the elements
inside to fill the container.
| | 04:07 | So we don't want to specify a height.
| | 04:09 | Then we want to make
sure the overflow is hidden.
| | 04:13 | So this takes care of our video container.
| | 04:15 | How about for our video container that
contains an iframe, or a video container that contains
| | 04:22 | an object, or one more a video container
that contains in the embedded elements?
| | 04:28 | In case I want the position to be absolute.
| | 04:32 | I want a top 0, a left 0, a
width of 100%, and a height of 100%.
| | 04:41 | With my two CSS declarations completed let's
go ahead and save our work, tab back to our
| | 04:46 | browser, Refresh the page, and then
let's go ahead and resize the browser.
| | 04:52 | Now our media is fluid just like our images.
| | 04:55 | While I always prefer a CSS approach to
any challenge, the CSS technique that you use
| | 05:00 | may not always be compatible with all browsers.
| | 05:03 | This introduces us to a jQuery script that we can use
called FITVIDS, and this can be located fitvidsjs.com.
| | 05:11 | If we scroll down at the bottom of the page
we can see this as a lightweight easy to use
| | 05:14 | jQuery plug-in for fluid with video embeds.
Let's go ahead and click on the Download button.
| | 05:20 | This will open up the code over in GitHub,
and then go ahead and download this as a zip
| | 05:25 | file, and then browse to our Downloads folder.
| | 05:29 | Extract the file, go ahead and open up the folder,
and then I want to copy the jquery.fitvid.js
| | 05:37 | file over to my JavaScript
library for my Responsive Drupal theme.
| | 05:42 | Go ahead and copy that now and then go to the
Desktop/Drupal/drupal.responsive/sites/
| | 05:48 | all/themes/responsive/
assets/js/library file.
| | 05:55 | Paste that in place.
| | 05:56 | Now that we have the library in place let's
tab back to our Editor, locate the JavaScript
| | 06:01 | folder, and then our custom.js script.
| | 06:04 | Now that we have the fitvids library we need
to make a call to it from our custom.js file.
| | 06:12 | Let's go ahead and make a JavaScript comment,
call this FitVids and then what we want to
| | 06:17 | do is we want to able through jQuery to
target any class that we give fluid-video.
| | 06:25 | The action that we want to perform is this
FitVids action that will call the FitVids
| | 06:29 | library to make any of these images fluid.
We can do that by applying the FitVids function.
| | 06:36 | Now let's add a reference to the
FitVids JavaScript to our themes.info file.
| | 06:40 | Go ahead and locate responsive.info.
| | 06:43 | Then we are going to go
ahead and copy this scripts
| | 06:45 | metadata, and right above our custom.js
| | 06:48 | call we are going to actually
change this to target the FitVids script.
| | 06:52 | If I open the library file I can see this
is called jQuery.fitvids.js and just look
| | 06:58 | here inside of a library folder.
| | 06:59 | So I need to make sure I put lib/ and
then the name of the file jQuery.fitvids.js.
| | 07:04 | Go ahead and save that, tab back over to the
browser, go ahead and click on Edit, locate
| | 07:13 | the body element again, click on Source, and
then from here we want to go ahead and change this
| | 07:18 | class to match the class
that we are trying to target.
| | 07:21 | In this case, fluid-video.
| | 07:25 | Save the page, and remember I said with embedded
object or iframes you may need to refresh twice.
| | 07:32 | There we go. One more thing.
| | 07:34 | I can automatically see
that we forgot to do one stop.
| | 07:36 | This is common step that's forgotten when we actually
are writing any code, and that is flushing the cache.
| | 07:42 | Let's scroll back up or click, flush the cache,
scroll back down, and now I can see that's
| | 07:47 | actually the same width.
| | 07:48 | If I begin to resize the browser, I
now see that this has the same effect.
| | 07:53 | The nice thing about using this effect, though, is this
will actually work on all browsers that support JavaScript.
| | 08:00 | We have seen the easy and not so easy way
to work with video in Responsive Design and
| | 08:04 | the challenges that come with using different
services such as Vimeo and YouTube with embeds and iframes.
| | 08:10 | Facing the challenge head on we introduced
FitVids jQuery script to compensate for nonstandard
| | 08:15 | use of video, and now have our
video just as fluid as our images.
| | 08:19 | Next, we'll taking to look at Media Queries and
how we can utilize those with Responsive Design.
| | Collapse this transcript |
|
|
6. Media QueriesIntroduction to media queries| 00:00 | We're all familiar with writing CSS for screen and
print, but what about different browsers or device sizes?
| | 00:06 | CSS 3 introduced a new technique known as
Media Queries which allows for us to check
| | 00:11 | for various conditions and apply different
stylesheets or different CSS rules depending
| | 00:16 | on the physical
characteristics of devices and browsers.
| | 00:20 | While there are quite a few features that
you can detect for, in most cases you will
| | 00:25 | be dealing with the min and max widths to
help determine what device is viewing our design.
| | 00:30 | Let's take a deeper look into how Media Queries
work and an example of Media Queries in action.
| | 00:36 | To best describe how Media Queries work let's take visual
tour of an example brought to us by A List Apart.
| | 00:43 | Taking a quick look at the site you may
notice of the browser window is a little bit wider
| | 00:47 | than the screen we're recording on, and that's
because of the media query that we are currently
| | 00:52 | looking at has a minimum length of 1300 pixels.
| | 00:56 | As I grab hold of the browser and window
and begin to scale it down we'll automatically
| | 01:01 | notice that the navigation drops from the
top navigation to a side navigation, and we
| | 01:06 | go from 6 columns to 3 columns.
| | 01:10 | As I continue to resize our browser down more
we'll hit another breakpoint where the navigation
| | 01:16 | pops to the top, and we go to a one column for
the content and the three columns for the images.
| | 01:22 | So exactly how is this being pulled off?
| | 01:25 | Let's go ahead and open up the Chrome
developer tools and take a look at the stylesheet that
| | 01:31 | is driving in this design.
| | 01:32 | If I go ahead and expand the style element, and I
scroll down we're going to see the introduction
| | 01:38 | of a new CSS attribute.
| | 01:41 | This is known as the @media attribute,
and it's the beginning of Media Query.
| | 01:46 | It allows you to add expressions to the
media type to check for certain conditions based
| | 01:50 | on width, height, color, and more.
| | 01:53 | By using Media Queries presentations can be
tailored to a specific range of output devices
| | 01:59 | without changing the content itself.
| | 02:01 | In the case of A List Apart they are
checking for any device that has a max width of
| | 02:06 | 400 pixels or a max width the 600 pixels, and
in the case of the min width of 1300 pixels,
| | 02:12 | which covered large screens.
| | 02:14 | You can use Media Queries to enhance your
design if you're working from a mobile first
| | 02:18 | approach, or you can use Media Queries to
filter style, and when working from a browser down.
| | 02:23 | You maybe thinking that the theme is
identical to the adaptive approach when using adapt.JS
| | 02:28 | to display stylesheets based on breakpoints.
| | 02:31 | While it is similar we are not using any JavaScript
and instead we're using a pure CSS approach to design.
| | 02:38 | While we've taken a look at what Media
Queries are, how Media Queries allow us to check for
| | 02:42 | various conditions within the browser or device.
| | 02:45 | And an example of Media Queries in action it's
not enough just looking at concepts and examples.
| | 02:50 | Next we're going to dive into creating our
first media query as well as take a look at
| | 02:54 | the new Viewport meta tag and how to test your Media Queries
as we continue a with Drupal 7's Responsive Design.
| | Collapse this transcript |
| Writing our first media query| 00:00 | Now that we have a better understanding
what media queries are, it's time to dive into
| | 00:04 | writing our first media query.
| | 00:06 | We'll begin by taking a look at the proper
syntax for creating media queries, including
| | 00:11 | the various ways to write media queries and
the basic breakpoints for different devices.
| | 00:16 | We'll also look at some tools for testing our
media queries, discover some of the pitfalls
| | 00:20 | of devices and how to overcome them with the
use of the viewport meta tag on a way to creating
| | 00:26 | a more responsive Drupal theme.
| | 00:28 | Let's begin by opening up our editor and
browsing to our Responsive Drupal theme folder.
| | 00:33 | Drupal/drupal.responsive/sites/all/themes/responsive
that will take us to the theme
| | 00:40 | folder we need, and from here what we want
to do is go ahead and open up the layout.css
| | 00:46 | file and scroll down to the bottom of the page so
that's located in assets/css, and then layout.
| | 00:53 | By scrolling down to the bottom of the page
we're actually going to be entering our first
| | 00:57 | breakpoints and our media query to be able
to test for those different breakpoints as
| | 01:02 | we review these in the browser.
| | 01:04 | The first breakpoint that I
want to test for is the Tablet.
| | 01:08 | I'm going to go ahead and start
off by creating a CSS comment.
| | 01:10 | This will provide the placeholder so that we
can go back and find this media query later.
| | 01:15 | The first thing I need to do is actually
create the media query attribute or the media query
| | 01:19 | syntax that we'll be using the
test for the Tablet breakpoint.
| | 01:23 | And that starts with @media followed by an
open and close paren and then the max-width
| | 01:30 | that I want to test for.
| | 01:32 | So in this case the
attribute of max-width of 768 pixels.
| | 01:37 | I'm going to go ahead and put curlicue
brackets and at first this looks similar to writing
| | 01:41 | a CSS rule, however, this media query attribute
is actually going to be containing CSS rules,
| | 01:49 | so it might be a little bit
different than what you currently used to.
| | 01:52 | What I actually want to do is create some
sort of CSS rule that would allow me to number
| | 01:57 | one, test this breakpoint, but number two
visually actually display on the monitor that
| | 02:03 | I have reached this breakpoint.
We're kind of killing two birds with one stone.
| | 02:06 | We're actually writing our first media query but we
are also building in a testing mechanism on top of it.
| | 02:12 | In order to do this, we are going to actually create a body
element and use the pseudo-class selector of before.
| | 02:19 | Inside of here I'm actually going to use
the content attribute, and I'm actually going
| | 02:22 | to have a message be displayed
whenever we reach this breakpoint.
| | 02:26 | In this case, I will say Tablet media
query (<768px) and then the word fired.
| | 02:35 | To continue this rule we want to
add a font-weight and make that bold.
| | 02:39 | Next, we want to display it as block.
We want to text-align to the center.
| | 02:44 | Next, we will actually want to go
ahead and give us a background color.
| | 02:47 | This will be an RGBA, and I want to give
us actually a transparent yellow color.
| | 02:52 | The values for this will be 255, 255, 0
and then for the alpha transparency 0.9.
| | 02:57 | Next, I actually want to position this, and
I want to absolutely position it to the top
| | 03:04 | of 0, a left of 0, a right of 0 and then to
deal with any z-indexing or any overlapping,
| | 03:11 | I will actually want to go
ahead and give this a z-index of 99.
| | 03:15 | Now that we have media rule
written, let's go ahead and save this.
| | 03:18 | Tab back over to our browser, refresh it,
and then I'm going to go ahead and resize the
| | 03:23 | browser until we reach that
particular breakpoint. Great.
| | 03:29 | So our media query has fired.
| | 03:31 | It's giving me this notification at the top of
the page, and we'll be utilizing this throughout
| | 03:35 | the remaining media query discussion that we have
so that we know when each media query is firing.
| | 03:41 | Let's go ahead and open the browser,
back up to the width that was at before.
| | 03:45 | We notice the media query now disappears because we're
back to the browser style sheet that's being applied.
| | 03:50 | Tab back over to our editor and then let's
just copy this, paste it back in and then
| | 03:56 | let's make the modification here to
comment, we will call this Mobile.
| | 04:00 | Then a mobile breakpoint I want
is actually going to be 480 pixels.
| | 04:03 | I am going to change my content here for the
notification to say Mobile media query (<480px) fired.
| | 04:13 | I'll leave the same color so this way we will
actually see the message change. I'll save this.
| | 04:19 | Tab back over to the browser, refresh,
and then begin resizing once more.
| | 04:25 | We reached our Tablet media query,
and now our Mobile media query.
| | 04:33 | So now we're actually seeing the different
breakpoints fired off, and we can utilize
| | 04:38 | this now for writing additional CSS rules to
hide content, to modify content, or to manipulate
| | 04:45 | content in any manner that we want so that our
page layout seems to becoming more responsive
| | 04:51 | as we add these additional rules.
| | 04:54 | One other thing I want to discuss,
and that is the meta-viewport.
| | 04:57 | Have you ever browse to a website on your
mobile device and notice that you had to double-click
| | 05:01 | on the screen to enlarge it, or the web
page that you are looking at had to be pinched
| | 05:06 | or squeezed in order to be viewable?
| | 05:09 | This is an example of a website that is not
using what is known as the meta-viewport tag.
| | 05:14 | If we go ahead and tab over to our browser
and inspect the page with the Chrome developer
| | 05:18 | tools, that's Command+Option+I and then focus
in on the head section, we can see an example
| | 05:24 | of the meta-viewport tag.
| | 05:25 | It's best to combine the Meta-viewport tag with
media queries when considering responsive design.
| | 05:32 | The meta-viewport tag sets the browser's layout
viewport relative to the CSS it is displaying.
| | 05:38 | This ensures that your site is set to
the optimal width determined by the device.
| | 05:43 | Media queries are a powerful new tool in our
Responsive Design Toolbox and properly understanding
| | 05:48 | how to use it makes all the difference.
| | 05:50 | We looked at the importance of using the
viewport meta tag for making sure our design responds
| | 05:55 | accordingly in mobile devices and
multiple ways to write media queries.
| | 05:59 | Often when you start writing media queries,
you can become quickly lost in all the CSS.
| | 06:04 | So next we'll discuss the workflow for
ensuring our CSS is organized by breakpoints.
| | Collapse this transcript |
| Creating a style sheet for each breakpoint| 00:00 | As you progress with the use of Media Queries,
you may begin to start having a stylesheet
| | 00:04 | that becomes hard to manage with the
various breakpoints you want to respond to.
| | 00:08 | At some point it may make better sense to
separate the CSS into smaller more manageable
| | 00:13 | files based on what breakpoints are reached.
| | 00:16 | We have seen this technique used with the
Adaptive.js approach and while JavaScript
| | 00:20 | is not needed in the Responsive approach, the
concept of smaller files may seem to be a good idea.
| | 00:27 | Let's entertainment that approach
and how we would implement it next.
| | 00:30 | Let's begin by tabbing over to our editor and
opening up the css folder inside of our theme.
| | 00:35 | Go ahead and click back on the layout.css
and scroll down to the bottom where we have
| | 00:40 | entered our media queries previously.
| | 00:42 | We have two new media queries that we have
run, one for our mobile and one for our tablet.
| | 00:47 | And to better organize these we are actually
going to create two stylesheets, one for our
| | 00:51 | mobile and one for our tablet, and then actually
move the CSS code into those corresponding CSS files.
| | 00:59 | Let's begin by right-clicking on the css folder
and saying New Text Document, and we will
| | 01:03 | call this mobile.css we'll do this one
more time and call this tablet.css.
| | 01:12 | Let's click back on our layout.css file,
scroll down to our mobile media query, highlight
| | 01:18 | it, cut it, and then place it
inside of our mobile.css file.
| | 01:21 | Go ahead and save that.
| | 01:23 | Click back on the layout.css once again,
locate the Tablet media query, highlight it,
| | 01:30 | cut it, go back to our tablet.css,
paste it in place, and then hit Save.
| | 01:35 | Now we have moved both our mobile media query
and our tablet media query into corresponding
| | 01:41 | CSS files named the same.
| | 01:43 | This will help us better organize our mobile media
queries and tablet media queries as we move forward.
| | 01:50 | Now that we actually have those in place we
need to actually add a CSS reference inside
| | 01:55 | of the .info file so that we can utilize these.
| | 01:59 | Scroll down to where you find the responsive.info file,
select it, and then locate the stylesheet section.
| | 02:05 | Currently, we have base, grid, and layout, but we
need to add the mobile and tablet to here as well.
| | 02:11 | I am actually going to highlight the layout.cssstylesheet,
paste it in twice, and then the order of precedence
| | 02:18 | here is very important. We want to
be layout, tablet, and then mobile.
| | 02:23 | So let's go ahead and
change layout to say tablet.
| | 02:26 | Our second one to say mobile.
Save this and then tab back over to our browser.
| | 02:31 | Then the first we need to do is we
need log in to flush that Drupal cache.
| | 02:35 | So go ahead and log in now, /user, log in with the
credentials of admin, all lower case, same for the Password.
| | 02:42 | Once we are logged in, we want to flush the
cache, go back to our Home page, and log out.
| | 02:47 | Because one of the things that's going to
happen is once we start resizing this, you
| | 02:51 | are not going to see message at top because
of the fact that we have this Admin toolbar
| | 02:55 | that's sitting in the exact same position.
So log out, now go ahead and resize.
| | 03:04 | There is our tablet media query being fired.
There is our mobile media queries been fired.
| | 03:10 | If I go ahead and expand the web page back
and then open up the Chrome developer tools
| | 03:15 | and then expand the head section and then
locate the stylesheets that are being pulled
| | 03:19 | in through the Drupal interface, I can see now that
my order is base, grid, layout, tablet, and mobile.
| | 03:26 | Having separated our CSS into smaller more
manageable files and naming them based on
| | 03:31 | the breakpoints we want to respond to, we have
made our media query workflow more manageable.
| | 03:37 | We should've a great grasp on media queries
in general and the various techniques we can
| | 03:41 | use and hopefully you are
starting to build upon the workflow.
| | 03:44 | However, how do we take what we have learned
so far and apply this to best practices for
| | 03:49 | Drupal Responsive theming?
Let's take a look at that next.
| | Collapse this transcript |
| Understanding media query best practices| 00:00 | Since Media Queries are still just a CSS stylesheet
with conditional logic inside it, the
| | 00:05 | concept of adding it to a
Drupal theme is not that difficult.
| | 00:08 | Yet there are multiple ways to approach
adding media queries, we can add to the CSS file
| | 00:13 | directly like we did previously, we can
reference it in our .info file or even through code.
| | 00:20 | Which way is best for you really depends but
we will look at each technique and then talk
| | 00:23 | about the best practices for making
media queries work for you in Drupal.
| | 00:28 | Let's begin by tabbing over to our Editor
and opening up our Responsive Drupal Instance
| | 00:33 | and then selecting the responsive.info file.
| | 00:37 | Previously we added references to our mobile
and tablet CSS files; however, there are several
| | 00:41 | other ways that may make managing media queries
in Drupal easier. One approach is by modifying
| | 00:47 | the CSS files to not include the media query
attribute at all and then moving the attribute
| | 00:53 | into the responsive.info file stylesheet array.
| | 00:56 | This allows you to easily glance at the .info
file and see what breakpoints trigger the
| | 01:00 | different stylesheets inside your design.
| | 01:03 | Let's begin by opening up the tablet.css
file and then removing the @media attribute.
| | 01:09 | Go ahead and save the file and then
select the responsive.info metadata.
| | 01:14 | For the tablet.css, we actually
need to add that break point back in.
| | 01:19 | So this will be and, open and close
paren, max-width, 768 pixels.
| | 01:26 | Now that we have a reference based off of
that breakpoint pointing to our tablet.css
| | 01:31 | style sheet, we can go ahead and save our
.info file, tab back over to our browser.
| | 01:36 | And then make sure we log in and the first thing
you are noticing is the Tablet media query fired.
| | 01:41 | This is not an error, the reason we're
seeing this is because since we were to move the
| | 01:46 | breakpoint and place it inside of our .info
file, currently this is being applied to the
| | 01:51 | body element for all breakpoints.
| | 01:53 | This will disappear as soon
as we go in flush the cache.
| | 01:56 | Let's log in now, go to the top for Admin
toolbar, flush the cache, log out and then
| | 02:04 | resize the browser.
There is our Tablet media query being fired.
| | 02:08 | And one thing I want to show you as is once
we keep scrolling down we are no longer are
| | 02:11 | going to see the mobile media query being fired.
Let me explain to you the reason for this.
| | 02:16 | This is called Order of Precedence, one
thing to note is that if you prefer this method
| | 02:21 | that you cannot mix the way that you are
calling a response of stylesheets, that add media
| | 02:26 | attribute cannot be in the stylesheet and
in .info file at the same time, in this case
| | 02:32 | we modified the tablet but
we didn't modify the mobile.
| | 02:36 | So in this case when the stylesheets aren't
actually being displayed by Drupal, the tablet
| | 02:40 | is coming after the mobile reference.
| | 02:42 | One thing to keep in mind if you choose to use this
method for adding media queries is a CSS aggregation.
| | 02:48 | Drupal will not aggregate these CSS files
together into the all stylesheets array.
| | 02:53 | So if performance is a concern you are better off
managing your media queries all in a single file instead.
| | 03:00 | Our second approach is based on best practices
as it will allow for our files to be aggregated
| | 03:06 | and thus increase the
performance of our pages as they load.
| | 03:09 | Let's begin by placing those files back into a
single file that we will call responsive.css,
| | 03:16 | tab back over to your editor, and inside of
the css folder go ahead and right-click and
| | 03:21 | create a new document.
We will call this responsive.css.
| | 03:26 | What we want to do is actually take the
tablet and the mobile stylesheets and place them
| | 03:31 | together inside of the responsive.css file,
let's go ahead and do that starting with the
| | 03:38 | mobile document, copy, paste.
| | 03:40 | And then I want to do the
same thing for the tablet.
| | 03:49 | I am going to place this above because we
want to fire off in a particular order and
| | 03:53 | then since I had removed the @media
attribute I am going to copy the one from the mobile
| | 03:58 | and put it around the tablet and make sure I
changed my breakpoint, remember it was 768 pixels.
| | 04:05 | Now that I am managing both my tablet and
my mobile stylesheets inside of a single CSS
| | 04:10 | document, I need to make sure that I make a
reference to this document inside the .info file.
| | 04:16 | Go ahead and tab back over to responsive.info
I can actually go ahead and remove the tablet
| | 04:22 | reference, and I can modify the mobile
reference to now point to responsive.css.
| | 04:29 | Save the document, tab back over to our browser, log in,
credentials are admin lowercase, same for the password.
| | 04:37 | Go ahead and flush the
cache and then log back out.
| | 04:41 | And let's go ahead and resize the browser
to test our results. There is the tablet media
| | 04:45 | query being fired, there is a
mobile media query being fired.
| | 04:49 | One more thing in finishing up that I want
to do is I have actually provided to all the
| | 04:53 | users a cleaned up version of our responsive.info
file, and I want to walk through it and explain
| | 04:59 | to use some of the different things that I
have done for presentational purposes that
| | 05:03 | will assist us as we move
along on our series here.
| | 05:06 | Let's go ahead and tab back over to our
Text Wrangler or to the editor of your choice,
| | 05:11 | and let's locate inside of the
06_04 folder of the file responsive.css.
| | 05:16 | I am actually going to highlight
everything inside of it, copy it and then go back up
| | 05:22 | to my responsive.css file inside of my Drupal
instance and highlight and paste the contents in place.
| | 05:28 | Let me go ahead and scroll back up the top
real quick, and I want to actually explain
| | 05:31 | to exactly what's going on.
| | 05:34 | I am going to go ahead and make some
comments here with CSS just so I can get rid of some
| | 05:37 | of the effects that are taken place.
| | 05:39 | So we can get a visual of exactly what
I'm doing with the container element here.
| | 05:43 | I am going to save this, I am going to tab
back over and then I am going to refresh.
| | 05:48 | Let me go ahead and resize the browser back to
the tablet breakpoint, and the minute I do,
| | 05:53 | you should be able to see the margin
about the left and the right snap in.
| | 05:58 | And this is done for presentation purposes so
it's easier for the user to read on tablet device.
| | 06:04 | Tab back over to the Editor and
let me uncomment the header section.
| | 06:09 | And real quick what I am doing here is I'm
actually removing the tagline, I'm decreasing
| | 06:14 | the font size of our heading for our h1.
| | 06:17 | And I am readjusting the height and the
width of some margins on some different elements
| | 06:23 | that are inside the header.
| | 06:24 | Let me save that once again
and then refresh the page.
| | 06:27 | So you can see now the tagline has been removed,
some margin and padding has been reduced as
| | 06:31 | well as the h1 has been reduced, so it's a
little more readable now on tablet device as well.
| | 06:36 | Tab back over to the Editor, and let
me scroll down to our mobile section.
| | 06:41 | Let me go ahead and comment out anything for
the containers itself and the header and slider
| | 06:48 | and feature areas of some other
presentational things that I added in.
| | 06:51 | And then let me save that and then scroll back
up to where I am decreasing the body font size.
| | 06:57 | Let's tab back over to the browser, and you
refresh and then move this into a mobile breakpoint.
| | 07:02 | You can see here we are having some issues
with the sliders, which is one of the reasons
| | 07:05 | why I have hidden the slider.
| | 07:07 | But what I have actually done
here is decreased the body font size.
| | 07:10 | It's not really easy to see because it will
increase by 90%, but as we saw in our previous
| | 07:14 | video we can modify the body's font size and have
that control of the size of the font on the whole page.
| | 07:20 | Let's go back to the Editor here real quick.
| | 07:22 | And then let me uncomment the containers,
let me comment back out through the heading
| | 07:27 | section, so we can
actually see what's taking place.
| | 07:29 | Save that, tab back to our
browser and then hit Refresh.
| | 07:32 | Now you can see how things moved in from a
three column to a one column layout all the
| | 07:36 | way as we moved down the page.
| | 07:38 | So that makes it much more readable any
type of mobile device such as a phone.
| | 07:42 | Let me go ahead and uncomment the rest of this.
| | 07:47 | Save it tab back over to our browser, refresh,
and now we should be able to see that the
| | 07:51 | slider has been hidden, I have kind of
moved some things up with a margin and padding.
| | 07:56 | I have modified the font sizes,
I've made the columns more readable.
| | 08:00 | So now we have a cleaned up version
for both our mobile and for our tablet.
| | 08:05 | From the simple method of adding a
reference to our media query stylesheet in HTML to a
| | 08:09 | more complex method or referencing through code, we
tackled adding media query functionality to our design.
| | 08:15 | I would recommend that you choose a method
that's best for you and at this point are
| | 08:19 | fix with theme is becoming quite responsive, but
how do we go about enhancing certain functionality
| | 08:25 | for smaller devices such as the menu.
| | 08:27 | We will go ahead and take a look
at that with responsive menus next.
| | Collapse this transcript |
|
|
7. Responsive MenusIntroduction to responsive menus| 00:00 | What are responsive menus?
| | 00:02 | By responsive we mean menus that change
according to the device or screen size.
| | 00:07 | This could mean different styling, different
positioning, or a completely different layout
| | 00:11 | that makes it easier for the
end user to navigate the site.
| | 00:15 | Why would we care about
making our menus responsive, though?
| | 00:18 | For one, as your screen size gets smaller the actual
interaction with navigation becomes more difficult.
| | 00:25 | Let's take a look at some examples of sites
with responsive menus and one that doesn't,
| | 00:30 | and you can make the
decision yourself on which is best.
| | 00:33 | Let's start with our site to begin with, because
our site does not have responsive menus at all.
| | 00:38 | In fact, if we begin to resize our
browser our menus do shrink down.
| | 00:43 | But once we get to a certain
point they kind of blow up our design.
| | 00:46 | We will go ahead and take a look
fixing that a little bit later on.
| | 00:50 | But how about we look at some different
examples of great responsive menus.
| | 00:55 | Let's go ahead and browse on over to foodsense.is
and take a look at their menu structure.
| | 01:01 | Their menu starts off on the side, but as I
begin to shrink their browser and hit different
| | 01:05 | breakpoints, you'll notice that the menu goes from
the sidebar, to the top with some iconic interactions.
| | 01:12 | And then if I continue to
scroll it down the icons disappear.
| | 01:16 | And eventually once I hit my mobile
breakpoint the menus go all the way to the top.
| | 01:21 | Let's take a look at another
example, smashingmagazine.
| | 01:24 | smashingmagazine actually
has two different menus.
| | 01:27 | They have their main menu on the side
and then have a categorical menu up top.
| | 01:31 | Let's go ahead and start
resizing and see what happens.
| | 01:34 | Automatically we can see the
sidebar main menu jumps to the top.
| | 01:37 | As I continue to scroll down we see that
the menu then jumps back to the side, and once
| | 01:42 | I hit the tablet breakpoint I get a jump menu,
both menus are combined into this, and this
| | 01:47 | makes it much easier on a tablet or a
mobile device to actually select the navigation.
| | 01:53 | Let's that a look at one more example.
| | 01:56 | Microsoft recently launched its new homepage,
and as we resize the browser we will notice
| | 02:01 | that the menu structure once we hit a particular
breakpoint turns into an icon all by itself
| | 02:07 | and then when I click on it I
have the menu in a dropdown list.
| | 02:11 | These are all three great
examples of responsive menus.
| | 02:14 | We discussed what responsive menus are and why we should
consider them when developing a responsive design.
| | 02:20 | We had viewed examples of websites without and
some great examples of websites that use them.
| | 02:25 | But exactly how do you develop responsive menus, let's
take a look at that next in Drupal 7 Responsive Design.
| | Collapse this transcript |
| Creating a responsive menu| 00:00 | Understanding what responsive menus are
and why you should use them are one thing.
| | 00:04 | But actually making responsive menus is another.
| | 00:07 | There are multiple different visual aspects,
navigational considerations, and different
| | 00:12 | menu types to choose from.
| | 00:15 | Let's begin by taking a look at our standard
menu and how we would go about modifying it
| | 00:19 | to be more responsive with just a little CSS.
| | 00:23 | The first thing we will
tackle is the mobile navigation.
| | 00:25 | I want to start off with a pure CSS
technique and the styling to have our menu look good
| | 00:30 | in the mobile breakpoint is very simple.
| | 00:33 | Let's begin by tabbing over to our
editor and then looking for our
| | 00:36 | Drupal/drupal.responsive/sites/all/themes/responsive folder, and
then inside of here, our assets/css/responsive.css stylesheet.
| | 00:48 | Go ahead and scroll down to the mobile breakpoint,
and then into our header section, and we are
| | 00:53 | going to add a CSS declaration
for our header with a class of nav.
| | 00:59 | Inside of here that
element is currently floating.
| | 01:01 | Let's go ahead and tell it not to float.
| | 01:03 | Let's save this, tab back over to the browser, size
it down to our mobile breakpoint, go ahead and refresh.
| | 01:10 | We can see that now it's actually not floating.
| | 01:13 | It's flushed to the left.
However, we are missing a menu item.
| | 01:16 | It's actually off the page,
and it's not being displayed.
| | 01:19 | That's because either the font size or the
padding is causing it to not flow with our document.
| | 01:25 | Let's take care of that.
| | 01:27 | Tab back over to our editor, and that's inside
our header element, inside our menu item that
| | 01:32 | has a nav, and it's an unordered list with
list items, and that's our anchor elements.
| | 01:38 | Let's go ahead and modify the font size, and
let's also take care of the padding 10 pixels by 16 pixels.
| | 01:44 | Let's save that, tab back over, and refresh.
Now we are looking a lot better.
| | 01:49 | However, what happens when we
look at our tablet breakpoint.
| | 01:53 | Things don't quite flow on the
page as we would like them to.
| | 01:56 | So let's actually go ahead and tab back to
our editor and take a look at how we would
| | 02:01 | actually modify our menu
for the tablet breakpoint.
| | 02:04 | I am actually going to copy the CSS declaration,
scroll back up to my tablet breakpoint, paste it in place.
| | 02:12 | I am fine with the font size, but
the padding needs a little bit of help.
| | 02:15 | So I am actually going to reduce it down to
4 pixels by 10 pixels, save the page, go back to my
| | 02:23 | browser, and let's go ahead and scroll this
until we hit the tablet breakpoint. Refresh.
| | 02:32 | That looks a little bit better.
| | 02:33 | Now we actually have lost the tag line and
our menu items actually shrunk down a little
| | 02:38 | bit so it looks more in
line with the current page.
| | 02:42 | Simple but elegant a little CSS
with media queries can go a long way.
| | 02:46 | Taking our understanding or HTML and CSS
and applying these techniques we were able to
| | 02:50 | create a nice, but simple
looking responsive menu.
| | 02:53 | But exactly how do we apply some of these
other techniques that we saw to Drupal and
| | 02:58 | are there any tools to help
us in making the transition?
| | 03:02 | Let's discover those techniques next.
| | Collapse this transcript |
| Integrating responsive menus into Drupal| 00:00 | Integrating responsive menus into Drupal
can vary from simple to challenging depending
| | 00:05 | on your knowledge of CSS,
jQuery, and Drupal modules.
| | 00:09 | We are going to tackle another one of his
approaches by taking a look at common menus
| | 00:13 | in Drupal and at how with the little tiny
jQuery script we can make it more responsive
| | 00:17 | for our users on various screen sizes.
| | 00:20 | This technique will be integrating jQuery
into Drupal utilizing a module to convert
| | 00:24 | our menu to a dropdown list.
| | 00:27 | In the case of mobile jump menus we are lucky
that Drupal 7 has a module for just such a script.
| | 00:32 | Let's go ahead and browse on over to drupal.org/
project/tinynav, scroll down to the bottom, and then click
| | 00:40 | on the Download for the zip file.
| | 00:42 | Once the download is complete go ahead and open
up your Downloads folder and then extract the file.
| | 00:48 | Copy it to our desktop Drupal/drupal.responsive/
sites/all/modules folder.
| | 00:57 | Once we have that in place let's go ahead and
tab back over to our Drupal instance and log in.
| | 01:02 | From here go ahead and put in
your user credentials admin, all lower case.
| | 01:07 | Once you're logged in we need
to actually enable the module.
| | 01:10 | So navigate to Modules and then
scroll down until you find Tiny Nav js.
| | 01:17 | Enable it, click on Save configuration.
| | 01:20 | Now that the module has been enabled, we
need to actually finish configuring it, click on
| | 01:25 | Configuration, and then
under User interface tinynav.js.
| | 01:30 | Then we need to put in the CSS jQuery selector
that will target our element that we want to convert.
| | 01:36 | In this case it's .nav ul.menu.
| | 01:41 | Next thing is what media
breakpoint do we want to target this for.
| | 01:45 | We want to target this
for our mobile breakpoint.
| | 01:47 | So we are going to change that to 480, hit Save
configuration, and then go back to our homepage.
| | 01:52 | Let's go ahead and log out so we can see a
cleaner look of this and then resize the browser
| | 01:58 | back to our mobile breakpoint.
| | 02:00 | Go ahead and hit Refresh, and now we see
our menu has been converted to a jump list.
| | 02:05 | From CSS to jQuery to Drupal we have explored how to
best integrate responsive menus into our Drupal design.
| | 02:13 | The choice is yours as to the best approach and
often your design will dictate which choice to make.
| | 02:18 | While you may think that we're done with making
your Drupal design responsive, there are often
| | 02:22 | a few items designers forget about.
How about tabular data?
| | 02:27 | While we don't design layouts with tables
anymore we still have cases where we need
| | 02:31 | to display tabular data.
| | 02:33 | How about responsive tables?
Let's explore that next.
| | Collapse this transcript |
|
|
8. Responsive TablesIntroduction to responsive tables| 00:00 | You may be thinking to yourself why
should I worry about tables being responsive?
| | 00:05 | Aren't they already responsive?
They grow and shrink as needed. True and false.
| | 00:11 | Table cells can only shrink down so much
before the content wraps and then they eventually
| | 00:15 | stop shrinking altogether.
So how do we fix this?
| | 00:19 | Responsive tables are tables that allow for
different screen sizes without sacrificing
| | 00:23 | the data being displayed in the table.
| | 00:26 | This reason alone is why we
should use them in our design.
| | 00:29 | Let's take a look at non-responsive tables
in a responsive environment so we can have
| | 00:34 | a better understanding of how this works.
Let's begin by navigating over to resources.
| | 00:39 | Here I have some tabular data.
| | 00:41 | Let's begin resizing the
browser and see what happens.
| | 00:44 | Fair enough, our table seems to
respond just fine. Or does it?
| | 00:48 | As I shrink the browser down you can see that
the table cells content becomes squished and
| | 00:53 | imagine if you were actually trying to
look at this table inside a mobile device.
| | 00:58 | A responsive table, however, would allow you to
ensure that the most important data is readable.
| | 01:03 | Columns where the content would
not become unreadable or squished.
| | 01:06 | The ability for the table to more from a
tabular layout to a more familiar layout.
| | 01:11 | Now that we understand what responsive tables
are, though, what is the importance of using them?
| | 01:16 | How we go about creating them?
| | 01:18 | Let's take a look at some different
techniques for making sure our tables don't lack the
| | 01:21 | responsive quality they deserve next.
| | Collapse this transcript |
| Creating responsive tables| 00:00 | I know you're thinking, "All this
trouble over a couple of tables?"
| | 00:04 | But I say a table should not be treated any differently
than other content when it comes to responsive design.
| | 00:10 | Just like responsive layouts where we can hide
or move content, we can do the same with tables.
| | 00:16 | The Unseen Column, Flip Scroll, and No More Table
Techniques are just a few that are out there available to us.
| | 00:22 | And with a little bit of knowledge of CSS, we will be
able to walk through the next one, the Unseen Column.
| | 00:29 | This content maybe hidden to you because
there's no navigational menu item out for this.
| | 00:33 | So, make sure you go ahead and browse now
over to drupal.responsive:8082/unseen-column,
| | 00:41 | and you will be on the page
that I am looking at currently.
| | 00:44 | This is a table that we will be dealing with.
| | 00:46 | And it has a div tag wrapped
around it with the ID of unseen.
| | 00:50 | You could change this to any ID or class name you want,
just as long as you target the correct elements in our CSS.
| | 00:57 | Let's go ahead and resize the
browser and see what happens.
| | 01:00 | Currently nothing. Everything gets
squished just like we're expecting.
| | 01:04 | However, with this technique that we're
about to do, we are actually going to be able to
| | 01:08 | hide or show particular columns that when our real estate
becomes smaller are more important to the end user.
| | 01:17 | This will make it easier to navigate, or look at
the data that's in this table at smaller resolutions.
| | 01:23 | In order to do this, let's go ahead
and open up our editor, open up the
| | 01:26 | Drupal/drupal.responsive/sites/all/themes/
responsive/assets/css/responsive.css.
| | 01:36 | We're going to target both the
tablet and the mobile breakpoints.
| | 01:41 | And since there is a lot of CSS to write,
and it might look I actually mistype something,
| | 01:47 | let's go ahead and copy this from the
Lessons folder that's provided to everyone.
| | 01:51 | I have made notes in
here for us, take a look at.
| | 01:54 | The first is Add to Tablet
Breakpoint in Responsive.css.
| | 01:58 | Let's go ahead and copy this,
tab back over to our editor,
| | 02:00 | and inside of the tablet, let's scroll
down to the bottom and paste it in place.
| | 02:06 | Go back over to our Notes, copy the Mobile
Breakpoint, go back to our editor, scroll
| | 02:12 | down to the bottom of our mobile
breakpoint, and paste it in place.
| | 02:15 | Do a little housecleaning here just so we
have better formatting, save the document,
| | 02:21 | tab back over to our browser,
refresh, and let's try resizing again.
| | 02:26 | And you see what's happening.
| | 02:27 | The Company column drops out, and now I am
down to Price, Change, Change%, Open, High,
| | 02:33 | Low, Volume, and watch as I
keep going down what happens.
| | 02:36 | Now, I am down to five columns.
| | 02:39 | Now, this technique is used with
hiding the different columns in the table.
| | 02:44 | And it's done by a child selector.
| | 02:46 | In this case, we actually have to know which
column it is that we want to display as none,
| | 02:53 | or in the case of the opposite, if we actually
wanted to display a column that might be hidden
| | 02:56 | by default, we would have to
know what those columns are.
| | 03:00 | Let's go ahead and tab back to our browser
and actually pull this back out to full-size,
| | 03:04 | and let's count the columns that
we have, 1, 2, 3, 4, 5, 6, 7, 8, 9.
| | 03:11 | Let's say that we actually want to hide
one of these other columns. Tab back over.
| | 03:16 | Let's say we want to hide the 9th column.
| | 03:17 | I am going to change the 8 here on the nth-child to 9,
save our work, tab back over, that's the Volume column.
| | 03:23 | So if I refresh the page, and I begin
resizing the browser, once we hit that breakpoint,
| | 03:30 | the Volume column drops out.
| | 03:32 | So hopefully now, you get the idea that
this nth-child relationship has to do with the
| | 03:37 | columns that you're wanting to hide or show.
| | 03:40 | This is great for tabular data that
we actually have a lot of control over.
| | 03:44 | But it's not realistic when it comes to Drupal.
| | 03:47 | Drupal can provide us tabular data either
by somebody adding it into the content area
| | 03:51 | of a node or through Views.
| | 03:54 | What if we want to be able to
have all the tables be responsive?
| | 03:58 | This next approach is by ZURB, and they are
the ones that created a technique that will
| | 04:03 | allow for tables to scroll their
content using a little jQuery and some CSS.
| | 04:08 | Tab back over to your browser, and then
open up zurb.com/playground/responsive-tables.
| | 04:16 | We are going to go ahead and start this by
scrolling down and clicking on Download the Code.
| | 04:21 | With the zip file downloaded, go ahead and open
up your Downloads folder and extract the file.
| | 04:26 | There is only two files that we actually
need inside of here, the responsive-tables.css,
| | 04:32 | and the responsive-tables.js.
| | 04:35 | Let's go ahead and copy each one of these to
the respective folders, starting with the CSS.
| | 04:40 | Select the responsive-table.css, copy it, go
back to our desktop, and open up our
| | 04:46 | Drupal/Drupal.responsive folder, and then our
sites/all/themes/responsive/assets/css folder.
| | 04:55 | Paste that in place.
| | 04:56 | Now, let's go back to our Downloads and grab
the JavaScript, copy it, go back to our desktop,
| | 05:03 | and this time I want to put it inside of
my js folder and then inside of my library.
| | 05:09 | Go ahead and paste that in place.
| | 05:10 | Now that I have both the files exactly where I need
them, we need to be able to configure these to work.
| | 05:15 | Go ahead and close the folder, and
let's go back to our Drupal instance.
| | 05:20 | From here, let's actually go
ahead and click on Resources.
| | 05:22 | And what I want to do is I actually want to
apply this technique to our table that we have here.
| | 05:28 | Let's go ahead and log in
real quick, /user, admin.
| | 05:34 | Once we are logged in, we can go back
to Resources and then click on Edit.
| | 05:39 | Inside the WYSIWYG here, I have a table.
Let's go ahead and click on Source.
| | 05:42 | And then for this to work, I actually need
to be able to add a class to the table with
| | 05:47 | a class name of Responsive.
| | 05:49 | Let's go ahead and select the table
and say class="responsive", save this.
| | 05:55 | And now we have our table set up to use this.
| | 05:58 | We have a couple of more configurations,
though, that need to take place first.
| | 06:02 | So, tab back over to our Editor, and next thing that
I need to do is go into my responsive.info file.
| | 06:08 | From here, I need to make reference
to both the CSS and the JavaScript.
| | 06:12 | We will start with the CSS.
| | 06:14 | I am going to copy that current line, paste it in,
and just change this to say responsive-tables.css.
| | 06:22 | And in fact, actually it's tables, plural,
so make sure you don't make that mistake,
| | 06:26 | otherwise you will not
see the effect take place.
| | 06:28 | Next, I need to do the JavaScript.
| | 06:30 | The JavaScript is inside the Libraries
folder, and it is called responsive-tables.js.
| | 06:37 | I am going to go ahead and copy one
of my script lines here, paste it in.
| | 06:40 | And since it's inside the library, I can go
ahead and change this to say responsive-tables.js.
| | 06:47 | Let's go ahead and save this, tab
back over to Drupal, and flush the cache.
| | 06:52 | Now, if I begin to resize the table,
you can see the effect take place.
| | 06:57 | It adds a scrollbar here so that my left
column stays static, but it allows me to be able
| | 07:03 | to better read the content
without it becoming squished.
| | 07:06 | That's a miracle what you can do
with CSS and a little elbow grease.
| | 07:11 | We walked through two different techniques
for handling tabular data and responsive design.
| | 07:15 | Each has its own unique
approach with jQuery and CSS.
| | 07:19 | And anything in responsive design, there
is often more than one way to approach it.
| | 07:23 | Let's wrap up Responsive Tables by integrating some
of these techniques into Drupal 7 with Views.
| | Collapse this transcript |
| Integrating responsive tables into Drupal| 00:00 | When you think about in Drupal, you
may not always think about tabular data.
| | 00:04 | But in general, there are only two places
you may have tabular data to work with.
| | 00:08 | The first is the end user, creating tabular
data using the WYSIWYG inside a node or a
| | 00:13 | block, the other is the output of the
view of data from various content types.
| | 00:17 | In this section we will cover tabular data
in views and how to modify the HTML for our
| | 00:22 | needs so that we can apply the responsive
table's techniques we learned in the previous movie.
| | 00:27 | To begin with, I am already logged in, but
if you need to log in, do so at this time and
| | 00:32 | then go ahead and navigate
over to Structure and Views.
| | 00:36 | In order to do this technique, I
actually need to create a view first.
| | 00:39 | so I am going to go ahead and click on Add
new view, I am going to give this View a name
| | 00:43 | of tables, and then this is
going to be a Content Of Type All.
| | 00:47 | I am going to create a page called tables
with the Path of tables and the Display Format
| | 00:53 | is going to be Table of fields.
| | 00:56 | From here I am going to click on Continue & edit,
and right now if I scroll down all
| | 01:00 | I have is a table of the Titles of the
content that is currently inside my Drupal instance,
| | 01:06 | I want to add a couple of more columns.
| | 01:09 | Let's go to FIELDS, click on add, Filter the
Content, and let's look for the Author uid.
| | 01:16 | We'll go ahead and select that click Apply,
leave the defaults and click Apply (all displays).
| | 01:22 | Now if I scroll down I have two columns of data.
Let's go ahead and add one more column.
| | 01:27 | Scroll back up to FIELDS, click on add,
Filter the Content, and this time let's look for
| | 01:33 | let's say the Last comment author.
| | 01:36 | Go ahead and select that, click on Apply
(all displays), Apply (all displays) again, and
| | 01:41 | now I should have three
columns of data. That works for me.
| | 01:44 | Go ahead and scroll back up and click on Save.
| | 01:47 | Now that I have a view that has tabular data
in it, let's go ahead and browse to that page
| | 01:52 | real quick and see what we have.
| | 01:54 | Remember, this is called tables, so if I go to
the tables page--here you go--I see a table
| | 01:59 | of tabular data on this particular page,
| | 02:02 | and if I go to resize it, I am back to the squishy
squeezed-in problem that we have with most tables.
| | 02:09 | Let's go ahead and open up the Chrome
developer tools, let's go ahead and inspect the table,
| | 02:13 | and if we notice here we have this class of
views-table cols-3 which may help us while
| | 02:20 | doing some theming; however, I need to be
able to put the class of responsive on here, and
| | 02:26 | currently the only way to do this is by actually
creating a views template. Let's take a look at how to do that.
| | 02:32 | Go ahead and close the Chrome developer tools,
let's go back to Structure > Views, click
| | 02:38 | on and edit for our tables view, and then over
on the Advanced tab if I expand that and scroll
| | 02:44 | down I see a section called Theme, and if
I click on Information, this shows me the
| | 02:50 | output of the theme for this particular view,
and I can modify these by creating copies
| | 02:55 | of these either with the default view
names that are specified in bold or by creating
| | 03:00 | any of the view names here that I have.
| | 03:03 | This particular time, I am going to want to
create a template for views-view-table.tpl.php.
| | 03:09 | Let's see how we would go about doing that.
| | 03:13 | Go ahead and close this, and let's go ahead
and tab over to our editor real quick, and
| | 03:18 | I want to show you something.
| | 03:20 | Inside our theme we actually have a
templates folder, and these are some of the templates
| | 03:24 | that were set up just for
demonstration purposes for this series.
| | 03:28 | If I expand views, I can see that I already
have some templates in there, but I do not
| | 03:32 | have one for views-view-table, so how
do I know exactly what goes inside that?
| | 03:39 | Well, if I scroll up to sites/all/modules
and expand the modules folder and then the
| | 03:44 | views folder and then look under theme, I
can see some default templates that I can
| | 03:50 | use, and one of them is
actually views-view-table.
| | 03:53 | I am going to open that, I am going to copy
the contents, I am then going to close the
| | 03:58 | folder, close the views folder, close the
modules folder, go back to my templates, right-click
| | 04:03 | on views, and say New Text Document.
I need to call this views-view-table.tpl.php.
| | 04:15 | With that created, I am going to copy the contents
from that other view and then paste it inside of it.
| | 04:21 | I'll go ahead and hit Save and then
scroll up and take a look at what we have.
| | 04:26 | This says this is a template to display a
view as a table, and I can actually see the
| | 04:31 | table and some classes that are being used.
| | 04:34 | For demonstration purposes, I really don't
care about these other classes that are being
| | 04:38 | applied, so I am actually going to remove
this, and then I'm actually going to hand code
| | 04:43 | class="responsive" similar to
what we did inside the WYSIWYG.
| | 04:49 | However, this time I am going to save it,
and if I tab back over to my browser, flush
| | 04:54 | the cache, and then browse back over to that
page, open up the Chrome developer tools real
| | 05:00 | quick, and let's inspect this table.
| | 05:02 | Now I have a table with a class of
responsive, and the nice thing about using the template
| | 05:07 | in method is any view that I create, that I
choose to use as tables, will now have this
| | 05:13 | class, and with that previous technique that we
learned, all the tables will now be responsive.
| | 05:19 | Let's close the Chrome developer
tools, resize this, and see what we get.
| | 05:23 | There is our scrollbar for our content,
there's a scrollbar for our column if our column has
| | 05:28 | information in here that's too wide.
| | 05:31 | Responsive tables do not take a lot of work
to accomplish, but we need to make sure we
| | 05:35 | don't overlook them when designing in Drupal.
| | 05:38 | Knowing how to modify the HTML output and
then apply the appropriate CSS or jQuery is just
| | 05:43 | a small task to ensure that our
Drupal 7 design is responsive.
| | 05:48 | One more thing we want to take a look at
before we can be proud that our Drupal design is
| | 05:52 | completely responsive is forms.
Let's take a look at responsive forms now.
| | Collapse this transcript |
|
|
9. Responsive FormsIntroduction to responsive forms| 00:00 | You may be asking yourself, what are
responsive forms and why should I use them?
| | 00:05 | Well, responsive forms are forms that adjust to
the user's screen size and allow for maximum input.
| | 00:11 | Meaning that on smaller devices the input
areas are large and buttons are easier to select.
| | 00:17 | Don't you hate when multiple text boxes or buttons are
so close together that selecting one is almost impossible?
| | 00:24 | If you answered yes, then designing
responsible form should be part of your workflow.
| | 00:28 | Let's take a look at an example.
| | 00:30 | I have open in the browser the
smashingmagazine.com contact page.
| | 00:35 | Our friends at Smashing Magazine have a really well-
designed responsive site, and their contact form is as well.
| | 00:41 | Let's give it the browser
resize test and see what we get.
| | 00:44 | I am going to scroll down to where I actually
see the form and then I am going to grab the
| | 00:48 | browser and start to resize it.
| | 00:50 | You can see as it hits the different breakpoints
it shifts into different positions, but the
| | 00:55 | form itself always remains readable.
| | 00:58 | The things that I want to focus
on are, number one, label placement.
| | 01:01 | A lot of times in browser-based designs you
will see label placed to the side of the import
| | 01:06 | or form control, and that
just doesn't translate to mobile.
| | 01:10 | The label placed to the side of the input
does not allow for the input itself to be
| | 01:13 | as wide as needed and often
makes entering content a chore.
| | 01:18 | Smashing Magazine places the label above
the input control, making it more readable and
| | 01:22 | allowing for the input
controls to occupy more space.
| | 01:26 | This works really well in all breakpoints.
The next thing I want to focus on is inputs.
| | 01:32 | Oftentimes form development is a
forethought and input elements are just left at their
| | 01:36 | default size, making it hard to select them when
dealing with forms that have more than one input.
| | 01:41 | In the case of Smashing Magazine, the input is
large enough to easily select an enter content
| | 01:46 | info regardless of its state. How about sizing?
The third thing is the widths of the controls.
| | 01:53 | This relates to the label placement a
little bit in that if the label is placed above
| | 01:57 | the input, the input itself needs to be able
to be as wide as its container to allow for
| | 02:02 | that maximum amount of content.
There is a small issue here, though,
| | 02:05 | in that input and text area controls still
have attributes that can control their size
| | 02:11 | and don't really behave like we would
expect most block level elements to behave.
| | 02:15 | Adding a width of 100% of forms doesn't always
work either, once you begin adding margin and padding.
| | 02:21 | The last thing I want to focus
on is the input types themselves.
| | 02:25 | Too often we just leave the default
type to text. How is that a bad thing?
| | 02:30 | Well, think back to the mobile device, would
you prefer to get the correct keyboard prompts
| | 02:35 | or hunt and peck your way around to
enter emails, phone numbers, or URLs?
| | 02:39 | We need to think about how devices
can utilize these new input types.
| | 02:42 | The worst thing that will happen is it will default back
to the text input type in browsers that don't support them.
| | 02:49 | Now that we've taken a look at an example
of a great responsive form and appreciate
| | 02:53 | why they should be used, we need to
understand exactly what makes a good responsive design
| | 02:57 | for forms and some of the different
techniques used to ensure that users are not yelling
| | 03:02 | at you the next time they fill out a
contact form or register for an event.
| | 03:07 | Let's move on to that next.
| | Collapse this transcript |
| Creating responsive forms| 00:00 | Most of us have created a form or two, but the
design has been strictly focused on the browser.
| | 00:05 | Yet, how many times have you viewed a form
on smaller devices and just wanted to scream?
| | 00:10 | I can't click on the correct
button, the form is too hard to read.
| | 00:14 | Why don't I get the proper
keyboard keys for entering my email?
| | 00:17 | Well, the answer is simple and the solution
even easier, using the right elements, the
| | 00:23 | proper CSS will help us in creating responsive
forms that not only look good but function just as well.
| | 00:31 | I have open in a browser a standard
contact.html page with a working form.
| | 00:37 | As you can see, this is a perfect
example of a non-responsive form.
| | 00:40 | It has all of the previous characteristics of a
standard form that we talked about previously.
| | 00:45 | Giving it the browser resize test, we can
see that the labels are placed to the side the
| | 00:49 | input elements are too close to each other,
they're not wide enough to see the content
| | 00:54 | you are entering, and form controls
break out of their parent containers.
| | 00:58 | No worries, we're going to fix all of
that right now, starting with the labels.
| | 01:03 | Let's begin with tackling
the issue of label placement.
| | 01:06 | Labels by default are in-line elements, which
mean they only take out the amount of space
| | 01:10 | that the characters represent.
| | 01:12 | However, we can force labels to display
above their inputs with one simple CSS rule.
| | 01:18 | Let's go ahead and open up the
editor and take a look at what we have.
| | 01:22 | Currently I have labels for each of my
input elements, and if we want those to actually
| | 01:27 | display above, we need to
actually add a CSS rule for them.
| | 01:30 | So in our style editor I am going to go
ahead and create a label, and I am going to give
| | 01:34 | this a role of display: block.
| | 01:36 | I am going to save this, tab back
over to the browser and Refresh. Great.
| | 01:41 | We now have our label displaying above our input
elements, and it is now making our page more readable.
| | 01:47 | But how about those inputs? There are
several things I want to tackle with these.
| | 01:52 | One is the type attributes, two is
sizing, and third is the width on them.
| | 01:57 | Let's go ahead and tackle the types first.
| | 01:59 | For this particular form, we will modify the
type attributes for our email input to actually
| | 02:04 | be an email field, and this will allow for the
correct prompts when viewing it on a mobile device.
| | 02:09 | Tab back over to our editor, locate the input
for email, and currently it's the type of text.
| | 02:15 | This is a simple change,
just change text to say email.
| | 02:19 | The next one I want to take
look at is the URL for websites.
| | 02:23 | Again the type is text, but we can
change this to the new URL type as well.
| | 02:28 | Now our email and our website, even though
we can't see it currently, but if we were
| | 02:32 | to actually look at this in a mobile
device, we would get the correct prompts.
| | 02:37 | How about placeholders? It'd be nice if I
knew exactly what to put into the field and
| | 02:42 | have a label telling me, well, email, website,
but ACTP or www, how about something to prompt me?
| | 02:51 | You may have seen this technique done with
JavaScript or some other method, but we now
| | 02:56 | have the placeholder attribute that we
can use that will give us the same effect.
| | 03:02 | Tab back over to our editor, and let's go
and scroll back up to name, and let's go ahead
| | 03:06 | and give this a placeholder.
| | 03:08 | The placeholder takes a value, and this is
what's actually displayed in the text box.
| | 03:12 | So in this case we're going
to say Please enter full name.
| | 03:16 | Save it, tab back over to
our browser and Refresh.
| | 03:20 | Now we can see a placeholder, and when I put
my cursor and then start typing, the placeholder
| | 03:24 | disappears, and if I have to back
out, the placeholder shows back up.
| | 03:28 | Let's go ahead and do this
for email, website, and subject.
| | 03:33 | Tab back over to our editor and then make
this a little bit faster, I am just going
| | 03:36 | to copy this, place it in
and say Please enter email.
| | 03:40 | Again, you can put whatever text you'd like in
here that you want to have displayed to the end user.
| | 03:46 | Let's go ahead and save this, tab
back over to our browser and Refresh.
| | 03:51 | Now we have our labels above, and we have the
correct input types, and we have some placeholders.
| | 03:56 | Next, since we want our inputs to have the
maximum widths that the form will allow, we
| | 04:01 | are going to want to apply the
following CSS rule, and that's width: 100%.
| | 04:06 | And that way our form elements will
actually take up the full width of the container.
| | 04:11 | Tab back over to our editor, scroll on up
to the top and then let's go ahead and add
| | 04:15 | a CSS rule for our inputs.
| | 04:18 | First input I want to deal with is a type
of text, and we're going to say width: 100%.
| | 04:24 | Save that, tab back over and Refresh,
and that takes care of two of my fields.
| | 04:29 | However, remember since we changed the type
from text to email and text to URL, we need
| | 04:34 | to go ahead and tackle those next.
| | 04:36 | Tab back over to our editor, and I am going
to copy this, add a comma, paste it in and
| | 04:42 | say email, add another comma, change text to say URL,
save this, tab back over to our browser and Refresh.
| | 04:50 | We only have one more thing to
take care and that's our text area.
| | 04:54 | Tab back over, add a comma and say textarea,
save it, Refresh our browser, and now all
| | 05:01 | of our form elements are taking up
as much width as they possibly can.
| | 05:06 | You may be thinking to yourself, well, they
are currently breaking out of the container.
| | 05:09 | Let's don't worry about that right now.
We'll focus on that here in a second.
| | 05:12 | The other thing that I want to do, though, is
add some margin and padding as well as increase
| | 05:17 | the font size that's inside each of my elements here so
that it's easier for me to input content for the end user.
| | 05:24 | Tab back over to our browser, now we're going
to add on to this by saying margin, and we're
| | 05:29 | going to give this a margin of 6 pixels for
the top, 0 for the right, 10 pixels for the
| | 05:36 | bottom and 0 for the left.
| | 05:39 | Next I want to add some padding, the padding is going
to be 8 pixels by 4 pixels, and finally, the font-size.
| | 05:46 | Now the font-size is arbitrary. I've given
it a font-size that to me looks good with
| | 05:51 | the current display that
we are actually looking at.
| | 05:53 | So, I'm going to give it a font size of.85 ems.
Save this, tab back over, and then Refresh.
| | 06:00 | Now our display is becoming a little bit
more readable and on mobile devices it will be
| | 06:04 | much easier to actually input content and to
direct the end user on what they need to enter.
| | 06:10 | We still see that we have an issue with our
input controls breaking out of the container.
| | 06:15 | Previously, we had talked about input
controls breaking out of their form elements.
| | 06:18 | To address this issue and control the flow
of the form element, we have wrapped a div
| | 06:22 | around each input element
and its respective label.
| | 06:26 | Tabbing back over to our editor and scrolling
down to the actual markup we can see an example
| | 06:30 | of these div elements wrapped
around the input and labels.
| | 06:34 | Since the div is a true block level element
that can only be controlled through CSS, it
| | 06:39 | doesn't suffer from the size, rows, or column
attribute issues that our inputs and text areas suffer from.
| | 06:47 | Knowing this, we can apply padding and margin
to the div container and force the form elements
| | 06:52 | to contain to its sizing.
| | 06:55 | Scroll back up, and let's go
ahead and add a div CSS rule.
| | 06:59 | We're going to go ahead and give this some
margin of 0, 15 px, and a padding of 0 and 5 px.
| | 07:07 | Let's save this, tab back
over to our browser, and Refresh.
| | 07:11 | We can see now that we're no longer breaking
out of the parent container, and if I do our
| | 07:15 | browser resize test, you can see that the
form elements stay within the content section.
| | 07:21 | For those CSS gurus out there, you may have been
asking why not just use the new box sizing rule?
| | 07:27 | Well, let me show that off real quick and
then I'll let you know why I chose not to use it.
| | 07:32 | Tab back over and for the inputs I am actually
going to add in box-sizing and set it to border-box.
| | 07:40 | I am then going to quickly comment out the
div element, save it, tab back over, and Refresh,
| | 07:47 | you can see that I am still contained within the content
area; however, I've lost some of the padding that I want.
| | 07:51 | That's not a big issue, I can actually add
additional padding now into those input controls.
| | 07:56 | However, the reason I chose not to use this is
because if you need to support older browsers,
| | 08:01 | you are out of luck.
| | 08:02 | So make sure you choose the method that
works best for the browsers you need to support.
| | 08:07 | Visually and functionally, our
forms are now completely responsive.
| | 08:11 | We looked at browser versus mobile layouts
and how you use CSS to our advantage and have
| | 08:15 | a better understanding of the correct HTML
elements to use when considering responsive design.
| | 08:22 | Moving on, let's apply these techniques
within Drupal and see how we would integrate this
| | 08:26 | into our workflow in creating responsive forms.
| | Collapse this transcript |
| Integrating responsive forms into Drupal| 00:00 | When I think of forms in Drupal, the first
thing that comes to mind is the contact form
| | 00:04 | or the web form module.
| | 00:06 | Since I want to have a little bit more
control over the form, we'll be taking a look at the
| | 00:10 | web form module in more detail.
| | 00:12 | Let's begin by viewing the output of our form
and then discuss some various techniques that
| | 00:17 | we learned in the previous section to make it more
responsive using CSS, HTML5, and Drupal theme functions.
| | 00:24 | Let's begin by browsing to our Drupal
instance and then navigating to our contact page.
| | 00:29 | If we give it the browser resize test, you
will notice that our form elements break out
| | 00:33 | of its parent container, and the sidebar will seem
to be overlapping the content area because of this.
| | 00:40 | Let's fix our form to be more responsive
like we did in the previous example by tabbing
| | 00:43 | over to our editor, and opening up the layout.css
style sheet inside our theme, and then locate
| | 00:49 | the Contact section of our CSS,
opening up the Editor, browsing to
| | 00:55 | Drupal/drupal.responsive/sites/all/themes/
responsive/assets/css and then layout.css.
| | 01:03 | You may have to scroll down the page a
little bit to find the Contact section.
| | 01:07 | Once there, go ahead and hit Enter a couple
of times so that we have some room to work.
| | 01:11 | Let's begin by formatting our input controls.
| | 01:14 | We want to set their Width to 100%, adjust
their Margin and Padding, and set a Font Size.
| | 01:19 | In fact, we could use the styling from the
HTML example in the previous movie, but we're
| | 01:23 | going to go ahead and do it by hand.
| | 01:25 | First, though, let's tab back over to our browser
and open up the Chrome developer tools and
| | 01:30 | see what we need to target.
| | 01:32 | You can either do Command+Option+I, or you
can right-click on the element and say Inspect.
| | 01:37 | What we're going to target is the form that
has a class of webform-client-form, and then
| | 01:42 | the different types of inputs that we have.
Tab back over to our Editor.
| | 01:47 | Let's go ahead and enter CSS declaration for the
webform-client-form with an input type of text.
| | 01:53 | Now that we have that in place,
let's go ahead and add our CSS rules.
| | 01:57 | The first rule is going to be for Width.
I am going to set that to a Width of 100%.
| | 02:00 | Next, we are going to add some margin, and
we are going to have a margin of 6px 0 10px 0;
| | 02:08 | and then some padding.
And the Padding previously was 8px by 4px.
| | 02:15 | And then finally the font-size,
we're going to give this .85ems.
| | 02:20 | Let's save this, tab back over to the browser,
close the Chrome developer tools, and then hit Refresh.
| | 02:27 | One thing to notice here is our input types
have now stretched out to the boundaries of
| | 02:31 | the container, but the website one which we
thought was a URL field previously also stretched.
| | 02:37 | The web forms module actually
does not have a URL field currently.
| | 02:42 | So, we could add this into the CSS which I
am going to do just so that once it is added,
| | 02:47 | it will work properly.
| | 02:48 | But I wanted to make sure that you are aware of
that and then wonder why that field had expanded.
| | 02:53 | Let's go ahead and target now the email field.
I am going to tab back.
| | 02:56 | I'm going to copy this line, add a comma, paste it in,
and target the email field, another comma, paste it in.
| | 03:05 | We'll target the URL field.
| | 03:06 | So once they do have that,
it will work properly.
| | 03:09 | I'm going to do comma one more time, and this time
I'm also actually going to target the text area.
| | 03:14 | Now that I have the widths, margin, padding,
and font-size for my input controls set the
| | 03:19 | way that I want them, I am going to make
sure I save, tab back over, and refresh.
| | 03:24 | Now, these may look like they are bouncing up
to the edge of the page properly, but they're
| | 03:28 | actually overlapping a little bit.
Let's take a look at that.
| | 03:30 | Let me go ahead and inspect, and you'll
see here that it overlaps just a little bit.
| | 03:35 | So, even though if we try to do the browser
test by resizing the page, the sidebar actually
| | 03:40 | would drop down before it overlapped,
but we do have a little bit there.
| | 03:44 | So, knowing that, let's go ahead and tab back
over to our editor, and this time, we actually
| | 03:50 | want to target the container itself, to
make sure that we lock it in to the constraints
| | 03:56 | so that we don't have any of
those input controls overflowing.
| | 04:00 | What we want to target here is
the webform-client-form once again.
| | 04:03 | Let me go ahead and scroll up a little bit so you can
see it better, and then type in the webform-client-form.
| | 04:10 | And then in this case, I want to target anything
that has a class of webform-component of a text field.
| | 04:17 | I am going to add a comma.
I am going to copy this line, paste,
| | 04:22 | and this time I want to
change text field to be email.
| | 04:25 | I'll show you where I'm getting this
information from here when we go back over to the browser.
| | 04:28 | I am going to paste one more time,
and then I want to target the text area.
| | 04:32 | Let me go ahead and add the CSS rules for
this, in this case, margin of 0 15px 0 0,
| | 04:41 | and a padding of 0 5px 0 0.
| | 04:44 | I am going to save this, and I'm going to tab
back over and show you exactly what we're targeting.
| | 04:50 | I'm going to refresh the page, and then if
we actually take a look, each of our input
| | 04:54 | controls were wrapped with a div.
| | 04:56 | So what I was doing is
actually targeting the div.
| | 04:58 | So in this case, you can actually see that
form of the class of webform-client-form and
| | 05:02 | then our divs with a web form
component, text field, email, and text area.
| | 05:07 | Now, if I close the Chrome developer tools, you can
see that the page is starting to look a lot better.
| | 05:13 | But how about our placeholders?
| | 05:15 | Since we're using web forms, let me explain
to you how they work and how we can modify
| | 05:19 | their output to add the
placeholders to our inputs.
| | 05:21 | Go ahead and scroll back up, and then what I
want you to do is actually log in real quick.
| | 05:26 | So /user, user name of Admin, password of
Admin, log in, go back to the Contact page,
| | 05:33 | and then up at the tabs you are
going see View, Edit, and then Webform.
| | 05:36 | Go ahead and click on Webform.
These are the actual fields that we have.
| | 05:41 | And if I want to edit a field, I simply
click under Operations the text for edit.
| | 05:45 | Now, I can see where I can give it a Label, I
can give it a Field Key, which is for Drupal.
| | 05:50 | I could give it a Default Value, and why we
might want to think about using that as our
| | 05:54 | placeholder, the only problem with it is
it won't disappear when the input has focus.
| | 05:58 | So currently, there is no
way to add a placeholder.
| | 06:02 | Well, there actually is, and
this is for you PHP gurus out there.
| | 06:05 | We are going to dive into the template.php
file, and I'm going to show you actually
| | 06:10 | how to override or alter the form
controls that are being written by Drupal.
| | 06:15 | Let's go ahead and go
back to the View, scroll up.
| | 06:18 | This way we can actually see the placeholders once
they get put in place, tab back over to our Editor.
| | 06:24 | And what I'm looking for us to do is
actually click on template.php, scroll down a little
| | 06:29 | bit, and we're actually going to add a function.
| | 06:32 | This function is actually going to be called
responsive, which is the name of our theme, _form_alter.
| | 06:40 | We're altering the form.
This takes some multiple attributes.
| | 06:44 | Number one is the form variable, next is
the form_state, and finally the form_id.
| | 06:50 | Let's go ahead and open and close our function.
| | 06:52 | And then previously we saw
about using that KPR function.
| | 06:56 | We're going to use it here, too, so
that I can show you the form output.
| | 06:59 | So, we're going to type in kpr(), and then I
actually want to take a look for the form_id
| | 07:06 | that we'll be targeting.
| | 07:07 | I'll put in form_id, put a semicolon in to
close that, and then tab back over, and then
| | 07:13 | I'm going to have to scroll up
real quick and then hit Refresh.
| | 07:16 | I see here I want to
target webform_client_form_9.
| | 07:19 | So, knowing that, tab back to our editor,
and we're going do a conditional statement.
| | 07:26 | What we are going to say is if the form_id
is equal to webform_client_form_9, then go
| | 07:39 | ahead and do something.
Well, what we want to do?
| | 07:42 | Let's go ahead and output another KPR function,
and this time actually look at the form variable.
| | 07:46 | I'm going to comment out the KPR function
above, save it, tab back over, and then Refresh.
| | 07:51 | Now, we can see at the
array that we need to work with.
| | 07:54 | If I expand this, what I'm actually looking
for is the form submitted, and then in here
| | 08:00 | I can actually see the different fields.
| | 08:02 | So, I need to be able to target each one of these
fields and add a new attribute to it of placeholder.
| | 08:08 | Tab back to our Editor.
We can comment out this KPR function.
| | 08:12 | Then what I want to do is
actually create some placeholders.
| | 08:15 | So we're going to target the form, the
submitted array, the name field, and I want to add
| | 08:25 | to the attribute, and the attribute that I
want to add is placeholder, and I want to
| | 08:27 | set that equal to whatever I
want the placeholder to say.
| | 08:31 | So in this case, Please enter full name.
| | 08:33 | Go ahead and close that,
save it, refresh the page.
| | 08:38 | And now we see the placeholder.
| | 08:40 | I want to actually type in, you'll see that it
actually disappears, and when I back out, it comes back in.
| | 08:45 | I am going to go ahead and let you do the
remaining ones, and then we'll be right back.
| | 08:50 | Now that we have those completed, let's go ahead and
save our work, tab back over, and then refresh the page.
| | 08:57 | We now see our placeholders
are all completely done.
| | 09:00 | While the HTML output of Drupal 7 is not quite
there when it comes to HTML5, we have learned
| | 09:05 | that based on our skill level, we can either
apply CSS to adjust the max width of input,
| | 09:10 | or we can dive a little deeper in, and
modify the Drupal output to enhance the HTML.
| | 09:16 | Our Drupal theme is pretty much complete,
but before we call it a day, I want to take
| | 09:20 | a look at some responsive tools and techniques that will
help you get started earlier in the design process.
| | Collapse this transcript |
|
|
10. Responsive Tools and TechniquesAdding min-width and max-width support with Respond.js| 00:00 | Previously, we took a look at adding the
CSS property max width to ensure that images,
| | 00:05 | media, and form elements were responsive.
| | 00:08 | But what about browsers such as IE6 through IE8
that don't support max width or min width rules?
| | 00:15 | That's why a handy piece of JavaScript comes
in to test which browser is being used and
| | 00:19 | enables those CSS rules so they
display our content correctly.
| | 00:23 | I introduce you to Respond.js.
| | 00:27 | You can find this over drupal.org/project/respondjs,
and this Drupal module will allow for support
| | 00:34 | of responsive themes by delivering a lightweight
fast support for min width and max width media queries.
| | 00:41 | Let's go ahead and scroll down to the bottom
of the page, click on the zip file to download
| | 00:45 | it, and once the download is complete, let's
go ahead and open up our Downloads folder.
| | 00:50 | Go ahead and double-click on the file to extract
it, and then I want to copy this file over to our
| | 00:55 | Desktop/Drupal/drupal.responsive/sites/all/modules folder.
| | 01:03 | Now that we have the module in place, Tab back to
over to our Drupal Instance, and then let's log in.
| | 01:09 | Username and Password is admin all lowercase.
| | 01:11 | Next, let's navigate our Modules, scroll
down to the bottom of the page, and then scroll
| | 01:17 | a little bit until we find Respond.js.
| | 01:20 | Go ahead and click on
Enabled, save the configuration.
| | 01:25 | With our module enabled, let's
go to our configuration screen.
| | 01:28 | Scroll down to where we find Respond.js.
It will be under the Media section.
| | 01:32 | There are only two settings we need to worry about.
Where we want to Respond.js file be included.
| | 01:38 | Best practices are to put in this footer.
So I choose footer now.
| | 01:42 | Then I also want to check off Do
not warn me about CSS aggregation.
| | 01:46 | Click on that and then click Save configuration.
The configuration options have now been saved.
| | 01:51 | I'm going to go back to my homepage and then
using the Chrome developer tools, Command+Option+I,
| | 01:56 | I'm going to scroll down to the bottom my
code, and down at the bottom I should see the
| | 02:01 | script being included for Respond.js.
It's that simple.
| | 02:06 | Respond.js to the rescue.
| | 02:08 | No more concerns over what IE6 through IE8
is not displaying correctly when it comes
| | 02:13 | to elements that we have
targeted with max width CSS rules.
| | 02:18 | It's very easy to overlook IE, and the Respond.js module
makes it simple to integrate into our responsive design workflow.
| | 02:25 | The last two more techniques that I want to
discuss next deals with images and how mobile
| | 02:30 | devices handle loading them
through context aware image sizing.
| | Collapse this transcript |
| Exploring context-aware image sizing| 00:00 | One thing we probably don't think about
much in the US anymore is bandwidth, and assuming
| | 00:04 | that everyone must have fast speeds and with more
users having mobile devices and 4G speed, why would we?
| | 00:11 | How about other countries
where bandwidth is not so fast?
| | 00:14 | How does your website look on a
mobile device in let's say Africa?
| | 00:18 | How long does it take to load?
| | 00:20 | Even though we've applied responsive
techniques to our images for them to scale visually,
| | 00:24 | we are still serving up
a larger image file size.
| | 00:28 | Let's remedy that by discussing context aware
image sizing and a technique known as adaptive images.
| | 00:35 | Let's begin by browsing to
drupal.org/projects/adaptive_image.
| | 00:42 | The adaptive image module provides device-
appropriate versions of images from all your fields.
| | 00:48 | You can activate the adaptive images by simply
adding an adaptive effect to any of your image styles.
| | 00:53 | The technique used is derived from the
adaptiveimages.com created by Matt Wilcox.
| | 00:58 | Let's go ahead and scroll down the page
and click on the zip file to download it.
| | 01:02 | Once the download is complete, go
ahead and open up your Downloads folder,
| | 01:06 | double-click on the file to extract it,
and then let's copy this to our
| | 01:11 | Desktop/Drupal/drupal.responsive/sites/all/modules folder.
| | 01:18 | With the module in place, go ahead and close
the download window, and let's tab back over
| | 01:22 | to our responsive theme.
| | 01:24 | Go ahead and log in, Username and Password
all lowercase, the word admin, navigate to
| | 01:30 | modules, and then scroll down the page until
we find the module so that we can enable it.
| | 01:34 | Here we go, Adaptive Image. Make sure it's
checked, and then click on Save configuration.
| | 01:40 | Unlike most modules, though, there is
actually no configuration, so to speak.
| | 01:44 | Instead, we actually need to go to Configuration > Image Styles,
and we need to add a new preset for mobile devices.
| | 01:53 | We can do this by clicking on Add style, giving
it a STYLE NAME of mobile, and the naming convention
| | 01:58 | here is whatever you want to call it, but for
my purposes, I'm going to call mobile and
| | 02:03 | then click on Create new style.
| | 02:05 | Underneath the Effects, go ahead and
select Adaptive and then click Add.
| | 02:08 | For the resolutions, these are actual
breakpoints that we've been dealing with.
| | 02:12 | For demonstration purposes, I'm going
to go ahead and leave the resolutions as is.
| | 02:16 | But if you have different breakpoints that
you're theming against, this is where you
| | 02:20 | would make those modifications.
Notice the Mobile First has been checked.
| | 02:24 | This will send out to smallest version of the
image when the resolution cannot be determined.
| | 02:29 | Go ahead and click on Add effect.
| | 02:31 | In order to utilize this effect, we need to
go to Structure > Content Types, locate the
| | 02:36 | content type that you want to use this against.
| | 02:38 | In our case, the Article which is
our blog post that is utilizing images.
| | 02:43 | I then want to click on manage display, and for
the Image field you see a little icon to the right.
| | 02:49 | If I click on this, I can choose my
mobile preset that I just configured.
| | 02:54 | Go ahead and do that now, click Save, and
you're done with the configuration portion.
| | 03:00 | Go ahead and click on Home, and then let's go ahead
and click on Blog, and then go ahead and click
| | 03:05 | actually on one of the blog posts themselves.
| | 03:08 | What I'm going to do here is scroll up a little
bit, and then I'm actually going to start resizing the page.
| | 03:11 | And before, everything was fluid.
| | 03:14 | Now you're actually going to see
some different snapping take place.
| | 03:17 | There is one, there is another,
now it scales, and then it jumps back.
| | 03:21 | So what's happening is it's actually doing
an image replacement when you're seeing this
| | 03:25 | snap based off the different breakpoints.
| | 03:28 | So we're actually serving up a
smaller file size of that image.
| | 03:32 | Scalable images both visually and physically
are now capable depending on where your end
| | 03:37 | user market is located and the time you want to
spend in implementing context aware image sizing.
| | 03:43 | With the adaptive image module, we're able to
achieve that concept very easily and increase the
| | 03:48 | performance of our design in mobile devices.
| | 03:51 | The nice thing about this module is we
don't have to create different sized images.
| | 03:56 | By simply making that preset, those images are actually
created for us and served up appropriately.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | I realize we traveled far in a fast amount of
time, so you may be asking, where do we go from here?
| | 00:06 | My recommendation will be taking a look at the
remaining lynda.com courses on responsive design.
| | 00:11 | There are quite a few for you to take a look at and
they range from beginner all the way up to advanced.
| | 00:16 | I'd also say take a look at drupal.org/node/1322126,
or in other words, Google Drupal responsive
| | 00:25 | design, and you'll end up here.
| | 00:27 | These have some great resources for you on
different responsive base themes as well as
| | 00:32 | it'll get you to started on theming
guide when it comes to responsive design.
| | 00:36 | Also, how about Ethan Marcotte?
| | 00:37 | Ethan Marcotte is a web designer, developer,
and probably one of the most notorious names
| | 00:42 | in the industry when it comes
to responsive design in general.
| | 00:46 | Then finally, if you want to talk about responsive
design when it comes to type, Jason Cranford Teague
| | 00:51 | has written a lot of great books on Fluid Typography,
and you can see his site at jasonspeaking.com.
| | 00:57 | Finally, last but not least, you want
to keep an eye on the Drupal sphere.
| | 01:02 | Drupal 8 is right around the corner, and it's going
to have a lot of responsive goodness baked into it.
| | 01:07 | Until next time, it's
been a pleasure, happy coding.
| | Collapse this transcript |
|
|
