IntroductionWelcome| 00:04 | Hi I'm Morten Rand-Hendriksen and this
is WordPress: Building Responsive Themes.
| | 00:10 | For this course I've created a special
WordPress theme just for you that starts
| | 00:15 | off as a static theme and at the end
of the course ends up a fully responsive
| | 00:19 | theme with lots of functionality.
| | 00:21 | Throughout the course we will look at
several different aspects of responsive
| | 00:25 | design, including using media
queries to create different layouts for
| | 00:30 | different screen sizes,
| | 00:32 | enabling images and videos to resize
and respond to different screens, and
| | 00:37 | adding advanced JavaScript functions,
including a featured content slider which jQuery Masonry.
| | 00:44 | More and more people used their cell
phones or tablets to access the web, and as a
| | 00:48 | result, we need to make web sites that
look great and work properly across all
| | 00:54 | these different devices.
| | 00:56 | This course will show you how to do just that.
| | 00:59 | So let's get cracking with
WordPress: Building Responsive Themes.
| | Collapse this transcript |
| Using the exercise files| 00:00 | All lynda.com members will have
access to the key assets of this course, the
| | 00:05 | starting state of the
Anaximander theme, and a code snippets file.
| | 00:10 | If you're a Premium member of the
lynda.com online training library, you have
| | 00:14 | access to all of the exercise
files used throughout this course.
| | 00:19 | In the Exercise Files folder you will
find the Anaximander theme in the Static
| | 00:25 | version when we start off, along with a
code snippets file, and you'll also find a
| | 00:30 | folder for each of the chapters in
which we make changes to the code.
| | 00:35 | The way this works is, for example,
if you start on chapter 10, movie number
| | 00:40 | 02, you have a set of files
that are the starting point where I'm
| | 00:45 | starting in this movie.
| | 00:46 | That means if you want to ensure that
your code matches mine exactly, or if
| | 00:51 | you're jumping in in the middle of the course,
you can reset your theme to match mine.
| | 00:56 | The way you do that is by opening your
WordPress installation on your computer,
| | 01:01 | or WordPress on your server, and then
navigating to the theme, so here we have
| | 01:06 | an Anaximander-Static, and then you
grab all the content inside this exercise
| | 01:12 | files folder and simply copy it in,
overwriting what's in the current folder
| | 01:17 | with what you're copying in.
| | 01:23 | This will ensure that for each movie,
you're always starting at the same
| | 01:26 | place as me.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before we get started with this
course, there are a few things you should know.
| | 00:04 | If this is the first time you're
using WordPress, or if you have little
| | 00:08 | experience using the application,
I urge you to check out the WordPress
| | 00:12 | Essential Training course right here in
the lynda.com online training library.
| | 00:17 | The Essential Training course will
give you the fundamentals and the
| | 00:20 | understanding of how WordPress works
and ensure that you're able to follow the
| | 00:24 | course all the way through.
| | 00:26 | The WordPress Essential Training
course covers how to publish your WordPress
| | 00:30 | site on an external host on the web,
but if you want to install WordPress
| | 00:35 | locally on your computer, you can also
check out the Installing, Apache, MySQL
| | 00:40 | and PHP course right here in the
lynda.com online training library.
| | 00:46 | To be able to test your theme properly
on a mobile device like a cell phone or a
| | 00:50 | tablet, you need to either publish
your site to the web, so you can access
| | 00:54 | through the web, or you need to set up a
local server on your local network so
| | 00:59 | that you can access that
network with your device.
| | 01:02 | I suggest setting up a site on the web,
simply because it's easier and less to manage.
| | 01:08 | And finally, throughout this course I
will be using demo assets in the site.
| | 01:13 | That's images, text, and videos
that we've created to showcase
| | 01:17 | different features.
| | 01:19 | As you follow along in this course,
you should use your own assets, so your own
| | 01:23 | text, your own images, and your own
videos, so that when you're done you
| | 01:28 | actually have real content on your site.
| | 01:31 | Now, let's get started
building responsive themes.
| | Collapse this transcript |
|
|
1. Why Mobile MattersWhat is responsive design?| 00:00 | If I ask you how you access the web
these days, I bet your answer will
| | 00:04 | be something like "with my phone" or "with my
tablet" before it is "on my desktop computer."
| | 00:10 | With the introduction of smartphones
and tablets, the way people visit and
| | 00:14 | interact with the web has changed completely.
| | 00:17 | In the past, the web was focused mainly on
desktop computers with ever larger screens.
| | 00:23 | Now, the web needs to
focus on the exact opposite:
| | 00:25 | mobile computers and smaller screens.
| | 00:27 | You may have heard the term responsive
design or possibly responsive layouts
| | 00:33 | bandied about, and you may have
a general idea of what it is.
| | 00:37 | Regardless, let me give you a short primer.
| | 00:40 | What you see here is the original
Responsive Web Design article written by
| | 00:44 | Ethan Marcotte and published on
A List apart on May 25th, 2010.
| | 00:50 | This article outlines what was to become
the definition of responsive web design.
| | 00:56 | The idea presented in the article is
that any web site should conform and
| | 01:02 | realign the content to the device
that's accessing it so that if the screen is
| | 01:07 | big, you have a lot of content; if
the screen is small, you reorganize the
| | 01:11 | content so that it fits and give
the users a good user experience.
| | 01:15 | This idea was quite revolutionary
when the article was published, but now
| | 01:19 | responsive design has become the new
standard for the web, and it should be the
| | 01:23 | new standard for the web, because we
as web developers and designers need to
| | 01:27 | ensure that when people visit
web sites with different devices
| | 01:31 | they should get a consistent experience
through all these different devices so
| | 01:36 | that they recognize the web
site and they know what's going on.
| | 01:39 | But that's all theory.
Let's look at some examples.
| | 01:42 | First, let's look at a web
site that's not responsive.
| | 01:44 | This is the web site I made for the 12x12
Vancouver Photo Marathon several years ago.
| | 01:50 | It looks great on a desktop,
and it functions quite well.
| | 01:54 | However, if I reduce the size of my window,
you will see that this site is not responsive.
| | 01:59 | If I reduce it down past the standard
width of the site, you will see that the
| | 02:03 | margins of my window start covering content.
| | 02:06 | And to access the content,
I have to use a scrollbar,
| | 02:09 | scroll left and right.
| | 02:11 | And if you were to visit this site
using a cell phone or a tablet, you'd
| | 02:14 | notice you'd have to do pinch-and-
zoom behavior to be able to see all the
| | 02:18 | content and read it.
| | 02:19 | That is not a good user experience,
and that is not responsive design.
| | 02:24 | If you want to employ responsive
design on a WordPress site, you really
| | 02:28 | don't have to go any further than the 2011
theme, which is the stock theme for WordPress.
| | 02:33 | The 2011 theme is already responsive.
| | 02:36 | So, if I reduce the size of the
window here, you will see that the content
| | 02:41 | reorganizes and reshapes to
fit the size of the window.
| | 02:44 | And you will see that content like the
sidebar will appear when there's room
| | 02:49 | for it and disappear, or rather, move down to
the bottom of the site, when there's no room.
| | 02:55 | This allows for a consistent look and
design across multiple devices without
| | 03:00 | forcing the users to have to do extra
behaviors to get to all the content.
| | 03:05 | Lastly, let's take a look at the project we
are going to be working on in this course.
| | 03:10 | For this course, I created a new
WordPress theme that you can work with,
| | 03:14 | you are going to customize, and that
you can use for your own web site if you
| | 03:17 | want to when you are done.
| | 03:18 | This theme is fully responsive,
and you can see it when we resize the window.
| | 03:22 | The front page has a masonry layout
| | 03:26 | that automatically reorganizes the
content depending on the size of the screen.
| | 03:30 | And you will notice that in addition,
the menu changes from a standard list
| | 03:34 | menu to a more advanced menu when the
screen gets small enough so that it's
| | 03:39 | easier to use on touch devices.
| | 03:42 | If we go to single posts, you will see
that on small screens the title and all
| | 03:47 | the information is on top.
| | 03:49 | But as we scale up the window, you will
see that the title and other information
| | 03:53 | slide to the left side,
leaving the content on the right.
| | 04:00 | The whole point of having a web site
is for people to be able to access the
| | 04:04 | information on that web site.
| | 04:06 | That means as the technology landscape
changes, so the web site has to change to
| | 04:11 | accommodate this new reality.
| | 04:12 | Responsive design is at the
heart of this new paradigm.
| | Collapse this transcript |
| The different faces of WordPress on mobile| 00:00 | With WordPress, you basically have
three main routes you can choose to follow:
| | 00:04 | use a responsive theme, use a theme
switcher that serves up different themes
| | 00:09 | depending on the device used,
or use a plug-in that serves up a custom
| | 00:14 | experience for mobile users.
| | 00:16 | In this course will be looking at
using a responsive theme, and through the
| | 00:20 | course, I'll teach you how
to build not responsive theme.
| | 00:23 | If you ask me, using a responsive theme is
the best solution to deal with the mobile issue.
| | 00:29 | If you don't want to use a responsive theme,
the second-best option is to use a mobile
| | 00:34 | theme switcher plug-in and have a
custom mobile theme that you can use instead.
| | 00:39 | What you see here on the desktop screen
is a site I built for a company called
| | 00:43 | Better Outcomes Consulting in Vancouver.
| | 00:46 | On the Desktop it looks like a phone,
but if you look at it on a cell phone, you
| | 00:51 | only see the middle part, so it
looks like an application instead.
| | 00:56 | What you're seeing here is the
result of using a theme switcher plug-in.
| | 00:59 | So when you on a desktop you get one
theme, and when you're on a cell phone you
| | 01:03 | get a different theme.
| | 01:05 | The last option you have
is to use a mobile plug-in.
| | 01:08 | The most popular mobile
plug-in is one called WPtouch.
| | 01:12 | It gives you a customized mobile
experience when you use mobile devices.
| | 01:16 | The problem with this approach is
that this mobile experience looks nothing
| | 01:20 | like your main web site.
| | 01:21 | You can customize it a bit to make it
look more like your custom web site, but the
| | 01:26 | mobile experience will always
be a custom mobile experience.
| | 01:30 | Deciding if you want a responsive theme,
if you want a custom theme for mobile
| | 01:34 | devices, or if you want to use a mobile
plug-in is the first step on your path
| | 01:39 | to creating a mobile-ready WordPress web site.
| | 01:42 | In this course, we will focus
on creating responsive themes.
| | 01:46 | If you're looking for a plug-and-play
solution, check out the WordPress mobile
| | 01:50 | solution's course right here in the
lynda.com online training library.
| | Collapse this transcript |
| Exploring the finished Anaximander theme| 00:00 | Before we get started, let me quickly
explain how this course is going to work.
| | 00:05 | The idea of this course is to give you
the tools and understanding necessary to
| | 00:09 | build your own custom responsive themes or to
take existing themes and make them responsive.
| | 00:15 | To make this process easier,
I've created a custom theme just for you that you
| | 00:20 | can use as you follow along with this course.
| | 00:23 | The theme start off as a regular
static theme and as you progress, you'll
| | 00:27 | incorporate responsive features that in
the end will make it fully responsive.
| | 00:32 | All the techniques taught in this
course are universal, but you may have to
| | 00:36 | change them a bit to fit different themes.
| | 00:38 | The cool thing about this course is
that when you're done, you'll have a fully
| | 00:43 | responsive and quite advanced theme
you can use for your own web site.
| | 00:47 | I designed and built a theme with this
in mind so that you didn't have to start
| | 00:51 | over with your old theme when
you're done, unless you want to, that is.
| | 00:55 | Let's take a look at this new theme
called Anaximander and see what it does once
| | 01:00 | you're finished with the course.
| | 01:01 | The theme comes with lots
of built-in functionality.
| | 01:04 | From the top, this themes has optional
social icons, if you want to link your
| | 01:09 | theme to Twitter or Facebook,
along with a search box.
| | 01:12 | Then we have a custom header with a
custom menu that's hooked into the WordPress
| | 01:17 | menu system that has nice dropdowns.
| | 01:20 | The header is responsive, and you can also
add an optional header image if you want to.
| | 01:25 | In the course, I'll show you how to add a
featured content slider, like the one you see here.
| | 01:30 | We'll also incorporate what's
called the Masonry-type layouts.
| | 01:34 | It start to type of layout you see here
on the front page, where all the content
| | 01:38 | stacks next one another. And if we
resize the window, you'll see the content
| | 01:44 | reorganize to fit the screen.
| | 01:48 | And if we go into a single post,
you'll see we have a responsive layout again
| | 01:53 | that responds to the size of
the screen and fits all screens,
| | 01:58 | and we also have advanced features like
the display of related posts under each
| | 02:02 | individual single post, and footer widgets.
| | 02:06 | In developing this course, I wanted to
give you a reward at the end, which is why
| | 02:10 | I built the Anaximander theme.
| | 02:12 | Once you've completed this course, you'll
have an advanced responsive WordPress
| | 02:16 | theme you can use for your own web
site if you like, and this theme is only
| | 02:21 | available right here on lynda.com.
| | Collapse this transcript |
|
|
2. Starting with a Solid Theme Getting and installing the Anaximander theme| 00:00 | Throughout this course we will be
working with and making changes to the
| | 00:04 | Anaximander theme that I designed
specifically for this course for you to use.
| | 00:09 | So before we started, we have to install
Anaximander into WordPress. As we move
| | 00:13 | forward, I'll be using two
installations of WordPress,
| | 00:16 | one that's installed locally
on my computer using BitNami--
| | 00:20 | You can also do the same thing using
WAMP or MAMP or WebMatrix or another
| | 00:25 | application that lets you
install WordPress on your computer--
| | 00:28 | and in addition to the local install,
I also have WordPress installed on a
| | 00:32 | server on the web so I can access it
with my phones and my tablets and check
| | 00:36 | whether or not everything works.
| | 00:38 | The static version of Anaximander
ships in the exercise files, both the
| | 00:43 | free ones and the full exercise
files, and you'll find them under the
| | 00:47 | folder Anaximander-Static.
| | 00:49 | This is the folder that contains the themes.
| | 00:51 | If you open it, you'll
see the entire theme here.
| | 00:54 | So what we need to do is simply
grab that and dump it into WordPress.
| | 00:59 | Themes in WordPress live under
the wp-content folder, under themes.
| | 01:03 | So simply grab Anaximander-Static
and copy it into themes and it will
| | 01:10 | appear inside WordPress.
| | 01:12 | I'm also going to do this
through my FTP application.
| | 01:15 | So I'll navigate to my
WordPress installation here.
| | 01:17 | And here we have themes,
and I'll grab it and dump it in.
| | 01:26 | As this uploads, I can log in to
WordPress on my computer, go to Themes, and here
| | 01:36 | we will see we have Anaximander
installed, and I can now activate an
| | 01:41 | Anaximander on my local WordPress
installation, go to the front page, and here we
| | 01:48 | have the stock version of
Anaximander running in my local installation.
| | Collapse this transcript |
| Configuring basic theme options| 00:00 | When I built the Anaximander theme for
this course I decided to build in some
| | 00:05 | features that would make it more
useful and easier to customize for you.
| | 00:09 | Some of these features are standard in all
themes and some are custom to this theme only.
| | 00:14 | The features are also hooked into
the new WordPress 3.4 theme customizer
| | 00:18 | function for easier handling.
| | 00:20 | Let's take a look at what options
are available and how you can customize
| | 00:24 | Anaximander to personalize your sites.
| | 00:27 | By default, Anaximander ships like this.
| | 00:29 | Off the top, you have a super header
that has an RSS icon in it and a search
| | 00:33 | box. You then have a blue main header
that has the site title and site tag line,
| | 00:39 | along with the main menu, and then
you have the rest of the content.
| | 00:43 | At the very bottom, you have a
standard footer with information about the
| | 00:49 | site and the theme.
| | 00:52 | If you want to customize this,
you can use the theme customizer function.
| | 00:56 | You can access it either by going to
the backend Dashboard, going to
| | 01:01 | Appearance > Themes and then select
Customize, or, if you are on the front end, you
| | 01:08 | can go to the WordPress
toolbar and select Customize.
| | 01:12 | The theme customizer is quite built
out for this theme, so it has additional
| | 01:17 | features that you don't
normally find in the theme customizer.
| | 01:20 | Off the top, we start
with the Super-header Icons.
| | 01:22 | If you drop that down, you see here
you can add your own Twitter handle, your
| | 01:27 | Facebook page handle, and an
alternate RSS feed if you want to use the
| | 01:31 | regular WordPress RSS feed.
| | 01:33 | If you enter information here--let's
say I enter my Twitter handle--you see a
| | 01:37 | little Twitter bird appears on the
super-header and if you were to click on it,
| | 01:41 | you'd go directly to my Twitter page.
| | 01:43 | Likewise, if you enter the handle for
your Facebook page--for instance, mine is
| | 01:48 | pinkandyellowmedia for my company page--
| | 01:54 | you get a Facebook icon, and again, if you
click on it, you jump directly to the Facebook page.
| | 01:59 | In the Alternate RSS Feed field, you
can input another URL if you don't want to
| | 02:04 | use the default WordPress Feed URL.
| | 02:06 | If you don't have anything in these
fields, the buttons will automatically
| | 02:10 | disappear, and what you are left with is
the RSS feed, which will always be there.
| | 02:17 | The next option is Header and Link Color.
| | 02:20 | If you look at the theme, you will see
the header has this nice blue color and
| | 02:24 | if we hover over any of these links down in
the body, they also have the same blue color.
| | 02:29 | You can change this color to any color
you want using the Header and Link Color
| | 02:33 | option. You drop it down and
you can pick any color you want.
| | 02:39 | That color will automatically preview
both in header and on the links so that
| | 02:44 | you can see whether or not that color works.
| | 02:47 | If you are going to change the color,
I suggest choosing a darker color, so that
| | 02:51 | you get good contrast between
the background color and the font.
| | 02:54 | Next on the list is Site Title & Tagline,
and this is a standard feature with all themes.
| | 03:01 | Here you can change to Site Title and
Tagline to anything you want, and you can
| | 03:04 | also choose whether you want to
display the header text or not.
| | 03:08 | So if you want to change the Tagline,
we can just type in something else and
| | 03:15 | you see that takes place
immediately in the preview.
| | 03:18 | We can also change the Site
Title and the same thing happens.
| | 03:22 | So here you can experiment with
different titles and different taglines and see
| | 03:25 | how they appear in the theme.
| | 03:29 | In this theme, the Display Header Text
option is meant to coincide with the
| | 03:33 | use of a header image.
| | 03:34 | Let me show you what I mean.
| | 03:36 | First, let me add a header image, so I
will go to the Header Image option and
| | 03:42 | upload a new header image. So I will
go to my Computer and find a file I want
| | 03:47 | to use and upload it.
| | 03:49 | The header image is automatically added
under the header, and this is done on purpose.
| | 03:55 | I wanted to give you
some different options here.
| | 03:57 | In the Anaximander theme, you can
choose whether you want to have just the
| | 04:00 | standard header, if you want to have the
header with the header image underneath
| | 04:05 | it, or if you want to only have the
header image and that will move the menu.
| | 04:09 | If you want that last option, what you
do is you add a header image first, then
| | 04:13 | you go back to Site Title &
Tagline and uncheck Display Header Text.
| | 04:18 | When you do that, the header image is
moved on top and the menu is slid in under
| | 04:24 | the header image, as you see it down here.
| | 04:26 | It's also restyled to fit more with this layout.
| | 04:29 | To ensure that people have an easy
time getting back to you homepage, the entire
| | 04:33 | header image is now clickable, so
you can click on it and go back to the
| | 04:37 | front page at any time.
| | 04:39 | I am going to turn the header back
on so you can see all the content.
| | 04:43 | While I was showing you this,
I skipped over this Colors option.
| | 04:46 | The Colors option allows
you to change two things.
| | 04:49 | You can change to Header Text Color,
which is the text color for the title and
| | 04:53 | tagline along with the main menu.
| | 04:56 | You can change that to any color you
want, so this allows you to experiment and
| | 05:00 | see whether or not certain colors work
in this environment, and you can find the
| | 05:05 | exact right colors. And you can
also change the background color.
| | 05:10 | I have to zoom out my browser a
little bit for you to see this.
| | 05:13 | If I zoom out the browser, you will
see we have a gray background here and I
| | 05:17 | can drop this down and select any
other color for the background and we can
| | 05:21 | again experiment to see what would happen if
we have different colors for the background.
| | 05:28 | The last three options are
standard options that come in WordPress.
| | 05:31 | We have the Background Image option,
which allows you to add a background image
| | 05:35 | instead of just a solid background color.
| | 05:38 | For this particular theme, I wouldn't
recommend doing that because it looks
| | 05:41 | strange unless you are very careful, but
by all means, experiment and see what works.
| | 05:46 | You also get to set to navigation.
| | 05:48 | By default, WordPress will show the
default menu, which is the Home button plus
| | 05:53 | a list of all the pages in the site,
but if you want to, you can create a
| | 05:57 | custom menu inside the WordPress menu function
and then assign out to the front page instead.
| | 06:01 | If you do, and that menu has submenu
items, the submenu items will appear like
| | 06:07 | you see them here, in a nice dropdown.
| | 06:12 | Finally, you have the Static Front
Page option, which allows you to choose
| | 06:15 | whether you wanted to have your
latest post on the front page or a static
| | 06:19 | page on the front page.
| | 06:20 | Once you have customized your site
and you like what you see, click Save &
| | 06:24 | Publish to save and
publish those customizations.
| | 06:28 | If you don't like what you see and you
want to go back to the way it was before,
| | 06:31 | simply click Cancel and you
are back to the default setup.
| | 06:35 | And this customization option is
something you can keep experimenting with
| | 06:39 | throughout the course, and also after
you have finished with the course, because
| | 06:42 | nothing is ever final here.
You can always add something else.
| | 06:45 | I am going to cancel it out to go back
to the default and then I want to quickly
| | 06:50 | show you one more feature.
| | 06:51 | Remember how I showed you the footer,
where you see it's just a standard footer?
| | 06:55 | Well, if you go to the backend, to
Widgets, and add some footer Widgets--let's
| | 07:02 | say we add Recent Comments, Recent
Posts, Categories, and Archives, and we go
| | 07:12 | back to the front page, and scroll down
to the bottom--you will see that we now
| | 07:19 | have an extra section with four
different footer widgets, and those go on top
| | 07:23 | of the main footer.
| | 07:25 | So again, this is an option that you
can choose to turn on or off by simply
| | 07:29 | adding or subtracting widgets.
| | 07:33 | Anaximander is a fully built-out theme
with lots of custom options, so you can
| | 07:38 | personalize it to fit your liking.
| | 07:40 | Now that you know how it works, feel
free to experiment with these different
| | 07:43 | settings and see what you can come up with.
| | Collapse this transcript |
|
|
3. Design First, Then DevelopDeciding what screen sizes to design for| 00:00 | If you start looking at articles written about
responsive design and development, you will
| | 00:05 | notice that there are certain predefined
screen sizes and scenarios everyone is targeting
| | 00:09 | with their designs.
| | 00:11 | As you start designing your own responsive
themes, you have to ask yourself these questions:
| | 00:16 | What screen sizes am I targeting, and what
should the site look like on those screens?
| | 00:21 | The answers to both these questions are, all
screen sizes should be targeted and the site
| | 00:26 | should look good on all of them.
| | 00:28 | If you look at the standard screen sizes that
we have to deal with right now, you have the
| | 00:32 | classic PC monitor, which
is roughly a 4 x 3 shape.
| | 00:36 | It's usually around 1024 pixels tall and 1280
pixels wide. And then you have modern monitors
| | 00:42 | like the HD monitors, which are 1080 pixels
tall and 1920 pixels wide. That's really large.
| | 00:50 | And then you have typical laptop
monitors, which are quite short.
| | 00:54 | I've seen them around 768
pixels tall and 1360 pixels wide.
| | 00:59 | So this isn't a 16 x 9.
| | 01:01 | This is an even weirder kind of size, and
both laptop monitors and a lot of notebooks
| | 01:06 | have these very short
and wide type of screens.
| | 01:10 | And then of course you
have the mobile devices.
| | 01:12 | A typical smartphone is 480 pixels on the
long side and 320 pixels on the short side.
| | 01:18 | Now, you may want to ask specifically
about the iPhone with a Retina display.
| | 01:23 | Well, the Retina iPhone will pretend to be
320 wide and 480 tall and then just provide
| | 01:29 | you much better resolution, so you can still
think of it as the same thing as a regular phone.
| | 01:35 | When it comes to tablets, we have
a lot more versions to deal with.
| | 01:39 | We have the iPad 1 and iPad 2, which both were
1024x768, and now you also have the new iPad
| | 01:49 | with a Retina display which is 2048 x 1536,
and this operates the same way as the iPhone
| | 01:56 | with a Retina display does.
| | 01:58 | It pretends to have the same resolution as the original
iPad, but the resolution is actually much greater.
| | 02:03 | So you can think of it as the same as the old one,
but you have to have better graphics to support it.
| | 02:09 | But the iPad isn't the only
type of tablet out there.
| | 02:11 | You also have standard android tablets, and on average,
they are around 1280 x 800, which is almost 16 x 9.
| | 02:19 | But you now also have new HD Android tablets
coming out in the market and you will often
| | 02:24 | find that they are around 1920 x 1200.
And that's just the tip of the iceberg.
| | 02:30 | Consider this: let's say I am working on
something like my blog and then I realize that I need
| | 02:36 | to check some information
on the lynda.com web site.
| | 02:40 | I might do this and then put
the two next to one another.
| | 02:44 | This isn't a specific standard size, but
it's a fairly common scenario, and I see it
| | 02:47 | a lot where people will put a web site on one
side and then a Word document on the other
| | 02:52 | and move information back and forth. Or they
may scale it down like this so they have
| | 02:56 | one small web site on one side
and a large web site on the other.
| | 03:00 | And when Windows 8 comes out, Windows 8 has
a feature that automatically makes a layout
| | 03:04 | that looks very much like this, where you
have a very narrow bar on one side and then a
| | 03:09 | large bar on the other side.
| | 03:10 | What I am trying to get at here is that you
don't know the size of the viewport, but the
| | 03:16 | person accessing your web site has.
| | 03:19 | That means that you need to design your site
in such a way that no matter what size this
| | 03:23 | viewport or window has,
your site will fit properly within it.
| | 03:28 | That way, you create a properly responsive
site that responds to the scenario the user
| | 03:34 | is in, not the scenario that
you're guessing the user will be in.
| | 03:39 | When I design responsive web sites, I only
focus on two sizes: the smallest size, which
| | 03:44 | is the 320 pixel wide, and the largest size
which would be a gigantic 1080p desktop monitor.
| | 03:52 | Then I figure out how these two can be
reconfigured so that no matter what screen size or window
| | 03:58 | the site is displayed in, the content is
right up front and easy to digest, and the font
| | 04:03 | size and word count per line
is within standard parameters.
| | 04:07 | It's more work, but it pays off in space.
| | Collapse this transcript |
| Thinking responsively: Designing for many different screen sizes| 00:00 | Designing responsive themes is
surprisingly challenging the first time you try,
| | 00:05 | but it does get easier once you get
used to thinking in responsive terms.
| | 00:09 | I think this has a lot to do with
how we are used to design web sites.
| | 00:14 | In the past, the only constraint we
needed to think about was how wide the
| | 00:17 | smallest computer screen was going to be,
| | 00:20 | and generally, if you landed
somewhere around the 960 mark, you were fine.
| | 00:25 | So we were safe in designing sites that
were always fixed width to 960 pixels,
| | 00:30 | and they are also very easy to design.
| | 00:32 | But now that we have all these
different sizes of screens, we have to rejig how
| | 00:37 | we think about the design
approach to get to where we need to be.
| | 00:41 | What you're seeing here is the original
design concept for the Anaximander theme.
| | 00:47 | This is what I made in Photoshop.
And what I did was I started with the
| | 00:51 | smallest possible screen, the cell phone screen,
and then I decided to scale it up from there.
| | 00:56 | There are many reasons why you want to
go this route, starting with mobile first,
| | 01:00 | but the primary one is that by
starting with mobile first, you end up paring
| | 01:05 | down the site to only what really matters.
| | 01:07 | You'll notice that there are no sidebars here.
| | 01:09 | There are no ads. There's no extra
clutter. All you see is the main information.
| | 01:14 | This layout is the front page and as you
can see, it has an index where each of
| | 01:20 | the stories are contained inside a box.
| | 01:22 | So you see here is one box, you have a Read
More button, and then you have the Next Box.
| | 01:30 | And in each story you start off
with an image and then the text.
| | 01:34 | I did this because I know from
experience that on index pages people really
| | 01:38 | like to click on the images,
so I want the image to be upfront.
| | 01:42 | When you go to the single view of
the story, you see that the layout is
| | 01:47 | slightly different.
| | 01:48 | There's a larger header text and
the meta-content and the header text
| | 01:52 | appears before the featured image, so the
featured image is down here, along with the context.
| | 02:04 | Once I had a clear idea of what the
site was going to look like on a mobile
| | 02:07 | device, I could scale my
design up to fit larger screens.
| | 02:12 | So what I did was I took this design and I
simply changed the width of the total area.
| | 02:17 | What I ended up with, after some work, was this.
| | 02:21 | This, again, is the index page, and as
you can see, one of the things I did was
| | 02:25 | move the menu from under here, to up
here on the right, simply to fill out the
| | 02:30 | space, so it didn't look so empty.
| | 02:32 | I also included a masonry layout for the
index page so that each of the stories
| | 02:37 | is stacking next to one another.
| | 02:39 | That way I'd have room for more stories
on a single page than you would if you
| | 02:42 | stack them horizontally.
| | 02:44 | And I would also solve that problem of
the sidebar, because normally you would
| | 02:48 | fill in the space with a sidebar because
otherwise, your text lines will be too long.
| | 02:54 | But I didn't want to have a sidebar,
because then I'd have to hide it for
| | 02:58 | the mobile side, so I ended up replacing
the sidebar with the masonry layout instead.
| | 03:03 | When you go to the single view, you
see that I solved the same problem by
| | 03:08 | moving the title and meta information
to the left and then leaving the content
| | 03:12 | itself on the right.
| | 03:14 | This isn't the design I really came up with.
| | 03:16 | I've seen this a lot in books
that are printed on large pages.
| | 03:20 | To make sure that the single lines of
text aren't too long and have too many
| | 03:24 | words in them, the layout person and
the publisher has chosen to leave a very
| | 03:28 | large gutter on either the left or
the right side, and then they often put
| | 03:32 | something like the title for the
chapter in that gutter to take up the space.
| | 03:38 | This allows me to provide both the
title and all the meta information and the
| | 03:42 | content on the same line and takes the
way they need to scroll immediately after
| | 03:47 | landing on the page.
| | 03:49 | Once I have these two different layouts--
the small screen and the large screen--
| | 03:55 | it was very easy to figure out what I
was going to do with the middle cases,
| | 03:59 | the in-between screens.
| | 04:01 | Because now that I have a style guide
to go with which says the title either
| | 04:05 | goes on the left or on the top, I could
simply say that once the screen gets too
| | 04:09 | small to fit these side by side,
| | 04:12 | I'll simply shift all these information on
the top, and it will look just like the phone.
| | 04:16 | And this is what it ended up looking like.
| | 04:18 | This is the live version of
Anaximander running on my blog.
| | 04:22 | And as you can see, it looks
almost identical to my mockup.
| | 04:26 | That's not because the mockup is a
screen grab of what you're seeing here, but
| | 04:29 | because I was able to match the site
almost perfectly to the mockups, by using
| | 04:34 | the mockups as a blueprint.
| | 04:36 | This is the front page with the index,
and I can see here we have the masonry
| | 04:40 | index with the Read More buttons on the
bottom, and the stories line up next to
| | 04:44 | one another so we get lots of
stories on a very small page.
| | 04:48 | And if I go to a single post, you see
that here we have the title on the left and
| | 04:54 | the content on the right.
| | 04:56 | And as you can see, just when you
land on the page, you can already start
| | 04:59 | reading or ingesting what's
here without having to scroll much.
| | 05:03 | And if we scale this window down,
you'll see that once we reach that point where
| | 05:10 | the content is bigger than the window,
instead of flexibly altering the size, I
| | 05:16 | decided a new breakpoint, so
it jumps into a new breakpoint.
| | 05:20 | And then when we scale pass that
breakpoint, the content is realigned and we
| | 05:26 | now have the mobile layout,
although it's much bigger.
| | 05:29 | So we can continue scaling it
down until we hit that mobile point.
| | 05:39 | The result of this preparation where
I first design for mobile, then for the
| | 05:42 | full-size screen, and then figured out
how to handle all the content is that I
| | 05:47 | now have a site that's
consistently attractive and easy to ingest.
| | 05:51 | No matter what screen size people use
or what window size they use or what
| | 05:55 | device they use, they'll always get
straight to the content and get what
| | 05:59 | they're looking for.
| | 06:00 | Designing responsive themes has more to
do with how you think than how you design.
| | 06:05 | Once you get into the habit of
thinking content first and designing for the
| | 06:09 | smaller screens first and taking away
all the extra clutter you would normally
| | 06:13 | put into your site, you end up with a
much better layout that's easier to ingest
| | 06:18 | for the people who visit your site, and
that communicates the message better.
| | Collapse this transcript |
| Visualizing content realignment for better markup| 00:00 | Once you have a clear idea of how your content
will look on different screen sizes, you need
| | 00:05 | to make sure your markup allows
for this type of realignment.
| | 00:09 | The one thing to keep in mind is that while
the presentational aspects of your site may
| | 00:14 | change as your responsive theme responds to
different screen sizes and other scenarios,
| | 00:20 | the markup, that is, the code
behind the scenes, stays the same.
| | 00:27 | That means your markup needs to accommodate
all your different layouts simultaneously
| | 00:29 | without becoming
unnecessarily cluttered in the process.
| | 00:33 | To make sure I know how I need to divide up my
content, I like to draw lines in my designs
| | 00:39 | so I can see what different sections I need
to section off and how they relate to each
| | 00:43 | other, and then I can match that between my
full-size layout and my phone layout and see
| | 00:49 | how these elements move in
relation to each other.
| | 00:52 | Let's, for example, take a look at the header.
| | 00:55 | If I draw a box around the entire header,
you'll see that we actually have three elements here.
| | 01:01 | The reason why I know we have three elements
is because if I look at the full-size version
| | 01:06 | of the site versus the mobile-size version of the
site I see the margins here are quite different.
| | 01:12 | So, what I mean to do is make sure I'm able
to address those margin issues on both the
| | 01:17 | site title and the menu.
| | 01:19 | So, I am going to box the title and menu into a
separate box, and then I am going to separate
| | 01:24 | each one of them.
| | 01:25 | I'll separate this one and
I'll separate this one out.
| | 01:34 | Now that I've done this on my wide layout,
I can match these boxes on my narrow layout.
| | 01:40 | So, I'll go in here and find the same area,
and since I know that these boxes span around
| | 01:46 | both the title and the menu, I have to span
the box across the whole thing, and then I
| | 01:52 | have to separate out the content.
| | 01:54 | So I'll separate out all the content first,
and then I'll draw a box around the title
| | 02:00 | and another box around my menu.
| | 02:04 | So, based on this layout, I now know that I
need to have a container and then another
| | 02:11 | container within that container and then a
container around my header and a container
| | 02:16 | around my menu so that I can float them
differently, because now I can see that the title needs
| | 02:22 | to float to the left and the menu has to
either float to the right on the full layout
| | 02:29 | or float to the bottom on the phone layout.
| | 02:33 | Likewise, I can take a
look at my main content.
| | 02:36 | I know that all this content is contained within one
box, but then I have to separate these further.
| | 02:45 | The header content is handled separately from
the main content, meaning that I have to treat
| | 02:52 | this entire section as one unit and
then this entire section as another unit.
| | 02:57 | So, I'll do the same thing
in my mobile layout again.
| | 03:00 | I'll draw a box around all the content,
and then I can separate out the individual pieces.
| | 03:11 | So, I have one section here for the header
content and the meta element, and then I have
| | 03:18 | another section here for the
general body of the post.
| | 03:24 | Looking at the two of them side by side, I
now see that on the mobile side, everything
| | 03:29 | is fine; I just have one set
of content on top of the next.
| | 03:33 | But in the wide layout, I now need to float
the header content to the left and float the
| | 03:40 | rest of the content to the right.
| | 03:42 | But this isn't as easy as it looks, because if
I float it using the general float behavior,
| | 03:48 | I'll end up with this
content spanning in underneath.
| | 03:51 | So I have to use some sort of trick to shift
everything into place the way I want it to,
| | 03:55 | and we'll address that later in the course.
| | 03:58 | But that just proves the
point I'm trying to make.
| | 04:01 | Before you start writing your markup,
you need to know which pieces of content relate
| | 04:05 | to each other and how they relate
to the other pieces on the page.
| | 04:10 | That way you can put containers around
pieces that belong together and these pieces then
| | 04:15 | become easier to handle, because you can
place them next to one another or on top of one
| | 04:20 | another or hide one and show the other one
depending on what you want to do in your layout.
| | 04:25 | By drawing out your main sections in your
design and making it clear to yourself how
| | 04:30 | they relate to one another, you'll be able to
build markup that is ready to be responsive.
| | Collapse this transcript |
| Designing menus| 00:00 | Menus have always been a hot
button issue in web design and web
| | 00:03 | development circles, and the heat
has just increased for the introduction
| | 00:07 | of responsive design.
| | 00:09 | The challenge has always been how to
create menus that look good, are accessible,
| | 00:14 | and are functional all at the same time.
| | 00:16 | You can usually only get two of those three.
| | 00:19 | When it comes to responsive design,
there's the added complication that we now
| | 00:23 | have to create menus that work both for
regular, old-fashioned mouse-based point-
| | 00:27 | and-click behaviors and for new touch behaviors.
| | 00:32 | This means making menus that have
items that are easy to click on with clumsy
| | 00:35 | thumbs and also dealing with the issue
that in touch-based devices there is no
| | 00:40 | such thing as a hover state, so
regular dropdown menus don't work exactly as
| | 00:45 | they're supposed to.
| | 00:46 | In the Anaximander theme I've
tried to address both the concerns of
| | 00:50 | accessibility and also the
concerns of mobile devices.
| | 00:54 | What I've done is create menu styles that
change depending on the size of the screen.
| | 00:59 | So by default, on a large screen you
get the standard menu, which has fairly
| | 01:03 | small buttons that you have to
touch exactly to get them to activate.
| | 01:06 | But if you reduce the size of the
screen down to a size that probably is on a
| | 01:13 | mobile device, you get much larger
buttons that are much easier to click on with
| | 01:18 | your thumbs and have much larger active areas.
| | 01:20 | At the same time, they are more
distinct from the remainder of the design to
| | 01:24 | make it more clear that these are menu items.
| | 01:29 | In addition, as I alluded earlier, I made
this menu accessible, even with a keyboard.
| | 01:34 | So if you tab through this page,
you'll see that as you get to the menu, you can
| | 01:39 | actually go through each of the menu
items by navigating with your keyboard.
| | 01:44 | This is an important extra feature,
because it means that the markup is really
| | 01:48 | clear, both for search engines and for
people who access this web site using some
| | 01:53 | other device than a regular screen.
| | 01:55 | This was achieved by adding a
JavaScript library called Superfish.
| | 01:59 | The Superfish Library allows you to
create accessible menus that are easy to
| | 02:04 | navigate with multiple different types
of devices, including with a keyboard.
| | 02:08 | Superfish was created by Joel Birch,
and if you're ever going to create a theme
| | 02:12 | that has a dropdown menu in it, I
highly recommend including this JavaScript
| | 02:16 | library so that you get
properly accessible menus in your site.
| | 02:21 | That's said, I'm going to give
you my two cents on the matter.
| | 02:25 | In my opinion, dropdown menus are a bad
idea and should be avoided at all costs.
| | 02:30 | There are many reasons for this, but
the two main ones is A, dropdown menus are
| | 02:35 | quite difficult to deal with on cell
phones, primarily because the different
| | 02:40 | types of cell phone browsers
handle dropdown menus differently.
| | 02:44 | So in many cases, even if you build the
menu specifically to handle cell phones,
| | 02:49 | it still will not work properly, and
the result is you'll often see these
| | 02:53 | custom-built menus to only appear on
phones that add tons of extra code to your
| | 02:58 | site and don't really do anything except make a
different user experience for the phone users.
| | 03:04 | That's not ideal.
| | 03:06 | The other reason is, if you put up a
dropdown menu, you are effectively hiding
| | 03:11 | content on the page.
| | 03:12 | What happens is you're making an
assumption that everyone who visits your
| | 03:16 | sites automatically will go and hover
over all of your menu items just to see
| | 03:20 | if there's something underneath.
| | 03:21 | And yes, you could add an arrow next to
the menu if you wanted to to indicate
| | 03:25 | there is something underneath there,
| | 03:27 | but you're still making a quite
elaborate assumption about the person
| | 03:30 | visiting your site.
| | 03:32 | If you're putting links in a dropdown
menu, you're basically hiding it from
| | 03:35 | the person who visits.
| | 03:37 | And I know what you are going to ask:
| | 03:39 | So if you don't use a dropdown menu, what am
I going to do with all these extra menu items?
| | 03:44 | The answer is instead of making a
dropdown menu, like the one you see here, go
| | 03:48 | to that page that the first menu item links
to and put the list of other items in the page.
| | 03:55 | This is far more obvious, and it's also
far more effective, because in a scenario
| | 04:00 | where a person lands on this page
first and doesn't use the menu, that person
| | 04:05 | would have no idea that there were
other pages related to this page, if those
| | 04:10 | pages were only linked on the menu.
| | 04:13 | Why on earth would they go and click on
the menu when they're already on the page.
| | 04:18 | So if instead you put the links inside
the page or if you make a landing page
| | 04:22 | for all these other pages that you are
linking to, it becomes far easier for
| | 04:27 | someone who visits to actually get
to the content they are looking for.
| | 04:31 | Unfortunately, I don't have a
cure-all for the menu disease.
| | 04:35 | What I can say though, is that by
trying to reduce a number of menu items you
| | 04:39 | use and focusing on information
architecture to create navigation that is simple
| | 04:44 | and intuitive, you should be able to
use one of, or a combination of, the methods
| | 04:48 | I've shown you to create
responsive menus that work for all devices.
| | Collapse this transcript |
| Adding responsive images and videos| 00:00 | It's relatively easy to create
responsive text elements on a web page.
| | 00:04 | Text, after all, is designed to
reorganize and flow depending on the size of the
| | 00:09 | box that contains it.
| | 00:10 | Images and video are different matter entirely.
| | 00:14 | Images by their very nature have a
fixed height and width, and we have to deal
| | 00:19 | with that in a
nondestructive and functional manner.
| | 00:21 | And when it comes to videos, it's a
total gong show because there's so many
| | 00:25 | standards out there and more often
than not, we are pulling the videos from
| | 00:29 | external sources like YouTube and Vimeo,
and those sources put restrictions on us.
| | 00:34 | But fret not, my friend.
All can be solved with code.
| | 00:38 | We just have to decide what the
end result should look like first.
| | 00:41 | Let's take a look at the images on this page.
| | 00:45 | Before we dive into the code itself,
I just want to give you an idea of what
| | 00:48 | we're talking about when we are talking
about responsive images and responsive video.
| | 00:53 | If you look at this page,
we have fixed widths for these images.
| | 00:57 | If I change the size of my window,
you will see that the image stays the same
| | 01:02 | size no matter what I do.
| | 01:04 | However, if I open this post in a
single post and then again resize the window,
| | 01:13 | you will see that the image
will resize with the window.
| | 01:18 | In certain sizes, you'll even see
this image resize dynamically, like this.
| | 01:24 | This is a built-in function in your
browser where the browser automatically will
| | 01:28 | realign the image and crunch the
pixels to make everything work, but it's a
| | 01:33 | function that you have to
activate through the use of CSS.
| | 01:36 | If you don't do it,
| | 01:37 | you will end up with an image that
stays the same size and as you resize your
| | 01:41 | window, the image gets cropped
closer and closer and closer and closer.
| | 01:45 | I am sure you have seen this, both on
your cell phone and also on web sites time
| | 01:49 | and again, because it's fairly common.
| | 01:51 | But in this course, we are going
to look at how to work around it.
| | 01:55 | There is one more important
thing you need to remember.
| | 01:57 | When you upload an image to WordPress,
what WordPress does is it creates
| | 02:01 | multiple different versions of
that image in different sizes.
| | 02:06 | As a result, the image we are looking
at here is 620 x 375 pixels; however, if
| | 02:14 | we go and look at the image on the
front page, you see it's 298 x 180 pixels.
| | 02:23 | This is important, because when you're
loading the front page and you know that
| | 02:26 | the image is going to be a fixed
width and it's going to be small,
| | 02:29 | you don't want to load up a huge image and
then crunch it down to fit that small space.
| | 02:34 | You want to load the image that's
exactly the size you are for and in an ideal
| | 02:39 | world, there would be a standard for
this so that it would be easy to do and
| | 02:45 | you could serve properly responsive images.
| | 02:46 | Unfortunately, we're not at that point
yet, because the browser manufacturers
| | 02:50 | are still arguing over
what is the best approach.
| | 02:53 | So in the meantime, we have to
handle those images ourselves and decide
| | 02:57 | whether we want to take a large image and scale
it down or if we just want to use small images.
| | 03:02 | Like I said in the intro,
compared to videos, images are easy.
| | 03:06 | Videos are a whole different ball of
wax, and in this course, you will learn how
| | 03:11 | to make properly responsive videos,
because when a video comes from YouTube or
| | 03:16 | Vimeo or anywhere else, it's not
responsive, which means if you resize the
| | 03:21 | window, the video will stay the same size.
| | 03:23 | It's a very frustrating problem, and it's
not a problem that you can just fix with CSS.
| | 03:28 | To fix that, we have to link to a
JavaScript library designed specifically to
| | 03:33 | address responsive videos,
and we'll also do that in this course.
| | 03:37 | Both images and videos can be made
to be responsive, but it requires some
| | 03:41 | decision making and some
creative coding on our end.
| | 03:44 | Fortunately for you, all of this can
be solved with code, and all of it's
| | 03:49 | covered in this course.
| | Collapse this transcript |
|
|
4. Using Media QueriesWhat are media queries and how do they work?| 00:00 | At the heart of responsive design lies a
specific type of CSS, or Cascading Style
| | 00:06 | Sheets code, known as media queries.
| | 00:09 | Media queries are conditional
statements that tell the browser to use specific
| | 00:13 | sets of styles depending on the
size of the screen and other factors.
| | 00:18 | Let's take a look at how simple
media queries work and how to build them.
| | 00:22 | What I am going to do here is add a simple
media query to the style sheet of this theme.
| | 00:27 | So, I'll go to where I have my theme
stored inside my WordPress installation.
| | 00:32 | It's under the WordPress installation,
under wp-content/themes/Anaximander.
| | 00:39 | If I scroll down here, we
have the style.css file.
| | 00:42 | I am going to open this in my
text editor, which is Notepad++.
| | 00:46 | You can open it in any text editor;
| | 00:48 | it doesn't really make any difference.
| | 00:50 | What I am going to do here is add a
simple media query all the way at the bottom
| | 00:55 | of the document, and that media query
is going to change the font-family on the
| | 01:00 | entire site when the screen
is smaller than a certain size.
| | 01:03 | The first thing I need to do in a
media query is to start a media query.
| | 01:07 | It starts with an @ sign and then you say media.
| | 01:11 | This is a media query.
| | 01:12 | That's what it looks like.
| | 01:14 | Then you set out the
conditions that you want to apply.
| | 01:17 | So, I'll say only screen because
it should only apply to screens,
| | 01:21 | so not print for instance, or other things.
| | 01:24 | And then I say "and" because there
are multiple conditions here. And then I
| | 01:28 | will say (max-width: 900px).
| | 01:34 | So, what happens here is if the
screen is a screen and the max-width is 900
| | 01:40 | pixels, meaning if it's anything
smaller than or 900 pixels, then the following
| | 01:46 | style would kick in.
| | 01:48 | Then I create my style. And the style
will be body, because this is going to
| | 01:53 | be for the entire site, bracket, and then
I'll put-in the actual style code, font-family:
| | 02:01 | Georgia, Times, Times New Roman, serif.
| | 02:11 | So, this is a standard font-
family that will change the font to the
| | 02:15 | regular serif-type font.
| | 02:16 | I'll close my style and
then close by media query.
| | 02:22 | And before I save it, I just want to
show you what the site looks like right now.
| | 02:25 | So this is the site.
| | 02:27 | It has this specific
Google font that we are using.
| | 02:31 | And even if I resize it,
you see that the font stays the same.
| | 02:34 | Now let's see what happens when I save this.
| | 02:39 | So, I save this new style sheet with
the media query in it and reload my page,
| | 02:47 | and then resize it again.
| | 02:51 | And you see, just when we hit the
900 pixel point, the fonts change.
| | 02:57 | If we look at the code inspector,
you can actually see this change happen.
| | 03:01 | If I go to Computed Style here,
you'll see this line here, font-family:
| | 03:05 | Georgia, Times, Times New Roman.
| | 03:07 | If I pull it out, it pops to Open Sans,
Arial, Helvetica; if I pull it back in
| | 03:16 | again, it switches to Georgia.
| | 03:17 | So, you see the media query
kicks in and changes a value.
| | 03:21 | What it's actually doing is serving up a
new style that overrides the old style.
| | 03:26 | So, you can use these types of media queries
for pretty much anything in the style sheet.
| | 03:31 | That means you can change colors,
you can change font, you can change
| | 03:34 | layout, any element.
| | 03:36 | What you are doing is saying, in the
following conditions, when you are on a
| | 03:40 | screen and the screen is a
certain size, use these styles.
| | 03:44 | In any other situation, use other styles.
| | 03:46 | Now that you see the structure of a
simple media query, you will realize that to
| | 03:51 | create media queries on your own,
all you really need to know is CSS.
| | 03:55 | If you want to beef up on your CSS
before you continue, you can go check out one
| | 04:00 | of the other CSS courses right here in
the lynda.com online training library.
| | 04:05 | As you can see, by using media queries,
you can create different styles for your
| | 04:08 | pages depending on what size
window or device the visitor is using.
| | 04:13 | This allows you to design a site
layout for any screen size and any scenario.
| | Collapse this transcript |
| Exploring CSS3, progressive enhancement, and graceful degradation| 00:00 | There's one caveat I have to
point out before we begin for real.
| | 00:04 | Media queries and responsive design in
general rely on modern browsers to work properly.
| | 00:10 | By that I mean if the visitor is using
an old and outdated browser or an old
| | 00:14 | computer, they may not get
the responsive experience.
| | 00:18 | In fact, they may get a very
different experience altogether.
| | 00:21 | This is something you have to keep in mind.
| | 00:24 | The great thing is you can find out who
will not see this responsive behavior.
| | 00:28 | If you go to a site like caniuse.com, they
keep track of all the browsers that are
| | 00:35 | available and what kind of
capabilities those browsers have.
| | 00:38 | If you scroll down here under CSS,
you'll find Media Queries as one of the options.
| | 00:44 | And media queries is the most
important component of responsive design.
| | 00:47 | Looking at this table here, you'll see
that everything in green means that media
| | 00:52 | queries work and you'll also notice
that the only browsers right now who do not
| | 00:57 | support media queries are Internet
Explorer 7 and Internet Explorer 8, and of
| | 01:02 | course, Internet Explorer 6 and 5 and so on.
| | 01:05 | This is important because if you
know that your clients are mainly using
| | 01:10 | Internet Explorer 8 or 7 and you
cannot convince them to upgrade to a more
| | 01:15 | recent browser, like Internet Explorer 9
or 10, then you may want to reconsider
| | 01:20 | using media queries.
| | 01:22 | But it also means that for every other
device and every other browser, media
| | 01:26 | queries are safe to use.
| | 01:28 | My general attitude to this is rather
than dumb down the site just so that
| | 01:33 | people who use old versions of Internet
Explorer can access the site properly,
| | 01:39 | create a site that has a nice layout in
the full size and then let that be the
| | 01:43 | size that people see if they're
using these older browsers, and then the
| | 01:47 | responsiveness will kick in for everyone else.
| | 01:49 | And here's the great thing:
| | 01:51 | in almost every case the only
people who will actually benefit from the
| | 01:56 | responsive design are people who are
on phones and tablets, and those devices
| | 02:00 | already support this type of behavior.
| | 02:02 | The people who can't access these
responsive features are people who use
| | 02:06 | regular old computers, and chances
are they won't expect the site to be
| | 02:10 | responsive anyway, so it doesn't really matter.
| | 02:13 | The reason I'm showing you this site
and giving you this heads-up is that this
| | 02:18 | doesn't just apply to media queries;
| | 02:20 | it applies to all modern web code.
So if you want to build further on this
| | 02:25 | course, or if you encounter strange
behavior in the Anaximander theme in older
| | 02:29 | browsers, you should go to caniuse.com
and check that specific behavior and see
| | 02:35 | if it's supported in the
browser you're seeing the problem in.
| | 02:38 | Chances are it's an old browser,
and that's why it's not supported.
| | 02:41 | And my attitude is, if you're on an
old browser--and that I'm talking about a
| | 02:46 | browser that's like three
or four or five years old--
| | 02:48 | I'm not going to design it for you,
because then I'll hold the Internet back
| | 02:52 | just so that you can get
the proper experience. Harsh?
| | 02:56 | Yes, but that's the only way we'll
move forward with web standards.
| | 03:00 | When you build web sites, you're
always at the mercy of the browser used to
| | 03:04 | visit those web sites, and that's
a factor you have no control over.
| | 03:08 | The best you can do is providing
graceful degradation for older browsers or
| | 03:12 | progressive enhancements for newer ones.
| | 03:14 | The good thing is, for the most part, the
issues surrounding smaller screens only
| | 03:18 | show up in newer devices with modern
browsers, so it's not that big of an issue.
| | 03:23 | Even so, it's worth taking note of
this issue, which is why I bring it up.
| | Collapse this transcript |
| Understanding best practices for media queries| 00:00 | Media queries can be placed anywhere in a CSS
document, or even in a separate CSS document.
| | 00:06 | The question is where to place them.
| | 00:08 | I'll give you some general ideas of
different approaches and then you can fit
| | 00:12 | those approaches to your situation.
| | 00:14 | The most obvious place to put a
media query would be right next to the
| | 00:18 | actual style itself.
| | 00:20 | So for example, if we want to
change the background color of the
| | 00:23 | pre-header in a certain size of
window and nothing else, we might place the
| | 00:28 | media query directly after the style
that creates this background to begin with.
| | 00:33 | So, I could place it right here.
| | 00:35 | Here is a media query that is placed
directly after the pre-header, and then all
| | 00:40 | I have to do is create a new style.
So, I'll grab the name of the original style,
| | 00:45 | and paste it in, and I'll close my
bracket, and then I just have to put in the
| | 00:50 | extra code I need to change the
background. So I'll say background: red.
| | 00:53 | When I save that and load my
page and then resize the page,
| | 01:01 | you will see that when we get to that
point, I am changing the background color.
| | 01:06 | However, if I am going to make a lot of
media queries, it's going to be really
| | 01:10 | confusing if I need to edit them later
if I have to keep going up and down in my
| | 01:14 | document and try to find them.
| | 01:16 | So if you have a lot of media queries
that apply to one specific size, it's a
| | 01:21 | better idea to bundle them all together
and place them either at the top or the
| | 01:26 | bottom of your document.
| | 01:28 | So let's say I want to change both
the pre-header and some other elements.
| | 01:32 | I can then place one set of media
queries here and then just bundle the
| | 01:36 | elements underneath.
| | 01:38 | So let's say I want to change
the font-family of the body again.
| | 01:46 | I'll save it, reload my browser to
reload the media query, and now you see we are
| | 01:51 | changing both the super header
and the font at the same time.
| | 01:55 | This is a strategy I personally use.
| | 01:58 | I place all the styles from each query
in a separate section at the bottom of
| | 02:03 | the document. And you are going to ask, why do
you place it at the bottom of the document?
| | 02:07 | Well, the way I do this when I design
responsive sites is, I first try to figure
| | 02:11 | out, what is the most common way
people are going to access this site?
| | 02:15 | If the most common way is cell phones
and small devices, then I write my main
| | 02:20 | styles to fit that scenario.
| | 02:22 | If the most common way of accessing the
site is going to be on a large screen,
| | 02:26 | then I write my main styles to fit the
large screen. And then I stack the media
| | 02:31 | queries at the bottom, because this
is a cascading style sheet, meaning the
| | 02:35 | cascade goes from the top to the bottom.
| | 02:38 | So I'm assuming that the person visiting
the site will use the styles on top and
| | 02:43 | only in the cases where they use a
different type of device will they get to the
| | 02:47 | bottom and read that style instead.
| | 02:49 | You could choose to put the media
queries on top of the page, but if the page
| | 02:53 | loads slowly, you may experience weird
situations where the media queries will
| | 02:57 | make the content pop in and out as it
gets loaded, and that looks really weird.
| | 03:02 | So my general suggestion is to place the
media queries at the very bottom of the document.
| | 03:07 | There is always also the option of
placing media queries in a separate document,
| | 03:11 | and I have seen a lot of people do this.
| | 03:13 | They create an entirely separate
style sheet that is only called if certain
| | 03:17 | media query conditions apply.
| | 03:19 | I think this is a really bad idea,
and the reason for that is in those cases, you
| | 03:24 | will then first load a regular style
sheet and then the browser will load an
| | 03:28 | entirely different style sheet and
apply it on top of the regular one.
| | 03:31 | If you are going to do that kind of
approach, it's better to just put the styles
| | 03:35 | directly into the main style sheet,
and that way the browser doesn't have to
| | 03:38 | load several different style sheets.
| | 03:40 | As you can see, there are many
approaches to where to place media queries.
| | 03:44 | I like to organize them at the bottom of
the style sheet so that they are at the
| | 03:47 | end of the cascade and organize them
from the biggest screen to the smallest
| | 03:51 | screen, but that's just one option.
| | 03:53 | Play around and see what
works best for your situation.
| | Collapse this transcript |
| Creating a responsive frame| 00:00 | When you start building a responsive theme
the first thing you need to do is make sure
| | 00:04 | the frame--so the outer edges of this entire
site--is responsive so than when you resize
| | 00:11 | the browser the content inside starts
flowing instead of staying the same.
| | 00:15 | As you can see from this demo, you'll
see that currently, it does not flow.
| | 00:19 | So this is not responsive frame.
| | 00:22 | This also gives you a preview of the more
in-depth media query tweaking we'll do for
| | 00:26 | the rest of the course, and I'll also get a
chance to show you how I used the Web Developer
| | 00:31 | tools in Chrome to figure out
what styles I need to tweak.
| | 00:36 | To make the frame responsive, we need to work with
the style.css file that's found inside our theme.
| | 00:42 | So I'll go to my WordPress installation on
my computer, go to wp-content/themes, then
| | 00:49 | Anaximander, and then find style.css down here at
the bottom, and I'll open that in my code editor.
| | 00:56 | If we go back to the browser, I'll do right-
click on some of the content in my page and select
| | 01:01 | Inspect element to open the Code Inspector.
And from here I can highlight different sections
| | 01:07 | of the page using the selector on the left
to figure out what's going on in the styles.
| | 01:12 | And you can see right away that this id=
wrapper is the one that contains all this content.
| | 01:18 | And on the right here you can see width is set
1040 pixels, and this is what I need to change.
| | 01:24 | I can experiment with this by simply
editing it right inside the browser.
| | 01:28 | So I'll edit it to max-width
instead and see what happens.
| | 01:34 | Now that I've set it to max-width, you'll notice that as
I resize the frame, the content starts moving around.
| | 01:44 | That's because we're no longer
working with a fixed width;
| | 01:47 | we're working with a variable width
that just has a max-width on it.
| | 01:51 | So that's the first thing I need to do.
| | 01:53 | I'll go in to my style sheet,
find the wrapper style--
| | 01:58 | it's right here--and change width to max-width.
| | 02:01 | Save it. I'll reload my page, just to make
sure this worked, and when I resize it now,
| | 02:10 | you'll see that content reformats.
| | 02:13 | That's exactly what I want.
| | 02:14 | The next step is to create stepped stages.
| | 02:17 | When I showed you the fully built-out version of
Aximander, instead of having the whole site
| | 02:22 | be flexible, we have predefined stepped
regions that will pop in and become smaller.
| | 02:28 | So what we need to do now is define those regions,
and we're going to do that with media queries.
| | 02:33 | So I'll go back into a stylesheet, scroll
all the way to the bottom where I want to
| | 02:37 | put the media queries, and then
I'm going to put in some code.
| | 02:40 | Now if you want to follow along, you can use
the code_snippets found in exercise files.
| | 02:44 | So I'll open that on the side here, and you'll see
right here at the top we have Media Queries Aplenty.
| | 02:52 | So I'll take that and paste it in.
| | 02:54 | This is just a comment so
that I know what's going on.
| | 02:57 | Then I'm going to make my first media query.
| | 02:59 | So I'll say @media only screen, and then I'll set it
to and (min-width : 720px) and (max-width : 1039px).
| | 03:20 | I'll just close my query and then you're
going to ask, where do you get these values from?
| | 03:25 | 720 pixels and 1039, that
seem kind of random, right?
| | 03:29 | Well, if we look at the site and I select
anywhere inside here and use the Inspect element
| | 03:34 | function, you'll see that if we go up to wrapper,
you'll see that this wrapper is exactly 1040 pixels wide.
| | 03:45 | So the reason I've picked 1039 pixels is
because I want this is to trigger when the window
| | 03:51 | is smaller than 140.
| | 03:53 | The reason why I set 720 is because the next step
in the sequence will be exactly 720 pixels wide.
| | 04:01 | So what I'm saying is if the screen is between 720
pixels and 1039 pixels then do the following queries.
| | 04:08 | Now you'll remember we used the
wrapper to control the size.
| | 04:13 | So let's see what happens if I change
this max-width from 1040 to 720px.
| | 04:23 | Now, you see the width is much smaller, but
the layout still okay, because we still have
| | 04:27 | a sidebar on the right and the content
on the left, and they have equal size.
| | 04:33 | That means this is a size I want.
| | 04:35 | So what I need to do now is create a new wrapper style
inside my media query that has a width of 720 pixels.
| | 04:43 | So I'll go ahead and say wrapper width
720 pixels, and I'll close that style.
| | 04:54 | I'll save the style sheet, go
back to my browser and reload it,
| | 04:59 | and now at full width, we see that 1040 width,
and if I scale it down, exactly when we hit
| | 05:08 | the 1040 mark, the page pops in to 720.
| | Collapse this transcript |
| Customizing media queries with the Chrome Developer Tools| 00:00 | In the previous movie we made a small change
to the style sheet of the theme to make the
| | 00:04 | frame responsive, and we then added a
breakpoint so that as the window gets smaller than the
| | 00:10 | predefined original size, the layout
changes to a smaller size overall.
| | 00:17 | Now we need to add additional media queries
to deal with the content once the window gets
| | 00:21 | smaller than this breakpoint.
| | 00:24 | If I reduce the width of this window even
more, you'll see that the margins, these large
| | 00:30 | areas above and to the side of the content,
are starting to take up a proportionally large
| | 00:35 | amount of space in the layout. And if I go to
my original designs, you'll see that whereas
| | 00:41 | on screens we have a lot of space and the margins,
on the small screens we've very little margins.
| | 00:49 | And that's simply because I want to create
as much space as possible for the content.
| | 00:53 | So what we need to do now is figure out what
styles we need to address to change these
| | 00:58 | margins to become smaller so we
have more space for our content.
| | 01:03 | The first thing I'm going to do is create
another media query, because the first media
| | 01:06 | query we made addresses all the content
that's between 720 pixels and 1039 pixels wide.
| | 01:14 | So what I'm going to do is create another
media query for screens that addresses any
| | 01:19 | screen that is below 720 pixels wide.
| | 01:24 | So I'll say max-width : 719 pixels.
| | 01:33 | That way this query will kick
in once we're below 720 pixels.
| | 01:38 | I'll with an end bracket, and then we can
add our new styles inside this query.
| | 01:43 | Now we need to figure out what
styles we're going to change.
| | 01:46 | So I'll go back to my site and then use the
Google Webmaster tools to select the elements
| | 01:51 | I think we'll need to change.
| | 01:53 | I'm looking at the pre-header, and I'm seeing
that there's a lot of extra space here on the sides,
| | 01:58 | so there's must be a margin set somewhere.
| | 02:01 | So I'll select it, and I can see that there's
a margin there. And when I go down here to
| | 02:05 | my tool, I see that the I pre-header padding
is set to zero pixels for top and bottom and
| | 02:12 | 50 pixels for left and right.
| | 02:14 | So I need to change that.
| | 02:16 | I'll go into media query, say #pre-header,
and then I'll set it to #pre-header, and I'll
| | 02:26 | set its padding to 0 pixels for top and
bottom and 20 pixels for left and right.
| | 02:33 | Close my new style, save the stylesheet, reload the page,
and now you see we have a 20-pixel padding instead.
| | 02:41 | If I hover over the element, you see the green
areas on the left and on the right, but you
| | 02:46 | also see that this search
box still floating in.
| | 02:49 | So that means there's something
else going on with the search box.
| | 02:52 | So I'll select the search box this time and
then move up to the highest containing element
| | 02:58 | and here I find that it's
set to right 50 pixels.
| | 03:02 | So again, I'm going to grab the style, header-search, and
then I'll change the value--in this case right : 50px--
| | 03:14 | so I'll change that to right : 20px, close
my style, save the style sheet, reload the
| | 03:22 | page, and now the search box
also shifted in properly.
| | 03:26 | Before I finish with the pre-header, I want to see
what happens if I make the screen even smaller.
| | 03:32 | If I make the screen smaller, you'll see at
some point the search bar covers the social
| | 03:37 | links and the search word
actually disappears altogether.
| | 03:40 | So what I need to do now, before moving on, is
reduce the overall width of the search bar.
| | 03:45 | So I'll select the search bar again, and here
I see #header-search #searchform input# and
| | 03:51 | then a width of 275 pixels.
| | 03:54 | So if I go in here and experiment and change it to
175, I see that it now seems to work much better.
| | 04:01 | So what I need to do is copy out the style,
add it to by media query, save it, reload
| | 04:10 | the page again, and now you see that as we
scale up and down, the pre-header changes to
| | 04:17 | fit the new layout.
| | 04:21 | Using the same method, by looking out the
elements with the Inspector and then figuring out what
| | 04:26 | styles are causing these
elements to shift in and out,
| | 04:30 | you can now reformat the style code so that
the entire page will fit with the design.
| | 04:37 | Instead of forcing you to watch me as I identify
each individual style and then make changes
| | 04:41 | to them in my style sheet, I've created a
code snippets document you can use to copy out the necessary
| | 04:47 | styles for this media query.
| | 04:49 | You'll find it in the exercise file.
| | 04:52 | It's called code_snippets.
| | 04:55 | If you scroll down here to 04.05,
you'll find the entire media query.
| | 04:59 | It starts with @media and goes down to END max
-width : 719px. Simply copy it and replace
| | 05:07 | this media query we just created, save it,
and when you now reload the page again, you'll
| | 05:16 | see that now all the content aligns with a 20-pixel
margin instead of the previous 50 pixel margin.
| | 05:21 | And as we scale the window up, the 50-pixel margin
appears once the screen is big enough to handle it.
| | Collapse this transcript |
| Taking device width into account| 00:00 | At this point, I can pretty much
guess what's going to happen.
| | 00:03 | You are going to take your new media queries
in your new theme, upload them to your server,
| | 00:09 | open the site on your phone,
and notice that nothing happens.
| | 00:13 | Well, that's because we haven't quite gotten
to the point where our media queries interact
| | 00:18 | with the phone yet.
| | 00:19 | And that is because cell phones lie.
That's the reality.
| | 00:23 | They lie to the browser and to
the web sites about what they are.
| | 00:28 | A cell phone browser pretends to be a
desktop browser, and unless you explicitly ask the
| | 00:34 | cell phone browser, hey!
How big is your screen?
| | 00:38 | the web site will have no idea how big that screen
is and it will assume that this is a desktop.
| | 00:43 | As a result, you will see
the full-width content.
| | 00:46 | So what we need to do is make our web site ask
the device how big the screen is. Fortunately.
| | 00:53 | It's very easy to do that.
| | 00:55 | All we need to do is go into our theme, open
the header.php file, and add one line of code.
| | 01:02 | So I'll go and add it
right here on top of title.
| | 01:06 | I'll put in a comment to see what it is for
later, and then I'll put in a new meta tag. So I'll say
| | 01:12 | <meta name="viewport".
| | 01:18 | So this will now track the viewport, which is
basically the screen, and then the content
| | 01:24 | of this meta tag will be the device
width, along with some other information.
| | 01:29 | So we'll say content="width=device-width".
| | 01:37 | I'll close the meta tag, and what happens
now is this page will ask the device hey!
| | 01:43 | What's your width?
| | 01:44 | And then we will set the default width to
that width, which means we now know how big
| | 01:48 | the screen is, so that if the screen is smaller than
720 pixels, the correct media query will kick in.
| | 01:55 | But there's one more thing we have to do.
| | 01:57 | The problem with these cell phone browsers
is, like I said, that they lie, and that means
| | 02:03 | that we have to be extra
careful about how they behave.
| | 02:06 | You know how when you go to a web site,
the cell phone browser has a tendency to try to
| | 02:11 | zoom in on things?
| | 02:12 | Well, you need to avoid that when you are
using media queries because you've already
| | 02:16 | accounted for the zooming
in your media queries.
| | 02:19 | So in addition to finding out the width of
the device, we also want to tell it explicitly,
| | 02:25 | do not scale my content.
I know how to do it myself.
| | 02:29 | So next to width=device-width, we are going
to say comma, and then we are going to say
| | 02:34 | initial-scale=1.0.
| | 02:39 | That just means the initial scale of
zooming is going to be a one-to-one ratio.
| | 02:44 | So instead of seeing the site zoom all the
way out, we are just going to see the site
| | 02:49 | as it is supposed to be. And then we are
also going to say maximum-scale=1.0.
| | 02:57 | That way the phone will never try to scale
anything up and finally, we are going to say
| | 03:02 | user-scalable=no. Pretty self-explanatory.
| | 03:07 | We are not letting the user use
pinch and zoom to scale in and out.
| | 03:12 | Now the meta tag is complete, and the cell
phone can no longer lie to our web site about
| | 03:17 | what it is, which means all
our media queries will work.
| | 03:21 | If you don't want to type this out, you can
go to the code_snippets and you'll find that
| | 03:26 | exact code right here.
| | 03:27 | So you can just copy it from the code_
snippets file and paste it in if you want to.
| | 03:32 | If you upload this new header.php file to
your web server and then access your web site
| | 03:38 | using your cell phone or tablet, you will
see that now the media queries kick in the
| | 03:43 | way they're supposed to and the
site looks the way you want it to.
| | Collapse this transcript |
|
|
5. Creating a Responsive HeaderResizing the site title and the description| 00:00 | When creating a responsive theme, or any
theme for that matter, I like to start from the
| | 00:05 | top; that means starting
with the header itself.
| | 00:08 | The challenge with a header is that it usually
has to contain multiple different components:
| | 00:13 | the site title and tagline, usually a background image
of some sort, and also the menu, like you see here.
| | 00:21 | Your job is to make sure each element stacks
up nicely, both to match your design and also
| | 00:26 | to be the easy to understand and functional.
| | 00:28 | Out of the box, Anaximander will have the
site title and tagline, and then the menu should
| | 00:33 | appear directly under it.
| | 00:35 | In some cases, in some browsers, the menu
will appear shifted to the right here, and
| | 00:40 | that's fine, because we're going to be
working on realigning the header right now to make
| | 00:45 | it match the design.
| | 00:47 | If we look at the design, you see that the
title and tagline is shifted to the left and
| | 00:52 | the menu is shifted all the way to the
right, and that's what we want to achieve.
| | 00:57 | If we were working with a static
site, this would be very simple.
| | 01:00 | We'd simply float the title and tagline to the
left, and then we'd float the menu to the right.
| | 01:06 | However, because this is a responsive site,
we have to be a little careful about what
| | 01:11 | we were doing here.
| | 01:13 | First of all, we have to use percentages to
decide the area that the title and tagline
| | 01:18 | is going to fit and the area that's going
to be occupied by the menu so that as the
| | 01:23 | window decreases in width, the proportion
of area occupied by the title and tagline
| | 01:30 | in the menu remains the same even
though the pixel widths change.
| | 01:34 | But there's an added challenge here.
| | 01:36 | Like I said, the logical thing to do here
would be to simply float one component to
| | 01:41 | the left and the other to the right.
| | 01:43 | What you want to end up with is an area
occupied by the title and tagline and another area
| | 01:48 | occupied by the menu.
| | 01:50 | However, if you float this content, what will
happen is the browser will assign vertical
| | 01:55 | space for each of these items, and it will
say, as long as the item on the right has
| | 02:01 | smaller or the same vertical space as the item
on the left, they should float left and right.
| | 02:08 | However, if the item on the right occupies
more vertical space than the item on the left,
| | 02:15 | then the item on the right is allowed to float in
under the item on the left, and you end up with this.
| | 02:22 | As a result, while a short menu will look
fine because it floats properly, a long menu
| | 02:29 | will float in underneath the header,
and that's not what we want to do.
| | 02:34 | We want to ensure that even in the case where
the menu is very long, it will stay on its
| | 02:39 | side of the layout.
| | 02:42 | To do that, we have to be creative.
| | 02:44 | What we need to do is float the entire
container that contains both, the title, the tagline
| | 02:50 | and the menu to this right space.
| | 02:55 | Then we're going to use a negative margin
to float the title and tagline outside of
| | 03:00 | that space and place it to the left.
| | 03:04 | By doing that, we're ensuring that no matter
what happens, the menu will continue to contain
| | 03:09 | the same horizontal space and title and
tagline will always stay on the left.
| | 03:16 | To do this, we need to find out what
percentage of area the title and tagline is covering
| | 03:21 | and what percentage of
area the menu is covering.
| | 03:23 | There is a math formula for this.
| | 03:26 | What you do is you find the width that
you want, so that's the short width.
| | 03:31 | You multiply that by 100 and then you divide the
result by the total width of the entire area.
| | 03:37 | This will give you the percentage of the
shorter width in relation to the full width.
| | 03:42 | If we look at our design and look at the guides,
we'll see that the total width for the entire
| | 03:46 | area is 940 pixels, and the area we want to be
occupied by the title and tagline is 320 pixels.
| | 03:56 | So the first thing we'll do is take the
container that contains all the elements and shift it
| | 04:01 | to the right by giving
it a margin to the left.
| | 04:05 | So first, we'll find out
what container that is.
| | 04:07 | I'll use the Web Developer
tools to identify the container.
| | 04:11 | If I just scroll up here, you'll see. Here it
is, header-container, and then I have to
| | 04:15 | find the percentage.
| | 04:16 | I will go to my style sheet and find
the header-container. Here it is.
| | 04:25 | Then I want to set margin-left
and now I need the percentage.
| | 04:31 | So I'm going to open my calculator and then
I want 320 pixels, which is the short width.
| | 04:36 | I'm going to multiply it by 100, and then I'm going to
divide that by the total width, which is 940 pixels.
| | 04:43 | We get 34.04, et cetera, et cetera.
| | 04:46 | So I'm going to copy that entire value,
paste it in, percentage, and close the style.
| | 04:53 | When I save that and reload my page, you will see that
all the content is now shifted over to the right.
| | 05:01 | The next thing I need to do is move this
title and tagline back over to the left.
| | 05:06 | However, now we're working
with a smaller total width.
| | 05:10 | So what I need to do now is find out the
percentage width that is equivalent to 320 pixels out
| | 05:16 | of this new area.
| | 05:19 | This new area, if you look at it, is 620 pixels.
| | 05:24 | So I'll go and do the math
again, this time 320*100/620.
| | 05:31 | This gives me 51.61, et cetera.
| | 05:34 | I'll copy that, and then I need to
apply that to just this header section.
| | 05:39 | So I'll go in, use my Web Developer
tools to find out what the section is.
| | 05:44 | It's called id="header-title".
| | 05:45 | Go back into my Style Sheet, find #header-
title, and say margin-left again. And this time I
| | 05:53 | want to do a negative margin because
I want to shift it outside the box,
| | 05:56 | so I'll say minus and
paste in the percentage.
| | 06:00 | I'll save it, reload the page, and you see
now my title is on the left and my menu is
| | 06:07 | on the right; however, the
title is knocking the menu down.
| | 06:12 | To avoid this, I'm going to
float the title to the left.
| | 06:16 | So I'll go float: left.
| | 06:18 | Save it, reload it, and now the title and
tagline are on the left and aligning with the menu.
| | 06:27 | But there is one more thing I need to do.
| | 06:29 | When we resize this window, you'll see that
when we get down to a certain point, it looks
| | 06:34 | like that effect I was talking about where
the content is floating underneath happens,
| | 06:39 | even though it's not supposed to.
| | 06:41 | But that's not the case. What we're seeing
here is the title doesn't have a percentage
| | 06:47 | width yet, so therefore it's pushing
the content in the menu to the right.
| | 06:51 | The final thing we need to do is to give
this menu area the correct percentage width.
| | 06:57 | That percentage width is the percentage width
of this area in comparison to the total area.
| | 07:06 | In other words, the menu takes up 51.61, et
cetera, percentage and we want the other half
| | 07:14 | of that equation.
| | 07:15 | So I'll simply take that number,
| | 07:17 | I'll go to my calculator and say 100-, and I'll
paste in that number, and I get 48.387, et cetera.
| | 07:25 | I'll copy out that value and set the
header-title to have a width of that percentage.
| | 07:33 | I'll save that, reload the page one last time,
and now when we resize the window again, you'll
| | 07:41 | see that the title and tagline align to keep
within its space, while the menu aligns to
| | 07:49 | keep within its space.
| | 07:52 | As you can see, working with responsive layouts
is challenging because you now have to work
| | 07:57 | with percentages, and you also have to have
an intricate understanding of how CSS works
| | 08:02 | and the different quirks CSS has to offer.
| | 08:05 | The good thing is, once you know the tricks,
like this using a negative margin to assign
| | 08:10 | space for certain content, you're able to
create layouts the way you want them to, without
| | 08:15 | too much hassle.
| | 08:17 | We'll be using this same technique further
into the course to handle the general content.
| | Collapse this transcript |
| Adding media queries to the header| 00:00 | We have now created a header that's responsive
in that it resizes and realigns as we reduce
| | 00:06 | the width of our window.
| | 00:08 | However, if we make the window small
enough, it starts looking really strange.
| | 00:13 | That's because we've yet to add media queries
to make sure that as we hit certain points
| | 00:18 | in our layout, the menu will also respond to that
point and change so that the layout is more useful.
| | 00:25 | What we want to do here is create a situation
where when the width of the window is small
| | 00:30 | enough, the menu ceases to stay on the right,
and instead moves in underneath the title.
| | 00:36 | That will make it more accessible, and we'll
avoid this squishing effect that you see here.
| | 00:44 | To do that, we need to add media queries.
| | 00:46 | So let's figure out what we want to do first.
| | 00:49 | In the previous movie, we used percentages
to move the entire header container to the
| | 00:54 | right and then shift the
title and tagline to the left.
| | 00:58 | So logic dictates that if we reset these values,
we will end up with a situation where the
| | 01:03 | title and tag line is on the
top and the menu's on the bottom.
| | 01:08 | If you look at our style sheet, you'll see
that here we have the header-container and
| | 01:12 | the header-title styled
inside the main style sheet.
| | 01:15 | So if we simply copy these elements out and
go all the way down to our media queries,
| | 01:21 | we can add these styles in to
the media query we want to.
| | 01:25 | In this case we want the
breakpoint to happen at 719 pixels.
| | 01:28 | If you remember, that's the second breakpoint
where the layout goes from being fixed, like
| | 01:34 | this, to fluid, like this.
| | 01:39 | To reset the menu layout, I'm going to go in
here to my media query and find a logical
| | 01:44 | place to place it, so I'll place these
styles directly after header_margin.
| | 01:49 | I'll paste in the original styles first and
just do some cleanup so that it looks nice.
| | 01:58 | And then what I want to do is reset
these values to default, or just 0.
| | 02:02 | So I'll reset margin-left to 0 and this margin to 0 and
I'll say float: none, and reset the width to 100%.
| | 02:16 | I'll save this and when I reload my page now,
you'll see that the menu is underneath the
| | 02:24 | title and tag line, and if I scale the window
up, the menu appears on the right-hand side.
| | 02:30 | So a simple media query was all that was needed to
reset the layout back to what it was originally,
| | 02:37 | which is what we wanted.
| | Collapse this transcript |
|
|
6. Creating a Responsive MenuMaking the menu responsive| 00:00 | Now the menu is responsive and it lays out
nicely for all screen sizes using media queries,
| | 00:06 | but it's still not quite
the same as the design.
| | 00:10 | In particular, the menu isn't aligning
quite the way I originally intended.
| | 00:15 | If you look at the menu here, you see that
although it stays on the right-hand side of
| | 00:19 | the screen, it's still shifted to the left
of the container, because container ends right
| | 00:24 | here and that's where the menu is shifted.
| | 00:27 | In the design, I wanted the menu
to shift all the way to the right.
| | 00:31 | To figure out how to fix this, I'm going to
use the Developer tools in Chrome to identify
| | 00:36 | the styles that are affecting the menu.
| | 00:38 | And you'll see here there are quite a few
containers that handle the menu. The top container
| | 00:44 | is this one, id- access, and if I select it, you'll see
that it says display: block and margin-top 10px.
| | 00:51 | So what happens if I
float the menu to the right?
| | 00:54 | I'll simply add that here, float: right.
| | 00:57 | And you see that now the menu floats to the
right, almost, because there's still space
| | 01:03 | here, which means there's
something else that's creating a space.
| | 01:07 | And just looking at how the menu behaves,
I can tell that there's probably a margin
| | 01:10 | here somewhere. So, I'll right-click on one
of the elements, and you see the margin is
| | 01:15 | not in the anchor element, so it must
be in the list element. And here it is.
| | 01:20 | You see it says, float: left, which is what
floats menu so that it become a horizontal
| | 01:25 | menu rather than a vertical menu.
| | 01:27 | You can see if I turn it off,
it becomes a vertical menu.
| | 01:31 | And then it says margin: top 0,
right 2em, bottom 0, left 0.
| | 01:39 | So what I want to do is take that 2em and
place it out at the end so that it becomes
| | 01:48 | top 0, right 0, bottom 0, left 2ems.
| | 01:53 | And now you see the menu stacks the way it's
supposed to, which means I can implement those
| | 01:58 | two styles in my style sheet.
| | 02:00 | So I go to my style sheet, I'll find access,
then here I will first float access to the
| | 02:10 | right. And then I have to find access li and
change it so that it says 0, 0, 0, 2em. Save
| | 02:21 | that, reload the page, and now we have the
menu layout we want--almost, because, if I
| | 02:29 | resize this window now, you'll see that when
the media query kicks in, the menu is still
| | 02:38 | flowing to the right, and that looks weird.
| | 02:40 | It should be floating to
the left at this point.
| | 02:43 | So all we need to do is reset the
menu styling in the media query.
| | 02:47 | Now, remember what I changed here. I set access to
float right, and in access li, I changed the margin.
| | 02:55 | So logically what I need to do is go down to
my media queries and here, I'll set access
| | 03:04 | to float: none, and then I'll
set access li margin: 0 2em 0 0.
| | 03:18 | So I'm basically setting
everything back to the way it was before.
| | 03:22 | Now I save this and reload the page.
| | 03:26 | You'll see the menu aligns to the left when
the media query has kicked in and when we
| | 03:32 | scroll out, it aligns again to the right.
| | Collapse this transcript |
| Creating a different menu design for small screens| 00:00 | When dealing with responsive menus, especially
for smaller devices like phones and tablets,
| | 00:06 | you may need to think of providing alternate styles
rather than just resizing or reorganizing of layouts.
| | 00:12 | Even though a menu might be easy to click on
with a mouse, it might be harder to click
| | 00:16 | on when you use your thumb or your finger
on a touchscreen device because the menus
| | 00:21 | generally are really small when
you have them on a regular screen.
| | 00:25 | If you look at the original design, you will
see that I intended the menus on smaller screens
| | 00:29 | to be these large buttons that are below the
main header so that they're separated clearly
| | 00:36 | menu items and they are easier to click on.
| | 00:39 | So what I want to do is create new styles in
the media queries that completely restyle
| | 00:44 | the menu in the page.
| | 00:46 | I will show you how I do this by
using the Chrome Developer Tools.
| | 00:51 | By using the Chrome Developer Tools, I'm able
to experiment with the live code on the page
| | 00:56 | and then I can change only those elements
that need to be changed and nothing else, to
| | 01:00 | make my style code as short as possible.
| | 01:03 | The first thing I am going to do is reduce
the width of the screen until I hit that point
| | 01:07 | where I want things to change.
| | 01:10 | Then I'll use the Developer Tools to
identify the area I want to change.
| | 01:14 | The first thing I want to do here is change
the background color to white, because I know
| | 01:19 | that I want all this area to be white.
| | 01:22 | So I will go and identify the entire area,
which is the ID access down here, and then
| | 01:27 | I see the media query has already kicked in
here, so that's where I want to add my changes.
| | 01:32 | The first thing I want to do
is add a new background color,
| | 01:35 | so I will say background:fff, which is
white. And now I see the white kicks in;
| | 01:40 | however, the menu is
floating in the space sort of.
| | 01:45 | I want the menu to span all the way
across and all the way to the bottom.
| | 01:49 | The reason why it's floating in space is because
the menu is further contained by this divider
| | 01:57 | that's called header_margin, and header_margin
adds 20 pixel padding around the whole header.
| | 02:05 | So what I need to do is
override what header margin is doing.
| | 02:09 | So I will go back to access and
I'll add some extra style code.
| | 02:12 | I will say margin and then I first
want to add some extra space at the top,
| | 02:18 | so I will say 20 pixels. And then I'll set the
right bottom and left margins to -20 pixels
| | 02:26 | to override the styling from header margin.
| | 02:28 | So I will say -20 pixels for the right, -20
pixels for the bottom, and -20 pixels for left.
| | 02:36 | And now you see the menu appears to hover
underneath the main header, even though it
| | 02:41 | technically is still part of the main header.
And of course, you can't see the buttons right
| | 02:45 | now, because they are white, and
we will get to that in a bit,
| | 02:48 | but first I want to save what I
just did in my actual style sheets.
| | 02:52 | I will highlight it here.
| | 02:54 | I will go to my style sheet and find that
style. It's all the way here at the bottom, inside
| | 03:00 | the media query for 719.
And here we have access.
| | 03:05 | So I will simply replace access with the new
code I created, clean it up a bit, and then I
| | 03:12 | will also make a comment for myself
so I know what's going on here.
| | 03:17 | Save it, reload the page, and
now the menu is at the bottom.
| | 03:23 | The next thing I need to do is
make these menu items visible again,
| | 03:27 | so I will select one of the menu items and
then look at the styling that affects it, and
| | 03:31 | I see here, under access a,
that the color is set to white.
| | 03:36 | So if I just go and change that to #333, for
example, I get this nice gray color instead,
| | 03:42 | so that's probably what I need to do.
| | 03:45 | In addition, if we look at the design,
you will see that these menu items have padding
| | 03:50 | on the top and on the sides.
| | 03:53 | So I will go and add that padding.
| | 03:54 | So I will change the padding here from what
it is, to 10 pixels on the top and bottom and
| | 04:01 | 25 pixels on the left and right.
| | 04:04 | So now you see my menu items are much larger.
| | 04:07 | So before I do anything else,
I am just going to save this.
| | 04:09 | I am going to create a new style called
access a, with a new padding and a new color.
| | 04:13 | So I go down here again, add access a, padding: 10
pixel, 25 pixel, color: #333333, and close the style.
| | 04:32 | I will save that, reload the page to make
sure it works, and now we have those elements
| | 04:38 | in the right color.
| | 04:39 | However, you see that the hover state is white,
and we don't want that. So, I am going to go
| | 04:44 | back and add that hover state as well.
| | 04:47 | So I will go access li:hover > a, and access
li:hover > focus, then set the color to #000, which is black.
| | 05:09 | Now you may wonder why I am using this code,
access li:hover, to a, instead of saying access li: hover.
| | 05:19 | That's because in this theme you have a dropdown
menu, and you want the style to also take effect
| | 05:24 | if the dropdown menu is activated.
| | 05:26 | So I will save this, reload the page again,
and now you see, if I hover over the menu,
| | 05:35 | you get a subtle difference in
the color of each of the items.
| | 05:38 | Going back to the design reference again, we see
that we also have a border around each item.
| | 05:44 | So I will go back, and I will find the list
item, and I see that in addition to adding
| | 05:47 | the border, I also have to
get rid of that extra margin.
| | 05:51 | So first I will set the margin to 0.
| | 05:55 | That way each of the menu
items stacks closer together.
| | 05:58 | And then I will set the border-right to 1px solid,
and the color #e5e5e5, and I'll copy that style out and
| | 06:12 | set border-bottom to the same thing.
| | 06:18 | Now you see we have a nice clean menu that
appears where it is supposed to and that also
| | 06:23 | reorganizes as we scale
the screen up and down.
| | 06:26 | So I will copy out the style, find access
li:, and replace it, clean up a bit, save it,
| | 06:39 | reload the page, and here we have a fully
functional responsive menu that only pops
| | 06:47 | in when the screen gets small enough.
| | 06:50 | Now, there are a couple of additional things
you need to do to make this menu responsive.
| | 06:54 | In particular, you also need to
address the dropdown elements.
| | 06:57 | So what I've done is, in the exercise files
for this course, in the code_snippets, you
| | 07:02 | will find the complete code snippet for this movie
so that you can add all the additional styles.
| | 07:08 | It's not that many, but there is a couple.
| | 07:10 | So if you go down to movie 6.2 and you
simply add in all the style code here, jump menu
| | 07:19 | down, all the way down to access ul ul, and
replace what you just did, save it, and reload
| | 07:29 | the page, you will get the same result and now
the menu will work perfectly in all scenarios.
| | 07:35 | By providing a separate style set for smaller
screens, you can create a whole new look and
| | 07:40 | functionality for the menu without having to
touch the underlying markup in the process.
| | 07:44 | Pretty nifty, right?
| | Collapse this transcript |
|
|
7. Creating a Responsive Main AreaMaking a responsive single-post layout| 00:00 | Now that we have a responsive header,
it's time to move on to creating responsive layouts
| | 00:05 | for our content, and we'll
start with the single post.
| | 00:08 | If I go to a single post, you see that we have
the layout that's based on the small screens.
| | 00:15 | We have the title and meta information on
top and then we have the content underneath.
| | 00:19 | But on this large screen, that doesn't look
very good, because we have way too much space
| | 00:23 | for these lines of text.
| | 00:25 | And when you get text that is above a certain number
of words per line, it becomes very hard to read.
| | 00:31 | That's the reason why, in the original design,
I created this layout with the header and
| | 00:36 | meta content on the left and
the main content on the right.
| | 00:39 | So, what we are going to do now is use that
same technique we used to create that responsive
| | 00:44 | header to change the layout of this main content
area to make it flow the way it's supposed to.
| | 00:51 | So we'll use that same math formula I showed
earlier to find the correct percentages so
| | 00:56 | that we can lay this out.
| | 00:58 | First, we need to identify the
elements we are going to move.
| | 01:02 | You'll remember what we want to do here is
first take all the content on the page and
| | 01:07 | shift it to the right so that it only
occupies this section of the page.
| | 01:13 | So, the first thing we need
to do is find that container.
| | 01:16 | I'll go to my browser and use the Developer
Tools to find what container contains everything.
| | 01:23 | And you see here we have three main elements
for the single post: we have a header, we
| | 01:29 | have the entry-content, and we have a footer.
| | 01:32 | And all of those three elements are contained
within this article with a class post-container.
| | 01:37 | So this is the element we want
to shift to the right first.
| | 01:40 | I'll go to my style sheet and find the main
content section, and here, I'll add in a new
| | 01:45 | style for a post container.
| | 01:52 | This style is going to have a margin left,
and now I just need to find out what that value is.
| | 01:58 | So, I'll go back to my design.
| | 02:00 | I'll find the total width, which is 940 pixels,
and then I'll find the width of the margin
| | 02:07 | we are going to add, and
that margin is 320 pixels.
| | 02:11 | So, in my calculator, I go
320 times 100 divided by 940.
| | 02:18 | That gives me 34.04, et cetera. I'll copy
that and paste it in as a percentage.
| | 02:25 | Now, you'll notice I am not rounding this
out because computers are incredibly good
| | 02:30 | at math, so there's no point in rounding it out.
| | 02:32 | Ideally, you'd even have a longer percentage
than this, but that's what the calculator
| | 02:36 | gave me, so that's what I am using.
| | 02:38 | I'll save this, and when I reload my browser,
you'll see the content shift to the right
| | 02:44 | like we want it to.
| | 02:45 | Now, I want to shift the
header-content back to the left.
| | 02:49 | So first, I'll identify the header-content
container, and you see here, it's called header
| | 02:54 | class entry-header.
| | 02:56 | So I'll create that style.
| | 02:59 | And I know that in this case I
want to have a margin-left
| | 03:04 | that is negative, and I
just have to find that value.
| | 03:08 | Going back to the design, I know that I want to
shift it the equivalent of 320 pixels to the left,
| | 03:15 | but now that percentage has to be relative to the
total width of just this area, which is 620 pixels.
| | 03:22 | So, I'll go back to my calculator
and go 320 times 100 divided by 620.
| | 03:29 | This gives me 51.61, et cetera.
| | 03:32 | I'll copy that, I'll paste it in, make it a
percentage, and then I also want the entry
| | 03:38 | header to float left,
| | 03:39 | so I'll say float: left. And when I save this and reload
my browser, the header is now floating to the left.
| | 03:49 | However, you also notice that it's shifting
everything down, and not only that, but it's
| | 03:53 | spanning into an area
it's not supposed to be in.
| | 03:56 | That's because we haven't yet defined a width for
the header, so it's taking up 100% of the space.
| | 04:02 | The final thing we need to do is go back to
our design and look at what the total width
| | 04:06 | of this header is supposed to be.
| | 04:08 | You'll see here that we only have this much
space for the header, because I left a 20-
| | 04:13 | pixel gutter between the header and the rest of the
content, so that it doesn't clash into each other.
| | 04:18 | So, what we want to do is find the percentage
equivalent of this width, which is 300 pixels,
| | 04:25 | in relation to the total width, which
we've defined here as 620 pixels.
| | 04:31 | Back to the calculator. We go 300
pixels times 100 divided by 620.
| | 04:37 | We get 48.38, et cetera.
| | 04:40 | I'll copy that and go width 48 point, et cetera,
percentage, save, reload it in the browser,
| | 04:53 | and now it lines up properly.
| | 04:56 | More importantly, it will also scale down.
| | 04:58 | So when I change the size of this window and
we ignore the image for now, you'll see that
| | 05:03 | these two elements size
proportionately when the scale changes.
| | 05:08 | The final thing we need to do is add the media
queries so that when we get below that breakpoint,
| | 05:13 | everything realigns, so we get the title and
everything on top and the content below it.
| | 05:18 | So I'll go in here and copy out the styles I
just created, go down to my media queries,
| | 05:24 | and find the media queries for the
breakpoint, which is here, at 719 pixels.
| | 05:31 | We'll scroll down and find a logical
place to place it, which would be right here.
| | 05:37 | And I'll paste in my current styles, do some
cleanup, and then I'll just reset everything.
| | 05:47 | So, the margin-left set to zero, margin-left
set to zero, float set to none, and finally,
| | 05:56 | the width set to 100%.
| | 06:00 | Save that, reload the browser again,
and everything snaps into place.
| | 06:06 | Small screens, larger screens.
| | Collapse this transcript |
| Making images responsive| 00:00 | Once you've made the main content responsive,
you have to make sure that the images also
| | 00:05 | respond to the size of the screen or window;
otherwise, you get a weird effect where the
| | 00:09 | image starts spilling out over the edges.
| | 00:12 | You can see it here, when I start resizing
this window, that the image literally spills
| | 00:17 | out over the edge, and if I go down further,
you'll see that we start cropping the image
| | 00:23 | with the edge of the window.
| | 00:24 | That is not an ideal
situation, and we need to fix it.
| | 00:28 | But there's an added challenge.
| | 00:29 | In WordPress, the author can
insert images in many different ways.
| | 00:33 | From the top here, you see the first image
is inserted with a style called None, which
| | 00:38 | means it just flows with
the rest of the content.
| | 00:41 | Below that, we have an image aligned to the
left, we have one aligned to the center, and
| | 00:47 | we have aligned to the right, and finally,
we have an image that has a caption on it,
| | 00:51 | and we need to account for all of
these when we create image styles.
| | 00:57 | Fortunately, there's a relatively
easy way of making images responsive.
| | 01:03 | What you have to do is tell the browser to set the
width of the image to 100% of the containing box.
| | 01:11 | So in this case the containing box for the image is
the container that contains all the content here.
| | 01:16 | We can see it here; it would be the entry-content.
So the ideal situation would be that as the
| | 01:22 | window is resized, the image is
scaled to fit within that container.
| | 01:28 | To do that, we are going to use
a style code called max-width.
| | 01:32 | So I'll go into my style sheet, and I'll find
the Image section, and first, I am simply going
| | 01:37 | to apply a style that applies all images.
| | 01:39 | So I'll just say image and
I'll set max-width to 100%.
| | 01:46 | That means the image, at the biggest, will be
100% of the containing container. And then
| | 01:51 | I'll also set height to auto.
| | 01:56 | By setting height to auto, I am telling the
browser to automatically resize the height
| | 02:00 | of the image to match in proportion to the
width, so that the image doesn't get stretched
| | 02:05 | and start looking weird.
| | 02:07 | When I save this and reload my browser,
you'll see, at full resolution it makes no difference,
| | 02:13 | but as we scale the window down, you'll
notice that the images now scale along with the
| | 02:18 | rest of the content.
| | 02:25 | That is, with one exception.
| | 02:26 | If we scroll down to the bottom, you'll see
that my caption image still stays the same
| | 02:32 | size, and we're still covering it.
| | 02:34 | And that's what I was talking about.
| | 02:36 | In WordPress we have to account
for many different scenarios.
| | 02:40 | So what we need to do here is add in some
specific styles that capture all of these
| | 02:44 | different scenarios.
| | 02:46 | If you go to the code snippets file for this
course, you'll find that entire stack of code
| | 02:51 | here, at the very top, under 07.02.
| | 02:53 | If you copy that out and paste it in and place
it with this simple image call and save it, you'll
| | 02:59 | see that now everything sizes,
including the captioned image.
| | 03:02 | If we go back and look at the code, you see
it's still the same code, max-width: 100%,
| | 03:06 | height: auto, and it even has an
explanation here of what's going on.
| | 03:11 | And what we're doing is simply applying
the style to specific types of images.
| | 03:16 | Size-auto, size-full, size-large, size-medium,
these are all the standard sizes in WordPress.
| | 03:22 | We also assign it to the attachment images,
which is a different page that you can look at images.
| | 03:27 | We assign it to images in sidebars and
we assign it to images with captions.
| | 03:32 | Before we finish up completely with images,
I also want to account for certain specific
| | 03:37 | scenarios where images are
handled differently inside WordPress.
| | 03:41 | So I've created another set of style code
here that I can copy out from the code_snippets
| | 03:45 | file and paste in, and this applies
specifically to images that are aligned to the center and
| | 03:52 | also to captioned images that
are aligned to the center.
| | 03:56 | What this style does is it sets the margin
to auto on left and right so that the image
| | 04:02 | truly aligns in the center, and also sets a
bottom margin to create some extra space.
| | 04:07 | Again, we're setting the max width to 100%
and height to auto, so this is just a custom
| | 04:12 | style specifically for these two scenarios.
| | 04:16 | Save that, open it in the browser, and you now have
a set of fully responsive images in your site.
| | 04:26 | When building WordPress themes,
it's important to cover all eventualities.
| | 04:30 | By targeting each image insertion scenario,
you end up with responsive images no matter
| | 04:35 | where and how they are inserted.
| | Collapse this transcript |
| Making videos responsive by including FitVids| 00:00 | Now that we've made the layout, and also the
images, responsive, it's time to take a closer
| | 00:05 | look at how to make responsive videos.
| | 00:07 | Unlike images, you can't simply use CSS to make
videos responsive, at least not the videos
| | 00:13 | that you bring in from other sources, like
YouTube and Vimeo and other video sources.
| | 00:18 | If you look at the video we inserted here--
this is a simple YouTube video--you'll see
| | 00:23 | that it looks fine in the full layout, but
if I reduce the screen size, you'll see that
| | 00:28 | the video is not responsive at all,
which produces a very bad user experience.
| | 00:33 | Just imagine visiting this on your cell phone.
| | 00:36 | You can't even see the play button.
| | 00:40 | But before we start talking about how to
make the video responsive, let me just show you
| | 00:44 | the easy way of adding videos to WordPress.
| | 00:47 | If I have this video, Farm to Table, that's
on Vimeo, or I have YouTube, all I have to do
| | 00:53 | is create a new pst, give it a title, write
some text, and then, making sure I'm in HTML
| | 01:01 | mode, I'll all go to the video, copy out
the URL--and you can do this in YouTube too--
| | 01:08 | paste in the URL, give it a category--I'll set
this under Student Work--and publish the story.
| | 01:15 | What happens now is when we view the post,
WordPress cuts a hole in our page, called an
| | 01:24 | iFrame, and then goes to Vimeo and grabs the
necessary content and then embeds it automatically.
| | 01:30 | So, whereas in the past, we have to go and grab all
the embed code and paste it in and work with it,
| | 01:36 | now we can simply get for
WordPress to do this automatically.
| | 01:39 | However, just like with YouTube,
this video, not responsive.
| | 01:48 | The problem of videos not being responsive is
not new, and fortunately, someone has already
| | 01:53 | solved that for us.
| | 01:55 | But to make that solution work, we have to include a
JavaScript library specifically for that purpose.
| | 02:01 | That JavaScript library is called FitVids,
and you can find it under fitvids.js.com.
| | 02:10 | To include FitVids into WordPress refers me to
download the FitVids library, so I'll jump to GitHub.
| | 02:17 | I'll find the file I want,
this jquery.fitvids.js file.
| | 02:22 | I'll open it and click on the Raw,
so that we see just the file itself.
| | 02:27 | And then, in my browser, I'll right-click on
the page, go Save as, and then save the file
| | 02:33 | in my theme. So I go to wp-content/themes/
Anaximander, and I find my js folder and I save it here.
| | 02:42 | Now that we've saved the file inside our theme,
we need to create a function that will call
| | 02:47 | up the JavaScript library
whenever the theme is used.
| | 02:50 | That function will live in the
functions.php file, inside our theme.
| | 02:55 | So I'll open the functions.php file and I'll
scroll all the way to the bottom, because
| | 03:00 | that's where to want to add it.
| | 03:01 | And then I'm going to add
the new function here.
| | 03:04 | Because this is fairly complex, I've a created
a code snippet for you that you can copy and
| | 03:08 | paste in, so we'll do that and then
I'll explain what happens afterwards.
| | 03:13 | First, copy from this top line here, down
past add_action('init','anaximander_fitvids').
| | 03:19 | I'll copy that piece and paste it in.
| | 03:23 | If we look at this function,
it's not as complicated as it looks.
| | 03:26 | First, we're creating a function with the name
anaximander_fitvids, and then down here, we're
| | 03:31 | telling WordPress, add the
anaximander_fitvids function on initiation.
| | 03:38 | Inside the function, we have a conditional
call here that says, this only happens if
| | 03:43 | the current page is not an admin page, because we don't
want to call fitvids when we're in the Admin panel.
| | 03:49 | That's just a waste of resources.
| | 03:51 | Then we get to the actual function.
| | 03:53 | It consists of three elements.
| | 03:55 | First, we register the script itself.
| | 03:58 | We register it by giving it a name. So I called
it fidvids; you can call it whenever you want.
| | 04:03 | Then we tell WordPress where the script is.
| | 04:06 | It's in the current template directory, and
then it's under the folder js, and the file
| | 04:12 | is call jquery.fitvids.js.
| | 04:15 | We're also telling WordPress that this file is
related to the jQuery library that WordPress ships with,
| | 04:22 | so that now WordPress knows I'm calling this
file and I also have to kick in jQuery itself.
| | 04:30 | Once we've registered a script, we have to
enqueue the script. Enqueing the script
| | 04:35 | means we're telling WordPress, I want
to actually see the script in my page.
| | 04:40 | So here you see we say, wp_enqueue_script, and then
we call the name we just gave the script up here.
| | 04:46 | If we took out the rest of this function right
now and ran the script, you'd see that WordPress
| | 04:51 | would call up jQuery and the FitVids library in
the header of our page, but nothing would happen.
| | 04:58 | We need to do two more things for this to
work. First, we need to add a script that
| | 05:02 | assigns the FitVids function to a
specific class inside our document.
| | 05:08 | This is the only way FitVids can know which
content is a video and where it should be applied.
| | 05:13 | So here we have a simple
JavaScript function that does just that.
| | 05:18 | Then we create a function around that function
that is called, so that we can actually inject
| | 05:23 | this function into our theme.
| | 05:26 | We call that function add_fitthem, and then up
here we've create another action that's calling
| | 05:31 | add_fitthem, so this
function, in the head of the page.
| | 05:36 | To see all this in action, save the
functions.php file and reload your page.
| | 05:42 | If you're in Chrome, you can now hit Ctrl+U
to see the code behind the page, and from here
| | 05:49 | you can go Ctrl+F and search for FitVids
and you'll see that we've two calls here.
| | 05:54 | First, we have the actual library
itself, this call right here.
| | 05:58 | You see jquery.fidvids.js is being called.
And then in addition, you'll see up here,
| | 06:04 | we have that script that
appends FitVids to the video class.
| | 06:10 | However, if we resize this window, you will
see that the video is still not responsive.
| | 06:16 | But if you were paying close
attention, you will know why.
| | 06:19 | Remember how I said we're appending
FidVids library to the video class?
| | 06:24 | Well, right now that videos doesn't
yet have a video class attached to it.
| | 06:28 | To make that happen, we have to go and edit the post
and wrap the string in a div with a class video.
| | 06:39 | I'll update the page, view the post again,
and if everything worked right, we should
| | 06:47 | now have a responsive video.
Look at that. Cool, eh?
| | 06:55 | But I'm going to give you one more piece of
code that will make this process even easier.
| | 07:00 | As you saw, WordPress doesn't automatically
append a video class to wrap around videos,
| | 07:05 | so you have to do that manually.
| | 07:07 | So what I've done is I've created a function
that does just that for you, so you don't
| | 07:11 | have to do it every time you add a video.
| | 07:13 | If you copy this function here that's directly
under the other function and paste it in directly
| | 07:19 | under the other function, what this function
does, as it says, if there is a video that's
| | 07:25 | been inserted using that old embed method,
I want you to wrap that video in a div that
| | 07:32 | has the class video automatically.
| | 07:33 | If we save this and go back to a post that
already has a video--so I'll go back to Posts
| | 07:42 | and find a post that has a video--and I simply
update that post, because we have to now tell
| | 07:48 | WordPress to reinitialize that video so that
the new wrapper is wrapped around the video,
| | 07:54 | and we go view this post, you'll see that this
posts now also has a responsive video in it.
| | 08:05 | Now that we've added FitVids into our theme and
we've added that function that automatically
| | 08:10 | wraps new videos in the div that has the class video,
you'll have responsive videos throughout your site.
| | 08:18 | Just keep in mind that this only
applies to new videos you've added.
| | 08:21 | If you've old videos on your site, you need
to go back in to the Admin panel and just
| | 08:25 | resave those posts that have oembed videos in
them, so that WordPress wraps them in that
| | 08:31 | necessary div or the class video.
| | Collapse this transcript |
|
|
8. Creating a Responsive SidebarMaking the sidebar responsive| 00:00 | Most WordPress themes come with sidebars.
| | 00:03 | I've started designing WordPress themes without
sidebars, but every now and again you need them.
| | 00:08 | For that reason, the Anaximander theme
has a sidebar on the default index page.
| | 00:13 | The sidebar poses some new
challenges when it comes to responsive layouts.
| | 00:17 | Do you shrink the size of the sidebar by
percentages or do you leave it a fixed width?
| | 00:23 | And if so, what happens when the
sidebar gets bigger than the main content?
| | 00:28 | My philosophy here is to leave the sidebar
a fixed width until its width is equal to
| | 00:33 | that of the main content.
| | 00:35 | At that point, I either hide the sidebar or I
shift it down below the rest of the content.
| | 00:41 | If you look at how I laid out this page,
you'll find something you may be surprised at.
| | 00:47 | Instead of simply floating the content left
and right, which is the common thing to do,
| | 00:51 | I've decided to use a backwards version of the
technique we used to create this responsive
| | 00:56 | header and also the responsive single posts.
| | 00:59 | If you look at this regular-index section,
you'll see that here we have a margin on the
| | 01:03 | right that's -320 pixels, and in regular-
content, we have another margin of 320 pixels.
| | 01:12 | So basically, what's happening is we are
shifting the content to the right and then shifting
| | 01:16 | it back to the left, leaving a large
space in which the sidebar can slide in.
| | 01:21 | So you see that space in
this orange area here.
| | 01:25 | That means if we want the content to span
across the page and the sidebar to shift below
| | 01:29 | the page, we need to reset these two styles.
| | 01:33 | But first we need to decide where
we want that breakpoint to occur.
| | 01:36 | If I resize my browser here, you'll see that
at the second breakpoint, we pretty much have
| | 01:41 | that situation I was talking about, where the
content and the sidebar are of equal width.
| | 01:47 | That means I want to use that breakpoint as the
breakpoint for moving the sidebar below the content.
| | 01:53 | Knowing that, I'm going to go into my media
queries and apply these specific styles.
| | 01:58 | So I'll go to my style sheet, scroll all the way
to the bottom, where I know my media query is.
| | 02:03 | It's right here.
| | 02:04 | It's the one for max-width : 719. Let's scroll to
the bottom and here I'll create my new styles.
| | 02:11 | So the first one was regular-index, and here
I want to remove the float, so I'll float.
| | 02:23 | And then I also want to reset the margin to 0.
| | 02:26 | Then I have to apply the same
approach to the regular content container,
| | 02:29 | so again, I'll say margin: 0.
| | 02:33 | So just to reiterate, what we're doing here
is finding regular-index, and here you see
| | 02:37 | we're currently floating regular-index to
the left and the margin on the right is -320,
| | 02:43 | so we are resetting regular-index to float:
none and margin: 0, and then we are also resetting
| | 02:51 | regular-content's margin to 0.
| | 02:54 | I'll save this, reload this page in the browser,
and you see the sidebar disappeared, and more
| | 03:00 | importantly, when the window size
increases, the sidebar reappears.
| | 03:05 | But it didn't really disappear; the
sidebar moved to the bottom of the page.
| | 03:09 | So if I again make it disappear and scroll down,
you'll see the sidebar is now here on the bottom.
| | 03:14 | But you'll also see that the sidebar
looks odd, because it's shifted to the right.
| | 03:19 | What I have to do now is create new styles
that affect the sidebar only in this situation
| | 03:25 | so the sidebar looks nice when
it's at the bottom of the page.
| | 03:29 | If you go to the code_snippets for this
course, you'll find all that style code.
| | 03:33 | It's not all that much, so you just copy it,
go back to your media query, and paste it in.
| | 03:40 | When you save this and reload the page, you'll see we
have a new nice sidebar area down here at the bottom
| | 03:48 | that's formatted to fit better with
a layout for being on the bottom.
| | 03:52 | And if we increase the size of the
window, we're back to the regular sidebar.
| | 03:59 | Before I wrap up, let's just take a
quick look at what we just pasted in.
| | 04:02 | If I place my browser here on this side and
we go down and take a look at the sidebar
| | 04:07 | widgets, you'll see that the new sidebar
widgets have a solid gray background, which you can
| | 04:12 | find here, sidebar .widget, and
the background is right here.
| | 04:16 | They're also spanning across the entire width
rather than floating to the right, and that's
| | 04:21 | done here in the sidebar style.
| | 04:23 | We set float to none, overflow to
inherit, and then the width to 100%.
| | 04:28 | You'll also notice that inside sidebar
widget we now have width at inherit, which means
| | 04:33 | this style is inheriting the width of
the containing style, which is sidebar.
| | 04:39 | In other words, your sidebar widgets are now
100% wide instead of having a fixed width,
| | 04:44 | as they did before.
| | 04:46 | The rest of the styling is made to match the
footer widget styling that you see on the
| | 04:50 | bottom of the page here.
| | 04:52 | Sidebars require special
consideration when designing responsive themes.
| | 04:55 | I personally don't like flexible sidebars, so I
showed you how to leave them with a fixed width.
| | 05:01 | You can use the same technique, but with
percentages to make the sidebars flexible if you like.
| | 05:07 | There's no right or wrong here,
so it's completely up to you.
| | Collapse this transcript |
| Hiding sidebars on mobile| 00:00 | One common solution to dealing with sidebars
on mobile devices is to simply hide them if
| | 00:05 | the screen is too small.
| | 00:07 | I tend to agree with the strategy, as stacking
the sidebar underneath the main content can
| | 00:12 | produce an awfully long page on a mobile
phone, and you have to scroll a lot to get
| | 00:16 | to where you want to go.
| | 00:18 | But hiding content with media queries
has a couple of unintended drawbacks.
| | 00:22 | First, let's take a look at
how you would hide the sidebar.
| | 00:27 | In the previous movie, we used media queries
to move the sidebar down to the bottom of
| | 00:31 | the page when the window
is too small to fit it,
| | 00:34 | and we also added a bunch of extra styles to
make the sidebar styling fit with the rest
| | 00:39 | of the page when the sidebar is
at the bottom. You can see it
| | 00:43 | if you resize the window here.
You will see the sidebar disappeared.
| | 00:46 | When I scroll down, the
sidebar now appears at the bottom.
| | 00:51 | But if you don't want to show the sidebar
at all, and you want to hide it using media
| | 00:55 | queries, instead of adding all the extra styling,
all you have to do is find the container--in
| | 01:00 | this case id sidebar--and
simply say display: none.
| | 01:07 | When we reload this page now,
you'll see that the sidebar is gone.
| | 01:11 | It's not here on the bottom, and if we
resize the window, the sidebar reappears.
| | 01:18 | That also means all this extra style code
that we added earlier is now just a waste
| | 01:23 | of code, so you can remove it if you want to.
| | 01:26 | But I said there were some
unintended drawbacks of hiding the sidebar.
| | 01:29 | You see, what happens when we use media
query is is we're just changing the style code
| | 01:34 | on the page; we're not
changing the content itself.
| | 01:38 | That means even if the sidebar is hidden,
like what we see here, the sidebar is still
| | 01:44 | there in the code; we're
literally just not showing it.
| | 01:48 | This may be a problem in some cases because
sidebars often have large content in them.
| | 01:54 | That large content may be ads from Google or another
ad source, or images or videos or other things.
| | 02:01 | And even though we're hiding it using CSS,
all that content is still loaded into the phone
| | 02:06 | or loaded into the tablet, and the browser is
working hard to render all that information
| | 02:11 | only to not display it.
| | 02:14 | If you ask me, hiding a sidebar on mobile devices
is a preferred option to avoid too much clutter.
| | 02:20 | If you want to go this route, you just have
to keep in mind that you're still downloading
| | 02:24 | all the content that's in that sidebar.
| | 02:27 | So don't put too much heavy material in the
sidebar so that you're using up extra data
| | 02:32 | to download something that
you are not going to show.
| | Collapse this transcript |
|
|
9. Creating a Responsive FooterDealing with footer widgets| 00:00 | The footer of a web site is
often left as unused real state.
| | 00:04 | I find the footer to be quite useful for adding
further information about the site and links
| | 00:09 | to relevant content.
| | 00:11 | To make it easy to configure the footer area,
I usually add a set of optional widgets in the footer.
| | 00:17 | You can see them down here at the bottom.
| | 00:19 | I added four different widgets here--Archives,
Categories, Recent Comments, and Recent Posts--
| | 00:24 | but now that I've added the footer
widgets, I need to make them responsive.
| | 00:28 | If we look at this theme and resize the
window, you'll see that as we resize it, the footer
| | 00:34 | widgets automatically resize with it.
| | 00:37 | The problem of course is that at some point
the footer widgets become almost unreadable
| | 00:42 | because they're squished so tight together.
| | 00:43 | What we need to do is apply media queries to handle
the footer widgets once the screen gets too narrow.
| | 00:50 | And what I want to do here is simply box each
widget in its on 100% width box and then stack
| | 00:56 | them one after the other.
| | 00:58 | If we look at the footer widgets for the
Developer Tools, you'll see why they do what they do.
| | 01:07 | Each of the widgets is contained inside a list
item, and that list item has a percentage width,
| | 01:13 | is floating to the left, and has
a percentage margin to the right.
| | 01:17 | As a result it'll rescale to a
percentage of the total width of the screen.
| | 01:22 | This also tells us the
solution to our problem.
| | 01:25 | To make the footer widgets stack one on top of the
other, all we have to do is reset these three values.
| | 01:31 | So I'll copy out the style, go into my style sheet,
and down to my media queries at the bottom. I'll
| | 01:36 | find the media query that affects
all the content on the small screens,
| | 01:41 | so this one at 719, and I'll go all the way
to the bottom of that media query and paste
| | 01:46 | in the style I just copied out from Chrome.
| | 01:51 | Now all I have to do is reset the width.
| | 01:54 | So I will set the width to 100%, because
I want it to spend across the whole page.
| | 01:58 | I'll set float to none, because I don't want to
content to float, and I'll also set margin-right to 0.
| | 02:06 | Save this, reload the page, scale it down,
and you'll see right at the breakpoint the
| | 02:18 | footer widgets will now
stack one on top of the other.
| | 02:21 | But I need to add one more piece of style,
because as you can see, the footer widgets
| | 02:25 | don't have any space between them,
| | 02:27 | so it's hard to see where
one ends and the next begins.
| | 02:30 | So I'll go back in to my styles and margin
bottom 2em, save it, reload it, and now there's
| | 02:39 | a nice little space
between each of the widgets.
| | 02:41 | Of course, you can choose to change that value if you
want to, but I think that the 2em value works fine.
| | 02:47 | But there's one other piece of footer
content in the site that you haven't seen yet.
| | 02:55 | In addition to the footer widgets, there's some
content that only kicks in at certain times.
| | 03:00 | In this post, you'll see it.
It's right here at the bottom.
| | 03:04 | We see three related posts.
| | 03:06 | This is a custom function that's built into
the theme that looks for three related posts
| | 03:12 | to the current article based on when they
were posted and based on the categories that
| | 03:16 | are in this article.
| | 03:17 | If there are not enough related posts
then you'd simply don't see this box.
| | 03:21 | And just like with the footer widgets, these
boxes are responsive, so they resize with the
| | 03:26 | window, but we've to give them a breakpoint too
where we want to stack them one on top of the other.
| | 03:34 | That means we first need
to find out how they work,
| | 03:36 | so we use the Developer Tools to look at them,
and we'll see, just like the footer widgets,
| | 03:42 | each of these boxes is contained within a
list item in an unordered list, and each has
| | 03:47 | a percentage width floating to the left
and a percentage margin to the right.
| | 03:52 | So again, we copy out the style, paste it in,
clean it up, and then we set the width to 100%,
| | 04:08 | float to none, and the margin-right to 0, and
finally, we should give it a margin on the bottom too.
| | 04:14 | So if I set the margin-bottom to 2em.
| | 04:20 | Reload the page and now each of
items stacks one on top of the other.
| | 04:27 | Now if you want to be really clever,
you'll notice that these two styles had the exact
| | 04:33 | same style code, which means we
don't have to repeat them like this.
| | 04:37 | We can simply take the name, insert a comma in
front of the first one, paste in the second
| | 04:43 | one, and then we can delete the style, and
now the footer sidebar list items and the
| | 04:50 | related list items are
handled by the same style.
| | 04:53 | Shorter code does the exact same thing.
| | 04:56 | Making repeated side-by-side list items responsive is no
more complicated than any other component on the site.
| | 05:03 | You just have to consider how they're put
together, so you can make the appropriate changes
| | 05:08 | at the appropriate
breakpoints throughout the site.
| | Collapse this transcript |
| Adding navigation links that return to the top of the page| 00:00 | This may seem trivial, but adding a link to
the very bottom of your theme pointing the
| | 00:05 | visitor back to the top
can be extremely useful.
| | 00:09 | This is especially true if you write long
articles or have a lot of content on the page,
| | 00:13 | because navigating to the top of a page with
swipe behaviors on a phone can be a real pain.
| | 00:19 | Adding a navigation link
back to the top is easy.
| | 00:22 | You just have to target a specific ID
within the page markup and add it to the URL.
| | 00:27 | I like to add a specific line of text to
this link, just to make a kind of humorous.
| | 00:32 | So the first thing we are going to do is
identify the container we want to target with our link.
| | 00:37 | I'll click somewhere in the main content
towards the top to activate my Developer Tools
| | 00:42 | and then find in an id I want to target.
| | 00:45 | Let's say want to move people up to
the content ID, found right here.
| | 00:49 | It's pretty much at the top, and
it's where the content starts.
| | 00:53 | Then I'm going to add the
link to my footer file.
| | 00:55 | So I'll go to my theme, find footer.php, and
scroll down to the bottom, and here I'll add
| | 01:03 | a new paragraph right at the end, so it's
absolutely at the bottom of the footer.
| | 01:10 | And inside the paragraph I'm going to add an
anchor with the a href of #content, which
| | 01:18 | is that id I just found.
| | 01:20 | I'll close the anchor and add the closing
anchor tag, and then I'll put in some link
| | 01:25 | text so it's clear what's going
on when you click this link.
| | 01:28 | "You have reached the bottom.
| | 01:32 | Click here to get back on top."
| | 01:36 | The final thing I need to do
is close my paragraph.
| | 01:39 | I will now save the footer file, reload my
page, scroll all the way to the bottom, and here
| | 01:48 | we now have a link that says, "You've reached
the bottom, click here to get back on top."
| | 01:52 | When you click it, we jump all
the way back to the top the page.
| | 01:56 | Like I said, looks trivial, extremely useful.
| | 01:59 | Responsive design is more
than content reorganization.
| | 02:03 | It's also adding in-functionality that makes
the site easier to use for different users.
| | 02:08 | The return-to-the-top navigation link has
little of value for desktop computer users,
| | 02:13 | but is very useful for visitors
using smartphones and tablets.
| | Collapse this transcript |
|
|
10. Adding a Responsive Featured Content SliderUsing FlexSlider to create a responsive slider| 00:00 | Featured content sliders are a great way
of showcasing specific content on a site.
| | 00:05 | That said, they can also be a great
hindrance when trying to create a responsive site.
| | 00:11 | There are ways around this problem, but they
usually involve a lot of code wrangling and
| | 00:15 | quite a bit of JavaScript and CSS sorcery.
| | 00:19 | Fortunately, much of this has
already been solved by others,
| | 00:23 | and in a solution called FlexSlider, you will
find a featured content slider that is both
| | 00:27 | responsive, functional, and even includes
swipe behaviors for smartphones and tablets
| | 00:33 | and lots of other advanced features.
| | 00:35 | Let's take a look at how you can include FlexSlider into
the Anaximander theme, or any other theme for that matter.
| | 00:42 | The first thing we need to do is get FlexSlider
itself, and we get it here at woothemes.com/flexslider.
| | 00:49 | This, by the way, is also where you'll find all the
documentation and examples and other information.
| | 00:55 | And the amount of stuff you can do here is
quite extensive, so it's worth taking a close
| | 00:59 | look at the site.
| | 01:00 | So, I am going to download FlexSlider here,
and get it onto my computer, and then I'll
| | 01:06 | open this folder.
| | 01:09 | And from here, I only need three
components. I want flexslider-min.
| | 01:13 | This is the JavaScript library.
| | 01:15 | I want the flexslider.css CSS file,
and I want the images folder.
| | 01:20 | I'll open my theme next to it, and I am
going to put the flexslider.css file, along with
| | 01:26 | the images folder, into the CSS folder.
| | 01:33 | Now that I have the files I need, I need to
tell WordPress to use FlexSlider, and I am
| | 01:37 | going to use the same enqueue
method I used for FitVids earlier.
| | 01:41 | So, we'll go to functions.php, scroll all
the way to the bottom, make some space, and
| | 01:50 | here I want to add the
functions to call FlexSlider in.
| | 01:53 | Just like before, this requires quite a bit
of code, so I've compiled it all for you, and
| | 01:58 | you just have to copy it and paste it in.
| | 01:59 | So you see here under 10.01, you'll find the
FlexSlider code. Just go down and copy all
| | 02:06 | of it and paste it in to functions.php.
| | 02:11 | If we take a quick look at this function,
it's exactly the same type of function that
| | 02:14 | we saw previously with FitVids.
| | 02:17 | We have the function
itself, aximander_flexslider.
| | 02:21 | It's called down here add_action.
On initiation, we call anaximander_flexslider.
| | 02:27 | And here we do that register_script function
again, where we give the script a name, we call
| | 02:32 | it from the template_directory, and it's
called then jquery.flexslider_minified.
| | 02:37 | We enqueue that script, and then we also
enqueue the style sheet. So we go wp_register_style,
| | 02:46 | give the style a name, point to the style,
template_directory css/flexslider.css, and
| | 02:54 | then we enqueue the style here.
| | 02:56 | Finally, we have to add the script function,
and this is where, if you want to customize
| | 03:02 | FlexSlider further, you would add your extra
script, because if you go into the examples
| | 03:08 | of what is possible with FlexSlider, you'll
see there's tons of extra functionality you
| | 03:12 | can hook into if you want to and you can
make lot of customizations with this tool.
| | 03:17 | If you do that, this is
where you would place it.
| | 03:20 | But for now, we're just going to save it and
then we have to add some content to our page
| | 03:25 | that can be inside the FlexSlider.
| | 03:27 | To do that, I am going to
go and modify index.php.
| | 03:31 | That's the template file that
controls the front page.
| | 03:34 | So, I'll go back to my theme, find index.php,
edit it with Notepad, and then directly under
| | 03:43 | div content main here, I am going to add some
new lines, and then here I'm going to paste
| | 03:48 | in some dummy content.
| | 03:50 | Back in my code_snippets file,
I've already created that dummy content for you.
| | 03:53 | So, you can just copy out from the beginning
comment till the end comment here and paste
| | 03:59 | it in, and you'll see all we're doing here is
creating a divider with the class FlexSlider
| | 04:05 | that has an unordered list with a class slides,
and each of the list items within this unordered
| | 04:11 | list will be one of the slides.
| | 04:13 | You can also see that each of the list
item has an image and then a caption.
| | 04:18 | When I save this and reload my page in my
browser, you see FlexSlider appears at the top.
| | 04:26 | And right now, FlexSlider is pulling images
directly from my Flickr account. And we can
| | 04:30 | even navigate between the images using either
of these navigation buttons or by using the
| | 04:36 | buttons down here on the bottom.
| | 04:39 | But the coolest thing is, as I said before,
FlexSlider, as the name suggests, is responsive
| | 04:47 | and flexible, which means simply by adding
FlexSlider into the site, like we just did,
| | 04:53 | you automatically have a
fully responsive slider.
| | 04:56 | Before we go any further,
I want to say two things.
| | 04:59 | First of all, you should go check out the
live demo of FlexSlider, because you'll see
| | 05:03 | that you have a lot of different options when
it comes to how you want to use FlexSlider.
| | 05:08 | You have the standard version, which is what
we just included, and you can also add things
| | 05:12 | like thumbnail navigation or even add a carousel
that cycles through multiple pieces of content.
| | 05:19 | All the documentation for these types of
behaviors, along with code examples like the one you
| | 05:24 | see right here, can be found
on the FlexSlider web site.
| | 05:28 | And there is one more
thing I want to point out.
| | 05:32 | FlexSlider is a perfect example of an open
source application in constant development.
| | 05:38 | That means there are always developers working
on improving FlexSlider, so chances are, if
| | 05:43 | you implement it, it may not work
exactly the same way that I'm showing you.
| | 05:48 | But that also means it probably has even
more features and is even more advanced.
| | 05:52 | So, if you want to use FlexSlider, be sure
to go to the web site, download the latest
| | 05:57 | version, read the documentation, and
make sure you're using it to its fullest.
| | Collapse this transcript |
| Creating a loop to show sticky posts in a featured slider| 00:00 | In the previous movie, we used the FlexSlider
JavaScript library to add an advanced responsive
| | 00:06 | featured-content letter on our front page.
| | 00:09 | But right it's still
running our dummy content.
| | 00:12 | The next and obvious step is to add
featured content from our own site to the slider.
| | 00:18 | The way we are going to do that is by
creating a custom template file that has a separate
| | 00:23 | loop that will loop through only the sticky
posts inside WordPress and then display them
| | 00:29 | in the FlexSlider.
| | 00:31 | So before we do that, we need to
make some of our posts sticky.
| | 00:34 | I'll go up to the backend, go to Posts > All Posts,
and then just select some random posts here.
| | 00:43 | I'll select these four, go to Bulk Actions and
Edit and from here, I can set the Posts to Sticky.
| | 00:56 | Sticky posts are supposed to always appear at
the top of the index page, and you can also
| | 01:01 | use them for things like a
featured-content slider.
| | 01:05 | Now that I have set some sticky posts--and
you can see that they are sticky because
| | 01:08 | they say so right here on the index page--we
can create a function that hooks into the
| | 01:13 | sticky posts and then puts those
posts into the featured slider.
| | 01:18 | So first, I am going to create a new file.
| | 01:20 | I'll save it inside my theme, and I'll call
it featureflexslider.php. And I'll make sure
| | 01:31 | that this is a PHP file. And then I am going
to go to my code_snippets and copy out this
| | 01:40 | custom code that I have created for you.
| | 01:47 | Paste it into the document, save it, and
then I'll quickly explain what's going on.
| | 01:51 | At the top here, we have a comment. It's put
inside php bracket so that it won't appear
| | 01:56 | inside the site itself, and then we are creating this <
div class="flexslider"> and the <ul class="slides">.
| | 02:03 | You will notice this matches exactly what we had in
our dummy content here, <div class="flexslider">,
| | 02:09 | <ul class="slides">.
Then we create a loop.
| | 02:13 | First, we tell WordPress to track all the sticky
posts and put them into a variable we call sticky.
| | 02:19 | Then we say we want six posts maximum and
we only want the posts that appear inside
| | 02:26 | that variable, sticky, that we got previously.
| | 02:30 | Then we go to WordPress and say we now want
to have a new query, and a query is basically
| | 02:35 | when you go to the database and say give me all
your posts and I'll do some stuff with them.
| | 02:39 | Then we say, for each of the results that
come out of this query, do the following.
| | 02:44 | If it has a post_thumbnail--so that would
be the featured image--create a list item,
| | 02:49 | and within that list item create a link that
goes to the post for that thumbnail, then
| | 02:55 | show us the thumbnail and put in the caption
with the title of that post. Close the link,
| | 03:02 | close the list item, close for each,
and then the loop goes back to the top.
| | 03:07 | It says, are there more posts?
Okay, and it goes through the process again.
| | 03:11 | The reason why we have this if ( has_post_thumbnail
() is because this being a featured content slider
| | 03:16 | requires an image; if we don't have an
image, it will look really strange.
| | 03:21 | Then the function ends with a closing of the
unordered list and a closing of the div.
| | 03:26 | But this wasn't placed inside
a file that we are using,
| | 03:28 | so now we have to call this
function inside our index file.
| | 03:32 | So I'll go back to my index file and remove
this demo content, because we don't need
| | 03:36 | it anymore, and in place of the demo content,
| | 03:39 | we are going to call in this
featureflexslider.php file.
| | 03:44 | So I'll use a function
that comes with WordPress.
| | 03:46 | It is called get_template_part, and it'll
automatically look through the entire folder for the current
| | 03:56 | template or theme for a file with whatever
name we put in here. So this file is called
| | 04:02 | featureflexslider, and I'll
close the php delimiters.
| | 04:09 | Now when I save this and reload the front page,
you will see that we now have the featured
| | 04:17 | images up here at the top.
| | 04:21 | However, you'll also see
they look really strange.
| | 04:26 | That's because we are currently calling an
image size that wasn't there when we originally
| | 04:30 | added the content.
| | 04:32 | This is a common problem you see a lot in
WordPress where you switch to a new theme
| | 04:36 | and then all of a sudden all your
images have different weird shapes.
| | 04:40 | So before we go any further, we need to use a
plug-in to resize these images to fit with
| | 04:45 | the current theme.
| | 04:47 | So I'll go to my Dashboard, go to Plugins > Add New
Plugins, I'll search for Regenerate Thumbnails,
| | 04:57 | click Install Now, to install the plugin,
activate the plugin, and once it's installed,
| | 05:04 | I'll go up to Tools > Regenerate
Thumbnails and run the plugin.
| | 05:09 | The plugin will now go through all the images
on my site and resize them to fit with all
| | 05:14 | the predefined sizes we have inside the theme.
| | 05:17 | One of those predefined sizes I've already
set to the size we need for the FlexSlider,
| | 05:23 | which means all those images will now be
resized to fit in the FlexSlider, and we'll see a
| | 05:27 | much better display once the process is done.
| | 05:30 | The process is complete, and I go back to my
front page and you now see that the FlexSlider
| | 05:36 | looks much better because it
has the properly sized images.
| | 05:42 | And if you click on any of these, you jump
directly to that post. But there's one more
| | 05:53 | thing I want to do.
| | 05:54 | You will notice that if we go down to the
bottom here and we navigate to page 2, we
| | 06:01 | again get the FlexSlider, and I only want the
feature slider to appear on the front page.
| | 06:06 | So if you go back to the code_snippets file,
you will see that, here, instead of just having
| | 06:11 | the call to get_template_part, I have
created a function that you can use instead.
| | 06:15 | So if you copy out that function and paste it
into your index.php file, what this function
| | 06:23 | does is it goes and checks, is this the front
page, and if it is the front page, is it not
| | 06:29 | paged, meaning is it not
page 2 or 3 or 5 or 10?
| | 06:34 | It has to be page 1.
| | 06:36 | Only if both these conditions are
accurate will it show the template part.
| | 06:40 | If we save that, reload page 2, we no longer
see the FlexSlider, but go back to page 1
| | 06:49 | and here we have the featured-content slider.
| | Collapse this transcript |
|
|
11. Making a Responsive Index Page That Dynamically Reorganizes with MasonryWhat is jQuery Masonry?| 00:00 | If you've spent any amount of time on the
Internet in the past few years, you've likely come
| | 00:05 | across something very cool, called Masonry, though
you probably had no idea that's what it was.
| | 00:11 | Masonry is a jQuery plug-in that let's you
create dynamically reorganized content on your
| | 00:16 | site in a very nifty way.
| | 00:18 | The best way to understand what Masonry does is to
look at these two examples on the Masonry web site.
| | 00:24 | It shows the content before
and after applying Masonry.
| | 00:28 | What's happening here is we have a page that
has a bunch of items, so a regular index page,
| | 00:34 | but we don't want to list them vertically
like you would normally do; we want to list
| | 00:37 | them horizontally.
| | 00:39 | The problem is some of the items are bigger than the
others and as a result, they take up more space.
| | 00:45 | If we use CSS to float these items left to
right, what happens is the tallest item in
| | 00:52 | each row defines the vertical height of that row
and nothing can flow in to fill up that space.
| | 00:58 | So what we end up with is a layout with
a lot of dead space in between content.
| | 01:03 | What Masonry does is it figures out where
this content is and then finds elements that
| | 01:09 | can fit into those places.
| | 01:11 | As a result, we get a more condensed layout,
and it's also easier to cram more information
| | 01:16 | in to a tighter space.
| | 01:18 | The reason why you want to use Masonry is
exactly that; you get to fit more content
| | 01:23 | into a small space, and you also get
to use more of the space on the page.
| | 01:28 | As an added benefit, Masonry is responsive.
| | 01:32 | So if we change the size of this window, you'll
see that the content dynamically reorganizes
| | 01:38 | to fit the new sized window.
| | 01:44 | This means simply by including Masonry in our
index page, we automatically get a responsive
| | 01:49 | index page that showcases as much content as
possible in the currently available space.
| | 01:55 | Masonry is being used both on responsive pages and on
static pages, because of the way it handles layouts.
| | 02:02 | What you see on the Masonry page is a fairly
standard approach, but people use it for a
| | 02:06 | lot of cool stuff.
| | 02:08 | This is an example. It's an artist that uses
Masonry of the front page to create this artistic
| | 02:14 | representation of his own art.
| | 02:17 | As you can see, the items are still reorganizing
in the same way, but because of what the items
| | 02:21 | look like, it looks really neat.
| | 02:27 | What we're going to do is take this regular
static index page where each item is listed
| | 02:33 | one below the other,
| | 02:35 | and change it into dynamic Masonry page, like
the one I've here on DESIGN IS PHILOSOPHY.
| | 02:41 | All we're going to do is add the Masonry plug-in
and hook it into our index page and then also
| | 02:48 | activate some featured
images on the index page.
| | 02:52 | When we do that, we get a response of layout
that fits with the different screens, and because
| | 02:57 | I made some very careful measurements, we
will end up in a situation where the smallest
| | 03:02 | screen--so the mobile phone--will have a
beautifully laid out vertical stack of stories, just like
| | 03:08 | what you see here.
| | 03:10 | As a bonus, the front page will
also have some front page widgets.
| | 03:18 | So for example, this lynda ad that you see
here at the top is actually a widget, and there's
| | 03:22 | also two widgetized areas inside this
layout that will activate as we move forward.
| | 03:31 | jQuery Masonry provides a whole new way of
organizing index pages and allows us to put
| | 03:36 | more content on index pages without
sacrificing real estate in the process.
| | Collapse this transcript |
| Installing jQuery Masonry| 00:00 | Now that you've seen what Masonry can do,
let's install it into the Anaximander theme
| | 00:05 | so we can use it to create a
cool, functional front page.
| | 00:09 | To download Masonry, go to the Masonry web
site and right-click on the Download the script
| | 00:14 | jquery.masonry.min.js.
| | 00:16 | So I'll go click Save link as, and I'll navigate
to my WordPress installation or where I have
| | 00:25 | my theme, and I'll go into my theme, go into the
js folder, and simply save jquery.masonry.min.
| | 00:36 | Now that I have jquery.masonry added to my theme
folder, I want to enqueue it into the site.
| | 00:42 | So again, I'll go to functions.php and I'll
scroll all the way to the bottom, make a few
| | 00:50 | new lines, and this is where I
want to enqueue jquery.masonry.
| | 00:55 | If you go to the code_snippets file for this
course, you'll find that full function for
| | 01:00 | enqueueing masonry.
| | 01:01 | So I'll simply copy it out and paste it
in, and then I'll explain what happens.
| | 01:07 | Just like the two other times we
included JavaScript into WordPress.
| | 01:11 | what we are doing here is creating a function
that registers and enqueues a script properly
| | 01:17 | so that WordPress can
handle it in the right way.
| | 01:20 | Off the top, we create a
function, give it a name.
| | 01:24 | I called it anaximander_masonry. And then after the
function we create an action that on initiation
| | 01:31 | of the theme calls this function.
| | 01:34 | Inside the function we check whether or not
the current page is an admin page, and if
| | 01:39 | it is, then we don't do this.
| | 01:41 | So you see here it says exclamation point,
which is not, so we're saying if this is not
| | 01:47 | an admin page, then run the following.
| | 01:50 | So if it is an admin page,
none of this happens.
| | 01:53 | Inside the function we first register the
script by giving it a name, then pointing
| | 02:00 | to where it is. It's in the template_directory
under the folder js and the script is called
| | 02:05 | jquery.masonry.min.js.
| | 02:07 | This script is related to the jQuery library
that ships with WordPress, so therefore we're
| | 02:14 | telling WordPress to also
load the jQuery library.
| | 02:20 | Once we register a script,
we enqueue the script,
| | 02:24 | and by enqueueing the script, I mean we add
the script to the very top of the page.
| | 02:29 | So all we are doing here is saying wp_enqueue_script and
then we just call that name that we just gave the script.
| | 02:36 | This adds the jquery.masonry
script itself to WordPress.
| | 02:39 | The next thing we need to do is create the function
that actually calls up a jquery_masonry script.
| | 02:45 | That function is down here and what it does is it
says find the ID masonry-index and assign masonry to it.
| | 02:55 | And then inside that ID we have an itemSelector
called .index-post-container and each of these
| | 03:01 | should be floated in the way
that masonry floats content.
| | 03:06 | This, by the way, is also where you
want to add additional functions,
| | 03:10 | so for example if you want to add the animation
function that animates this content as you move it.
| | 03:18 | So what I mean is when this content slides
around in the screen, instead of it just popping
| | 03:23 | into place, you want to add that in here.
| | 03:27 | So what you would say is isAnimated: true,
and there are countless other options you can also add.
| | 03:34 | You'll find all of these in the
documentation on the masonry web site.
| | 03:38 | Once you've completed a function to add in
Masonry, save functions.php, go back to your
| | 03:44 | site, reload it, and though nothing happens
quite yet, to make sure Masonry is being enqueued
| | 03:52 | properly, go Ctrl+U in Chrome to open the code
itself and then Ctrl+F to open the Finder
| | 03:59 | and type in masonry.
| | 04:01 | And here you can see masonry being enqueued
and you'll also see that function we created
| | 04:08 | being listed in the footer,
meaning masonry will kick in.
| | 04:12 | Now note that I said
it's listed in the footer.
| | 04:14 | If we go back to the function here, you'll
see that the add_action function that adds the
| | 04:18 | anaximander_add_masonry, which is this custom
code here, is being added in wp_footer, meaning
| | 04:25 | it's added at the very end of the page.
| | 04:27 | That just means the function doesn't run
until all the content is filled in on the page,
| | 04:33 | and we're doing that because we don't want
masonry to try to reorganize content before
| | 04:37 | all the content is available.
| | 04:39 | With Masonry installed and up and running,
we're now ready to hook it into our index page.
| | 04:45 |
| | Collapse this transcript |
| Configuring the index page with Masonry| 00:00 | Now that we have jQuery Masonry hooked into
our theme, it's time to apply it to the index
| | 00:06 | page to create an index
page with a Masonry layout.
| | 00:10 | But before we do that, let me
explain exactly what we are going to do.
| | 00:14 | When I designed the Anaximander theme, I had
a plan for two different index page layouts,
| | 00:19 | so it's clear to the visitor where they are.
| | 00:22 | On the front page, so the regular index or
the blog index, I want to use Masonry to lay
| | 00:27 | out the content in three
boxes, one next to the other.
| | 00:31 | But on all the archive pages--so Author archive,
Regular archive, Category archive and Tag
| | 00:39 | archive--I want to retain this regular type
of index where one post stacks on top of the
| | 00:44 | other and we have a regular
sidebar. That means a)
| | 00:48 | we're only applying Masonry
to the index.php file and b)
| | 00:54 | we have to retain the
styling for this regular index.
| | 00:58 | Looking at the index page,
we can see what we need to do here.
| | 01:01 | First, we need to get rid of the sidebar.
We then need to reorganize the content itself
| | 01:06 | to match the Masonry layout. And finally, we
have to make sure that on the bottom here,
| | 01:12 | our pagination stays on the
bottom and works properly.
| | 01:19 | But just before we dive into the code, let me show
you something that I have hidden inside this theme.
| | 01:24 | If we select a single post here, you will see
that there's this figure class "the-thumbnail"
| | 01:31 | that's inside the code, and if you look at the
code itself, you will see there's an image
| | 01:36 | here, but it's hidden using the style over here,
regular-index .the-thumbnail display set to none.
| | 01:42 | If I turn that style off, you will see that each of
these posts actually has a thumbnail attached to it.
| | 01:49 | The reason why I hid it is because right now
it looks kind of weird and I only want to
| | 01:54 | use that thumbnail image in the Masonry index.
| | 01:58 | That's also why it's sized the way it is.
| | 02:00 | But if you want to have these featured images
on each of the posts also in regular indexes,
| | 02:06 | all you have to do is find out style
in the style sheet and take it away.
| | 02:14 | Now let's get down to business.
| | 02:15 | The first thing we need to do
is get rid of the sidebar.
| | 02:18 | I'll go to my theme, find index.php,
open it in my editor and then if I scroll to the
| | 02:26 | bottom, we find a call to
the sidebar right here.
| | 02:30 | Now, because I'm not 100% sure I want to get
rid of it yet instead of deleting the function
| | 02:35 | altogether, I am simply going to comment
it out, and by commenting it out inside the
| | 02:41 | php delimiter, it won't
get rendered in the page.
| | 02:44 | If we were to place HTML comments on the outside
of the php delimiter, this code would be rendered
| | 02:49 | and then hidden in the HTML.
| | 02:51 | But I want to just hide it all together.
| | 02:53 | So I'll save that, reload my page, and the
images disappear of course, because I still
| | 02:59 | have the style, but more importantly, you see that
my sidebar disappears, and that's what I want.
| | 03:05 | Now I need to hook Masonry into the content
on my page so that Masonry can realign it.
| | 03:12 | The way that works is I tell Masonry what
content it should work with and then Masonry
| | 03:17 | applies the necessary styling and
the necessary code to that content.
| | 03:22 | To find out what that content is, I'll use my
Developer Tools to identify the containers
| | 03:28 | that contain all of those content. And if
we look here, you will see that on my index
| | 03:33 | page, I have a section with an id called regular-
index and I also have a divider with an id called
| | 03:40 | regular-content and clicking on them, you
can see that these are the two containers
| | 03:45 | that create the space for the sidebar.
| | 03:47 | Now I said previously I want to retain this
layout for the other index pages, meaning
| | 03:53 | rather than going in and changing the styling
for regular-index and regular-content, what
| | 03:58 | I need to do is create new names for these ids
so that I can apply new styling to them.
| | 04:04 | But if I look closely, I see that the regular
index id in the styling is the one that creates
| | 04:10 | that extra space we need for the sidebar and
regular-content just responds to that style.
| | 04:16 | So I should be able to remove regular-content
altogether without affecting our Masonry layout.
| | 04:22 | I simply don't need it.
| | 04:24 | So I'll go into index.php and find regular-content right
here and I'll comment this out and see what happens.
| | 04:32 | And of course, when I comment out the beginning of
a div, I also have to comment out at the end.
| | 04:37 | It's down here.
| | 04:38 | so I'll simply move this comment over so
that it's gone, save index.php, reload it
| | 04:45 | in the browser, and now my content spans all the way
from left to right, which is exactly what I want.
| | 04:53 | The last thing I need to do is rename regular-
index to something else so that we can create custom
| | 04:58 | styles for it, and here we have a bit of a
chicken-and-egg situation, because this is
| | 05:03 | the id that we'll be targeting using Masonry,
and if you look at the function you created
| | 05:08 | previously in the functions.php, you will see
that that name is already defined right here,
| | 05:14 | because what we are doing is we are creating a
small function that tells Masonry to handle
| | 05:19 | the content inside the masonry-index ID.
And what Masonry will do is it will find each
| | 05:25 | item inside the masonry-index ID, and then the
items with the index_post_container classes
| | 05:32 | are the ones that are going
to be reorganized by Masonry.
| | 05:35 | So what we need to do is change the name of
the ID from regular-index to masonry-index.
| | 05:41 | So I'll go in here, change it to masonry-index,
and then I'll also change the comment that
| | 05:49 | closes it, so I see where it is.
| | 05:53 | I'll save it again, reload my page. The images
will appear again because the styling that
| | 05:59 | hid the images were applied to regular-index,
but more importantly, if we look at one of
| | 06:04 | these single posts again, you will see that
each post now has this index_post_container
| | 06:11 | class attached to it, and it's also set as
a masonry-brick, meaning that now Masonry
| | 06:16 | is handling each of these items.
| | 06:19 | If you paid very close attention, you
will also notice one other thing.
| | 06:24 | The pagination is all of a sudden up here.
| | 06:26 | That's because the pagination is
floating based on the overall content.
| | 06:31 | So the last thing we need to do here is move the
pagination out of this container altogether
| | 06:36 | so it doesn't appear here, but
rather, down at the bottom of the page.
| | 06:40 | So to close-up, we'll go and find our pagination,
which is right here, cut it out, and just place
| | 06:47 | it outside the masonry-index section. Save it,
reload the page, pagination is no longer
| | 06:54 | here, and if we scroll down to the bottom,
it appears at the bottom where it's supposed to be.
| | Collapse this transcript |
| Using CSS to finalize the Masonry layout| 00:00 | So far, we've hooked jQuery Masonry into our
WordPress theme; we've made it interact with
| | 00:06 | the front page; but even so, this front page still
doesn't look like that nice tiling effect that we want.
| | 00:14 | That's because the last step in the process
of adding masonry to your WordPress theme
| | 00:18 | is to apply styling so that all the boxes
are contained the way we want them to.
| | 00:24 | If we look at the original design, and this
is where drawing out your design in advance
| | 00:28 | has a huge benefit.
| | 00:30 | If you draw your design in advance, you know
exactly where you want to go with your styling,
| | 00:35 | so it's just a matter of applying
that styling to your style sheet.
| | 00:39 | Looking at the original design,
you can see exactly what we want to do.
| | 00:42 | Each of the items should be
contained in a box that's 298 pixels wide.
| | 00:51 | That box should have a one-pixel border of
gray color, and there should also be a margin
| | 00:56 | between each of the boxes of 20 pixels.
| | 01:00 | Now that we know what it's going to look like,
we can go into our markup and identify the
| | 01:05 | elements that we want to apply styles to.
| | 01:07 | So I'll use my Developer Tools to find out
which element is containing each of my stories,
| | 01:14 | and I can see it's this one, the article,
and it has the class index-post-container.
| | 01:20 | So that's what I want to apply my styles to.
| | 01:23 | Now I can go into my style sheet, open it
in the code editor, and then I'll create a
| | 01:30 | new section for my new styles.
| | 01:33 | I'll place it right after the regular
index section that we already have.
| | 01:38 | So I'll copy this comment out and then scroll
down until I find the end of that section.
| | 01:44 | Here it is. And I'll say Index-
Masonry and then I can create a new style.
| | 01:53 | The first style should apply to only
masonry-index and inside that .index-post-container so
| | 02:07 | that this style will
apply to each of the items.
| | 02:10 | Then it's just a matter of defining
exactly what it's going to look like.
| | 02:14 | As I showed you in Photoshop, the width of
each item should be 298 pixels. Each item
| | 02:20 | should have a border.
| | 02:22 | It's 1 pixel wide, solid, and has a gray color,
so I'll set it to e3e3e3. And we also want
| | 02:32 | each item to float to the left,
so I'll say float: left.
| | 02:37 | Save the new style sheet, reload the page,
and as if by magic, everything now stacks nicely,
| | 02:46 | side by side and one on top of another.
| | 02:49 | But it doesn't look quite right yet.
| | 02:51 | There's a couple of
things we still need to do.
| | 02:54 | First, we need to make some
space in between each item.
| | 02:58 | So what I need to do is, for each item, add a
margin to the right and to the bottom, and
| | 03:03 | I know that that margin should be 20 pixels.
| | 03:06 | So I'll go back, say margin: 0 for top, 20
for right, 20 for the bottom, and 0 for left.
| | 03:16 | Save it again, reload the page, and now they stack on
top of one another with the correct spacing in between.
| | 03:25 | But there are two issues here.
| | 03:26 | First, we now only have two items next to
one another instead of three, and second,
| | 03:32 | you see that the title here is shifted all
the way to the left, which looks kind of odd.
| | 03:38 | So let's deal with the title first.
| | 03:41 | I'll take a look at the title with the
Developer Tools and I see that it's affected by this
| | 03:46 | index-title class.
| | 03:48 | So now I can create a new
style that affects only that.
| | 03:52 | So I'll say masonry-
index and then index-title.
| | 03:59 | That way this style will only affect the index-
title in the masonry-index and not any other place
| | 04:04 | the same index-title appears,
like in the regular indexes.
| | 04:09 | And then I'll set margin:
to 20 pixels all around.
| | 04:13 | Save it, reload the page, and now you can see
the titles align with the rest of the content.
| | 04:23 | But what are we going to do about the
content not spanning all the way across here?
| | 04:27 | And more importantly, why is it happening?
| | 04:30 | Well, if we do some math here, you'll realize
that the overall container here is 940 pixels
| | 04:36 | wide, and each of these articles is 300 pixels wide
once you add the 1-pixel border on either side.
| | 04:44 | You remember we set them to
298s and then added a border.
| | 04:49 | The problem is, if you take 300 plus 20, plus
300 plus 20, plus 300 plus 20, you don't end
| | 04:59 | up with 940; you end up with 960.
| | 05:04 | The containing box is simply not big
enough to contain all our content.
| | 05:08 | There are several ways you can deal with this.
The absolute easiest way of dealing with
| | 05:12 | it is to simply make that
outermost containing box too big.
| | 05:17 | So what we'll do is, go in, create a new style,
say masonry-index--because that's the containing
| | 05:25 | box--and I'll set the width to 105%.
| | 05:32 | That extra 5% is just enough to allow us
that extra space so that the content slides up
| | 05:39 | next to it without disturbing
the layout of the whole page.
| | 05:43 | So now you see we have the correct layout
for the masonry index, all the way down to
| | 05:48 | the bottom, and if we navigate to
the next page, we get more stories.
| | 05:57 | And just as importantly, if I go to an
archive page, like Category archive page, I still
| | 06:03 | have the same layout I had before, so Classic
layout on archive pages, Masonry layout on
| | 06:11 | index pages, and the
Masonry layout is responsive.
| | Collapse this transcript |
| Adding media queries to the Masonry index| 00:00 | jQuery Masonry is now hooked into the front
page, working properly, and we have this nice
| | 00:06 | Masonry front page on our site.
| | 00:09 | When all this is done, we need to make sure
this layout looks good on all the devices
| | 00:13 | and all screen sizes, and that includes the
very smalles screen size, that vertical phone.
| | 00:20 | If you remember back to when we made the media
queries, when we scaled this window down to
| | 00:25 | a smaller size, so equivalent to that small
phone, we have a 20-pixel padding on the left
| | 00:31 | and it 20-pixel padding on the right.
| | 00:33 | The problem is the box here in the Masonry
layouts is 300 pixels wide, meaning the total
| | 00:40 | width here is 340 pixels, whereas the
phone's screen size is 320 pixels.
| | 00:47 | What we need to do is reduce this padding
for just this smaller size so that when people
| | 00:53 | use their phones and hold them vertically,
they'll get 320 pixels across exactly.
| | 00:59 | What we need is a new media query
targeting just this situation.
| | 01:05 | To add the new media query, we'll go to our
style.css file, scroll all the way to the
| | 01:10 | bottom, and if you want to, you can go and grab the
media query from earlier, for instance this one.
| | 01:17 | Copy it out, and we paste it in here, and then we
make the conditional statement max-width: 3 20px.
| | 01:26 | Then it'll only affect smart phones held
vertically or really narrow windows on a computer.
| | 01:34 | Now all we've to do is find those values that
we want to affect and then paste them in here.
| | 01:38 | Now if you look at our original media queries,
you'll see that there's a bunch of CSS selectors
| | 01:44 | when we set the left or right values to 20 pixels.
| | 01:47 | You see it here and here and
here and here and so on.
| | 01:54 | So what we're going to do is take the same
selectors, copy them into a new media query,
| | 01:58 | and then reduce that width the 10 pixels.
| | 02:01 | Just to make it easier for you, I've made a
code_snippet that just does that. So you
| | 02:06 | just have go in to the code_snippet file and
find that media query, copy it out, scroll
| | 02:12 | to the bottom of style.css, and paste it in.
| | 02:17 | When you save this new media query and go
back to your browser and reload the page
| | 02:23 | and then reduce the page
down to that same width again,
| | 02:26 | you'll see that right when we hit that 320
mark, the new media query kicks in, and we
| | 02:32 | get this nice 10-pixel
padding on the left and right.
| | 02:36 | And it also realigns the header in
the menu and the footer and so on.
| | 02:40 | You can see here, it keeps
popping in and out between 10 and 20.
| | 02:47 | So what we're doing here is using media
queries one last time to refine the look for just
| | 02:52 | one particular usage scenario.
| | Collapse this transcript |
|
|
Next stepsExploring hidden features of the Anaximander theme| 00:00 | If you've followed this course from top to
bottom, beginning to end, you will now have
| | 00:05 | a fully responsive WordPress theme with a
featured-content slider at the top, a Masonry
| | 00:11 | layout index page, and
responsive content throughout the site.
| | 00:16 | Now, I want to show you a couple of hidden
features that are built into the Anaximander
| | 00:21 | theme that will make it easier for you to use and
also better for the people who visit the site.
| | 00:27 | The first feature is the front-page widgets.
| | 00:31 | The front-page widgets allow you to add
regular widgetized items, like lists of recent posts
| | 00:37 | or recent comments or archive lists or whatever,
in three different places on the front page.
| | 00:44 | To activate them, go to either the WordPress
toolbar and select Widgets or go to the
| | 00:50 | Dashboard and go under Appearance and Widgets.
| | 00:53 | And here you see we have Front page widget 1,
Front page widget 2, and Front page widget 3.
| | 00:59 | So, let's place a Categories list in Front
page widget 1, Recent Comments in widget 2,
| | 01:11 | and the Archives in widget 3.
| | 01:14 | If I now open the front page in a separate
window, you will see that right here in my
| | 01:20 | masonry-index, we now have a Categories list.
| | 01:23 | If we scroll down, you will see the Recent
Comments appear, and all the way at the bottom,
| | 01:32 | you see Archives.
| | 01:34 | And if I add more widgets to one of these
lists--let's say I want to add a list of pages
| | 01:39 | or even a custom menu to
the first widget area--
| | 01:44 | I can reload the page, and you will
see that that widget appears on top.
| | 01:51 | And just like with everything else on this
page, these widgets are placed inside the
| | 01:55 | masonry-index, meaning as I resize the window,
they will move around and reorganize to fit.
| | 02:07 | The second feature is
related to the featured images.
| | 02:11 | If you write a post, you can use the
featured image in an advanced way in this theme.
| | 02:17 | What I've done here in this post is I have
created a post, assigned a featured image,
| | 02:21 | but I didn't add the featured
image to the top of the post.
| | 02:27 | If I want to add the featured image to the
top of the post automatically, instead of
| | 02:31 | putting it into the post itself, I can simply
go into Edit Post and change the post Format
| | 02:38 | from Standard to Image.
| | 02:41 | If I set the post Format to Image, it will
automatically include the featured image at
| | 02:46 | the very top of the post every time.
| | 02:48 | As you can see, we have a featured image of
the car down here, and when I update this
| | 02:54 | post and click View Post, the featured
image appears at the top of the post.
| | 03:01 | This is very useful because now you
don't need to add the image twice.
| | 03:05 | If you want the image to appear at the top
and you also want it to be a featured image,
| | 03:09 | simply add it as a featured image, set the
post Format to Image, and it will automatically
| | 03:15 | appear inside your post.
| | 03:19 | The last feature is the
one I think is the coolest.
| | 03:23 | If you add a video from either Vimeo or YouTube
and you do it using the oembed technique, like
| | 03:28 | I did here in this Farm to Table post,
| | 03:32 | you can see the video appear inside the post,
but you don't see it on the front page.
| | 03:36 | What I did in this theme was add a feature
that would automatically include the video
| | 03:43 | on the front page for you.
| | 03:44 | So, if you go to Edit Post, you'll see that the
video is here included as an oembed, meaning
| | 03:50 | I just placed URL to the video inside the
HTML view, and I switched the post Format
| | 03:57 | to Video, update the post, view the
post, and then reload my front page,
| | 04:08 | you'll see that now that video appears in playable
format right on your front page.
| | 04:15 | (video playing)
| | 04:21 | This automatically happens for
YouTube videos and for Vimeo videos.
| | 04:26 | If you don't want the video to appear on the front
page--you only want to show an image from the video--
| | 04:31 | all you have to do is go to the post and
edit it, set the post Format back to Standard,
| | 04:39 | and then upload a featured image, and
that featured image will appear instead.
| | 04:44 | So here you have a very advanced option.
| | 04:47 | That means when it comes to video posts on
the front page, you have three options.
| | 04:52 | If you simply add the video into the post
along with text, it will appear as the title
| | 04:57 | and then some text, and no video will be shown.
| | 05:01 | If you add a featured image to your post,
that featured image will show on the front page.
| | 05:07 | If you go and change the post Format to Video,
instead of the featured image, on the front
| | 05:13 | page, you'll see a
playable version of the video.
| | 05:17 | In designing the Anaximander theme, I wanted
to give you a theme with a lot of advanced
| | 05:21 | functionality that you can actually use for your
own web site now that you have completed it.
| | 05:27 | That means take the theme, customize it in
any way you want, change the colors, add a
| | 05:32 | header image, change the layout,
and use it on your web site.
| | 05:36 | The whole point of this theme is to give you
the tools necessary to figure out how to build
| | 05:41 | your own theme using all these advanced options,
and have that theme be responsive, so it looks
| | 05:47 | great on desktop computers,
tablets, and on phones.
| | Collapse this transcript |
| Where to go from here| 00:00 | And that, my friend, brings us
to the end of this course.
| | 00:03 | Before I let you go, I just have a
few more things I'd like to say.
| | 00:07 | All the techniques that I've shown you in
this course, whether it be design techniques,
| | 00:11 | development techniques for responsive design,
or how to use CSS in different ways to create
| | 00:17 | different types of layouts, are all
universal and can be applied to any theme.
| | 00:23 | Of course, how you apply it will change,
but the general concepts will stay the same.
| | 00:29 | Media queries are media queries no matter
where you go, and you just apply them in the
| | 00:33 | same way I did and use the same
techniques and you'll have great results.
| | 00:38 | The techniques I've showed you on how to
include JavaScript tools like FitVid, FlexSlider,
| | 00:43 | and jQuery Masonry can
also be applied to any theme.
| | 00:47 | Again, how exactly and where exactly you place
these things may change, but the overall technique
| | 00:54 | on how to include them by enqueuing the
JavaScripts in the function.php file and then applying
| | 00:59 | them to your general templates
stays same across all themes.
| | 01:04 | Now that you have a fully responsive and fully
functional version of an Anaximander, I urge
| | 01:08 | you to pick the theme apart and configure
it in a way that you like, so you can use
| | 01:13 | it on your own site.
| | 01:15 | You're free to use it the way it is.
| | 01:17 | You can customize it in any way you like,
to make it look more like what you want it
| | 01:21 | to. You can also build child theme from it, or
you can use components that you find inside
| | 01:26 | an Anaximander theme and
include them in another theme.
| | 01:29 | You're free to do whatever
you want with this code.
| | 01:32 | If you want to learn more about responsive
web design, I urge you to start by reading
| | 01:37 | the original article,
Responsible Web Design by Ethan Marcotte
| | 01:41 | that's published on A List Apart.
| | 01:44 | This is where responsive design started, and
understanding the history of this technique
| | 01:49 | makes it easier for you to
understand what you can do with it.
| | 01:52 | If you want inspiration, you should go and
check out this web site, mediaqueri.es.
| | 01:59 | This is an ongoing library of thousands upon
thousands of web sites that use responsive design, and
| | 02:05 | it showcases what these web sites look like in
different widths, so you can see what people are doing.
| | 02:12 | It's a great place to see what's going on in
responsive design, and you can also submit your own site.
| | 02:18 | Just be advised, it takes a very long time
from you submit it till it actually appears
| | 02:23 | on the site, because there are so many
sites that are being done this way.
| | 02:27 | But if you're looking for inspiration,
this is a great place to start.
| | 02:31 | If you want kind of a rundown of what's hot
in responsible design right now, you can also
| | 02:35 | sign up for this newsletter by Brad Frost.
| | 02:39 | It gives you exactly that: a rundown of
what's hot in responsible web design right now.
| | 02:44 | And you get it right in your inbox, so you
can read the great articles and tutorials
| | 02:48 | that are being published on it.
| | 02:50 | But what is most important about responsive
web design, and what I hope I was able to impart
| | 02:55 | to you with this course, is that you can take
responsive web design and make it your own
| | 03:01 | and make any site work really well on all
different screen sizes and all devices.
| | 03:07 | By using responsive web design, you're
creating better user experiences for anyone visiting
| | 03:12 | the sites you build.
| | 03:14 | And in the end, that's
really all that matters.
| | 03:16 | So go forth and build
responsive WordPress themes.
| | Collapse this transcript |
|
|
