IntroductionWelcome| 00:00 | (music playing)
| | 00:04 | Hi! I am James Williamson, senior author
here at lynda.com, and I want to welcome you
| | 00:09 | to Applied Responsive Design.
| | 00:11 | In this course, we're going to explore
many of the strategies and techniques
| | 00:14 | that are being employed to control the
appearance and behavior of sites across
| | 00:17 | multiple screen sizes and devices.
| | 00:20 | As we explore responsive design,
we'll see how it affects the entire process of
| | 00:24 | building sites, from the early planning
stages to site development, and even in
| | 00:29 | terms of how we test and deploy our sites.
| | 00:31 | We'll cover the planning aspects
of responsive sites, how to craft
| | 00:35 | responsible layouts and media,
| | 00:37 | how to handle site navigation across
devices and screen sizes, and how you can
| | 00:41 | use mobile capabilities to
enhance your site's overall experience.
| | 00:44 | We will also talk about properly
managing resources for responsive sites and
| | 00:48 | what you can do to help improve performance.
| | 00:50 | Responsive design is not just another
fad; it's a reaction to the reality of
| | 00:54 | designing for users who expect to
experience your site across multiple
| | 00:58 | devices and screen sizes.
| | 01:00 | So, open up your favorite code
editor and let's get started crafting
| | 01:04 | responsive designs.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium member of the
lynda.com online training library or if you're
| | 00:05 | watching this tutorial on a disc, you
have access to the exercise files use
| | 00:09 | throughout this title.
| | 00:10 | Exercise files for this course are
arranged by chapter and are located in folders
| | 00:15 | that are named based on
the movie that they represent.
| | 00:18 | Since each exercise is self-
contained, you will want to work with these
| | 00:21 | folders individually.
| | 00:22 | I recommend copying the entire Exercise
Files directory to the desktop and then
| | 00:27 | working on the files
from the appropriate folder.
| | 00:30 | I'll call out the location of the
exercise files for each movie and you should
| | 00:34 | see a brief overlay that will also tell
you where to find those exercise files.
| | 00:38 | For this course, I'll be authoring
my exercise files using Dreamweaver.
| | 00:42 | It's a common web authoring tool
and in an environment that I am
| | 00:45 | very comfortable with.
| | 00:46 | By no means is this Dreamweaver course.
| | 00:49 | You can use any code editor you'd
like, and I cover many of the free and
| | 00:52 | open-source editors available
in several of my other titles.
| | 00:56 | I'll also only be using the Code view in
Dreamweaver and none of its visual tools,
| | 01:00 | so as long as you can type in the
code that you see on my screen, you'll be
| | 01:04 | able work right alongside with me,
whether you are using Dreamweaver or not.
| | 01:08 | It's also crucial that you use the
most recent versions of Internet Explorer,
| | 01:12 | Chrome, Firefox, Safari, and Opera,
and make it a habit of testing your pages
| | 01:17 | with multiple browsers.
| | 01:18 | If you have access to a web server, being
able to preview your responsive designs
| | 01:22 | on mobile devices is a pretty
critical part of testing responsive design.
| | 01:26 | During this course, you may want to
upload your work to a testing server and
| | 01:30 | access those pages on tablets and smartphones.
| | 01:34 | If you don't have access to a live
server, I recommend getting a trial
| | 01:37 | subscription to Adobe's Creative Cloud
and checking out Adobe's Edge Inspect.
| | 01:42 | Edge Inspect allows you to wirelessly
sync browsing in Chrome to multiple iOS
| | 01:47 | and Android devices.
| | 01:48 | This means that you can update changes
in the browser and multiple devices all
| | 01:52 | at the same time without the use of a web server.
| | 01:55 | It's a great tool for
testing responsive designs.
| | Collapse this transcript |
| Exploring the finished project| 00:00 | Before we get started working on our
responsive design, I think it would be
| | 00:04 | helpful to preview some of the things
that we're going to be creating over the
| | 00:07 | course of our exercises.
| | 00:08 | We'll be working on a few pages of the
fictitious desolve.org urban photography site.
| | 00:15 | As I browse the index page for the first
time, I am going to do it all designers
| | 00:20 | do when they show off a responsive site:
| | 00:22 | I'm going to resize the browser.
| | 00:24 | Now you'll note that when the browser
window hits the specific size break points,
| | 00:27 | the layout changes to
reflect the smaller screen size.
| | 00:30 | While this is visually impressive, there is a
bit more going on here that I want to point out.
| | 00:35 | Note that when the page is at that the
larger screen size, the layout is fluid
| | 00:40 | but only up to a point.
| | 00:43 | When we build our layouts we will construct
fluid layouts for each screen size that
| | 00:47 | is fluid only within a predefined range.
| | 00:50 | That way we will have layout that will
work equally well on any device within a
| | 00:54 | certain range rather than tailoring
our layouts to one specific size.
| | 00:59 | You'll also notice that the content
changes dramatically based on layout.
| | 01:04 | Taglines resize, reposition themselves,
and image is dictated by the context.
| | 01:10 | In this sense, we will also be
exploring how to make sure each design maximizes
| | 01:15 | the effectiveness of the
content within that context.
| | 01:18 | We'll also be concentrating on how
images work within responsive design.
| | 01:23 | On the index page, you can see that
we use a variety of our icons and
| | 01:26 | background images to enhance our design.
| | 01:29 | Notice that as screen size changes,
icons change and images are either swapped
| | 01:33 | out, removed, or allowed
to flex within the layout.
| | 01:37 | In our specific gallery page,
we'll also add this gallery slideshow
| | 01:42 | that responds to screen sizes and adds
touch capabilities when used on mobile devices.
| | 01:48 | Navigation is an important part of
responsive design, and we will create two
| | 01:53 | versions of our site navigation.
| | 01:54 | First, we will explore a simple
navigation pattern and the considerations
| | 01:58 | necessary for maintaining
functionality on smaller screens.
| | 02:01 | Then we will explore this more complex
dropdown menu, and we'll talk about some
| | 02:06 | of the best practices for dealing with
limited screen space and ensuring that
| | 02:10 | it will work properly on touch screens.
| | 02:12 | We'll also take this related menu and
convert it to a selection element for
| | 02:18 | mobile screens as a way of saving
space and improving user experience.
| | 02:22 | It's also really important to remember
when building responsive designs that
| | 02:27 | your users are, well, really unlikely
to resize their screen constantly and
| | 02:31 | marvel at the changes like we're doing
here. They'll simply experience the size
| | 02:35 | in the context of how it's designed.
| | 02:38 | As such, we will concentrate on
adding mobile enhancements to the site for
| | 02:41 | smaller screens. We will add phone
functionality, take advantage of HTML-
| | 02:46 | supported form elements, and add
home screen icons for mobile phones.
| | 02:52 | Finally, we will tackle some of the
stuff that you can't really see in the demo.
| | 02:55 | We'll take a look at how we can
speed up page loads and how to properly manage
| | 02:58 | resources for responsive designs.
| | 03:01 | I think it's also important to note here,
as well, that as we start these exercises,
| | 03:05 | I am going to assume a certain skill
level in terms of HTML, CSS, and JavaScript.
| | 03:10 | If you're a new web designer or just
starting out, some of the techniques and
| | 03:13 | concepts covered here
might be unfamiliar to you.
| | 03:16 | As such, you might want to start out
with some of the entry-level HTML, CSS,
| | 03:20 | and JavaScript courses in the
lynda.com online training library before
| | 03:23 | attempting this one.
| | 03:24 | We'll also be jumping right
in and working with the assets,
| | 03:27 | so if you would like more background
on the concepts and strategies behind
| | 03:30 | responsive design, check out my
Responsive Design Fundamentals course in the
| | 03:34 | lynda.com online training library.
| | Collapse this transcript |
|
|
1. Planning Responsive DesignsContent planning| 00:00 | One of the biggest changes to the design
process when designing responsive sites is also one
| | 00:05 | of the most overlooked.
| | 00:06 | Everyone tends to focus on the techniques
necessary for repurposing content over multiple
| | 00:11 | devices, while ignoring what this does to
the process of actually planning the sites.
| | 00:17 | In this chapter, I want to take a brief look
at some of the considerations necessary for
| | 00:20 | properly planning responsive designs.
| | 00:23 | I want to start with the most important component of
the entire process, and that is examining the content.
| | 00:29 | So what you're looking at on my screen right
now--I've opened this up in Word--is a content
| | 00:34 | survey document, and you can find this in the
Chapter 1 Exercise Files directory, the 01_01.
| | 00:40 | I've two versions of this. I have the
survey_desolve.doc, which is what you're looking at, and that's
| | 00:45 | going to serve as our exercise files.
| | 00:47 | And then I've sort of a blank
one that you can use as a template.
| | 00:49 | If you've never used one of these before and
you want to start creating your own, you can
| | 00:53 | use this as a starting point.
| | 00:54 | Now, this is a really simple example.
| | 00:56 | It's not as robust as a lot of the content
surveys that I've seen, but what this does
| | 01:01 | is it's going to help us present the idea
of what a content survey is and what type
| | 01:05 | of things you're going to need to start thinking
about once you start planning responsive designs. Okay.
| | 01:09 | So one of the things that you can see with
my content survey here is I have four columns.
| | 01:14 | I have the content itself; the type of
content that it represents; the section of content,
| | 01:20 | meaning is it site-wide, is it unique to this
page, that sort of thing; and then a priority,
| | 01:25 | meaning how important is this content to
the success of this page, how important is it
| | 01:29 | to the user that wants to
take a look at this content?
| | 01:32 | Now, I've got some footnotes down here at the bottom
of this that sort of go over these a little bit more.
| | 01:37 | So I just want to take just a moment
before we get into the example itself, of talking
| | 01:41 | about what each of these sections is describing.
| | 01:43 | So in terms of type, there are a
couple of ways that you can approach this.
| | 01:47 | One is to use some existing schemas or taxonomies
or microformats that are out there that describe
| | 01:54 | a certain industry or type of content.
| | 01:56 | This is especially helpful if you're going
to use these types all of microformats later
| | 02:01 | on to make your content a little bit more
accessible or to make more semantically rich
| | 02:07 | content, because you can sort
of already have those in place.
| | 02:09 | Now, I'm not using anything quite that complex.
| | 02:12 | I'm basically using sort of a custom content
type that allows me to categorize my content
| | 02:17 | and sort of place it into silos.
| | 02:19 | Is this part of my branding, is it more informative
for the user, is it a type of media, that sort of thing.
| | 02:25 | Now, the section column to the right of that,
this is again a little custom thing that I
| | 02:30 | use that tells me, what type of content is this?
| | 02:33 | Is it content that is
site-wide, which would be SW?
| | 02:36 | Is it content that goes in a
specific section of my website?
| | 02:40 | So, for example, if I have a Products
section where I have a lot of pages in that that
| | 02:46 | describe different products, does
it go in that section of the website?
| | 02:50 | Or is it page specific,
meaning unique to this page?
| | 02:54 | Next to that I have a priority level, and of
all the things that you do within a content
| | 02:59 | survey, the listing of all the content on
the page, really just going through it is
| | 03:03 | an important part of the process, because it
gives you an idea of exactly how much content
| | 03:08 | is on that page and whether you need that much
content or whether you have gaps in your content.
| | 03:13 | But probably the second most important part
of this process would be the priority level.
| | 03:17 | How important is this content?
| | 03:19 | So it allows you to really take a moment to
rank the content by level of importance and
| | 03:24 | develop sort of a hierarchy of the content,
and you can start to think about, okay, as
| | 03:29 | I'm molding a responsive design, what content do I
need to keep in the forefront? What considerations
| | 03:35 | do I need to make for this content when I
go down to a smaller screen, and am I making
| | 03:38 | sure that the highest-priority
content is easily accessible to the user?
| | 03:43 | So this is something that helps clarify and
focus a content strategy for designing all
| | 03:49 | of your responsive designs.
| | 03:50 | Now, in terms of a priority level,
again, I have my own way of doing this.
| | 03:54 | If I scroll down, you can see I have five
levels. I have Critical, Important, Top-level,
| | 03:58 | Secondary, and Extraneous.
Critical is just highly critical content.
| | 04:02 | It has to be easily accessible to the
user regardless of screen size and/or device.
| | 04:07 | So that's content that I'm always going to
try to put to the forefront of the page to
| | 04:10 | make sure there is not a lot of scrolling or
clicking that goes into somebody discovering that content.
| | 04:15 | The Important level is still a
very high degree of importance.
| | 04:19 | It should be very easily discoverable,
probably the first thing that people see if there's
| | 04:23 | no critical content on the page.
| | 04:25 | The third level is a Top-level,
which is solid page content.
| | 04:29 | It's important, but it doesn't
rise to the level of critical importance.
| | 04:32 | So it's something you want people to see,
you want them to discover easily, but it's
| | 04:35 | not something that absolutely positively has to be
towards the top of the page or immediately visible.
| | 04:40 | Then I have Secondary Content.
| | 04:41 | Now, this would be content that's related
to the top-level content or secondary content
| | 04:46 | that I'm just passing along, good
information for people to have, but maybe not something
| | 04:50 | that absolutely positively
has to be front and center.
| | 04:52 | A lot of times this might be ads, this
might be sidebar content, that sort of thing.
| | 04:56 | And then the last category
that I have is Extraneous Content.
| | 04:59 | Now, this is content that once I do a survey
of the page and I take a look at it, I really
| | 05:04 | can't rank it anywhere.
| | 05:04 | It's content that's like, well, it's kind of nice
that it's there, but it doesn't have to be there.
| | 05:08 | And one of the things that having this
type of a priority level will do for you is it
| | 05:12 | will force you to take a look at content and say,
does that content really need to be on the page?
| | 05:17 | Can I get rid of that content, and if I do,
does my page suffer for it or are the users
| | 05:21 | going to be upset about that content being gone?
| | 05:24 | Now, I'm definitely not of the mind that
for small screens you need less content.
| | 05:28 | I don't believe that at all.
| | 05:29 | I believe there are lots of ways to make sure
that people on smaller screens are getting the
| | 05:33 | content that they came for.
| | 05:35 | So I'm not an advocate of pulling content
out of a page just because it's going to go
| | 05:39 | to a smaller screen.
| | 05:41 | However, I am an advocate of really taking
a look at your content, focusing on it, and
| | 05:46 | making sure that what you're putting on the
page has a reason for being there, because
| | 05:49 | if it doesn't, then you're just making more
work for yourself when you start redesigning
| | 05:53 | the layout for smaller screens.
| | 05:54 | So I'm going to go back up to my table
here, and I'm just going to run you through the
| | 05:59 | thought process of going
through a survey like this.
| | 06:02 | So on the left-hand side I have a list of
all of the pieces of content that are going
| | 06:05 | to be on my index page.
| | 06:07 | This is something that you can do as content is
being assembled. You can just start filling this out.
| | 06:11 | You can do a survey after you've sort of
thought about the original structure of the page,
| | 06:15 | but you want to do this
really early on in the process.
| | 06:18 | This actually could be the very, very beginning
of your planning process, is thinking to yourself,
| | 06:22 | okay, what does need to go on the
index page, and just start listing things.
| | 06:26 | Ranking them can give you an idea of
whether it really needs to go on the page or not.
| | 06:29 | Okay, so the first thing I'm going to take a look
at is this section right here for latest galleries.
| | 06:33 | Now, latest galleries, in terms of types
of content, it's going to be a section.
| | 06:36 | And then I have city name, which is
informative, because it's basically telling people what
| | 06:41 | city they're looking at;
| | 06:42 | the date, which is informative--when was this
gallery uploaded; a teaser image, that's basically
| | 06:48 | just decorative media.
| | 06:49 | Now, here is something that's interesting again.
| | 06:51 | Now, this is my own categorization, so you
can come up with what works for your website
| | 06:56 | or you can use some existing
schemas that are out there,
| | 06:58 | but I actually do differentiate
between media and decorative media.
| | 07:01 | And let me tell you what
the difference means to me.
| | 07:03 | A media would be like either an image or a
video that if somebody were viewing this on
| | 07:08 | a screen reader, or if somebody were just
to see the HTML and not any of the styles
| | 07:12 | applied to it, that that image
really needs to be seen.
| | 07:15 | This is a figure that's like a chart or
something like that, something that actually needs to
| | 07:20 | be part of that content.
| | 07:22 | Decorative media would be, it's an image that
represents the gallery, but it doesn't have to be there.
| | 07:28 | It's just decorative.
| | 07:30 | And that allows me a lot of times to think
about what's best served by using a background
| | 07:33 | image and what's best served by using
an actual image tag, that sort of thing.
| | 07:37 | The gallery tagline,
that's going to be informative.
| | 07:40 | Now, I'm going to go down to my site search,
down here at the bottom, and social media connect.
| | 07:46 | I actually list search as being its own type
of category. And for social media connection,
| | 07:51 | that's going to branding, so that might be
your, "like us on Facebook," "connect with us
| | 07:55 | on Twitter," that sort of thing. All right!
| | 07:57 | So now that I've got all the types of
content listed, I can actually start categorizing
| | 08:00 | that content and grouping them into silos of
content and taking a look and saying, okay,
| | 08:04 | do I have too much in this area, do I have
too little here, have I not included a category
| | 08:09 | that I need? It gives you a nice way of
sort of skimming your content without having to
| | 08:12 | get into the nuts and bolts of it.
| | 08:14 | Now, in terms of sections, this latest
galleries is just going to be unique to the page.
| | 08:19 | This is a teaser to get people to click
into the latest or the most featured galleries,
| | 08:24 | so all of those guys are
going to be unique to this page.
| | 08:26 | However, the search and the social media
connect, that's going to be on every single page, so
| | 08:31 | that needs to be site-wide.
| | 08:32 | Now, that allows me to filter the content a
little bit more and say, okay, for my entire
| | 08:37 | site, what content is site-wide, and let's
rank that content. And that really helps me
| | 08:40 | establish my basic page templates.
| | 08:43 | How should the page layout look? Where should
the content be presented that's going to consistent
| | 08:47 | all the way across the site?
| | 08:49 | Now I have to go in and think about ranking
this. Where does this content fit priority-wise?
| | 08:53 | Now, I've already got
some of the content ranked.
| | 08:55 | So when I come back in and look at the latest
galleries, it's going to be on the homepage.
| | 08:59 | It's going to let people know which
galleries have been uploaded recently.
| | 09:03 | If they are a frequent visitor to the site,
it's going to let them know if there's new galleries
| | 09:07 | available for them, that sort of thing.
| | 09:08 | So it's important content,
but it's not critical.
| | 09:11 | It's not going to help them navigate the site.
| | 09:12 | It's not going to pass along the branding of
the company, who is this, that sort of thing.
| | 09:16 | So in that sense I'm just going to go ahead
and rank that with a 2, which means that it's
| | 09:20 | very important, but it's not critical.
| | 09:22 | So it's definitely something I
want towards the top of the page.
| | 09:24 | It's definitely something that I want easily
accessible, but it's not absolutely critical
| | 09:29 | that the user be able to see it at first glance.
| | 09:32 | I'm going to get some strong disagreement
from some folks for what I'm about to do
| | 09:35 | down here for site search
and social media connect.
| | 09:38 | For both of those, I'm going
to go ahead and rank them a 3.
| | 09:40 | Now, that means that they're important,
but it means that they're not critical.
| | 09:44 | It means that they don't absolutely have to
be at the top of the page or easily accessible.
| | 09:48 | Now, I know there is going to be a lot of
disagreement with me in terms of the search,
| | 09:52 | maybe not the social media connect, but in
terms of search. Especially for mobile devices,
| | 09:56 | there's a big trend in deemphasizing
navigation and emphasizing the site search over that,
| | 10:01 | because mobile users a lot of times want to
do a search rather than look through a menu.
| | 10:05 | So you would think that that would rank a
little bit higher, but in terms of this site,
| | 10:09 | in this site alone, this site is very small.
| | 10:11 | There are only four main sections, and inside each
of those sections there might be one or two pages.
| | 10:16 | So it's very easy for people to discover what they
want simply going through a very, very simple menu.
| | 10:22 | So in my opinion, for this particular
site, search isn't quite as important.
| | 10:26 | Now, if this was a much larger site, with a
blog component and a really robust product
| | 10:32 | section, then I would probably move search a
little bit higher up in the priority level.
| | 10:36 | And that just sort of illustrates that every
single site is different and you'll really need
| | 10:40 | to carefully consider this before you start
working on mockups and layouts and wireframes.
| | 10:45 | Really start thinking about how this
content is going to interact with each other.
| | 10:48 | So this is obviously a really simple
example, but this is actually what I do.
| | 10:52 | It works for the majority
of my personal projects.
| | 10:54 | If I was working on a much larger site, or
if you guys are going to be working on sites
| | 10:58 | run by a content management system or some
collaborative process, if you guys are working
| | 11:02 | on a team together, you're probably going
to need to develop a content survey that fits
| | 11:06 | your site's format and workflow.
| | 11:08 | Regardless, I cannot stress enough how
important it is to start any responsive design by first
| | 11:14 | examining the content and then developing
a strategy for how that content is going to
| | 11:18 | work across multiple devices.
| | Collapse this transcript |
| Creating mockups| 00:00 | There's been a tremendous amount of effort
lately to find just the right mockup and prototyping
| | 00:05 | tool for building responsive designs.
| | 00:06 | I've seen a lot of people advocating
traditional programs that they normally use, like Adobe's
| | 00:11 | Fireworks, Photoshop, and the program
you are seeing here, which is Illustrator.
| | 00:15 | I've also seen a lot of nontraditional
programs like Apple's Keynote and Adobe's InDesign
| | 00:21 | that allow you to simulate responsive
features and functionalities and some animation stuff
| | 00:25 | being used a lot as well. And there is
really a growing number of online tools designed
| | 00:29 | to allow really rapid
prototyping of responsive design sites.
| | 00:33 | Now, rather than dedicate what would really
end up being an entire chapter to demoing
| | 00:38 | prototyping tools, I really want to discuss
how planning response sites requires you to
| | 00:43 | adopt maybe a slightly different
perspective and workflow on the planning a mockup phase.
| | 00:49 | So I think the best way to show this is
just to simply show you my own process.
| | 00:54 | So I have the file desolve_
mockup opened from the 01_02 folder.
| | 01:00 | Now, you'll notice this is an Illustrator file,
so if you have Illustrator, you could open
| | 01:04 | this up and follow along with me.
| | 01:05 | If you don't, you'll also notice that
there is a PDF version of the file as well.
| | 01:09 | So if you don't have Illustrator, feel free
to follow along with the PDF if you just want
| | 01:13 | to get a feel for how
the mockup is put together.
| | 01:15 | Now, before I get started with this, I want to
make it really clear that I think the prototyping
| | 01:20 | and mockup phases of workflows,
| | 01:22 | I just feel like those are
incredibly personal things.
| | 01:24 | What works for one designer or agency
isn't necessarily going to work for another.
| | 01:28 | You may even use different processes based
on which projects that you're working on and
| | 01:32 | how much interaction you need with
the client that you're designing it for.
| | 01:35 | So now I used to use Photoshop to create
all of my mockups, but once I started adopting
| | 01:40 | more of a responsive design workflow,
it really made me rethink how I was creating prototypes
| | 01:46 | and mockups. For one, I'm not really
trying anymore to create pixel-perfect mockups.
| | 01:51 | I don't find that helpful.
| | 01:52 | Now, responsive design really forces you to
design content that's going to flow and adapt
| | 01:57 | and change based on factors like screen sizes,
| | 01:59 | so designing towards one specific size is not only
restrictive, but it sets false expectations to your clients.
| | 02:06 | So I really started the designing for multiple
sizes, and that's why I start here in Illustrator,
| | 02:10 | because one of the things that this allows
me to do is you can see here I have multiple
| | 02:14 | artboards that represent target screen sizes.
| | 02:17 | So you can see at the top
three artboards right here.
| | 02:19 | I've got one that's going to represent desktops,
| | 02:21 | I got one that's going to represent tablets,
and then I have a mobile artboard as well,
| | 02:25 | and just below that I have another set.
| | 02:27 | So I can do as many sets of these as I need.
| | 02:29 | In this case, I have the top set, which is
going to represent the Home page or the index
| | 02:32 | page, and then I have a second set of
artboards that's going to represent a secondary page,
| | 02:37 | and that's typically
how I handle secondary pages.
| | 02:39 | Now I don't do mockups for
every single one of them.
| | 02:42 | What I'll do is I'll do a mockup for one, so I can
get a feel for how that page structure is going to look,
| | 02:46 | go ahead and start creating templates in
HTML for that, and then just design the rest of
| | 02:50 | them directly within the browser.
| | 02:53 | And that is a big, big change in my workflow.
| | 02:55 | So I'm spending more and more time now
designing directly within the browser and less time
| | 03:00 | in programs like Illustrator
and Fireworks. All right!
| | 03:03 | So the first thing that I do
is I put down a guide layer.
| | 03:06 | So I'm just going to start turning some of
these layers on individually so you can kind
| | 03:09 | of see how this works. But I start putting
down a guide layer, and this guide layer is
| | 03:12 | going to help represent how many columns I
want, what type of padding I'm looking for,
| | 03:17 | what type of margins, that sort of thing.
| | 03:19 | Now, I know there are lot of folks out there
that are really fond of grid layout systems
| | 03:24 | like the 960 Grid layout and some of those
other ones, and for more complex layouts I
| | 03:28 | might actually do something like that where I put
eight or twelve columns down using these guides.
| | 03:33 | But for really basic layouts like this one,
I'll usually just stick to two columns, and
| | 03:37 | you'll notice that both of the
artboards are using the same column guides.
| | 03:41 | So it's really, really simple for
me to start putting down the layout.
| | 03:45 | Now the next thing I do is I have a layer
that represents labels, and essentially what
| | 03:50 | this allows me to do is, kind of outside the
outside the artboards, I'll do some labels.
| | 03:54 | I'll do a color guide.
| | 03:55 | I'm going to zoom in on these labels so
you can see what I'm talking about here.
| | 03:58 | Essentially, I write little notes to myself.
| | 04:01 | Okay this is a desktop layout.
| | 04:02 | I'm targeting 1280.
| | 04:04 | Now, what I mean by that is I'm not saying
this should be viewed at 1280, but I'm just
| | 04:09 | saying that at 1280 screen size,
what is this going to look like?
| | 04:11 | I mean for all three of these I'm picking
sort of an optimal size, with an eye towards
| | 04:16 | the fact that it still needs to flex within
that space. And you can see here I have Max
| | 04:21 | size 1024-1280, so I'm allowing this layout
to flex within that space, and I'm going to
| | 04:26 | design it accordingly.
| | 04:27 | That also allows me to come up
here and start doing some math.
| | 04:29 | I'm not very good at it, but it helps me sort
of break down what my column layouts are going
| | 04:35 | to be, if I'm just doing a two-column layout
or single-column layout or even an eight- to
| | 04:38 | twelve-column layout.
| | 04:39 | I can start breaking down with the math for
those who are going to be to achieve the desired
| | 04:43 | padding and margins and things like that.
| | 04:45 | I'll also go ahead and put in a
color guide if I have one of those.
| | 04:48 | You can start working from assets that
I've got, develop a color guide around that.
| | 04:52 | I'll put in either the hexadecimal values or
the RGB values, or the HSL values, whichever
| | 04:57 | I'm probably going to be using within my code.
| | 04:58 | And that way I can just start copying and
pasting once I start working in my CSS, so
| | 05:03 | it's a really neat way of working.
| | 05:04 | Okay, now the next thing that I do, after
I have the labels done and the guides done,
| | 05:09 | is I go ahead and start blocking out content.
| | 05:12 | Now, if we go back to what we did in the
previous exercise, where we were talking about the
| | 05:15 | content survey, I really just start
blocking areas of content out based on priority and how
| | 05:21 | much content I have.
| | 05:22 | Again, I'm going to zoom up on the Home page
here, so you can kind of see what I'm doing here.
| | 05:26 | So I'm blocking an area for logo and branding
and thinking how much space it needs to occupy,
| | 05:31 | how much space I want my navigation to occupy,
this visual image for larger screens, that's
| | 05:36 | sort of a mission statement.
| | 05:38 | Here's the featured galleries, so how am I
going to display each of those, for what my
| | 05:42 | secondary content is, kind
of how that's going to fit.
| | 05:44 | Now if I zoom out a little bit, you can see
that I'm doing this for each one of the layouts,
| | 05:48 | and I can sort of get a feel for how the
content is going to reflow from one screen to the
| | 05:53 | next, and that's going to help make decisions
about structuring the content, about how my
| | 05:57 | HTML is going to be structured, what kind
of styles I'm going to need for that. I mean
| | 06:00 | I can really start sort of blocking
everything out at this point and getting a game plan
| | 06:04 | for how things are going to fall in. And this
allows me to do this really freed up from any visuals.
| | 06:09 | And you'll notice that I have a little section
here for this large visual image that's going
| | 06:13 | to be on the larger screen and the tablet
screens but not on the phone, and that's typically
| | 06:18 | a visual decision that I'll make. But in
this case I'm thinking I really want something
| | 06:23 | really visually striking on larger screens
because this is a website about photography,
| | 06:27 | so I kind of like to have that.
| | 06:28 | So even though I'm not concentrating on which
image I'm using here, I know that I want some
| | 06:32 | type of a statement there. And then I
can more focus on the content itself.
| | 06:36 | Okay, now after I go through this stage--and
to be quite honest with you, sometimes I do
| | 06:40 | skip this stage if I know in my head kind
of what I'm looking for, but this helps me
| | 06:44 | really put the content survey that I
did in the last exercise into practice.
| | 06:47 | But after I'm done with this one then I
actually start working on the actual design itself,
| | 06:51 | the content, and you can see I'll turn
those content blocks back on and I'm just going
| | 06:55 | to move them up to the top so you
can kind of see how this correlates.
| | 06:58 | But you can see the content blocks,
| | 07:00 | they don't really line up all that well.
| | 07:02 | It's more me just sort of saying, okay, these are
the things I want in the order that I want them.
| | 07:07 | I'm not really working too much with
visual and spatial relationships at this point.
| | 07:12 | I'm just working with where
the content is going to go.
| | 07:14 | Then once I start designing the visuals,
I just allow the visuals themselves to determine
| | 07:18 | exactly where they are going to fit within this.
| | 07:21 | Now, I know earlier I just said, hey, I don't
like doing pixel-perfect layouts, and if you
| | 07:24 | look at this, it kind of looks like
it's pixel perfect, but it's really not.
| | 07:28 | It's actually quite lazy mockup.
| | 07:30 | I'm just sort of putting things in place,
| | 07:32 | some of the elements like
the navigation elements.
| | 07:34 | Now there are some design
decisions being made at this point.
| | 07:37 | If I zoom up, for example, here on the
navigation, you can see that I really want some icons.
| | 07:43 | I've designed these icons.
| | 07:44 | I want a tagline, so I have the tagline
underneath that. And if I go to my tablet mockup, I can
| | 07:50 | look and see how that menu needs to change.
The taglines are going to go away, the relationship
| | 07:55 | of the icons are going to change.
| | 07:56 | When I get to the smaller screen, I can see that
that's even taken a bit further and the icons are larger.
| | 08:01 | Now one of the things that I like to point
out in terms of this being sort of a lazy
| | 08:05 | mockup, you'll notice that menu is not
centered, and I decided once I got in the browser,
| | 08:10 | it really looks better centered,
| | 08:11 | so I went ahead and centered it.
| | 08:12 | So there are times when you'll do something
in your mockup and you'll think to yourself
| | 08:16 | well, that looks okay, but then you get in
the browser and you are like well, that really
| | 08:19 | needs a little bit of help.
| | 08:20 | And then you can see here,
these are the secondary pages,
| | 08:22 | again, where I'm just sort of thinking about
the photo gallery, what it might need to look
| | 08:26 | like, playing around with some of the styling
options I have for some of the titles, things like that.
| | 08:30 | So this is really a chance for me to
experiment, place the content into the layout, see how
| | 08:35 | it fits, where everything is fitting,
how it looks in relation to each other, and it
| | 08:39 | really gives me sort of a starting point for
what I'm going to be doing within my browser.
| | 08:43 | Now, another thing that I wanted to point out
here, too, is that I do use this for asset generation.
| | 08:47 | So, those icons that you're seeing there,
I am actually using those to export out--
| | 08:52 | I'll create a sprite files and things like
that from those and then export them out for
| | 08:56 | use within the website.
| | 08:57 | So that's another thing I really about
Illustrator, in terms of designing web graphics, is with
| | 09:01 | the vector artwork, I can really repurpose the
content a lot easier than I can within Photoshop.
| | 09:06 | Now I still work in Photoshop. I will do
certain mockups there, and all of the raster images
| | 09:11 | you see here are of course generated there.
| | 09:13 | So there's still that relationship between
working in Illustrator and Photoshop, but
| | 09:17 | I'm pretty much using Illustrator
as my go-to mockup program of choice.
| | 09:22 | Now, that's not the most popular choice.
| | 09:24 | There are plenty of people out
there that are still using Photoshop.
| | 09:26 | There are people that are using some of the
more online tools that they feel give them
| | 09:28 | a better chance of designing and simulating that
responsive flow to the content, and that's fine.
| | 09:34 | It's just that I know kind of mentally in my
head what's going to happen with the content.
| | 09:37 | I can even make notes to myself, and this allows me to
really design it in a way that I'm visually comfortable with.
| | 09:44 | Now, I do want to point out that along with all
these steps that I've sort of outlined to you,
| | 09:48 | I also, usually in parallel, will design how the user
experiences is going to change based on screen size.
| | 09:54 | To give you an example--let me zoom up on that
so you guys can see that a little bit better--
| | 09:58 | here we have this Archive galleries menu
on the large screen, but you'll notice that once
| | 10:02 | we get to the small screens I'm
representing that with a dropdown menu.
| | 10:04 | So I'm thinking about user experience at this
point too. What's going to be better for people
| | 10:08 | on small screens? How is that going to work?
| | 10:10 | The user experience side of it deserves a
longer discussion, so I'm going to tackle
| | 10:13 | that in our next exercise.
| | 10:15 | But before we move on to that, I do want to
reinforce the fact that this is simply my workflow.
| | 10:20 | It might work for you and it might not.
| | 10:22 | My advice is to take from it what you find useful
and then go ahead and adopt that for your own purposes.
| | 10:28 | I'll also be adding some additional
prototyping and wireframing tools for you to look at in
| | 10:32 | my "Additional resource" movie at the end of the
course, so be sure to look out for that as well.
| | 10:37 |
| | Collapse this transcript |
| Planning responsive UX| 00:00 | Planning a responsive website is more
than just designing for mobile screen sizes.
| | 00:04 | Now, you are going to have to think about
how visitors will use the site and what their
| | 00:08 | expectations are across
multiple screen sizes and devices.
| | 00:12 | In this exercise, I am going to return to the
mockup that we were just looking at and talk
| | 00:16 | about my process for exploring the
user experience across multiple devices.
| | 00:20 | So, again, I'm working in desolve_mockup.ai,
but this time I am working on the one that
| | 00:26 | can be found in the 01_03 folder.
| | 00:29 | There is also a PDF version of it in there
as well, but you won't be able to do some
| | 00:33 | of things that we're going to working with.
| | 00:35 | So, as I mentioned in the previous exercise,
a lot of the step that you are going to see
| | 00:39 | me doing here I'll do in
parallel as I'm designing it.
| | 00:42 | I don't do this in a two-step process.
As I'm working on the visual aspect of the design,
| | 00:47 | I'll often leave callouts or notes to myself,
or put some symbols on the page that sort
| | 00:51 | of explore the functionality of how something
should behave or how people can interact with it.
| | 00:56 | So, I have got a layer at the very
top of my layers called UX callouts.
| | 00:59 | I am just going to turn that on.
| | 01:01 | Now I have got some existing ones in place.
Just to give you an idea of what these do,
| | 01:05 | I am going to zoom up on a couple this here.
| | 01:08 | And this is on the tablet version of the
homepage. And you can see I just have a little callout
| | 01:11 | here that says, "Use a smaller
version as background graphic."
| | 01:14 | So, rather than making somebody on the smaller
screen downloads the big version of it, create
| | 01:18 | a second version of it that is smaller.
| | 01:20 | For example, here I'm wanting to reposition
the copy next to the image is going to require
| | 01:24 | careful thought about the
structure of these element.
| | 01:26 | When I am designing something--I visually
say, well, it fits better like this, but then
| | 01:30 | when I compare these, I am thinking, okay,
how am I going to structure that HTML, how
| | 01:34 | is this CSS going to be written?
| | 01:36 | So, writing a note to myself there to let
myself know, hey, this is going to require
| | 01:39 | a little extra effort on your part.
And I have got just a couple of callouts.
| | 01:44 | Now, I'm not always just doing callouts.
Sometimes I am simulating interactivity or a widget,
| | 01:49 | like an accordion widget,
or tabs and things like that.
| | 01:51 | I don't really have any of those on the homepage,
so I don't really have anything to show you there.
| | 01:56 | But I am going to scroll down to the
second set of pages down here, and we're going to
| | 02:02 | add some callouts on our own here. And I am
just going to show you how I might talk about
| | 02:07 | how an application or an interactive element should
behave and that what its behavior is going to be like.
| | 02:13 | All right, now the first thing that you'll
probably notice is that there are some weird
| | 02:16 | text going on here for Philadelphia,
but not here on the mobile one.
| | 02:21 | And I would like to do something kind of fun
with the text for each city gallery. So for
| | 02:26 | Philadelphia, you know seeing at its history,
I have got an off-blue, and a red, and a white
| | 02:32 | version of the text, and I
am sort of offsetting them.
| | 02:34 | I'll probably do something a little bit
differently in the browser. As a matter of fact, I will
| | 02:37 | spare you the suspense and tell you I will do
something a little different in the browser.
| | 02:41 | But this is the general idea.
| | 02:42 | So, what I am going to doing is I am going
to go over to my symbol libraries, and I have
| | 02:46 | a custom symbol library that I've created
called Touch, and I highly recommend that you
| | 02:51 | spend some time, if Illustrator is your tool
of choice or Fireworks is your tool of choice--
| | 02:56 | it has symbol libraries as well--
| | 02:58 | going and creating a separate symbol library
that has all of the callout symbols and interactive
| | 03:03 | elements in it that you might find yourself
using from time to time. It just makes life so
| | 03:07 | much easier when you go start placing these
things on the page. You don't have to worry about
| | 03:10 | copying and pasting from other documents;
they are just in a symbol library. Okay.
| | 03:13 | So, here I am just going to grab this
callout and drag it to the page. And I want to make
| | 03:19 | sure I am dragging that to my UX callout layer,
| | 03:21 | so let me go ahead and lock
all these other layers down.
| | 03:23 | I have a bad habit of doing that. As soon as you
select something on a page, it goes right to that layer.
| | 03:29 | Okay. Now because this is a symbol, if I went ahead
and edited this, it would change it everywhere.
| | 03:34 | I don't need to do that, so I am going
to get rid of my Symbols palette and I am
| | 03:36 | going to decouple that. And right here I am
just going to mention, I'll just type in the
| | 03:41 | text a little note to myself.
| | 03:42 | I am just going to say the "Lettering effect
will be for large and tablet size screens
| | 03:53 | only." And that might effect the
scripting that I do for that lettering effect.
| | 03:59 | It might have to change
the styling that I do for it.
| | 04:01 | It might change how I load external resources
if I need anything to affect that. It's just giving
| | 04:06 | myself a little heads-up within the mockup
that when I start planning how the site is
| | 04:10 | going to be structured and coded that that is
definitely something that I need to keep in mind.
| | 04:14 | Now, just below that, I have an art gallery
and you're going to notice that this gallery,
| | 04:18 | you know, it's not big--you can
see it's only got six images in it.
| | 04:21 | So, what I would like to do here is do
some type of modal window so that if somebody
| | 04:25 | clicked on one of these images, they could get a
larger, maybe even a full-screen version of it
| | 04:29 | that they could take a closer look at.
| | 04:30 | So, what I am going to do is I'll go back
to Touch library, and I am just going to drag
| | 04:34 | a symbol for a modal window to the stage.
And then I am just going to increase the size
| | 04:40 | of that. And you can even do things like
transparency. If you really wanted to keep seeing underneath
| | 04:45 | it, you could take the
Transparency to, say, 90% or something.
| | 04:48 | It's totally up to how
you would want to do that.
| | 04:51 | And then I'll put another callout to the
right of that. And then again, I am just going to
| | 04:55 | decouple that symbol so I can
write in without editing the other ones.
| | 04:59 | And I'll just go in, and in this one I am just
going to say something like, "The gallery should
| | 05:05 | be smaller images than launch modal window."
| | 05:12 | So, I'm thinking through the behavior, kind
of how I want this to react, how I want this
| | 05:17 | to be scripted and put together, that sort
of thing. And then for the smaller screens,
| | 05:21 | it has its own unique considerations.
| | 05:23 | So, I'll take another modal window to the
screen, and because it's going to affect both
| | 05:28 | of these, I am just going to make sure that
it's over both screens. And this is just sort
| | 05:32 | of a way for me to say, hey, this
is going to apply to both of these.
| | 05:36 | And then I'll take another callout.
And I might even size that up just to tad bit, break its
| | 05:45 | link too. And then inside of that, I would
want to come in and say, "For smaller screens
| | 05:51 | modal gallery should support swipe events."
| | 05:59 | And the reason I say that is because most of
the users, once they open up a photo gallery
| | 06:04 | in sort of like a full-screen window like that,
what they expect is to be able to swipe back and forth.
| | 06:09 | Now, I also like visually indicating that, so
I have a little symbol that indicates swipe,
| | 06:14 | and I am just going to place
that on the page and increase that.
| | 06:17 | Now, if you are wondering about these touch
symbols, I did not create these. Towards the
| | 06:21 | end of the course, in the "Additional resources,"
| | 06:24 | I am going to show you guys where you can
go find some really nice open-source and free
| | 06:28 | symbol libraries for touch
events and things like that.
| | 06:30 | And this is one of those that I pulled from
one of those galleries. And in my touch thing,
| | 06:33 | I have just got a ton of these, indicating
touch and holds, double taps, pinches, and zooms.
| | 06:38 | That's really important when you're doing
responsive designs, because a lot of times
| | 06:41 | you're going to have to indicate that type
of functionality, and having a symbol that
| | 06:45 | allows you do that means that when you look
at a mockup or if a team member looks through
| | 06:49 | your mockups, they can very quickly
see kind of what you have in mind:
| | 06:52 | "Oh, this is going to open up a gallery window, and you
want people to be able to swipe through the images, okay."
| | 06:57 | Now, how detailed you get with this
particular stage of doing these types of responsive UX
| | 07:02 | callouts and symbols is really, it's just
up to you. Or it might even be driven by the
| | 07:07 | amount of collaboration that you are
doing with either your colleagues or clients.
| | 07:10 | Now, I encourage you to come up with
graphics and symbol standards that are going to add
| | 07:15 | consistent meaning to your wireframes and
mockups, and those will help you work through
| | 07:19 | the very tricky problem of addressing
user experience across multiple devices.
| | Collapse this transcript |
| Structuring page regions| 00:00 | Once you've planned your page content and
worked through the initial design, it's time
| | 00:04 | to turn your attention to your
site's initial page structure.
| | 00:07 | Now, I always do the exact same workflow.
I'll start with the basic page container elements,
| | 00:14 | and then I begin to
structure the content inside of them.
| | 00:17 | Now, this allows me to focus on the
semantics of the code and ensure that it's going to
| | 00:20 | work the way that I expect it
to across multiple devices.
| | 00:24 | So you might be wondering, if I'm talking
about structure and code, why in the world
| | 00:27 | am I still in Illustrator?
| | 00:28 | Well, I want to show you guys sort of how I
plan the structure and code, and then we'll actually
| | 00:33 | go and structure it.
| | 00:34 | So here I am in the dissolve_mockup, found
in the 01_04 folder, and I've got another
| | 00:40 | layer over here now called page structure.
And I'm just going to turn this on, just kind
| | 00:43 | of show you how I do this.
| | 00:45 | What I'll do is I just is use solid
shapes to represent containing elements.
| | 00:49 | And I really look at the content on the
page and start thinking about how that content
| | 00:52 | needs to be, or should be structured.
| | 00:54 | For example, you'll notice in the site, the
header here and the nav are separate elements.
| | 00:59 | I certainly could have
placed the nav inside the header,
| | 01:02 | but in terms of how I'm going to repurpose
this navigation, I thought that it would be
| | 01:06 | a lot easier and a lot cleaner to keep the
header and the nav separate from each other.
| | 01:10 | I then start thinking about how
these elements all relate to each other.
| | 01:14 | And in terms of the article, which is going
to be the main content; and the aside, which
| | 01:18 | is secondary content; and this mission statement up
here, which is you know really just a sort of a banner,
| | 01:24 | those all three almost relate to each other
so it makes sense to contain them inside of
| | 01:28 | another element. In this
case I'm going to use a section.
| | 01:31 | So I'm also taking a look at the different
elements that I'll be using when I structure
| | 01:35 | my page as well. And at the very
bottom of course I've got a page footer.
| | 01:38 | So when I'm looking at this, I'm really
thinking about, what's the simpler structure I can use
| | 01:42 | and still get the layout that I need
and still have the flexibility that I want.
| | 01:46 | That's one of the things that you really,
really need to plan very carefully at this
| | 01:49 | stage, while you're still doing your
wireframing and your mockups, because we're still at the
| | 01:54 | point where source order matters.
| | 01:56 | We can't really use, with any measure of
confidence, to grid layout system in CSS or Flexbox yet,
| | 02:02 | so we're really you know stuck with still
doing float-based layouts and if we do that,
| | 02:06 | then source order matters.
| | 02:07 | So, depending about how I want content to reflow
from one screen size to the next or one device
| | 02:12 | to the next, I really need to
start thinking about that source order.
| | 02:15 | So once I've mapped this out, I can then
start coding it, and I'm going to switch over to
| | 02:19 | my code editor, which is Dreamweaver.
| | 02:22 | And here I have the undex.htm
file open from the 01_04 directory.
| | 02:27 | Now, I told you guys you do not need to
use Dreamweaver, and that is absolutely true.
| | 02:32 | If you are using Dreamweaver and you're
wondering, how do you get it to where it's just showing
| | 02:36 | the files you are working on?
| | 02:38 | Essentially, I have defined one site and
then every single time I work on an exercise I
| | 02:43 | redefine local root site to the exercise folder, so
that's really all I'm doing as far as managing it.
| | 02:49 | Okay, and you're not using Dreamweaver of course
that doesn't mean anything to you and you don't care.
| | 02:53 | All right, so the first thing I am going
to do is go into the body, and I'm just going
| | 02:56 | to think back to the page structure that I
had sort of determined through my mockup,
| | 03:00 | and the very first thing was the header.
| | 03:02 | So I'm going to go ahead and create a
header element, so I'm using HTML5 elements.
| | 03:05 | I'm going to go ahead and give it an id,
and that id is going to be pageHeader.
| | 03:10 | Now this is a personal choice.
| | 03:11 | I know a lot of people have
gotten away from using ids.
| | 03:13 | I still use them because they're unique
identifiers, especially for the top-level page element,
| | 03:17 | so I really like using them.
| | 03:19 | The next thing I going to do is use a role,
and the role I'm going to use here is banner.
| | 03:23 | And those roles help with accessibility.
| | 03:25 | It helps the content to be a little bit more
semantic and it's going to help with accessibility
| | 03:29 | in the long run as well. And since I'm done
with that, I'll close the header tag.
| | 03:32 | Next, I want a nav
element for my page navigation.
| | 03:35 | I'm going to go ahead and give that an id of mainNav,
and then I'm going to give it a role of navigation
| | 03:42 | as well. So we're setting those
roles as well for each of these.
| | 03:48 | And the next thing I'm going to do is do a
section and remember, the section is going
| | 03:51 | to be my main content, so I'm going to give
an id of content and I'm going to give that
| | 03:55 | a role of main. Currently, I've read
there is a lot of talk in HTML in terms of adding
| | 04:01 | the main element itself in addition to
section and article, and I'm a huge fan of that;
| | 04:06 | I hope that happens.
| | 04:07 | The next thing I'm going to do
is I'm going to use a div tag.
| | 04:10 | Now, you'll notice that for most of what
I'm doing here--and this one is going to have
| | 04:13 | a class of mission because it's
going to be the mission statement.
| | 04:16 | You'll notice that most of what I'm
doing here are HTML5 semantic elements,
| | 04:21 | but one of the things that I really try to do
is to create a really clean document outline
| | 04:26 | so that if there is any type of a reader or
any type of feed out there, like the Google
| | 04:31 | TOC that it gives you, that sort of thing,
| | 04:33 | I want it to be really clean and readable.
And the mission isn't really a section in content.
| | 04:38 | It doesn't really fall to that level of
importance, so in that terms, I'm using a div tag for that
| | 04:42 | instead of one that are more
semantic sectioning elements.
| | 04:45 | Okay, right after that, I'm going to go ahead
and do an article. And this article is going
| | 04:50 | to have the id of latest.
| | 04:52 | This is my latest galleries.
And then just after that is an aside.
| | 04:58 | And the aside isn't going to have an id
because its just related to the article content, but
| | 05:03 | I'm going to give it a role, and that role
is going to be complementary. So I don't give
| | 05:07 | everything ids. And you'll notice also that
the div, the article, and the aside are all
| | 05:13 | still within that section.
| | 05:15 | Now, breaking outside of that section,
I'm going to go down and do my footer.
| | 05:21 | And the footer is going to
have an id of pageFooter,
| | 05:23 | sort of a top-level containing element,
and its role is going to be contentinfo.
| | 05:29 | I'll go ahead and close the tag and then save it.
| | 05:34 | One thing that I want to point out you guys
is if you've watched any of my other titles,
| | 05:37 | I really stress creating very
clean, very semantically proper HTML.
| | 05:42 | I stress that all most to the point of, I'm
sure, from time to time people go, okay, yeah,
| | 05:47 | we get it, well-structured HTML.
| | 05:49 | But the thing that I really like to point
out in terms of responsive design is that
| | 05:53 | later on we're going to be using media quires
to filter which styles are going to be applied,
| | 05:56 | later on we're going to be running some jQuery
that's going to apply different functionality
| | 06:00 | based on screen size and
devices and thing like that.
| | 06:03 | But when it all boils down to it, if any of
that fails, you're only left with your HTML.
| | 06:08 | So if you think about what the first absence
of the media query or the absence of JavaScript,
| | 06:12 | but the first thing, the first responsive design
that you are making is this one: it's your code.
| | 06:18 | So source order matters, how well it is structured
matters, because this code can flow almost anywhere--
| | 06:24 | anyplace that it can read HTML. So when you
think about responsive design, the HTML portion
| | 06:28 | of it is often really dramatically overlooked.
| | 06:30 | It's a very important part of creating that
responsive content that flows from one device to another.
| | 06:35 | All right, so just remember, careful planning
of the page structure, especially these main
| | 06:40 | content regions that we were just working
on will, really help prevent problems later
| | 06:44 | on down the road.
| | Collapse this transcript |
| Structuring content for multiple devices| 00:00 | One of the things that responsive design
really does is it forces you to carefully consider
| | 00:06 | just how your content
regions should be structured.
| | 00:09 | Our existing requirements on float-based layouts
means that source order and the element structure
| | 00:15 | will directly affect how you're going to
be able to repurpose content across multiple
| | 00:19 | screens and devices.
| | 00:20 | So, I want to take a look at how would you
go about planning your designs and how that
| | 00:25 | can directly affect how you are
going to be structuring your content.
| | 00:28 | Now, I've got the mockup opened again, but
we're not really going to be doing anything
| | 00:32 | with the mockup per se, so don't feel
like you have to open this one up as well; you
| | 00:35 | can just kind of check out what I am doing here.
| | 00:36 | I want to draw your attention to two areas:
one in the larger desktop version, and that
| | 00:42 | is the featured gallery section over here
with Philadelphia and the photo and the Join
| | 00:46 | us as we visit the city of brotherly love,
and then the same area over here on tablet
| | 00:52 | devices, or the tablet layout if you will.
| | 00:54 | Now, you look at it and you could tell it's
using the same content, and you can see that
| | 00:59 | the structure of that content anyway is being
more or less repeated underneath it.
| | 01:02 | We've got a gallery for Chicago, gallery for New
York, and they're really following the same
| | 01:06 | structure each time out.
| | 01:07 | So, that's a clue right there to me that
obviously I am going to be using some type of containing
| | 01:12 | element for each one of these galleries.
| | 01:13 | It could be a section, it could be an article, it could
be a div tag, whatever I really wanted to use for that.
| | 01:19 | But when I start thinking about the interior
structure of that, then I'm presented with some issues.
| | 01:25 | Now, the first thing I need to think about
is this teaser image being displayed for both
| | 01:29 | of these galleries.
| | 01:31 | It looks like the same
image, but it's really not.
| | 01:34 | It's a smaller version of it, and for
responsive design, it's actually better if I can use
| | 01:39 | the smaller images for tablets because it's
less resources, or smaller resources anyway,
| | 01:43 | smaller file sizes to download.
| | 01:45 | So, that's something I need to consider.
| | 01:47 | The other thing I want to consider: Is this
going to be an actual image or is it decorative?
| | 01:53 | And when I look at this and I think about
how a screen reader might read that, or if
| | 01:57 | somebody is just getting the information from
the site, do they really need to see that photo?
| | 02:01 | And the answer is probably no.
| | 02:03 | So, that tells me that this is a decorative
image--or at least I made that decision that
| | 02:07 | this is going to be a decorative image.
| | 02:09 | That means it is going to be the
background image for an element.
| | 02:12 | And then I started thinking about the rest of the
structure. We have the name of city--Philadelphia
| | 02:16 | in this case, so that's going to be a heading.
| | 02:18 | Then we have a date, which indicates the date that this
is published, so I'll need to indicate that that's a publish date.
| | 02:23 | That's another element.
| | 02:24 | And then we have sort of a tagline or a
teaser line if you will, "Join us as we visit the
| | 02:29 | city of brotherly love," so that's
a third element that's in place.
| | 02:31 | So, I need to think about how all of those
elements are going to be dealt with, and I
| | 02:34 | need to think about how that
image is going to be displayed.
| | 02:37 | Now, because this is all going to be wrapped in
a parent container, a section, or a div tag,
| | 02:42 | or something like that, I could certainly
make that image a background graphic for that
| | 02:46 | and then just use sort of padding and
positioning of the background image to get it where I
| | 02:51 | need, so I can kind of do it that way.
| | 02:53 | But I also have to consider user experience.
| | 02:55 | If you're going to launch this gallery,
are you likely to only click the word Philadelphia,
| | 03:00 | or you are likely to try to click that image?
| | 03:02 | I guarantee you that most people are going to want
to click or touch that image to open up the gallery.
| | 03:07 | So, it needs to be clickable as well.
| | 03:08 | So, if I did the entire background then I
would need to use a block level link, and
| | 03:13 | that leads to some problems in certain browsers.
I try to stay away from them if I don't need to use them.
| | 03:18 | So, I might think of another way to do that.
| | 03:21 | We're about to go and structure this.
And the reason that I spent so much time looking
| | 03:25 | at the mockup and talking through my
thought process is I want to give you some idea of
| | 03:30 | some of the things that you'll need to start
thinking about when you go from, say, desktop
| | 03:35 | to tablet to mobile, and how that's going
to affect the structure of your code, how
| | 03:40 | that's going to affect when you decide whether
an image is going to go in or whether it
| | 03:43 | be a background graphic, what the
consistency of the code is going to be like, because in
| | 03:48 | both the mobile and the desktop version, really those
elements are sort of stacked one on top of each other.
| | 03:53 | The heading and the date are floated over
here, but other than that, they're kind of
| | 03:56 | stacked on top. Whereas here, we can see
that the image is actually floated to the right
| | 04:01 | of the text, and that creates a really
unique structural problem, for us in terms of how,
| | 04:06 | do we do that in a way that's going to allow
us to float everything or position everything
| | 04:11 | the way we want it to in both layouts. Okay.
| | 04:14 | So, I am going to switch over to the
index.htm file, which is found in the 01_05 directory.
| | 04:21 | And we're just going to
structure that one section.
| | 04:23 | You'll notice that there's quite a bit
more to the page here than we left it in our last
| | 04:27 | exercise, and that's because I've pretty much
structured everything on the page except for those galleries.
| | 04:33 | So I am going to continue to kind of scroll
down until I find this article here that it
| | 04:38 | has a headline in it that
says, "Our latest galleries."
| | 04:40 | So this is where our
featured galleries are going to go,
| | 04:42 | so right underneath that heading, I am
going to create a blank line. And I mentioned that
| | 04:46 | we're going to need the containing element
for each one of the featured galleries, and
| | 04:50 | we could use a section or we could use an
article. Since I don't see them standing alone
| | 04:54 | on their own elsewhere,
I tend to use a section for those.
| | 04:57 | So, I am going to do a section, and I am going to
give it a class of philly, since the Philadelphia
| | 05:02 | Gallery. And then I'll go
ahead and close that section.
| | 05:06 | So, this is the containing element that's
going to wrap around--each one of those
| | 05:10 | featured galleries will have its own section.
| | 05:12 | After that, I am going to do a
heading, and so I am going to do an h2.
| | 05:16 | Since I've already used an h1 in the article
itself, I will use an h2 to be the main heading
| | 05:21 | within the sections. That gives it sort of a
hierarchy, in terms of the importance of it anyway.
| | 05:25 | I am just going to type in
Philadelphia and close the h2.
| | 05:31 | Now, I do want that to be a link.
| | 05:33 | I do want people to be able to click on
the heading and jump to the gallery itself,
| | 05:36 | so I am going to take the word Philadelphia
and then we'll wrap that in a link tag.
| | 05:40 | I am going to give it an href
attribute of philadelphia.htm.
| | 05:43 | That's where we're going obviously, and I'll
give it a title of the Philadelphia gallery.
| | 05:51 | So, after that h2, I need to think about
what comes next, and if I go back to my mockup,
| | 05:58 | you take a look over at the mobile,
after the headline we have our date.
| | 06:01 | If we look at the tablet, after the headline
Philadelphia, we have our date, all of the
| | 06:05 | images over there on the right-hand side,
and in the desktop version of it right after
| | 06:10 | the heading, if you go to
the right, there is the date,
| | 06:12 | so the date is a logical choice to be next.
| | 06:15 | So what I am going to do is after the h2, I
am going to go ahead and create a paragraph.
| | 06:18 | I am going to go ahead and give it a class
of pubdate, for publication date. And then
| | 06:24 | inside that, I am just going to do
August 2011. Close my paragraph.
| | 06:30 | Now, I want to make this information as semantic as
possible, and this actually is a publication date,
| | 06:37 | so it would be really nice if any type of
robots or machines that are scanning through
| | 06:41 | this document is able to pull
these publication dates out of here.
| | 06:44 | So, what I am going to do is I am going to
wrap this in a new HTML5 element called the time
| | 06:48 | element, and there has been a lot of
controversy surrounding time. It was pulled out.
| | 06:52 | It was changed, reformatted.
| | 06:53 | It's back now, and everything seems to be okay.
| | 06:55 | So I am going to use the time element, and I
am going give it an attribute of datetime.
| | 06:59 | And the datetime, I am going
to pass into that 2011-08-16.
| | 07:07 | And that's just a simple year-month
date format, and I will close that.
| | 07:12 | So it just wraps around
that text. You won't see it.
| | 07:14 | It doesn't affect rendering, but it does make it a
little bit more machine-readable, a little bit more semantic.
| | 07:19 | And then finally, at least in terms of the
initial structure here, I am going to do another
| | 07:22 | paragraph, and inside that paragraph I'll
give that a class of caption, because it's
| | 07:26 | going to be the caption for the gallery.
| | 07:29 | And inside of that paragraph, I am going to type
in, "Join us as we visit the city of brotherly love."
| | 07:37 | In terms of information and semantics, that's
all we really need for this, but there's one
| | 07:41 | big elephant in the room and
that would be the image itself.
| | 07:44 | Now, I mentioned earlier that we could take
one of these elements, like the heading or
| | 07:48 | the section, and make the image
a background graphic of that,
| | 07:52 | but we have that problem of, in the layout,
wanting to not only stack a content on top
| | 07:57 | of it and below it, but also beside it
based upon which screen size we're looking at it
| | 08:02 | on, and that's going to cause us to really
think about how we're going to structure this.
| | 08:06 | And if I look again over at my mockup,
it seems that if you're going to really rank
| | 08:11 | them in the order that they appear,
we have heading, publication date, image.
| | 08:16 | If I look over here at mobile,
we have heading, publication date, image.
| | 08:20 | If I look over here, this is a little
different; we have heading, we have publication date,
| | 08:26 | we kind of have an image, and then we have that.
| | 08:28 | But you could also make the case that this one is
going more a heading, publication date, caption, and image.
| | 08:33 | But it really just depends on how we're
going to structure this, but it seems to me that
| | 08:37 | at least--at the very least--the heading and the
publication date need to come before the image.
| | 08:41 | So, what I am going to do is, right after the
publication date, I am going to go ahead and create a div.
| | 08:47 | Now, I know this is nonsemantic. I'm placing
in an element that doesn't really need to be
| | 08:52 | there, but occasionally for design,
especially one like this that's really going to change
| | 08:56 | based upon the screen size,
you may have to do that.
| | 08:59 | So sometimes you have to make the
decision to place in a nonsemantic element.
| | 09:02 | So in this case, I am going to do a div.
| | 09:04 | I am going to go ahead and give it class of
Preview, because it's the preview image for
| | 09:07 | that gallery. And then inside that, I'm
going to place a link, because remember, we want
| | 09:11 | this image to be clickable. So I am going
to give it an href of philadelphia.htm, so
| | 09:18 | the exact same link
that we were using before.
| | 09:21 | I will go ahead and give that a
title of Philadelphia gallery.
| | 09:26 | So we're just mirroring
what we did just above that.
| | 09:30 | And then, we'll close the
link, and we'll close the div.
| | 09:33 | So it's not going to have any actual content.
| | 09:35 | It's just going to have the link and a div
tag, and then through CSS, we'll place the
| | 09:38 | background image inside of that and then define
the dimensions of the link in the clickable area.
| | 09:43 | And we'll be able to do that for each of our
layouts: for the desktop, for the tablet, and
| | 09:46 | for the mobile layout.
| | 09:48 | So, I will go ahead and save that.
| | 09:49 | Now, of course the Philadelphia gallery
wasn't the only one, so I would advise you to go
| | 09:54 | ahead and open up the finished_files folder
inside the 01_05 directory, open up the index there.
| | 10:00 | And if you scroll down, you'll find not only
the philly gallery that we just structured,
| | 10:03 | but also the one for the Chicago,
New York City galleries as well.
| | 10:07 | So take a look at those, kind of see how the
structure mirrors itself and repeats itself.
| | 10:11 | And feel free at this point to pause the
video and go ahead and structure those yourself
| | 10:15 | or copy and paste the code, get a really
good feel for exactly how each of these featured
| | 10:19 | galleries is going to be structured.
| | 10:21 | Now, just because I did it that way doesn't mean
that that is the choices that you would have made
| | 10:25 | if you were looking at the same mockup and
structuring it as well. I mean, any project
| | 10:28 | you work on, how you choose to structure the
code is largely a result of your own personal
| | 10:32 | preferences within whatever
commitment you have to standards and semantics.
| | 10:36 | However, when you're building a responsive
site, one of the things that I really want
| | 10:40 | to emphasize to you is that you're often
going to need to take into consideration how the
| | 10:45 | content reacts to changing screen sizes, and
that's going to help you make the final determination
| | 10:50 | of how elements should be
structured within the page.
| | Collapse this transcript |
|
|
2. Building Responsive LayoutsControlling the viewport| 00:00 | In this chapter we are going to explore the
basics of creating responsive layouts.
| | 00:04 | Making sure that you have a solid layout across
multiple screen sizes is one of the core foundational
| | 00:09 | aspects of any responsive site.
| | 00:12 | Before we get too deep into the techniques
involved with creating multiple layouts, we
| | 00:16 | first need to explore how to
control the viewport on mobile devices.
| | 00:20 | Now, mobile devices have a default viewport
size that determines how websites are displayed
| | 00:25 | within their browsers.
| | 00:26 | For the most part, this default viewport is
set to actually a much higher value than the
| | 00:32 | actual screen size. This allows users to see the
entire site, although at a dramatically scaled-down size
| | 00:38 | so then they can zoom and pinch and
move around where they want to go.
| | 00:41 | Now by controlling the viewport, we can
also override those defaults and make sure that
| | 00:47 | the site is being
displayed at the size that we want.
| | 00:49 | So in order to do this, I am going to open
up the index.htm file in the 02_01 folder
| | 00:56 | found in the Chapter2 folder within the exercise
files. And this is extremely simple to do. Very, very easy.
| | 01:02 | So, just right up here at the very top, after
the title and before the link to my external
| | 01:07 | style sheet, I am just going to create a new
tag here, and we are going to use a meta tag
| | 01:12 | with a name of viewport.
| | 01:13 | And this is sometimes
referred to as the meta viewport tag.
| | 01:17 | So, it's meta name="viewport." Now, this is the most
common way of dealing with controlling the viewport.
| | 01:23 | There is a new CSS rule called
@viewport that is gaining support across devices,
| | 01:29 | so eventually, if we want to do this
inline within our CSS, we can. But right now the
| | 01:34 | primary way of controlling the viewport across
devices is to use the meta viewport tag. Okay.
| | 01:40 | Now, the next thing that we need to do is
we need to give it a content attribute.
| | 01:44 | And it's in the content attribute
where we really the most of the work here.
| | 01:49 | Now, we are going to use width,
so I am going to give it a width=.
| | 01:53 | Now here, you can pass along
a specific size if you wanted to.
| | 01:56 | So, if you are designing an application, for
example, so that it was exactly the size that
| | 02:01 | you wanted to, at 380 pixels, then
you could make the width=380 pixels.
| | 02:06 | That's not really going to work for us in
terms of responsive designs, because we really
| | 02:10 | want our design to be able to flex.
| | 02:12 | All we really want is we want the mobile
browser to not display its viewport at, say 980 pixels,
| | 02:18 | which causes the whole thing to get sort
shrunk down within the available 320 to 400 pixels
| | 02:24 | that to your mobile phone might have.
| | 02:26 | So here, I am going to give use a
value of instead of a specific pixel value,
| | 02:32 | I am going to tell the width to be equal
to the device width, and that's device-width.
| | 02:38 | Now, what that does for me is it goes ahead
and says okay, to the devices, it says okay.
| | 02:43 | What is your actual screen width?
| | 02:45 | Not what you're reporting your
viewport at, what is your actual screen width?
| | 02:48 | Oh, you only have 320 pixels? Okay, fine.
Then that's what the viewport is.
| | 02:52 | So, it syncs up the width of that sort of
imaginary viewport to the actual size of the screen.
| | 02:57 | Now, if you're having trouble visualizing
the viewport being different than the actual
| | 03:02 | screen size, just open up your browser in
your laptop or whatever computer you're using
| | 03:06 | right now and then go
resize the browser window.
| | 03:09 | That's the viewport.
| | 03:10 | So, on the desktop, we are typically making
that viewport smaller than their actual screen
| | 03:15 | size, but on the mobile devices, they
take that viewport and make it bigger.
| | 03:19 | They actually make the viewport a little bit
larger, and then they sort of shrink it down
| | 03:22 | within the screen width. All right!
| | 03:24 | So, by saying width=device width, we are
forcing the viewport and the screen size itself to
| | 03:29 | be in sync with each other.
Now you can take this a little bit further too.
| | 03:32 | I can use a comma-separated
list of values here for content.
| | 03:35 | So, after width=device-width, I can also
say something like initial-scale=1.0. And this
| | 03:43 | is actually very common; you'll see this
a lot when you see the meta viewport tag.
| | 03:47 | Essentially what this does is it says okay,
make the initial scale at 100%, because a
| | 03:51 | lot of times when the viewport is much larger
than the screen width, they use scaling factor
| | 03:56 | to shrink it down so that it
does fit within the viewport
| | 03:59 | so you can still see the entire site, even
though it is zoomed way out. And this takes
| | 04:03 | care of that as well.
| | 04:04 | Now there is one thing that
I to want to mention here.
| | 04:06 | If you force the viewport to be the same width
as the device-width, then initial-scale factor
| | 04:11 | is already taken care of.
| | 04:13 | So a lot of people are dropping that initial-scale
declaration and they're just saying content-width=device-width,
| | 04:17 | because it's really kind of overkill. But it's
not hurting anything to leave it in, so feel
| | 04:23 | free to go ahead and
leave that in. That's fine.
| | 04:26 | Now all I've to here is remember to close my tag;
that's kind of important. And then I'll save this.
| | 04:32 | Now, it is extremely easy to overlook adding a
meta viewport tag to your responsive designs,
| | 04:38 | but it's a really important part of any
responsive design project that you work on.
| | 04:43 | Now, without it, you are going to find that
all of your carefully crafted mobile and tablet
| | 04:48 | layouts simply just don't look or
perform the way that you'd expect them to.
| | 04:52 | So, just like we did here, make sure that
adding them is the very first step in building
| | 04:57 | any responsive layout.
| | Collapse this transcript |
| Defining default styles| 00:00 | If you sneaked a peek at the finished project,
you may have noticed that the final CSS file
| | 00:05 | has over 1500 lines of code in it.
| | 00:08 | I know that sounds like a lot, but once you
realize that that's actually three separate
| | 00:13 | layouts, as well as all the site's
global styles, it's really not that bad.
| | 00:17 | It is not even minified;
so yeah, it's not too bad.
| | 00:20 | Still, what that means is we are not really
going to be able to write every single style
| | 00:25 | or line of code in this course.
| | 00:26 | It would just simply take too long.
| | 00:28 | So instead, I want to focus on the theory
and the approach that I use when building
| | 00:33 | a responsive layout.
| | 00:34 | Now that means that we are going to be
constructing specific parts of the layout while focusing
| | 00:39 | on the overall concept.
| | 00:41 | Now, the first concept I want to cover is the
idea of identifying and writing global styles.
| | 00:46 | I am going to switch back over to
our mockup here for just a second.
| | 00:50 | Now, how you do this is going to largely depend
on your own individual workflow, but the basic
| | 00:55 | concept of it goes like this.
| | 00:57 | Before I start working on individual layouts
for different screen sizes, I first identify
| | 01:03 | common styling requirements for each of
the layouts and then I'll write those styles
| | 01:07 | in a way that allows me to
apply them to all layouts.
| | 01:11 | So here, looking at the mockup, I can start
looking and saying, okay, well, obviously
| | 01:16 | this sort of pewter-blue background color
is going to apply to all of the layouts.
| | 01:21 | The headers look very similar and have very similar
styling. The font usage is consistent throughout.
| | 01:26 | A lot of the background colors are the
same. A lot of the text sizing is the same.
| | 01:32 | And I would really probably go through
and I usually just catalog all this.
| | 01:36 | I'll create a little sheet and I'll start
making notations or I'll write things down
| | 01:39 | or I'll type them in, and I'll really start
thinking about, okay, what is going to stay
| | 01:43 | consistent all the way
across all of our layouts.
| | 01:46 | For example, the Our latest galleries
headline here with the line underneath it, I notice
| | 01:51 | that that's the same in all three of
them and in two of them it contains an icon.
| | 01:56 | So maybe those are things that I don't have
to write the style three separate times in the
| | 02:01 | layout, but I can go ahead and write the
style one time, and then if I don't need an icon,
| | 02:05 | for example, just maybe go into that mobile one
and tweak the change a little bit by centering
| | 02:09 | the content and removing the icons.
| | 02:10 | So those are things that
I am always looking for.
| | 02:13 | How can I make my code as efficient as possible?
| | 02:16 | All right, so I am going to switch back over
to my index.htm file from the 02_02 Exercise
| | 02:25 | File folder. And now, because I am using Dreamweaver,
one of the things I really like about Dreamweaver
| | 02:30 | is, if I open up a file like the index file,
any related external CSS file is available
| | 02:36 | to me right here. I can just click and begin
working, and I can switch back and forth between
| | 02:40 | my CSS and my source code, and that is awesome.
| | 02:43 | Not all code editors have that.
| | 02:45 | So if you are using a separate code editor,
you want to open up the main.css, which is
| | 02:49 | found in the _css directory in the same
exercise file. So you just want to make sure you have
| | 02:54 | access to both of those.
| | 02:56 | Now, if I switch over to main.css, I can see that
there is actually a good bit of code in here already.
| | 03:01 | I have all of my font-face declarations for
the web fonts that I am going to be using.
| | 03:06 | Then I have what I call my global styles.
| | 03:07 | I start off every single project this way.
I'll create this global styles section, and
| | 03:12 | inside that I am going to have styles
that apply to everybody and everything.
| | 03:16 | So the element reset, the html reset,
things like the display rule, Nicolas Gallagher's
| | 03:22 | wonderful micro clear fix--
I use that all the time.
| | 03:25 | And then after I am done with the
boilerplate stuff that I have in all my projects, then
| | 03:29 | I come down and start
thinking about individual things.
| | 03:32 | You will notice that here, I am setting
global style for links and hovering over the links,
| | 03:36 | and for focus so that items will look the
same across browsers, how images should be
| | 03:41 | treated within links, that sort of thing.
| | 03:43 | I can go into some of the more specific things,
like individual elements on the page and how
| | 03:47 | they should look across devices.
| | 03:48 | So this allows me to kind of build sort of
a building block, and what I would do at this
| | 03:53 | point is, after I have identified all of
those sort of similarities between the different
| | 03:58 | page layouts, I would then start going ahead
and coding those similarities in. So that's
| | 04:02 | what I want to do now.
| | 04:03 | So I am just going to go down, and just to
give you an idea of kind of where we are at
| | 04:06 | right now, if I preview this page in
a browser, this is what it looks like.
| | 04:09 | All right, so yeah, not great,
but here is the thing to remember.
| | 04:13 | This actually is a responsive layout.
| | 04:15 | It changes based upon the screen size.
| | 04:16 | It expands to fill full screen when there
is room for it, and when there is not, it
| | 04:21 | will go down to any screen size that I want.
| | 04:24 | So that's one of the
good things about pure HTML:
| | 04:26 | it is very responsive.
| | 04:26 | All right, I am going to go down to the
very last rule and I am just going to create a
| | 04:30 | HTML selector, and then I am just going to
do background for that. And the background
| | 04:35 | is going to be color, so I am going to
do rgb, and inside that 123, 121, 143.
| | 04:41 | So of course, I've already taken a look at
what those colors need to be. As a matter
| | 04:45 | of fact, if you look at the top of the styles,
you'll see a color guide up there that you
| | 04:48 | can copy and paste those values from.
| | 04:50 | So that's going to be consistent no
matter what layout I am working with.
| | 04:53 | Underneath that, I am going to do the body
element, and inside that I am just going to
| | 04:57 | do a font declaration of 100% Cantarell,
which is our web font that we loaded up using
| | 05:04 | @font-face above that.
| | 05:05 | I'll give it some fallbacks of Arial and
Helvetica, and then finally, sans-serif.
| | 05:14 | So that's going to be consistent across my page.
| | 05:16 | I want to give the elements a
starting line height of 1.5.
| | 05:20 | That'll inherit down to all the elements.
| | 05:21 | I am going to go ahead and give my body a
background of white. You can use #fff if you
| | 05:29 | wanted to. And then the color, just the
default color of all the page elements, I am going
| | 05:34 | to do rgb (76, 67, 65).
| | 05:41 | And then for font-weight, I am going to do
normal, and font-style, I am going to do normal.
| | 05:48 | So that, in a lot of ways, is kind of a reset
in and of itself, because I am saying, hey,
| | 05:53 | I don't want anything be bold.
I don't want anything to be italic.
| | 05:56 | That way I get to go ahead and control all that.
| | 05:58 | You don't necessarily need to do that;
you might want, for example, to make sure that
| | 06:02 | italics are being applied where they are,
but that's just a way of sort of making sure
| | 06:05 | it's sort of resetting everything for me.
| | 06:07 | Now, that doesn't mean that the strong tags
or emphasis tags won't be bold or italics;
| | 06:11 | they will. But this is just going ahead and
sort of establishing the even playing field
| | 06:14 | for everything else.
| | 06:15 | All right, the next thing I want to do is
go into some of the individual regions,
| | 06:19 | so I am going to do #mainNav h2, so I am
targeting the heading two (h2) inside that #mainNav.
| | 06:26 | And for that I am going to do a display of none.
| | 06:28 | Now if you are wondering,
what in the world is that?
| | 06:30 | If I go back over to the source code and
I look inside my #mainNav, you can see that
| | 06:34 | there is a heading 2 (h2) right
there that says Site navigation.
| | 06:37 | Now, that's there for two things:
accessibility purposes, so that people that are looking
| | 06:41 | at this know that it's a site navigation,
and also for document outline generation
| | 06:45 | so that the navigation doesn't
come up as an untitled section;
| | 06:48 | it will come up as site navigation.
| | 06:50 | So obviously visibly, I don't really need
that in any of my layouts, so I am just going to
| | 06:53 | put that display:none.
| | 06:54 | The next thing I am going to do is nav ul,
and I am going to do list-style equals none.
| | 07:01 | So, again, I am just doing a nice little reset
here. If I find any type of an unordered list
| | 07:05 | inside of a nav, it's a list of links and
I don't want it to look like a normal list,
| | 07:09 | so I am just turning the list styling off.
| | 07:11 | Now I am going to go into another, a very
specific region, and that would be the header,
| | 07:14 | so I am just going to do header styles. And I
like placing a comment above these regions.
| | 07:19 | Again, I lied about using some of
the Dreamweaver's tools. Some of them are so easy to use.
| | 07:23 | But I am just going to place a CSS comment
there for header styles, which is nice, and
| | 07:28 | inside that I am going to do the header element
itself. For that, I am going to give it a background
| | 07:33 | of rgb (198, 98, 102). For width, 100%.
Make sure it stretches across all layouts.
| | 07:46 | Padding at the top, we're just going to
give it 1 pixel, and that's so I can have a little bit
| | 07:51 | of margin control and there
is no margin collapse above it.
| | 07:54 | For overflow, I am going to do hidden and
for margin-bottom, 1.5 ems. So it's going to
| | 08:01 | be consistent across devices as well. Because I
am using relative units of measurement of course,
| | 08:05 | it will look a little bit different on
each one, but it's consistently spaced,
| | 08:08 | so it has that same visual relationship.
| | 08:10 | Then I am going to start going to the
individual elements within header, so I am going to do
| | 08:13 | header h1, and for that I am
going to change its color to white.
| | 08:19 | I've really taken, recently, to using these
keywords for white and black and things like that.
| | 08:24 | For font-weight, I am going to use bold.
| | 08:28 | For text-transform, I am going to use uppercase.
| | 08:32 | We are almost done with the header.
| | 08:35 | I am just going to do header a, so
transforming any links found inside the header.
| | 08:40 | I am going to do a text decoration of none,
stripping out any default link styling.
| | 08:46 | For border, I am going to choose none, again
stripping out any borders that might be applied, and
| | 08:50 | for color I am going to choose white.
| | 08:51 | Now if you are wondering about this, the
link is the actual company name, that desolve,
| | 08:56 | so I really don't want any link styling.
| | 08:58 | I want people to be able to click on this
and go back to the index page, but I don't
| | 09:01 | necessarily want it to stand out as being a link.
| | 09:04 | So for the same thing, I am going to do header a:
hover, and I am going to strip out any default
| | 09:09 | hover styling that might be applied to it.
| | 09:11 | I am just going to do
border of none, color of white.
| | 09:15 | All right, if I save this and preview this
page in my browser again, I get not a lot of
| | 09:23 | change, but a little bit.
| | 09:25 | The text sizing has changed a little bit.
The colors have dramatically changed. My heading,
| | 09:29 | the text looks the way I want it to.
| | 09:30 | There is a link up there.
It's got the same color.
| | 09:33 | So that type of consistency I have sort of
established all the way across the board.
| | 09:37 | Now, if you were to go in and open up the
index or the main.css file in the finished_files
| | 09:42 | folder, take a look at exactly how much
styling can be done with global styles.
| | 09:47 | So after the header,
I add some styles for #mainNav.
| | 09:50 | I have the mission. I have article styles,
gallery, that sort of thing.
| | 09:53 | So take some time to go through those.
| | 09:55 | If you want, you can copy and paste them in or
you can kind of play around with them yourself.
| | 09:59 | Some of the stuff you may not recognize, like
this data url. If you see this, don't flip out.
| | 10:04 | It's fine. We'll talk about some of
the stuff a little bit later on too.
| | 10:06 | But I just wanted you to get a feel for exactly
how much control you can use for global styles
| | 10:13 | over the course of a multiscreen layout.
| | 10:16 | Too often, I see people that are brand-new
to doing responsive design try to basically
| | 10:21 | cram everything into each layout--desktop,
tablet, mobile--and they end up with a really
| | 10:27 | bloated style sheet.
| | 10:28 | They end up basically with the same
style sheet replicated three times.
| | 10:32 | You don't need to do that. You can create
these global styles and then just create the
| | 10:36 | smaller layout-specific styles within the
media queries that we are going to be creating
| | 10:40 | a little bit later on.
| | 10:41 | Now, take the finished file and preview that,
and you can see, again, we've added a little
| | 10:46 | bit more content to that that's going
to be consistent across the layouts.
| | 10:50 | So just remember, having as much of your
styling as possible in a set of global styles like
| | 10:55 | these that are going to apply to
every single version of your layout,
| | 10:58 | it's going to be a lot easier to write, as
you are writing less code, and it's going
| | 11:01 | to create a more
manageable site in the long run.
| | 11:04 | However, I do want to point out, it does require
you to develop a more thorough planning process
| | 11:09 | and put a lot more time into the initial
planning of our styles. But in the long run, I feel
| | 11:14 | that the benefits that you gain
from this approach are well worth it.
| | Collapse this transcript |
| Determining content breakpoints| 00:00 | Designing for multiple screens often means
you're going to need to create several different
| | 00:04 | versions of the same layout, each one
optimized for a range of specific screen sizes.
| | 00:10 | One of the most common responsive design
questions I get is, which devices do I need to target,
| | 00:15 | or which devices should I
target when planning layouts?
| | 00:18 | To me, that's the wrong question.
| | 00:20 | It's really not a matter of devices.
Now, let's be honest.
| | 00:23 | Those just come and go all the time,
and there's already way too much diversity in terms of
| | 00:27 | the different ranges of screen sizes to really make
targeting the devices themselves practical at all.
| | 00:33 | Instead, I recommend letting your
content determine when to alter your layout.
| | 00:38 | So to demonstrate this, I have the breakpoint.htm
file open, and you can find this in the 02_03 directory.
| | 00:43 | And what we have here is a
very simple three-column layouts.
| | 00:48 | Now I've three versions of this layout.
| | 00:49 | Let me preview this in the
browser so that you can see it.
| | 00:53 | We have our three-column layout. You'll notice
the left column is a lot wider than the other
| | 00:57 | two. And then I have a version of this
layout that's a two-column layout, where the third
| | 01:02 | column breaks down below these two,
and then I have a single-column layout.
| | 01:05 | And essentially three-column layout is going
to be for larger or desktop screens, if you will.
| | 01:10 | The two-column layouts can be used for medium
or tablet screens, and then the single-column
| | 01:15 | would be for smaller or mobile screens.
| | 01:18 | You'll often hear people use those terms kind
of interchangeably--desktop, tablet, and mobile--
| | 01:22 | and I'll use them
throughout this course as well.
| | 01:24 | But I want to point out that just because
something is a certain size, doesn't mean
| | 01:27 | that somebody is viewing it on a tablet.
| | 01:29 | There are a lot of netbooks or chromebooks
out there that have those small screens that
| | 01:33 | aren't really tablets. Same thing for phones.
You've got phones that are now so big
| | 01:36 | they're certainty into the tablet category.
| | 01:38 | So you can't really pigeonhole that way. So
I try to use screen sizes as much as I can,
| | 01:43 | like small, medium and large, but I found myself
falling back to that terminology quite frequently.
| | 01:48 | Okay, so again, I could go ahead and just
define sizes and say well, you know what,
| | 01:53 | an iPad is this size, and the iPhone is
this size, so those are the values I'm going to
| | 01:56 | use, but there are so many other devices
out there, Android devices and so many tablets
| | 02:01 | and laptops that are changing sizes, that if I
just target one range of devices, I'm really
| | 02:06 | setting myself up for
failure over a wider audience.
| | 02:10 | So what I'm going to do is, I'm in
Firefox, so I'm going to turn on Firebug.
| | 02:13 | If I was in Safari or Chrome,
I could turn on the WebKit Inspector.
| | 02:16 | If you're in Internet Explorer, you can
turn on the Microsoft Developer Tools.
| | 02:20 | And really, what I want to do is just sort
of target the page itself, so I can see what
| | 02:24 | size my browser window is when my layout starts
to fail. That's really what I'm looking at here.
| | 02:30 | So what I'm going to do is I may come over
and target my HTML element and go to the Layout
| | 02:35 | tab here, and this is going to give me a nice little
report on what size my browser window is currently.
| | 02:40 | Now, I'm dealing with Chrome here, so this
isn't 100% accurate, but it's close, and you
| | 02:44 | can make some determinations here.
| | 02:46 | So I'm just going to start resizing my
browser window. And I'm really not even looking at
| | 02:51 | that value. What I'm looking
at right now is at my screen.
| | 02:54 | And I'm starting to look at these columns,
and there are really starting to fail.
| | 02:57 | I notice that the headline just broke on
me. The columns are getting a really thin.
| | 03:01 | It's kind of hard to
read that middle column now.
| | 03:03 | So right in this range right here,
I'm starting to see a failure of the layout.
| | 03:08 | Now of course, I'm just using a
very simple three-column layout here.
| | 03:12 | But if I had a more complex design--
and of course, this layout is also fluid.
| | 03:16 | That's another thing: you need a
flexible fluid layout to really test this.
| | 03:20 | I can really see where this
layout starts to fall apart.
| | 03:22 | And looking down at my console down here,
right at about 846 pixels--so I'll just round
| | 03:27 | that up and say 850.
| | 03:28 | So my first breakpoint is now at 850 pixels.
| | 03:31 | So if I go back into my breakpoints file,
you'll see that I've got a couple of media
| | 03:35 | queries that are just commented out,
and I'm going to uncomment those.
| | 03:39 | Now, don't worry about the media queries syntax
| | 03:41 | if you've been ever dealt with them before.
Later on in this chapter we're going to have
| | 03:44 | an entire movie dedicated to media queries.
| | 03:47 | But what I'm going to do is, for the second
layout, which is the two-column layout, I'm
| | 03:51 | going to change that max-width value to 850
pixels, because that was my first breakpoint,
| | 03:57 | so maximum width of 850 pixels.
| | 03:58 | All right, so I'm going
to go ahead and save this.
| | 04:02 | Now I'm going to go back
into my browser and refresh.
| | 04:06 | And I'll notice now that as I start to resize
this, once that layout starts to fail, instead
| | 04:11 | of allowing layout to fail, it now
breaks down to a two-column layout.
| | 04:15 | You can see that now the third column falls
below those guys, but when there's enough
| | 04:19 | space for it, it expands out
and I get my three-column layout.
| | 04:22 | So that's letting the content dictate where the
breakpoints occur, not so much any one particular device.
| | 04:28 | Now, I could take this a little bit further.
| | 04:30 | I can come in and say okay, what about this
two-column layout? When does it begin to fail?
| | 04:35 | And when I start getting into this range
right here, again, that beings to fail a little
| | 04:38 | bit. It's getting really, really
skinny over there on the right-hand column.
| | 04:43 | So, I'm not crazy about this section.
| | 04:45 | So I'm thinking at about, probably about 570
to 580 is probably where I'll set this one.
| | 04:51 | So I'm going to go back into my index file,
I'll uncomment out the last media query, and
| | 04:59 | you'll see this one has already set to 570.
| | 05:01 | What these media queries allow you to
do is to establish these trigger points.
| | 05:04 | Now, of course the media queries--we will
go over the syntax a little bit later, but
| | 05:08 | it's important that they deal with the proper
ranges. For this one for this example, I'm saying hey,
| | 05:13 | the maximum width of this
particular layout should be 570 pixels.
| | 05:17 | And then this one is
saying the maximum width is 850.
| | 05:19 | So actually, these will apply to both of these.
So we really don't need that, so I need this
| | 05:24 | one to be more of a range.
| | 05:26 | So I'm going to say and here, I'm going to
do a min-width and I'll give it a minimum
| | 05:31 | width of 571, just one more than the maximum width
down below it, and then chain together another and.
| | 05:37 | These expressions you can chain them
to together to create these ranges here.
| | 05:41 | So now I can save this and essentially
what we have is we have a default layout.
| | 05:46 | That's our three-column layout. And then
between the screen sizes of 571 to 850, we're going
| | 05:51 | to get a two-column layout, and then
below 570, we'll get a one-column layout.
| | 05:55 | So after saving that I'll go back into the browser,
refresh my page, and we can see that in action.
| | 06:00 | As a matter of fact, I am just going to close this.
We don't really need to see the window size anymore. And what
| | 06:04 | I'm going do is just resize this browser.
You can see, once it falls below 570, I get
| | 06:07 | a single-column layout.
| | 06:09 | So that would work well for smaller screens,
mobile devices, things like that, all the way
| | 06:13 | down. And then once it has enough space, it
gives me a two-column, and once it has enough
| | 06:16 | space again, I get the three columns.
| | 06:18 | So that's one of the things that media
queries will do for you, and we're going to explore
| | 06:21 | those in more detail a little bit later on.
Following that type of workflow where you're
| | 06:24 | letting the content drive your breakpoints,
it's going to free you from wondering about
| | 06:28 | a specific device or having to redesign your sites as
devices evolve or gain popularity or fall out of favor.
| | 06:35 | Now, although you still need to think about
devices when you address functionality, with
| | 06:39 | layout you can simply focus on content and
breakpoints and be confident in the fact that
| | 06:44 | your layouts are going to look
great, regardless of the screen size.
| | Collapse this transcript |
| Defining media queries| 00:00 | So in the previous exercise we discussed
setting breakpoints and used a couple of media queries
| | 00:05 | to control multiple layouts.
| | 00:07 | In this exercise we're going to a little
deeper into media queries and we're going to set up
| | 00:10 | our initial structure
for the desolve.org layout.
| | 00:15 | To do that, I'm going to be working in the
main.css file, which you can find in the 02_04
| | 00:21 | exercise folder, and then
inside of that, the _css directory.
| | 00:25 | So this is pretty much where we left our CSS
file the last when we're working on it when
| | 00:29 | we set some global styles.
If I scroll down for example,
| | 00:36 | I can see the last global style deals with
page footer, and that's just another workflow that
| | 00:41 | I forget to mention it to people, and it's
fairly common--most of you probably work same way.
| | 00:45 | I typically will write my styles in the
order that they're found within the source order,
| | 00:50 | so the header styles will come up first,
followed by whatever is in the HTML code, and then page
| | 00:54 | footer is at the bottom. And it's just so
much easier for me to find styles and to avoid
| | 01:00 | certain styling conflicts by doing it that
way, so that's typically how I'll do that.
| | 01:03 | So what we're going to do is we are going
to go ahead and put in the skeleton in place
| | 01:06 | for our responsive layout by going
ahead and just building our media queries.
| | 01:11 | So the first thing I'm going to do is I
like to comment out regions, so I'm just going
| | 01:15 | to do a little bit comment here. And I'm
going to do mobile styles, and I think I'm just
| | 01:19 | going to hit Enter a few times, just so
that's a little further up the screen. It's not
| | 01:24 | the best thing in the world to do, but it makes it
easier for your guys to see when I was typing this.
| | 01:27 | So I'm just going to say mobile styles, and
then after that I'm going to do a media query.
| | 01:31 | And I'm just going to do @media only
screen, and then I'm going to pass an expression
| | 01:40 | (max-width: 480 pixels). And then after that
I'm going to open the curly brace, hit Enter
| | 01:47 | twice, close the curly brace. Okay, I'll give you a
second to do that, and then let's talk about syntax.
| | 01:54 | One of the things that I want to mention here is
that we are going to be using inline media queries.
| | 01:59 | There are two ways that you can do them.
| | 02:01 | You could go ahead and do them inline like
we're doing here, using an @media block, which
| | 02:06 | is going to be just in line right with the
rest of your styles or--and I'm just going
| | 02:10 | to open up one of the HTML files. You don't
have to do this, but you can also do a media
| | 02:13 | query here in a link tag that's linking to a
style sheet. So the same decoration here that
| | 02:19 | we have screen and projection, we could
also go ahead and do a media query, only screen and,
| | 02:26 | and then you could just go ahead and pass in max-
width or whatever value you want to use, 480 pixels.
| | 02:33 | So that would do the same
thing. That would work just as well.
| | 02:37 | Now, the difference here of course is that
you would need a different external link for
| | 02:42 | every single one of your media queries, and
we're going to have three of them. So that's
| | 02:46 | three additional external resources, and that's
going to add a lot more overhead to your responsive
| | 02:51 | project, because when you get down to
smaller screen sizes, especially on mobile devices,
| | 02:56 | every single request you make to the server
is a dramatic increase in overhead. So you
| | 03:01 | want to reduce the server requests if you can.
So I'm going to close that. I don't want to save it.
| | 03:07 | So I just want to demonstrate that.
| | 03:08 | In my opinion, using the inline styles is a
much nicer and safer way to go in terms of
| | 03:15 | organizing your styles, maintaining your
styles, and also reducing the amount of requests you
| | 03:19 | have to the server, I really recommend using
@media block. But once you establish an @media
| | 03:24 | block, now you're passing in the actual media
query itself. Let's take a look at the syntax.
| | 03:29 | Now, first thing you're going to notice is
the only keyword. Now, this keyword is actually
| | 03:32 | optional. We don't have to use that.
| | 03:35 | It's really kind of the way of filtering out
your media queries for browsers that don't
| | 03:40 | understand a media query.
| | 03:42 | They'll run into that only keyword, they
won't understand it, and they'll just stop parsing
| | 03:45 | that particular block.
| | 03:47 | So that's a way of sort of
filtering those styles out.
| | 03:49 | It's the only purpose it serves.
| | 03:51 | It doesn't really need to be there.
| | 03:52 | I'm placing it there just to make sure that
we're sort of hiding it from nonconforming browsers.
| | 03:57 | All right, next we can pass any media type
that we want: screen, projection; whatever you
| | 04:01 | want to do, you can go ahead and do that.
| | 04:03 | Now, you can still do a comma-separated list,
so if I want to do screen and projection, I
| | 04:07 | can still do that, but the syntax would be
a little different, because the comma would
| | 04:10 | come here, after the expression. So we could
go ahead and put a comma there and then we
| | 04:14 | could do projection too,
if we wanted to do that.
| | 04:17 | All right, then, after you have your media
declaration, you use another keyword, in this
| | 04:23 | case and. There's also a not keyword, and
the not keyword basically does the opposite.
| | 04:29 | So it's really tricky to get your mind
around using not and it can leave the some really
| | 04:33 | unintended side effects, but essentially if
you not, you're telling the browser, or whatever
| | 04:38 | the user agent is, to go and apply these
styles everywhere except for when this evaluates
| | 04:42 | to true, so think about that.
| | 04:44 | All right, so and is a way of chaining these
expressions, and I can have as many expressions as I want.
| | 04:50 | I could just say and, and, and, and, and
I can just keep stringing them together.
| | 04:53 | In this case I'm going to maximum width. You have a
lot of different things that you can check for.
| | 04:57 | If you go to the specification on media
queries, you can read up more about these. You have
| | 05:01 | height, you have width, you
have color, you have grid.
| | 05:05 | I mean there's all sorts of
things inside there that you can use.
| | 05:07 | Now most people are using width and height.
And in terms of width and height, there is
| | 05:11 | also a lot of properties that will allow you
to do a minimum or a maximum prefix, and
| | 05:16 | width is definitely one of those.
| | 05:17 | Now that's very helpful, because what we're
doing here, if we read the syntax correctly, we are saying
| | 05:21 | hey, go ahead and apply to any screen device,
any screen media device, who's maximum width
| | 05:26 | is 480 pixels. So 480 pixels and below are
going to get the styles applied to them that
| | 05:31 | we placed inside the media query.
Anything above 480 pixels will not apply.
| | 05:37 | So those are our mobile styles. It's a
basic introduction into media query syntax.
| | 05:41 | Let's go ahead and write our
other two media queries. All right.
| | 05:43 | So after this one on a line just sort of
below here, I'm going to go ahead and do a
| | 05:46 | new comment, and here I'm going to go ahead
and do new tablet styles. And you can copy
| | 05:52 | and paste if you like.
| | 05:53 | I think typing it sort of gives you a nice
bit of practice, so I'm going to do @media
| | 05:58 | again, and here I'm going to say only
screen and minimum width of 481 pixel.
| | 06:06 | Notice that I'm being very careful to not
have any overlapping values here, so I wouldn't
| | 06:10 | say minimum width of 480 pixels, because
then the media query above and this media query
| | 06:15 | would apply at the same time, and I
would have all sorts of styling complex.
| | 06:19 | Now in this case for tablets we really want
to establish a range of screen sizes, not just
| | 06:24 | a minimum value or a maximum value, but from
between these two sizes I want these tablets
| | 06:29 | to apply. And that's one the nice thing about
being able to chain these together, because
| | 06:33 | all I have to do is do another and, and this
time instead of minimum width, do a maximum width.
| | 06:38 | And here I could go ahead and pass 768, which
is going to be our next break point, and then
| | 06:43 | I can go ahead and open up a curly brace,
close it again, and now I have my tablet style.
| | 06:47 | So this one is going to apply anytime the
screen size is between 481 pixels all the
| | 06:51 | way up to 768, we're going
to get our tablet styles.
| | 06:55 | After that we're going to go ahead and do
desktop styles, and so even here I'm doing
| | 06:58 | tablet, mobile, and desktop even
though, you know it's not really that.
| | 07:01 | It's applying to any screen of that size, so there
is no device that it actually going on whatsoever.
| | 07:06 | Again, we're going to an @media block only
screen and, and here we're going to do a minimum
| | 07:13 | width of 769. So again, notice how I am being
very, very careful to make sure I'm not passing
| | 07:18 | the same value I use before,
and I'm going 1 pixel above it.
| | 07:22 | All right, so @media only screen
and a minimum dash width 769 pixels.
| | 07:26 | All right I'm going to go ahead and
save this, and that's gives us our skeleton.
| | 07:31 | So now that we have our media queries defined
and kind of outlined and structured, we can move
| | 07:35 | on to starting to craft those
individual layouts for each screen size range.
| | Collapse this transcript |
| Building the basic desktop layout| 00:00 | Once you've defined targeted screen sizes
using media queries, you can then focus on
| | 00:05 | crafting the individual layouts themselves.
| | 00:08 | Much like how I really like to structure the
basic page containers in HTML first, I also
| | 00:13 | like to control the layout of those page
containers first, before I move on to working on the
| | 00:18 | specific regions themselves.
| | 00:20 | So in this exercise we are going to start
that process by styling the basic containing
| | 00:24 | blocks of our desolve.org desktop layout.
| | 00:28 | I'm really going to be working on one
file, but I have got two files open here:
| | 00:31 | the index.htm file from the 02_05 folder and the
main.css file. Again, because I am in Dreamweaver
| | 00:38 | here, I only need to open up the index file
and it gives me access to the main.css, but
| | 00:41 | if you're working in a code editor that
does not do that for you, make sure you open up
| | 00:45 | the main.css from _css directory, because that's
the file we are really going to be working on.
| | 00:50 | Now, if I were to take this file right now and
preview it in the browser, yeah, not awesome,
| | 00:55 | but all of the information is there.
| | 00:56 | So now we are ready to go ahead and
start building the layouts themselves.
| | 01:00 | Now, if I switch over to the main.css and I
scroll all the way down towards the bottom,
| | 01:05 | here we can find all of our individual media
queries that we built in the last exercise.
| | 01:09 | Now, I want to talk about theory
here--or at least an approach to this.
| | 01:13 | I see a lot of people who will start out with
the layout being the desktop layout and then
| | 01:19 | add the media queries to convert the layout to
tablet-based or mobile smartphone-based layouts.
| | 01:25 | There's also a movement underway that's
gaining a lot of popularity where your default layout
| | 01:30 | is the actual small screen or mobile layout,
and then you use media queries to modify that
| | 01:35 | layout into tablets and desktop sizes.
| | 01:38 | Either one of those
approaches works really well.
| | 01:40 | I actually like the mobile-first approach
a little bit better because what that means
| | 01:44 | is if your media queries fail, at least
smaller screens will still see a mobile device.
| | 01:50 | Media queries are pretty well
supported among modern browsers,
| | 01:52 | so you can be pretty sure that they're going
to display the layout the way you wanted to
| | 01:57 | at those larger screen sizes.
| | 01:59 | Now, that being said the way, the way I'm
approaching it is that my global styles really don't have
| | 02:03 | very much, if anything at all, in terms of
layout. And I have three separate media queries,
| | 02:09 | one for mobile, tablet, and desktop.
| | 02:11 | Now in this case, this is more of an
organizational thing and a teaching tool than it is the way
| | 02:16 | I would actually deploy this.
| | 02:17 | I would probably build my mobile styles to
be the default styles and then go ahead and
| | 02:22 | enhance that to tablet and desktop.
| | 02:24 | But there are plenty of projects I work on
where I do it this way, where each layout
| | 02:28 | is an individual layout.
| | 02:29 | So it's really a personal preference
in kind of how you want to build it.
| | 02:32 | Okay, now I am going to do things a little
bit differently in this particular movie, and
| | 02:36 | one of the things I am going to do little
differently is instead of having to watch
| | 02:39 | me type all of these selectors,
| | 02:41 | I am just going to paste them in, and
when I do that, I'll go over the syntax.
| | 02:45 | So when you see me paste a selector in,
pause the screen for a moment--and as a matter
| | 02:49 | of fact, I am going to do the thing I did a
minute ago, where I give myself a little bit
| | 02:52 | of room, so it's easier
for you guys to see these.
| | 02:54 | I will go back and delete that extra space
a little later on. But when I paste in a selector,
| | 02:58 | just pause the movie, type it in--what
you see on the screen--and then I will go over
| | 03:02 | the syntax and talk about what it is.
| | 03:04 | So that gave us a little bit of time and
you won't be subjected to all of my typos.
| | 03:07 | All right, so the first rule that we are
going to do in the desktop styles--I should have
| | 03:12 | mentioned that as well.
| | 03:12 | We are going to go in to the desktop styles
media query. And the first rule that we are
| | 03:16 | going to do is the body selector,
| | 03:18 | so go ahead and pause the video or
type this in as I am talking about it.
| | 03:23 | So what we are doing with the body selector for
desktops is we are setting the width to 90%.
| | 03:28 | So on our desktop sizes, the page
layout will take up 90% of the screen.
| | 03:32 | We are giving it a margin of 0 for top
and bottom, auto for right and left, and that's
| | 03:36 | going to center it.
| | 03:37 | And then--and this is really important part
of this--although we have a percentage, which
| | 03:42 | means we have a fluid layout--meaning
no matter what size, it could be 90% of that--
| | 03:46 | we are establishing a range by using a
minimum and maximum width values for this layout.
| | 03:51 | Now, minimum width and maximum width aren't
supported in every single browser, but they're
| | 03:55 | widely supported in desktop browsers.
And it's safe for me to put it in, because even if
| | 03:59 | they are not supported, I still get a 90% width.
| | 04:01 | So this is just a way of me saying, okay, I
want a fluid layout, but I only want a fluid
| | 04:05 | layout within this range.
| | 04:08 | So once it starts getting smaller than 1024,
it will stop. Once it gets as wide as 1280,
| | 04:13 | it will stop as well.
| | 04:15 | Now earlier, I talked a lot about letting
content determine your breakpoints, and I found that
| | 04:19 | when I started taking this particular layout
below 1024, portions of it started to fail,
| | 04:24 | so that's one of the reasons why I'm sort
of restricting it to that minimum width.
| | 04:29 | Okay after that, I am going to go in
to start targeting the specific regions.
| | 04:32 | I am going to start with the header styles.
And what we are doing with the header selector
| | 04:36 | here is we are just setting that height to
165 pixels. That's a very top element, and it
| | 04:41 | allows me to put in the logo and the
branding all of that have the height that I need.
| | 04:46 | After that, we are going to go in and we are
going to concentrate on the mission statement section,
| | 04:50 | so that has a class of mission applied
to it. And that is going to give the mission
| | 04:55 | area a height of 350 pixels,
a padding left of 3.9%.
| | 04:59 | Now, the padding was determined early on in
my layout process. You may have remembered
| | 05:04 | that from the dissolve mockup where I was
talking about how much padding I am going
| | 05:08 | to need on some of these elements.
| | 05:09 | And that's determined by a
percentage of its parent element.
| | 05:12 | So it's really going back to that body and
saying okay, give me 3.9% of you, and that's
| | 05:16 | giving me my gutters that I
am looking for on the sides.
| | 05:19 | Turning overflow to hidden, and for background,
I am going out to the images folder and I
| | 05:24 | am finding that gallery_banner, and
then I am giving it a 4em margin-bottom.
| | 05:28 | So it's going to be quite some
distance between that and the next element.
| | 05:31 | And I am giving it relative positioning
because some of the contents inside it are going to
| | 05:34 | absolute-positioned, so I want the parent to
have relative position so they are positioning
| | 05:38 | themselves relative to
mission and not another element.
| | 05:40 | Now, you may have noticed that I skipped
over the Nav styles. If you are wondering about
| | 05:45 | that, throughout this entire chapter, we
are going to do pretty much everything except
| | 05:48 | for the navigation, and that's because
navigation has its own separate chapter after this.
| | 05:52 | So we will focus on creating and
styling our navigation in the next chapter.
| | 05:57 | Next up is going to be our article
styles. And that actually has two selectors,
| | 06:02 | so let me move the back up and you can pause
that and go and type these in. And what this
| | 06:07 | is doing for us is, notice that we
are creating a two-column layout.
| | 06:11 | We have a section that has our main content
inside of it and then inside that section,
| | 06:14 | we have an article and the aside.
| | 06:16 | So we are taking the article and we are
floating it to left. We are giving it a predefined
| | 06:19 | width that determined very
early on in the planning process.
| | 06:22 | We are giving the same padding left so
that there is same amount of gutter between the
| | 06:25 | two columns as there is on the side of the
page. And then the sections inside the articles,
| | 06:30 | we are going ahead and giving them a margin
bottom and a border on the bottom as well,
| | 06:34 | which is going to give separation
between different sections within that article.
| | 06:38 | After my article styles, we are going to go
ahead and do our aside styles. And just like
| | 06:44 | the articles are floating to left,
the aside is floating to right.
| | 06:47 | It's going to give us our columns.
| | 06:49 | It has a width of 19.1%. Again, we
predetermined that when we were doing our mockups. And we
| | 06:53 | are giving it a padding right as well as 3.9%,
| | 06:56 | so all of that is
consistent all the way throughout.
| | 06:58 | Last thing left to do is our footer styles.
| | 07:00 | So there's my page footer.
| | 07:01 | You will notice that for this rule, we are
doing clear_both, so we are reestablishing
| | 07:06 | normal document flow
after the two floats above it.
| | 07:09 | We're setting overflow to hidden, and we are
giving it a fixed height of 150 pixels as well.
| | 07:13 | So all of this empty space
down here, I don't really need it.
| | 07:16 | And again, all we're doing right here is doing
the basic layout for just the parent container
| | 07:21 | elements; we are not controlling
any layout of the stuff inside of it.
| | 07:24 | If I save this, go back
into my browser, and refresh,
| | 07:27 | at this size, you will notice that we
begin to have the bare bones of our layout.
| | 07:31 | Here are two columns. It's working good. We have
got the banner graphic in there. Our header
| | 07:35 | is the size we want it.
| | 07:36 | Here's our navigation again. We really
didn't do any styling of our navigation. And if I
| | 07:40 | resize the browser window, you'll notice
that at a certain point that layout fails and we
| | 07:46 | go back to a single-column layout.
| | 07:48 | So once we hit our breakpoint, there's
our two-column layout coming into focus.
| | 07:52 | All right, I wouldn't say it's looking great right now,
but we do have the basic structures of it in place.
| | 07:58 | So with the desktop basic structure in place,
in our next exercise, we are going to move
| | 08:02 | on and tackle the tablet layout.
| | Collapse this transcript |
| Building the basic tablet layout| 00:00 | In our last exercise, we defined the basic
page region styling for our desktop layout, and
| | 00:05 | we'll go ahead and continue working on our
basic layout structure by tackling our tablet
| | 00:10 | styles in this exercise.
| | 00:12 | So, again, I have the index.htm in the main.css
file open, and you can find these in the 02_06
| | 00:19 | directory. And we're going to work
pretty much the same way we worked before.
| | 00:23 | I'm just going to paste some code in and
then talk about it, and as I'm discussing it,
| | 00:27 | you can pause and type the code in.
| | 00:29 | We are going to be using pretty much the
same structure we use before, so the selectors
| | 00:33 | are going to be almost identical.
| | 00:35 | So what I really want to focus on when I talk
about these selectors are the differences between
| | 00:39 | the tablet layout and the desktop styles
layout, and kind of identifying what makes
| | 00:44 | that tablet layout a little
bit different from desktop.
| | 00:46 | Now first off, notice that the tablet
layout is only going to apply between 481 pixels
| | 00:52 | to a maximum width of 768 pixels.
| | 00:53 | So, the first thing we do is go ahead and paste
in the body selector here, and you'll notice
| | 00:58 | that just like the desktop, its width is 90%,
and it's using the auto margin technique to
| | 01:03 | the center of the page as well. But the
minimum and maximum width values are much different:
| | 01:08 | 500 pixels for the minimum
width and maximum width is 768.
| | 01:12 | So what that means is essentially, it's going
to flex between those two. After 768, it's going
| | 01:17 | to jump up and hit the desktop styles and
it'll change layouts, but from 500 all the
| | 01:21 | way down to 480, it's going to remain rigid
at that size. And again, that's our point of
| | 01:25 | letting the content determine where those
breakpoints lie, even within screen size ranges like that.
| | 01:31 | After that we're going to go
ahead and do that header styles.
| | 01:34 | Now this header style is going to be 165
pixels, which is exactly the same as last one.
| | 01:38 | I can scroll down and show you guys that.
| | 01:39 | Now so this is an instance where you might
look at this and say, well, is that something
| | 01:43 | that I can move into the global styles and
then overwrite because mobile is a little
| | 01:46 | bit different? Could I do that?
| | 01:47 | And yeah, you certainly could do that, but
again, a lot of times it's a judgment call,
| | 01:51 | and in this case this gives me the
flexibility, if later on down the road I have decide to
| | 01:56 | make one of these headers a little bit a
different, I don't have to create a new selector; I can
| | 01:59 | just go ahead and use these or start
adding to and modifying these selectors.
| | 02:03 | So remember, right now we just focusing on
layout. We are not focusing on the things
| | 02:06 | that might go into that header or the
styling that might be different within the header.
| | 02:11 | So, sometimes you're going to see some similar
selectors that you might want to tweak a little
| | 02:14 | bit later on. So it's always a judgment call as to
whether you're going to make it a global selector or not.
| | 02:19 | Now again, remember, we're skipping over the
navigation styles, because we're going to
| | 02:23 | come back and work on them in the next chapter.
| | 02:26 | So what we're going to do right now is work
on mission. That mission div tag with the
| | 02:30 | mission class applied to it,
| | 02:31 | I have got a padding left of 3.9%, which is
exactly the same I had before. overflow is
| | 02:36 | hidden, position's set to relative. The margin
bottom is little less because I have a little
| | 02:40 | bit less screen real estate at
this screen size, so it's 3ems.
| | 02:44 | But the background is really where I want
to turn your attention to. You'll notice here,
| | 02:48 | instead of requesting that large banner graphic
that we requested before, this time we're requesting
| | 02:52 | a smaller skyline graphic. So it's the
same image; it's just smaller in size, and that's
| | 02:58 | a really important part of responsive design, in
terms of using this background images in this way.
| | 03:03 | What that's really doing for us is it's lowing
the overhead required for those tablet devices
| | 03:08 | and phone devices which are sometimes
connecting over networks that aren't quite as fast, or
| | 03:12 | maybe a cellular connection. So it's
lowering the file size required here. We could have
| | 03:17 | taken that larger graphic and then just
scaled it down the screen size, but then we'll
| | 03:21 | wasting pixels. We don't really need them.
| | 03:23 | So by going ahead and requesting a
separate graphic here, a slightly smaller graphic, we're
| | 03:27 | actually being a lot nicer in terms of resource
management. And this is a technique that a lot of people use.
| | 03:33 | Now, one thing I want to point out about this.
In Android 2.3 and below, Android devices will
| | 03:39 | go ahead and ask for every single
background image, even in ones that media quires that
| | 03:43 | don't quite apply. So the desktop
one would be downloaded as well.
| | 03:47 | But for most all other mobile devices and
any Android devices above 2.3, which is the
| | 03:51 | majority of them now, this technique works
just great, and you only get the background
| | 03:56 | images in the media query
that's active at the time.
| | 03:58 | So it's a great way of saving file size and
lowering some of the HTTP requests that you
| | 04:03 | might be making over those cellular networks.
So this is the technique that you should use
| | 04:07 | for a lot of your images.
| | 04:09 | Now it only works for background images, so
this is pretty much a technique that's limited
| | 04:13 | to those decorative images
that we've been talking about.
| | 04:15 | All right, after mission, we're going to go
ahead and do article. Again, we have two selectors
| | 04:20 | for article. Our first one I want to
concentrate on, and that is the generic article element.
| | 04:25 | Now you notice in the last layout, the
desktop, which was the two-column layout, the article
| | 04:29 | was floated to left. This time
there's no floating going on,
| | 04:32 | so we are back to a one-column layout.
The width is 92.2, but I have the 3.9% right and left
| | 04:40 | padding, so essentially, that's giving me
that sort of margin or the gutter, if you will, on
| | 04:44 | either side, and then the width
is fluid within that page range.
| | 04:48 | The article section still has the border
on the bottom, and notice that the margin on
| | 04:52 | the bottom is a little less
than it was on the desktop.
| | 04:55 | I'm using the same amount for our margin
bottom as I am for the padding on the bottom.
| | 04:58 | Now what that's going to do is it's going
to give me equal amount of space above and
| | 05:01 | below that border between these elements.
So it just acting as a separator between those
| | 05:05 | sections. We also aren't turning the
overflow to hidden and adding a position of relative
| | 05:10 | so we can use absolute
positioning inside of that.
| | 05:12 | After article, we're going to use asides,
and for the asides, again we're doing the same
| | 05:17 | thing here. It's a one-column layout, so we're
not floating these to the right. We're doing same
| | 05:21 | width 92.2%. We're using a 3.9%
padding to be equal, so we have that same sort of
| | 05:26 | margin or gutter, if you will,
on the right and left sides.
| | 05:29 | And then for the sections inside the aside,
since we're not doing any floating, we are
| | 05:32 | going to be clearing those out so that
we do have a single column and we don't have
| | 05:36 | any floats going on.
| | 05:37 | Finally, we're going to do a footer styles,
and for our page footer, even though we don't
| | 05:42 | have any floating above it, I am just
going to leave that clear both in there.
| | 05:45 | It's just kind of a nice-to-be-sure-type
thing. We're turning overflow to hidden, and the height
| | 05:50 | of this is to be 150 pixels.
| | 05:52 | Now if I go ahead and save this, go into my
browser, and notice that I have resized the
| | 05:56 | browser so it's going to trigger that tablet
styling, when I select that I get a single-
| | 06:00 | column layout. You can see the separator
between these items, giving me enough the same space
| | 06:05 | above and below it, and then I have got a
little bit of styling going on here down the footer.
| | 06:09 | So it's really just the
basic bare bones of this layout.
| | 06:12 | Now again, to see our media queries in
action, all I have to do is resize the browser and
| | 06:16 | once we hit the desktop, we're getting a two-
column layout. Once we go below the desktop,
| | 06:21 | we're getting the single-column layout.
| | 06:22 | So, the basic structure of those two were
is in place. The next thing we need to do is
| | 06:26 | tackle our basic mobile layout,
and we're going to tackle that next.
| | Collapse this transcript |
| Building the basic mobile layout| 00:00 | We'll finish styling the basic page regions of the
layouts by turning our attention to our mobile styles.
| | 00:06 | Now, pretty much here, we're going to follow the
same thing that we did in the previous two exercises.
| | 00:10 | I'll paste some code in, and it's going to
follow pretty much the same structure we did
| | 00:13 | before, in terms of the
regions that we will be styling.
| | 00:16 | And again, I'm just going to focus on the
differences between the mobile styles and the tablet and
| | 00:21 | the desktop styles. So we're going to start in our mobile styles.
The first rule, as it has been in the past,
| | 00:25 | is going to be with the body selector. And if
we compare that one to the one right underneath it
| | 00:30 | there for the tablet, you'll notice that the width
is the same, 90% for both of those. We're using
| | 00:34 | auto margins for the center, but again we're defining that
sort of range of motion, if you will, into the media query.
| | 00:41 | So 320 pixels wide is going
to be as low as it can possibly go,
| | 00:45 | and as wide it's going to be able to go is about
480 pixels, so that's going to be our mobile layout.
| | 00:50 | Now what's interesting about this is you
know I talked earlier about how you definitely
| | 00:53 | want to target content based on screen sizes
not devices, and in the past, these values
| | 00:58 | would almost target iOS precisely, the
iPhones specifically, because 320 would be portrait
| | 01:05 | and 480 will be landscape. But with a new
iPhone 5 the landscape is much wider than 480.
| | 01:10 | So again, as these devices begin
to evolve, you can't count on those ranges
| | 01:15 | of being accurate for each one of them, so
you might as well go ahead and let the content
| | 01:19 | decide exactly when it should break
and not worry so much about the device.
| | 01:23 | So after the body, we're going to do our
header styles. You'll notice that these are a little
| | 01:26 | bit, a height of 70 pixels
instead of 165 we have had earlier.
| | 01:30 | Again, whenever we're dealing with the
smaller screens like this, we have much less screen
| | 01:34 | in real estate, and not only just side to
side, but top to bottom as well. So you'll
| | 01:38 | notice a lot of these values are
compressed when compared to the desktop and tablet.
| | 01:43 | The mission styles for this one--again we're
skipping over the navigation styles--but mission
| | 01:47 | styles, we're setting the width to 90%.
| | 01:49 | Notice that that's a little different.
Instead of being at that 92% and then the 3.9%, what
| | 01:54 | we're doing is we're just setting the
width to 90%, setting the margins to auto, which
| | 01:58 | is basically going to give us a 90% part of the
window and then 5% on either side for margins.
| | 02:05 | So that's fine. And then put a margin bottom
on the 2.4, which is a good bit higher than
| | 02:10 | some of the other ones.
| | 02:11 | And it just because we're not using an
image for that one, so we've got a little bit more
| | 02:14 | space available to us there. We're not
using a background graphic for that area.
| | 02:18 | Okay, our article styles, let me scroll up here.
We have got two selectors. Again, we have article.
| | 02:24 | Notice that pretty much all these container
elements have the same values: 90% for width
| | 02:29 | and then we're using the auto
margins to center them within the page.
| | 02:32 | The section themselves, this one's a little
bit different. So we still have that border
| | 02:35 | bottom, and we still have a margin bottom.
| | 02:37 | Now the padding is little bit different: 20
pixels here instead of 1.6ems. And we're still
| | 02:42 | using overflow of hidden and position of
relative because of some of the styling that's going to
| | 02:46 | happen inside that.
| | 02:48 | Next up, we're going to be doing our asides,
so again, a width of 90% auto margins centering
| | 02:53 | technique. And we're clearing the section just
in case any floats happen to still be hanging
| | 02:58 | around or we need a
two-column layout at a small size.
| | 03:01 | Believe it or not you actually do sometimes
need to float stuff at those smaller sizes,
| | 03:04 | so I might as well go ahead and clear those.
| | 03:07 | And then finally, we're going to be doing
our footer. So that didn't take quite as long.
| | 03:11 | There's not quite as much going on here.
| | 03:13 | It's a much simpler layout at the smaller sizes.
| | 03:16 | For again, the page footer, we're just
clearing things out, putting a little bit of padding
| | 03:19 | on the bottom of it and then
hiding any content that's overflowing.
| | 03:21 | So I'm going to go ahead and save this,
preview this back in the browser, and I'm just going
| | 03:26 | to refresh, and you can see,
here's our mobile layout.
| | 03:29 | Now again, we're not really styling any of
the individual content inside of it just
| | 03:34 | yet, but notice we got this 5% margin
on either side. You can see some of the styling
| | 03:38 | coming through, the centering is coming
through, and of course we can trigger each of the media
| | 03:44 | queries by simply resizing the browser. There is
our tablet layout and there is our desktop layout.
| | 03:49 | So our basic layout regions are now styled.
They're in place, and we're seeing three variations on
| | 03:54 | our layout, so that's great.
| | 03:55 | And notice again, notice the range of motion
here. We're still expanding, we're still expanding,
| | 04:00 | and it'll freeze at a certain point. Same thing
when we go down. Notice that it freezes there,
| | 04:03 | so that's our range of motion, and then
it triggers the same thing the tablet.
| | 04:07 | I have a range of motion that freezes at
a certain point, and then we go down and
| | 04:11 | we freeze here as well. So they're
fluid layouts within a specific range.
| | 04:17 | If you're wondering, I might as well just go
ahead and say yes, this is indeed how I typically
| | 04:21 | work, although I will admit I usually do
percentages and just use placeholder background
| | 04:26 | colors to make sure I have the regions correct
before I really start styling any actual content.
| | 04:30 | So a lot of times I'll just come in, structure
basic page elements, and then style those basic
| | 04:35 | page elements, get those refined before
I start working on the interior content.
| | 04:39 | Now here, since the content is already sort of
on the page, I have got a little more color,
| | 04:42 | a little typography going on, than I
would normally have at this stage.
| | 04:46 | So although it looks like just one big mess
at the moment, we're actually a lot further
| | 04:49 | along than you'd think.
| | 04:51 | So in our next series of exercises, we're
going to tackle refining the styling for each of
| | 04:55 | the individual layouts and look at some of
the considerations that you're going to need
| | 04:58 | to make from screen size to screen
size as you refine those layouts.
| | Collapse this transcript |
| Refining desktop layouts| 00:00 | In our first series of exercises targeted
towards styling the different layouts for
| | 00:05 | desktop, tablet, and mobile, we concentrated
on styling the sort of basic content regions.
| | 00:11 | So in the next series of exercises, I want
to talk about refining those layouts, adding
| | 00:15 | a little bit of styling
for the interior content.
| | 00:18 | And of course, we don't have time to do
the entire layout, so I want to focus instead
| | 00:23 | on three very specific areas.
| | 00:24 | Now currently, I have the index.htm
file open from the 02_08 directory.
| | 00:28 | I've also got the main.css opened from the _css.
| | 00:31 | Again, since I'm working in Dreamweaver,
| | 00:33 | I'm going to kind of toggle back and
forth between the two of them.
| | 00:36 | Now if I were to preview this in my
browser right now, I can see that this is kind of
| | 00:41 | right where we left off before, where
we have our basic content region styled.
| | 00:45 | So I want to focus on three very specific
regions, one would be the header up top.
| | 00:48 | This is where our branding is going to go,
in terms of the logo and the company name
| | 00:51 | and taglines, things like that. And then this
mission area right down here where the mission statement,
| | 00:56 | now this area is going to change
dramatically between each of the layouts, so this is a
| | 01:00 | really good area to take a look at, in terms
of what's involved in transitioning styling
| | 01:04 | from one layout to another.
| | 01:07 | And then we are also going to focus on these
individual regions here for our latest galleries.
| | 01:10 | We are going to focus on styling each of the
featured galleries and taking a look at what
| | 01:14 | we'll have to do there for the
background images and floating.
| | 01:17 | So there are a lot of changes
there from layout to layout as well.
| | 01:19 | So not only are we focusing on the
individual styles to achieve the layout we're looking
| | 01:23 | for, we really want to focus on, as we go
through these exercises, the differences between the
| | 01:29 | desktop, tablet, and mobile styles as well.
| | 01:30 | So I'm going to go back into my file.
| | 01:33 | I'm going to switch over to the main.css.
And again, you can find the desktop styles
| | 01:37 | at around line 541, so go ahead
and scroll down and find those.
| | 01:41 | Again, we have a lot of selectors going on
here, so rather than going in and typing this
| | 01:44 | out, I am just going to paste the code in.
Because there is a lot more involved in terms
| | 01:48 | of selectors, I'll try to scroll back up to
fit them all onscreen, but feel free to pause
| | 01:52 | the video, type in the selectors, and then
I'll kind of walk you through what they are doing.
| | 01:55 | All right! So I am going to go ahead and start with our first
section of code here in the header, which is two selectors.
| | 02:01 | We have header h1 and a header h2.
| | 02:03 | So I'll focus on the header h1 first.
| | 02:05 | So for this one, we're setting our font-size large
just for the name of the company along with logo.
| | 02:09 | We are giving it enough padding over here
on the left-hand side where the logo will
| | 02:13 | actually fit, giving it a line-height equal
to the height of the header, so it's going
| | 02:16 | to vertically center it inside that.
| | 02:18 | Then we'll give a little margin to the right,
and that's going to keep the tagline away from it.
| | 02:22 | We're floating it to the left. That's going to
allow the tagline and logo to line up to each other.
| | 02:27 | And then we've got a margin to the left of 3.9%.
| | 02:30 | Again, if you remember from earlier, we
have that margin already applied, but applying
| | 02:35 | it here, I had this little bug that was
happening where it was just one pixel off.
| | 02:39 | So applying the margin
inside here as well fix that.
| | 02:42 | We're changing the display to inline so that
the logo and the tagline will display properly,
| | 02:48 | and then we're giving it a background image.
And for that we're going out, grabbing the
| | 02:51 | desolve ago, and just go ahead and putting it
on the left-hand side and vertically centering
| | 02:56 | it so that it vertically centers with our text.
| | 02:58 | Now the next selector, the header h2, we're
choosing the font-family Cantarell for it as well.
| | 03:03 | We're italicizing it. We're making sure that
it's not bold. We're setting its font-weight to normal.
| | 03:07 | Its font-size is going to be
considerably smaller than the header.
| | 03:11 | Color still needs to be white.
| | 03:12 | We're floating it to the left as
well, so that again, it can stack.
| | 03:15 | We're transforming text is lowercase, putting a
little bit of letter spacing in there, because
| | 03:19 | at that size, the text can get a little close
together for a tagline you're trying to read.
| | 03:24 | And again, notice that we're giving it a
same line-height of 165, which again is going to
| | 03:27 | vertically center it within that space.
So there is our header.
| | 03:31 | If I save this and go out to the browser and
scroll up and refresh this, you can see that
| | 03:37 | the big difference here,
the logo is on the left-hand side.
| | 03:39 | We've got enough spacing there for the desolve, and
then our tagline is aligning to the right of that.
| | 03:44 | Okay. So now we're going to focus
our efforts on the mission area.
| | 03:47 | If I go into my code and scroll down below
my mission styles, I'll go ahead and paste
| | 03:52 | those in. And we really only have two
selectors there: the mission h1 and the mission p.
| | 03:58 | So let's tackle the mission h1 first.
| | 04:01 | The font-size for that is 2.2 ems, and that's a statement
about your loving of urban photography as much as we do.
| | 04:07 | We've got a little bit of padding to the top of
290 pixels, so actually, quite a bit of padding.
| | 04:11 | What that's going to do is it's going to
force that header down to give it enough padding
| | 04:15 | above it to make it look like
it's sitting towards the bottom of that.
| | 04:17 | And that way I don't have to
do any absolute positioning.
| | 04:19 | I can just sort of push it down using padding.
| | 04:20 | I'm doing a little bit of
letter spacing there as well.
| | 04:23 | Now the mission p, the paragraph is
the actual mission statement itself.
| | 04:26 | I want you to pay attention to the width here.
| | 04:28 | What we were doing with the width is we are
shortening it so that it's only a small percentage
| | 04:32 | of that overall width of that region.
| | 04:34 | We're giving it a little bit of padding on
the top, a little bit of padding on the
| | 04:37 | right and left, but none on the bottom.
And the height is 350 pixels, which is the exact
| | 04:41 | same height as the mission region itself.
| | 04:44 | We've got normal font-size, color, background
color. You'll notice that we're using an rgba
| | 04:49 | value which is alpha value there.
| | 04:51 | So it's sort of that blue color, but we're
making it semi-translucent, so we're giving
| | 04:54 | a little bit of background.
| | 04:55 | Now here we are using absolute positioning, and
that's one of the reasons why the mission content element,
| | 05:00 | if you remember that from our last series of
exercises, its position was relative because
| | 05:04 | I want this to be
positioned relative to its container.
| | 05:07 | So absolute positioning. And instead
of doing top-left, we're doing top-right,
| | 05:11 | so it positions at the top right-hand corner
of that paragraph to the top right-hand corner
| | 05:15 | of the mission content region.
| | 05:16 | And if I save this and preview it, you can
see what happens. We Love Urban Photography,
| | 05:21 | it goes down to the bottom because of
all the padding that it has on here.
| | 05:24 | And then the mission statement itself
positions itself on the right-hand side.
| | 05:28 | Now, if you're wondering where I got that
width from, that width basically mirrors the width
| | 05:33 | of the column below it--maybe not quite
precisely but enough to make it feel right.
| | 05:38 | So I've got a little bit of padding going
on there. And I kept enough space below this.
| | 05:42 | You may think, well, gosh, you could have
increased the line-height to make that a little
| | 05:45 | bit better, but remember, with a responsive layout
that's fluid like this, you have to deal with
| | 05:49 | the fact that somebody could resize this, or
maybe the desktop or the laptop is a little
| | 05:53 | bit different size there. So I am allowing
myself a little bit of space inside that area.
| | 05:58 | Okay, we are going to finish up by going ahead and doing
the interior spacing for these feature article regions.
| | 06:05 | So I am going to scroll down to my article
styles and right after article section, I'm
| | 06:08 | going to go ahead and paste my article styles.
And let's just go through these one at a time.
| | 06:14 | Again, feel free to pause.
| | 06:15 | We're starting right here with article h1.
| | 06:17 | The article h1 is actually the top header, so
it's not the individual feature galleries themselves.
| | 06:22 | It's kind of like, this is
the identifier of the space.
| | 06:25 | So we are using a sprite here.
| | 06:26 | We are going to talk a little bit more about
that in a chapter on navigation, so I won't go
| | 06:30 | over them in great detail here.
| | 06:31 | But essentially, what it's doing is it's
pulling up sprites, which is a series of icons, and
| | 06:35 | it's choosing one of those based
upon the background positioning.
| | 06:38 | And we're going to give it enough
padding so that the image will display,
| | 06:42 | so 20 pixels top, 0 for right and
left, and then 5 pixels for the bottom.
| | 06:46 | You'll notice we don't need any padding on
right-hand side because it's taking this all
| | 06:49 | the way to the right-hand side of the heading.
| | 06:51 | The article h2, we're changing our font to
Cardo, which is the second web font we're using.
| | 06:56 | A fairly large size of 2.8 ems.
| | 06:58 | We're floating that to the left, and
we're giving it a bottom margin of 1 ems.
| | 07:02 | Now remember, the article h2 is the actual
name of the gallery that this in, so in this
| | 07:06 | case it would be philly for the first one.
| | 07:08 | The article p is any paragraph inside of that.
| | 07:10 | So we've got a font-size of 1.2em
and a margin top and bottom of .8 ems.
| | 07:14 | We are being very specific with our pubdate,
so article p.pubdate. We're saying for that
| | 07:21 | we want same font-size 1.2ems, text-transform to
uppercase, but we're floating that to the right.
| | 07:26 | So because we're floating the header to
the left and floating the publication date to
| | 07:29 | the right, they are going to appear right
beside each other as if they were on the same line.
| | 07:33 | We're giving a little bit of padding up top so we
can adjust our baselines so that they match
| | 07:36 | up and then zeroing out the margins so
there is no margin collapse below that.
| | 07:41 | Now for the article preview--I don't know if you remember
this, but the preview is that div tag that we created.
| | 07:46 | I'm giving it a height of 250 pixels, then
I'm clearing both of them so that the floating
| | 07:51 | that was going on between the
header and the pubdate are now wiped out.
| | 07:54 | If I save this, go back in
my browser, and preview that,
| | 07:58 | you can see, there is the icon
that we brought in for the h1.
| | 08:01 | Here is the h2, much larger in size.
| | 08:04 | It's floating to the left,
publication date is floating to the right.
| | 08:07 | We have the space here for our image.
You'll notice that it is clickable because the link
| | 08:11 | inside of it is set to block so it's
expanding throughout the whole thing.
| | 08:14 | And then we have the caption being formatted
by just the regular paragraph text, Join us
| | 08:18 | as we visit the city of brotherly love.
| | 08:20 | What we didn't place inside any of these--
you can see the styling just repeats because
| | 08:24 | the structure is the same--what we
didn't place inside of them is the images.
| | 08:27 | So that's the last thing we have to do.
| | 08:29 | I am going to go back into my code, and just
below that I am going to go ahead and paste
| | 08:33 | in all of my individual images.
| | 08:34 | Let me scroll up so we can see
those. We only have three of them.
| | 08:38 | And what we're doing is we're using the
classes that are applied to these sections--
| | 08:42 | so philly, chicago and nyc--and then
targeting the actual div tag with class of preview.
| | 08:48 | We are using three different backgrounds.
| | 08:50 | You can see we are just pulling
them from the _images directory.
| | 08:52 | We are finding the Philly banner, the
Chicago banner, the New York City banner, and we're
| | 08:56 | just telling it not to repeat, so we're
telling it to fill that space. And it's just getting
| | 08:59 | the default positioning, which is top-left.
| | 09:01 | So if I save that, go back in, and refresh,
now you can see the images coming in as well.
| | 09:07 | Now, another thing that I want to point out
about background images that I think is
| | 09:10 | really neat in terms of responsive designs:
| | 09:13 | if the container that they are inside is
designed to flex, then basically you're going to show
| | 09:18 | and hide part of that image.
| | 09:20 | You'll notice that here, for example, that
at a wider screen, I am showing much more of
| | 09:23 | the image; at a smaller screen I am showing
less of it, until it sort of locks into place.
| | 09:28 | One of the things that you really want to
think about if you are going to use this technique:
| | 09:32 | is a very important part of the photograph
or image is going to trimmed off, and in
| | 09:35 | terms of which way it's going to expand, do
I need to make sure that the photographs have
| | 09:40 | their point of interest on the other
side or close to it, that sort of thing?
| | 09:44 | So if you're going to use this technique--
it's almost like a sliding door technique.
| | 09:47 | I really like it, but it's one of the things
that you're going to have to consider, in terms
| | 09:51 | of what part of that photograph is going to
be trimmed off, and is that okay. All right!
| | 09:55 | Our layout, looking a lot better now that we've
refined those three areas. The desktop layout
| | 09:59 | is really coming into focus here.
| | 10:01 | There are certain things like the navigation
that isn't done yet, some of the other regions,
| | 10:05 | but for the most part we're in good shape.
| | 10:08 | So now, here, we're taking advantage of those
media queries, and in doing that we're able
| | 10:12 | to concentrate on refining the styling
for a single range of our target sizes.
| | 10:16 | So next up, we're going to see how to
translate our design to a smaller screen in terms of
| | 10:20 | the tablet and still keep
our design philosophy intact.
| | Collapse this transcript |
| Refining tablet layouts| 00:00 | After styling our desktop regions, we have
an established look and feel for our site.
| | 00:04 | As screen sizes get smaller, we need to try
to retain that look and feel while optimizing
| | 00:09 | the layout for less screen real estate.
| | 00:11 | Let's go ahead and explore that concept as we
refine our tablet layout, and for continuity's
| | 00:15 | sake, we'll focus on the
exact same three page regions.
| | 00:19 | So I have the index.htm file open from 02_09
folder, and right know I am focusing on the
| | 00:25 | main.css file, which is found
in the _css directory as well.
| | 00:28 | I've jumped down to the tablet styles,
which you can find at about line 489 or so.
| | 00:34 | Previewing the index page in the
browser--let me just switch over to that.
| | 00:39 | You can see again, those areas
really aren't that fleshed out.
| | 00:42 | There is a little bit of
styling going on in the top region.
| | 00:44 | We've got the size of it and the color, but
the typography and the logo are all wrong.
| | 00:49 | The mission statement area is sort of a mess,
and we really just have the bare bones of
| | 00:53 | the structure of those detailed regions.
| | 00:55 | So let's go ahead and focus on bringing over
some styling into our tablet region that has
| | 01:01 | the same look and feel as our desktop, but is more
designed for the space that we have available to us.
| | 01:05 | Okay, so again, I am going
to start in the header styles.
| | 01:08 | So right after the header selector, I am
going to go ahead and add my first bit of code.
| | 01:13 | Now, for this one, again we're doing the
same thing where I am just going to paste some
| | 01:17 | code in and over the lines rather
than have you watch me type all this out.
| | 01:20 | The first selector targets the
header h1, which is the company name.
| | 01:24 | You'll notice again font-size is
pretty large, about the same size as before.
| | 01:28 | Same line-height, same width,
for the most part, same image.
| | 01:32 | So really nothing has changed there.
| | 01:34 | What has changed, however, is the h2,
which if you remember, is the tag line.
| | 01:39 | It's not critically
important that that tagline display.
| | 01:42 | When we have enough room on the desktop
it's kind of nice to see it, but it's not going
| | 01:46 | to make or break our site.
| | 01:47 | And we run out of room at that size.
| | 01:49 | I'd rather not shrink the logo down.
| | 01:50 | I'd rather not shrink the header down,
because the company branding is so strong with that.
| | 01:55 | So in this case, I've made the decision to go
ahead and turn that header off h2 display: none.
| | 01:59 | Now there is something that you need to
understand about display: none, in terms of using it
| | 02:04 | for responsive design.
| | 02:06 | If somebody is viewing this on a screen reader
or other accessibility-enabled device, display:
| | 02:11 | none basically hides that
content from those devices.
| | 02:15 | So there are other ways that you could do this.
| | 02:18 | You could use the visibility property.
| | 02:20 | You could use absolute
positioning to move it off the screen.
| | 02:23 | So if you need to keep it
accessible, there are ways to do that.
| | 02:25 | This is certainly not it.
| | 02:26 | My thinking here goes that if this is on a
tablet or other type of device, chances are
| | 02:31 | they probably won't be using a screen reader.
| | 02:33 | However, if they are, if the tagline
isn't read, again it's not critical.
| | 02:38 | It's not crucial content, so in that sense it's not
that big of a deal if it doesn't get read as well.
| | 02:44 | Next up, I am going to tackle the mission area.
| | 02:46 | By the way, if I save this and preview--let's go
ahead and refresh--and you can see, the logo comes in.
| | 02:53 | This version of it is centered within
the browser, and our tagline goes away.
| | 02:57 | All right, so if I go back in and go down
to the mission area, just below the existing
| | 03:02 | mission select, I am going to go
ahead and add a couple of more.
| | 03:04 | I start off with mission h1, so that
would be the text we love urban photography.
| | 03:11 | Font-weight is bold.
| | 03:11 | Font-size is 120%, so it's relative font-size
and relative to the region that it's inside of.
| | 03:17 | That's going to help scale it to the area,
the screen real estate we have available to
| | 03:21 | us, but still make it a little bit larger
than the default font-size for that region.
| | 03:26 | We're making it white, adding a little bit
of letter spacing to it, and this time we're
| | 03:29 | aligning it to the center.
| | 03:30 | And notice for the margin-top it's only 1em.
| | 03:32 | If you remember for desktop, we have a
really big padding on top that sort of pushed it
| | 03:36 | down to the bottom of that region.
| | 03:38 | In this case, we don't really want it to
occupy the bottom; we want it towards the top.
| | 03:42 | So we're only having a margin-top of 1em, which
is going to hold it off the top of that image.
| | 03:46 | Now, why is it that we don't
want it to go all the way down?
| | 03:49 | Well, if you remember on the desktop, the
paragraph was sort of aligned all the way
| | 03:53 | over on the right-hand side of the mission
statement, almost to sort of fill up that
| | 03:56 | second column, if you will.
| | 03:58 | Now this is a one-column layout, so in this
case you'll notice that for the mission paragraph
| | 04:03 | selector, which is underneath that .mission p,
the width is at 80%, the margin is at 0 and auto.
| | 04:09 | That's going to center it within, that and
then the margin-top is 220px (pixels), so
| | 04:12 | that is going to push it down.
| | 04:14 | So in this case the paragraph is going to
be at the bottom of the image, whereas the
| | 04:18 | h1 itself is going to be up towards the top.
| | 04:20 | So if we save this, go back in the browser,
and refresh, we can see that that really helps
| | 04:26 | our mission statement area.
| | 04:27 | And this time, instead of putting the
paragraph on top of the image, as we did in the last
| | 04:32 | one, when we're actually pushing it down below
it a little bit, so we get this uninterrupted
| | 04:35 | view of the city, because we don't
have quite as much screen real estate.
| | 04:39 | And then the paragraph text is written
underneath it in a very legible fashion.
| | 04:43 | And we have enough of margin on either side
of it to really keep it tight, compact, and
| | 04:47 | readable, so it sort of fits in
with the design the way it is.
| | 04:51 | All right, so next I want to focus on our
region down here where we have those individual
| | 04:56 | featured galleries.
| | 04:56 | So I am going to go back into my styles, scroll
down to my article styles, and just underneath
| | 05:01 | article section I am going
to add a few more selectors.
| | 05:05 | So here, if I scroll back up into all of these,
we're going to start with this one, the article h1.
| | 05:10 | Again, remember, that is the actual
heading for all of the featured galleries.
| | 05:16 | Here we are using the same
icon sprite that we used before.
| | 05:20 | We're aligning it to the right top as well,
and we're giving it a little bit more padding,
| | 05:24 | but in terms of size, we're not really
increasing the size or changing it at all.
| | 05:27 | So for the most part, it's going to look very
similar to what we had in the desktop version of it.
| | 05:31 | We see dramatic changes when we start going
down into the featured galleries themselves.
| | 05:36 | So the article h2, we have a 2.4em size on
that, so it's still a little bit larger than
| | 05:42 | the heading above it.
| | 05:43 | Now it's Cardo, so again, we're going back
to the web font that we're using for those.
| | 05:48 | And this one notice that this is floating
to the left, so we've got left float on this.
| | 05:52 | If you remember in the mockup what we want
is we want all the text on the left-hand side
| | 05:56 | and we want the image on the right-hand side.
| | 05:58 | And notice that we're doing a clear to left so
that the rest of the content doesn't stack beside it.
| | 06:04 | We're giving it a margin-bottom of 0,
which is taking off some of the default margin,
| | 06:07 | and then we give it a width of 40%, and that
width is very important so that we have enough
| | 06:11 | room for the image.
| | 06:12 | You'll notice very similar styling when we go down
to the generic paragraph selector for our articles.
| | 06:17 | Font-size of 1em, a margin of 0, and
notice we're also doing a float: left and clear:
| | 06:21 | left on that, and we're
giving it the same width of 40%.
| | 06:24 | Now just as before, we want to add some
specific styling to the publishing date.
| | 06:28 | We'll transform the text to uppercase and
then we're applying a slightly different margin
| | 06:32 | on that; we're just applying a 4em margin
to the bottom, which is going to give us a
| | 06:36 | lot of space between the heading, the publication
date, and then the caption to the bottom of that.
| | 06:42 | It's width is 40% as well.
| | 06:43 | Now, the article preview is
going to handle the image itself.
| | 06:47 | Notice that we're giving it a fixed height
of 175 pixels, which when we start placing
| | 06:52 | the background graphics in there,
it's going to be the height of those.
| | 06:54 | We're absolutely positioning in it, which
is one of the reasons why the earlier parent
| | 06:58 | container had a relative position applied to it.
| | 07:01 | We're aligning it to the top right,
and then we're giving it a width of 55%.
| | 07:04 | Now remember, this is actually the
background image that is going to go into these.
| | 07:08 | It's actually a little bit
larger than the container.
| | 07:10 | So that width of 55%, as we flex that layout,
we're going to have the same effect that we
| | 07:15 | had in the desktop, which is, parts of the
image will be revealed and part it will be
| | 07:18 | sort of hidden, but the ratio between
content and image will remain the same: 40% for the
| | 07:23 | content, 55% for the image.
| | 07:25 | So if I save this and go back into my browser and
refresh this, you can see sort of what's happening here.
| | 07:31 | The heading and the publication date are
stacking on top of each other and then we have this
| | 07:35 | little bit of space between the caption and then
we have this space right over here for the image.
| | 07:39 | Again, remember, that has a link applied to
it, and the link has black formatting applied
| | 07:43 | to it, so this whole area is going to
be clickable as well as this heading.
| | 07:47 | All right, so the last thing we need to do
is go back in and handle which images are
| | 07:51 | going to go into which
of the featured galleries.
| | 07:54 | So just below the code that we just worked on,
I am going to go ahead and paste our last
| | 07:57 | bit of selectors for the tablet styles.
| | 08:01 | And there I'm looking at, again, using the
class selector Philly, Chicago, and NYC to
| | 08:06 | target the specific previews
and put the images inside of them.
| | 08:09 | Now, I do want to point out again, for the
images that are in here, they're not the same images.
| | 08:14 | Notice that these are still philly_banner,
chicago_banner, nyc_banner, but they are the
| | 08:18 | small version of this.
| | 08:19 | So, this allows me to make some
editorial decisions, if you will, as well.
| | 08:23 | Let's say you have an image and you just want
to shrink that image down for a smaller size.
| | 08:27 | Now a lot of times you lose a lot of
that detail as you shrink the image down.
| | 08:29 | So, instead of just shrinking the image down,
you can simply crop it so that the image that
| | 08:34 | you're focused on remains the same
size, but the image itself is smaller.
| | 08:38 | So a lot of times you can make those
editorial decisions using this technique as well that
| | 08:41 | you can't get with just an image
that's going to scale up and down.
| | 08:45 | All right, so as I save this and go back into my
browser and refresh the page, the images will come.
| | 08:51 | Once again, you can see,
they're the smaller versions of them.
| | 08:54 | They don't really look smaller, and that's
because they've been cropped to a new size,
| | 08:58 | with a little less data.
| | 09:00 | If I resize the browser window, notice that
when I start going down to the tablet layout,
| | 09:04 | again there is some flex there, so
I'm cutting off a portion of the image.
| | 09:09 | So I have to really think very carefully
about how I crop those images and which side of
| | 09:14 | those images is going to be hidden, and that
sort of allows me to determine where to crop
| | 09:19 | it, where the focal point, where that
point of interest is going to be for those.
| | 09:22 | Now, as you look through the rest of the
styles, focus on what's being done to present the
| | 09:27 | content in a similar design style from one
layout to the other, while still taking advantage
| | 09:32 | of this available space, like we did here.
| | 09:34 | We were able to stack the content instead of
stack it on top of each other, and we still
| | 09:38 | have a nice image preview regardless of
the fact that we have smaller image size.
| | 09:42 | Now, in other instances, you're going to
find this workflow is going to force you to make
| | 09:46 | some pretty tough design decisions, you
know while in other cases you're going to find
| | 09:51 | that that additional focus actually helps
you refine the design in ways that you probably
| | 09:56 | wouldn't even have considered otherwise.
| | Collapse this transcript |
| Refining mobile layouts| 00:00 | We'll finish out our chapter on
layout by refining our mobile layout.
| | 00:04 | And as before, we are going to focus on those
three core areas: the header, mission statement,
| | 00:09 | and featured galleries sections.
| | 00:10 | So I am working on the index file. This time
from the 02_10 directory, I am also working
| | 00:15 | on the main.css, which can be
found in the _css directory as well.
| | 00:19 | Just to kind of show you where we are in terms
of the mobile layout, I am going to open that
| | 00:22 | up in the browser. You can see, again, we have
got some basic styling going on. We have got a
| | 00:26 | little bit of the structure happening, and
that's really all being done right now by
| | 00:30 | our global styles. And some of the basic layout
styling is being done by the container styling
| | 00:35 | that we did a little bit earlier.
| | 00:37 | So let's jump back into our mobile
styles, which you can find at around line 436.
| | 00:42 | Again, we are going to focus on each of the
sections individually, and we'll start, as we
| | 00:47 | have before, with the header styles. So let me go ahead
and add the code that we are going to be using there.
| | 00:53 | So, we start off with the header h1, nothing new
there. And remember, this is the company name and the logo.
| | 01:00 | Font-size is going to be a little bit small
here; of course we are dealing with mobile
| | 01:02 | screen sizes so everything is
going to shrink just a tad bit.
| | 01:05 | We have enough padding on the
left-hand side to deal with our logo.
| | 01:09 | We have a line-height of 70px (pixels),
so a little bit smaller. And if you remember, the
| | 01:12 | height of the header is also 70px (pixels)
so that's going to vertically center it.
| | 01:15 | And we have a width of 190 pixels, and then we are
going to centering it using the auto margin technique.
| | 01:20 | Now, I do want you to notice that we are using a
slightly different version of the desolve_logo
| | 01:23 | here. We are using 50 pixel by 50 pixel version of
the PNG file, so that's going to shrink down as well.
| | 01:30 | And just as we did on the tablet layout,
we are going ahead and turning the display of
| | 01:34 | the tagline off by using display: none.
| | 01:37 | So if I save this, go back in the browser,
and refresh, you can see it's hiding the
| | 01:42 | Fine Urban Photography, and we now have the
logo and the branding front and center, right
| | 01:47 | there in the middle of that header area.
| | 01:49 | So again, with smaller screen real
estate on mobile devices, or any smaller screens,
| | 01:54 | it's a really good idea to get to
the content as quickly as you can.
| | 01:57 | Now we haven't tackled navigation yet, but
we are going to skip over that and we are
| | 02:00 | going to go straight to the mission statement.
| | 02:02 | I am going to go down to our mission styles,
and then right after the generic sort of mission
| | 02:07 | container, I am going to go
ahead and put in two more selectors.
| | 02:11 | This one, again, is going to
tackle the mission h1 and mission p.
| | 02:13 | Now remember, in the desktop and the tablet versions
of this, we have that sort of skyline banner graphic.
| | 02:20 | That's this nice visual that's up there.
| | 02:21 | A lot of times when you start moving towards
these smaller screens or the mobile devices,
| | 02:26 | you have to let some of that
branding or some of that visual impact go.
| | 02:30 | You know, people are going to be a little
bit more interested in the content and not as
| | 02:33 | much interested in scrolling through these
really nice sort of visually resting images.
| | 02:39 | Now, not every site is that way, but for
the most part, you want to present the content
| | 02:42 | as quickly as possible.
| | 02:43 | So what I am doing here is I am taking away
the image for the mission h1, the header where
| | 02:49 | we have got some font of bold, we have got
font size of 1em, so we are shrinking it a
| | 02:54 | little bit. We are aligning the text to the
center, and then we are just giving it a half
| | 02:57 | of an em margin to keep it in the
paragraph away from each other, so they are going to
| | 03:01 | be fairly tight in terms of their spacing.
| | 03:03 | If we go down the paragraph, I am changing
the width to 90%, which is going to give us
| | 03:06 | 5% margins on either side.
| | 03:09 | The font size is a little bit smaller than the
heading 1, at 0.5ems. Again we are auto-centering
| | 03:14 | it as well, and we are giving it a line-height
of 2 to give it a little bit of visual spacing
| | 03:18 | so it's a little bit easier to read.
| | 03:20 | If I save that and preview it, you can see the
change that happens to WE LOVE URBAN PHOTOGRAPHY.
| | 03:26 | We have a heading in our paragraph and
it's really just content at this point.
| | 03:29 | You know we'll get the mission statement,
and people that come to visit the website can
| | 03:32 | get a very quick and easy introduction into
what the site is all about and what content
| | 03:37 | is available on the site.
| | 03:38 | If I go back into our styles, it's time to
start looking at those article regions with
| | 03:43 | the repeating featured articles.
| | 03:44 | So I am going to paste the code for our specific article
regions inside there, and we are going to start
| | 03:49 | again with this article h1.
| | 03:52 | Now for this one, again, we are using those icon
sprites. This time we are using the 50.png icon sprites.
| | 03:58 | Notice that we have a little bit of
padding at the top, none to the right and left, a
| | 04:00 | little bit of padding on the bottom, and the
icon is going to the right-top so it's aligning
| | 04:05 | to the right side, as it has before.
| | 04:07 | So that's consistent,
really, almost all the way down.
| | 04:09 | Now, when we go into the featured gallery
areas with the article h2, again we can see that
| | 04:13 | we are using the Cardo font, so
we are keeping that consistent.
| | 04:16 | The font-size is 2em, so, much like our other
designs, the desktop and tablet layouts, that
| | 04:21 | heading is going to be a good bit larger than the
text around it, drawing attention and focus to it.
| | 04:26 | We have a margin-bottom of 0.
| | 04:28 | Now remember, we are going back here to a
single-column layout where this content is going
| | 04:33 | to be stacked one on top of each other.
| | 04:35 | Now, there's something a little different here
than we had in the tablet styles and the desktop
| | 04:40 | styles, and that's that the paragraph that
has the caption applied to it is going to
| | 04:44 | be styled individually.
| | 04:45 | Notice that the font-size for that is a
good bit smaller, .85ems, and the margin-top on
| | 04:49 | that is 1em, to hold it away from the
image that's going to be below that.
| | 04:54 | Now the articles publishing date, that paragraph,
notice that that is sized at 1em. The text
| | 04:59 | transform is set to uppercase, and
the margin-bottom on that is 1em as well.
| | 05:04 | Now, for the article preview--and that's
where the image goes, the only styling we did on
| | 05:08 | that is to give it a height of 175 pixels,
and that's really just sort of holding the
| | 05:11 | area for that image when we
placed the image inside that.
| | 05:14 | If I save this, go back to our layout, and
refresh, as I scroll down, you can see the
| | 05:18 | icon comes in, and now we have an enough space,
we are just sort of stacking these elements.
| | 05:23 | The publishing date is just below the headline,
we have space for our image, and then we have
| | 05:27 | the caption just below that.
| | 05:28 | All right, so the last thing we need to do
is place the images inside there. And so just
| | 05:32 | below the article preview, I am going to go
ahead and paste that code. And it's exactly
| | 05:36 | the same thing that we were using for the tablets.
We are using the smaller version of those banners.
| | 05:41 | So they were designed with the tablet and the
mobile screen in mind, so you are not generating
| | 05:45 | a ton of assets; you can sort of reuse them.
| | 05:48 | And again, even though the physical area is
going to be smaller, because the images were
| | 05:52 | cropped a specific way, you're still going to
get a nice preview of that particular gallery.
| | 05:56 | So if I save this and go back in and
refresh that, you can see those images come in.
| | 06:02 | And because this is indeed a flexible layout,
as I begin to resize this, you can see more
| | 06:09 | or less of the image is shown, and then
it'll break and go into the tablet layout.
| | 06:13 | So for some of the newer phones, or if the
phone is in landscape mode instead of portrait,
| | 06:18 | they are still going to see a good bit of
that image preview because we have this flexible
| | 06:22 | layout within a specific screen size range.
| | 06:25 | Now, obviously, for what we've been doing here
for the past couple of layouts, we are really
| | 06:29 | just focusing on those three page
regions for our various layouts.
| | 06:33 | So we have our desktop, we have our
tablet, and then we have the mobile one.
| | 06:39 | But you know one of things that I hope is
fairly obvious at this point is that it really
| | 06:43 | takes a fair amount of focus on your part to
make sure that you're maintaining a consistent
| | 06:49 | styling across all these multiple layouts,
while still sort of really taking
| | 06:53 | advantage of that available screen size.
| | 06:55 | So you are sort of designing for three different
contexts and you want it to be consistent across those.
| | 07:01 | Now make sure that as you begin to plan any
of the responsive designs that you work on,
| | 07:05 | that you really give yourself enough time
to plan how you're going to approach this
| | 07:10 | particular styling challenge,
because it's not as easy as it looks.
| | 07:13 | It can sometimes be really, really challenging.
You can fall in love with something in a
| | 07:17 | desktop size and then when it gets down to
a mobile size, you have sort of lost all the
| | 07:21 | things that made it good.
| | 07:23 | Same thing: you can start on a mobile size,
sort of scale up and start adding things, and
| | 07:27 | realize that the minimalist style you had at
the mobile really isn't working at the desktop.
| | 07:32 | So, be sure to try to achieve the
styling in the most efficient way possible.
| | 07:37 | If you find that achieving your desired
styling results in a lot of code bloat, it might be
| | 07:42 | time to go back and assess your overall layout
strategy and find something that's slightly more efficient.
| | 07:48 |
| | Collapse this transcript |
|
|
3. Responsive NavigationDefining a responsive navigation strategy| 00:00 | One of the most critical elements of
any responsive design is its navigation.
| | 00:04 | Without a solid strategy for defining how
navigation should function across devices
| | 00:08 | and screen sizes, your project will likely
not succeed, no matter how well designed the
| | 00:13 | rest of the site is.
| | 00:15 | In this chapter we're going to
be building two responsive menus.
| | 00:19 | The first one, and you see it here, is relatively
simple, and it simply requires that we carefully
| | 00:25 | style it across different screen sizes.
You can see here, at the desktop size, we have a lot
| | 00:29 | going on. We have icons, we have some
additional text. But as we'd resize the screen, when
| | 00:33 | we get down to tablet size, we're resizing
the icons, we're placing them on a different
| | 00:36 | location, and then when we get down to mobile
devices, we're doing pretty much of the same
| | 00:40 | thing, resizing the icons and just
placing them in different places.
| | 00:44 | Notice also we're hiding that sort of
extra that sort of caption text there.
| | 00:48 | Now the second menu is going to
be a little bit more challenging.
| | 00:52 | At desktop size, it's just simply a normal HTML
and CSS dropdown menu. Nothing really fancy
| | 00:57 | going on about this.
| | 00:58 | But as we resize this, when we get down
towards tablet styling, you can see that we still
| | 01:03 | have a hover dropdown menu, because so many of the
devices at that size support mouses and pointers.
| | 01:10 | But a lot of devices of that size are also
tablets, so we have to also account for the
| | 01:15 | fact that this could be a touchscreen device, so we
need to enable this menu for touchscreen use as well.
| | 01:20 | When we go down to mobile space, we hide
not only the submenus but the menu itself.
| | 01:25 | This way it saves a lot of screen real
estate and allows mobile users to get right into
| | 01:29 | the content and then expand the
menu if they want to see that.
| | 01:32 | It also gives them the ability
to toggle the menu on and off.
| | 01:36 | Now, in both of these cases, we're going to
look at not only the techniques that are required
| | 01:40 | to create these, but we're also going to explore
and take a look at those variables and constraints
| | 01:45 | that you need to consider while
building these responsive navigations as well.
| | 01:49 | Now, since navigation can change so
dramatically from one project to the next, it's really
| | 01:55 | just critically important that you stop and
take the time to think through how a site's
| | 01:59 | navigation should work at different screen
sizes and on devices with different functionality.
| | 02:04 | That's really, really important.
| | 02:06 | We'll need to really carefully plan around
what's best for a specific context and then
| | 02:11 | consider what your users' expectations are,
depending upon the device that they're using,
| | 02:15 | to access your content, and a
lot of people lose sight of that.
| | 02:18 | And although I usually save additional
resources to the end of a course, for this particular
| | 02:23 | chapter I wanted to start off by giving you
a couple of online resources that can help
| | 02:27 | you dig a little deeper into responsive
navigation and explore some of the patterns that are
| | 02:32 | common to responsive design.
| | 02:34 | First, I highly recommend checking out Brad
Frost's post on responsive navigation patterns,
| | 02:39 | where he lists the pros and cons of some of
the common responsive approaches. And I want
| | 02:44 | to take a look at just a
couple of these.
| | 02:45 | This first one is this Top
Nav Or "Do Nothing" Approach.
| | 02:48 | That simply is just sort of a horizontal
list of links that is designed to break down to
| | 02:53 | new lines when screen sizes changed, and
that just sort of allows the navigation of
| | 02:57 | flex, but it's not always
the most attractive approach.
| | 02:59 | Now one that I'm really interested in is
The Footer Anchor approach, and I am just going
| | 03:03 | to skip down to this one.
| | 03:05 | The Footer Anchor approach is the idea that
you're going to place the navigation at the
| | 03:08 | very bottom of the page now, in the footer
itself, and not at the top, which has been a
| | 03:12 | common pattern for years on the web.
| | 03:14 | Now, this does two things.
| | 03:16 | Number one, for the mobile user, it frees up
the top of the page for the content, and they
| | 03:20 | can reach the navigation when they get
through scrolling all the way down to the bottom.
| | 03:24 | For desktop users, this is
kind of interesting as well.
| | 03:27 | It allows designers to respond to the recent
trend in laptops becoming touch devices, because
| | 03:32 | if someone is typing on a laptop, studies
have shown that they really just sort of like
| | 03:36 | to reach up towards the bottom of the screen and not
have to go all the way up to the top to hit the navigation.
| | 03:41 | So this is a pattern you keep your eye on.
| | 03:43 | I think it's going to increase in popularity
as we see more of those devices on the market.
| | 03:47 | Also, he talks about things like converting
navigations to toggles, so select menus, and
| | 03:54 | he also covers this one, The Left Nav Flyout.
This is the one that you'll probably see on
| | 03:57 | Facebook a lot where the navigation is sort
of off to the left-hand side and you can swipe
| | 04:02 | or hit a button to have it
animate on when you need it.
| | 04:04 | It just kind of hides it out of the way and
whenever you need it, it sort of brings it in.
| | 04:08 | This is actually a variation on what's
called the off-canvas approach, and Luke Wroblewski
| | 04:14 | wrote a really nice post about that earlier
in 2012 about off-canvas multi-device layouts.
| | 04:20 | It's not just for navigation, but
certainly people are using it for that.
| | 04:25 | Now, this was actually followed up by Jason
Weaver, who put a nice online demo of these
| | 04:30 | off-canvas patterns online. And you can kind
of see what's going on with this layout.
| | 04:34 | You have three columns and as you resize the
page and screen real estate shrinks, the columns
| | 04:41 | will start disappearing, first the right-
hand column because it's less important, and then
| | 04:45 | finally the left-hand column.
| | 04:47 | But once you get down to this size, you can
bring those columns back by simply animating
| | 04:51 | them onto the screen. So this is very handy
on a phone and you could even wire that up
| | 04:55 | to responds to swipe
navigation or things like that.
| | 04:58 | Now, I also want to mention Brad's follow-up post on
complex navigation patterns for responsive design.
| | 05:04 | It really just sort of takes what he was
doing earlier and extends into some more complex
| | 05:08 | patterns, so this is also worthy reading.
| | 05:10 | Now, as you look through all of the different
approaches that I've shown you here, I want
| | 05:14 | you to focus on the fact that there isn't
a single one of these that can claim to be
| | 05:18 | the absolute best way to approach
planning navigation for responsive sites.
| | 05:23 | Now, the unique nature of the site navigation
when you're changing devices and screen sizes
| | 05:28 | makes it really challenging the plan for
when you're building your responsive site.
| | 05:32 | So my advice to you is to familiarize yourself
with as many options and techniques as possible,
| | 05:38 | and don't be afraid to come up with your own
unique solutions if the project requires it.
| | Collapse this transcript |
| Structuring basic menus| 00:00 | If your site features minimal navigation,
making the navigation function across all
| | 00:04 | screen sizes is a fairly
straightforward operation.
| | 00:08 | Take the finished desolve.org basic
menu that you're seeing here, for example.
| | 00:13 | Now, this menu only features four links, so
it's fairly easy to make sure that all menu
| | 00:17 | items are being displayed effectively across all
of the different screen sizes that we're targeting.
| | 00:22 | However, even simple menus like this one
can still have complex requirements.
| | 00:27 | Now, notice that at the desktop, or larger
screen size you're seeing here, our nice helpful
| | 00:31 | tagline appears under each of the menu items.
| | 00:34 | However, as we begin to lose space,
we start losing the amount of space that's necessary to
| | 00:39 | show those taglines.
| | 00:40 | So, we kind of have to figure out a way to
hide those taglines, and do we need to have
| | 00:44 | enough space for icons as well?
| | 00:47 | As we get down to even less space within the
mobile environment, we need to start thinking
| | 00:50 | about things like target areas for touch
events and making sure that there's enough space
| | 00:55 | there for people to accurately
select the different menu items.
| | 00:59 | This means that really, no matter how simple
the menu is that you're working on, you still
| | 01:03 | have to consider how it's going to change
as you plan its initial structure, and that's
| | 01:07 | where we're going to start with building
this basic menu with its initial HTML structure.
| | 01:12 | So, I'm going to switch over to my code
editor, and I'm working on the index.htm page, which
| | 01:17 | you can find in 03_02 directory.
| | 01:20 | Now, if I scroll down just a little bit in
the HTML here, I can see, on about line 23,
| | 01:26 | I have an HTML comment that
says, "nav goes here." Fair enough.
| | 01:29 | So I am going to go and delete that comment,
don't need that anymore, and I'm going to start
| | 01:33 | off by making sure that I have a
nice solidly structured semantic menu.
| | 01:38 | So I'm going to use the HTML5
nav element to help me do that.
| | 01:42 | So, I'm going to say nav id="mainNav" and
then I'm going to give it a role of navigation.
| | 01:48 | And again, I just want this to be as
accessible as possible and structured properly, so I've
| | 01:53 | got a nav element that's
going to hold our navigation.
| | 01:56 | Now inside that, I'm initially going to go
ahead and put an h2, and the h2 for this is
| | 02:00 | going to be site navigation.
| | 02:02 | Now, this might draw some head scratching.
| | 02:04 | You might be going, why in
the world are you doing that?
| | 02:07 | Well, for me, this is all about the HTML5
outlining algorithm and making sure that I'm
| | 02:11 | passing enough information
about exactly what this is.
| | 02:15 | Essentially, the HTML5 outline algorithm says
that any new section in a nav that's sectioning content
| | 02:21 | will be represented in an
outline by its initial heading.
| | 02:24 | If it doesn't have one, it
then becomes an untitled segment.
| | 02:27 | I just want to show you that kind of in
action, so you can see why I'm doing this.
| | 02:31 | If I scroll down to the aside that we have
down here, you can see that the aside has
| | 02:37 | a role of complementary, but
there's no heading directly after that.
| | 02:40 | So, there is absolutely nothing
to identify what that aside is.
| | 02:43 | Now, if I switch back to the finished version
of this, I'm going to use a neat little extension
| | 02:48 | that comes with Chrome that you can go
out and get called the HTML5 Outliner.
| | 02:51 | If I go over to the HTML5 Outliner and click
on my menu, you can see that I get an outline
| | 02:57 | here, and I can actually jump to those areas.
| | 03:00 | This is a really neat use of the HTML5
outline algorithm, and I can see future uses
| | 03:05 | of being a nice way to sort of
quickly skim through and look at a TOC for a page.
| | 03:10 | But you can see right here, site
navigation, that's because of our heading.
| | 03:13 | However, that aside that I showed you earlier,
see how it's untitled? And so when people
| | 03:18 | sort of parse content and do things like
this with it, you might have a lot of those
| | 03:21 | sort of untitleds coming up.
| | 03:23 | So, it's not absolute necessary that we do this.
| | 03:26 | This is more optional, but it's something
that I kind of like to do in all my sections
| | 03:29 | to make sure that they have a title.
| | 03:31 | Now, that also means that later on in our
styles, we're going to have to figure out a way to
| | 03:34 | hide that, because we don't
want that to come through visually.
| | 03:37 | So after that, we're going to do what a
countless people have done before us, and we're going
| | 03:41 | to create an unordered list.
| | 03:43 | This unordered list is
going to hold all of our menu.
| | 03:46 | It's a really good idea to organize all of
your menus with lists, simply because it's
| | 03:50 | a very logical way to group these links.
| | 03:54 | Inside the unordered list, I'm going to do
my first list item, and inside the list item,
| | 03:57 | I'm just going to go ahead and do a link.
| | 03:59 | So, I'm going to do a href, and for the
first one, it's going to go to galleries.htm, and
| | 04:06 | then after that, I'm going to give it a title,
and this one is going to be Our photo galleries.
| | 04:12 | I'm going to go ahead and also identify
each one of these with a class, and this one is
| | 04:16 | going to be gallery.
| | 04:17 | Not only does that give me a little more
semantic meaning for this link, but it also gives me a
| | 04:21 | styling hook for later icons.
| | 04:23 | I'm also going to go ahead and identify this one
as being the current link, with the word current.
| | 04:27 | Now, it's not the current page, but later
on when we start doing our styling, I'm going
| | 04:31 | to show you how to deal with current styles.
| | 04:33 | So, you would anticipate that being
injected dynamically based on the page you are on.
| | 04:37 | Now, inside this anchor, I'm going to go ahead
and type in the text Galleries, and then just
| | 04:42 | after that, I'm going to add our tagline text.
| | 04:44 | I'm just going to surround this with an em
tag, and I'm just going to say, explore our
| | 04:49 | photos. So the link would actually read
galleries explore our photos, which is fine. That reads
| | 04:54 | just fine and it is a little bit more
descriptive, and the emphasis tag gives us a styling hook
| | 04:59 | later on, when we want to style this.
| | 05:02 | So, I'm going to close out all of my tags here:
my emphasis, my anchor, and my list item tag.
| | 05:07 | Now, I'm a huge believer in saving yourself
some time, so I'm going to go ahead and copy
| | 05:11 | this for our next one, making sure that I
copy both the opening and the closing list
| | 05:15 | item tag and paste that down.
| | 05:17 | And then I'm just going to
change the various elements.
| | 05:20 | The href will link to
gear.htm for our second link.
| | 05:24 | The title for this one is going to be
Favorite gear, and the class for this is going to be a
| | 05:29 | single class, and that's just going to be gear.
| | 05:33 | The text inside the link is going to read
Gear for just the main text and then inside
| | 05:37 | the em tag, I'm going to
type in our favorite equipment.
| | 05:43 | I'm going to keep going, paste the third
link. Inside that I'm going to do contact.htm.
| | 05:51 | The title for this one is going to be Get in
touch, class, and you could probably already
| | 05:58 | guess what this is going to be.
| | 05:59 | It's going to be Interact.
I fooled you; it's not going to be contact.
| | 06:04 | And then the text inside
of it is going to interact.
| | 06:08 | Now, inside the em tag, our text is going
to read contact, follow, or submit your own.
| | 06:19 | So, it's very descriptive of what
people can do on the contact page.
| | 06:23 | They can contact us.
| | 06:24 | They can follow us through social media,
or they can submit their own galleries.
| | 06:28 | We have one more link to go.
| | 06:30 | This is going to go to the shop.htm, and our
title is going to be kind of pushy, Buy our
| | 06:37 | stuff. The class for that is going to shop.
| | 06:41 | And the main link text will also be Shop.
| | 06:43 | Now notice that I'm capitalizing these.
It doesn't really matter, and we're going to be using
| | 06:46 | CSS later on to control that anyway.
| | 06:49 | And then inside the emphasis,
it's going to be, buy our stuff,
| | 06:53 | exclamation mark because
we are really excited about it.
| | 06:55 | Okay, so we're going to go ahead and save
that, and now we have our basic menu in place.
| | 07:00 | All that's left now is that we need to style
it across multiple screen layouts, and we'll
| | 07:04 | tackle that in our next series of exercises.
| | Collapse this transcript |
| Styling basic menus| 00:00 | When you're styling navigation across multiple
screen sizes, you also have to consider functionality.
| | 00:06 | At smaller sizes of the screens are likely
to be touch, and since your hover styles
| | 00:10 | are won't to be working in a touchscreen,
you really need to think about how effective
| | 00:14 | your styles are going to be
when indicating active menu items.
| | 00:18 | You also need to consider the clickable
area required on touch devices as well, to avoid
| | 00:22 | frustrating your users.
| | 00:24 | So let's take a look at styling our
navigation across three different types of screen sizes:
| | 00:28 | our desktop, tablet, and mobile layouts.
| | 00:31 | Now I have the index.htm file open from the
03_03 folder. We're also going to be working
| | 00:36 | mainly, honestly, in the main.css file, which is
found in the _css directory of the same folder.
| | 00:43 | As we we're doing in the previous chapter,
I'm going to be pasting some code in so that,
| | 00:47 | number one, it's going to save us some time,
and it's going to save you from the torture
| | 00:51 | of having to watch me type, because we got a
good bit of CSS that we're going to be writing here.
| | 00:54 | I'm going to go over the selectors and talk
about what they're doing for us, so when we
| | 00:58 | get to the point where I'm doing a block of
it, fill free to just sort of pause the movie
| | 01:01 | at that point and then enter in the selectors.
| | 01:04 | So the first thing I want to do is I'm going
to scroll down to my global styles, so we're
| | 01:07 | going to handle our global navigation styles
first. Probably about line I don't know 184
| | 01:12 | or so I think it was, yeah,
| | 01:14 | you want to find the area right
between the header styles and mission styles.
| | 01:17 | So I'm just going to place my cursor in
there. Let me go ahead and put the styles that
| | 01:21 | we're going to be doing, and then I'm going
to scroll back up and go over these. And you
| | 01:25 | can pause the video and kind of look at these, and
I'll scroll back down so that you can get all of them.
| | 01:30 | So the first section of styles here, first I
started off with a comment, because I like
| | 01:34 | to identify all the different regions.
| | 01:36 | The first thing is the mainNav, which is of
course, I'm using the ID attribute of the nav
| | 01:41 | element to identify just that
particular nav. I'm setting overflow to hidden.
| | 01:45 | The thing here that really matters is
the margin bottom on this, which is 1.5ems.
| | 01:50 | It's giving us enough space below it for the
mission statement that we have that follows
| | 01:53 | it. And then I'm going ahead and floating
all of our list items, so by default this menu
| | 01:58 | is going to appear as a
horizontal list of links.
| | 02:01 | Now, the reason I'm doing this in the global
navigation styles is so that if media queries
| | 02:05 | fail for whatever reason, we do have a menu
that we'll still flex with the screen space,
| | 02:11 | and the list items will just stack as high
as they need to based on the screen size.
| | 02:15 | If there is enough screen size, they'll
display as just an entirely horizontal list and if
| | 02:18 | not, they'll just sort of stack on top
of each other, so it will still be usable.
| | 02:22 | For the anchor elements inside the #mainNav,
we are transforming all the text to uppercase,
| | 02:28 | we're going to display the links as blocked,
and what that's going to do is it's going
| | 02:31 | to increase the clickable area for that
link to the entire area of the list item, which
| | 02:35 | is good, especially for touch devices.
e are setting a color on them and we're turning
| | 02:40 | the border off, so if I have got any borders
applied to links elsewhere in the styles, this
| | 02:45 | is going to go ahead and strip those out.
| | 02:46 | I am applying some default hover styling as
just changing the color of that, and then for
| | 02:51 | the current link indicator, you may remember
that when we're structuring the menu I changed
| | 02:56 | its color as well and set the cursor to default,
so the pointer cursor doesn't show up. It somebody
| | 03:01 | is mousing over it, it looks
like a dead link even though it's not.
| | 03:04 | So it's just fooling people a little bit there.
| | 03:06 | So I'm going to go ahead and save this, and
those are our global styles, meaning that's sort
| | 03:10 | of the baseline or default
styling, if you will, for our menu.
| | 03:13 | Now we need to get into
these specifics of each area.
| | 03:16 | I'm going to start at the very bottom of our
styles with the desktop styles, so I'm going
| | 03:19 | to scroll down. And this is
going be around line 1064 or so.
| | 03:25 | Once again, we are going to be placing this
code in between the last of the header styles
| | 03:30 | and the top of the mission styles.
| | 03:31 | So I'm just going to create myself a little
bit of space here for my nav styles, and I'm
| | 03:36 | going to go ahead and enter those.
| | 03:38 | Okay, again, I'm going to scroll
up and go over these a little bit.
| | 03:41 | Now remember, this is for our
desktop, desktop-specific styles.
| | 03:45 | Again, I'm indicating that they are
nav styles by this comment.
| | 03:48 | Now the first thing that I'm doing is for
that mainNav element, I'm giving it a padding
| | 03:52 | left of 3.9%. If you're going to remember
back to the last when we're doing layout, that
| | 03:57 | 3.9% is sort of the gutter that we're
using, or the margins that we're using, on either
| | 04:02 | side. So that padding left is echoing that
and gives us you know consist spacing all the
| | 04:05 | way down through our layout.
| | 04:07 | The next thing we're doing is for our list
items, the individual items themselves, we
| | 04:11 | are spacing them apart by
using a right margin on them.
| | 04:14 | So they're floating to the left and then we are
pushing them apart from each other with a right margin.
| | 04:19 | The links themselves, we're just changing
the font size, we're aligning the text to the
| | 04:22 | center, and then we're adding a little
bit of padding to the left of 15 pixels.
| | 04:26 | If you remember from the finished version
of this, there are going to be icons that go
| | 04:30 | with each one of this links, and that padding to left
of 15 pixels is giving us enough space for that icon.
| | 04:36 | The next thing that we need to style at the
desktop level is the text that comes inside
| | 04:40 | the emphasis, or the em, tag.
| | 04:42 | Notice that we have color, we have a different color
set for that that's sort of that darker gray color.
| | 04:47 | And then we'll also lowering the font size
down a little bit, changing the display to
| | 04:51 | block so that it will actually appear on
its own line--it will break down on to it's
| | 04:54 | own line below the normal linked text--and
then we're doing a text transform to lowercase.
| | 04:59 | So, it's going to look slightly different
then our main text. It's going to be smaller,
| | 05:02 | all lowercase, and then it'll appear directly
beneath it. Because all of our link text is
| | 05:06 | being centered, it'll go ahead and
horizontally center those links to each other.
| | 05:11 | All right, so those are our
desktop styles. We're going to save that.
| | 05:14 | So at this point I'm going to go ahead and
preview this in the browser. And you can kind
| | 05:17 | of see how this is working with our desktop
styles. Now our icons are not there yet, but there's
| | 05:22 | our normal link color and the hover color
that we have established. You can see that
| | 05:26 | the text stacking one of the top to each other, with
the emphasis text and the differences in formatting.
| | 05:30 | All right, so now I need to go up
and concentrate on our tablet styles.
| | 05:35 | Now, the tablet styles are about line--
| | 05:37 | I don't know--728 or so, somewhere
around in that range. So let me scroll up and find
| | 05:42 | those, and I'll show exactly where they are.
| | 05:44 | There is our mission styles.
| | 05:46 | Okay, so, yeah around 729, actually.
| | 05:48 | So just underneath the, again, header styles
and just above the mission styles, I am going
| | 05:52 | to create a little bit of a space for myself, and
then I'm going to go ahead and put in my tablet styles.
| | 05:58 | All right, so I'm going to go back up to about
730, which is where I pasted them in, and let's
| | 06:02 | talk about each one of this selectors.
| | 06:04 | Again, I'm identifying it with the comment.
And then for our mainNav, I'm doing something
| | 06:08 | a little bit different here.
| | 06:10 | I'm giving it a width of 450 pixels and then
I'm using the auto margins centering technique.
| | 06:15 | Now, the reason that I have a defined width
is I know how many link elements that I have.
| | 06:21 | I'm not going to add any more to them, so
I'm not worried about later on, dynamically
| | 06:25 | having the links added to this menu.
| | 06:27 | So I can feel a little bit confident
about going ahead and doing that.
| | 06:29 | Now, this technique would be a little more
difficult if they were dynamically generated
| | 06:34 | links in this menu or I wasn't sure exactly
how many menu items I was going to have.
| | 06:39 | For each list item, I'm
giving them a margin right of 10%.
| | 06:41 | Now, what this allows me to do is the above
code centers this menu within the tablet layout,
| | 06:47 | but the margin right of 10% allows the space
between the list item to flex. So as the size
| | 06:53 | changes, the available space
changes, and these can flex a little bit.
| | 06:58 | For our last child I took the margin right
and got rid of it. So that's essentially saying,
| | 07:03 | hey, for all of the links I want a
margin right of 10% expect for the last one.
| | 07:06 | Now if I go into the actual links themselves,
for the mainNav a, I have got the font size
| | 07:11 | at 1.2ems, I'm aligning the text to
the center, and then I'm applying some padding
| | 07:15 | bottom to this one at 40 pixels.
| | 07:16 | If you remember, the padding left that
we had on the desktop styles, here the padding
| | 07:21 | is going to be on the bottom, because the
icons that we're going to be displaying are
| | 07:24 | going to be displaying at
the bottom of those links.
| | 07:27 | And then finally, for the text inside the
emphasis, since we're running out of room for that,
| | 07:31 | we make the decision to hide them.
| | 07:33 | Now again, there are various techniques to
do this. I could visibility hidden.
| | 07:37 | I'm choosing to use display none.
| | 07:40 | Remember that this setting actually affects
accessibility. That text will not be read on
| | 07:44 | a screen reader at this particular screen
size, so that is something that you need to
| | 07:47 | think about when you start thinking about
using the technique that display none.
| | 07:51 | Let's go ahead and preview that.
| | 07:52 | So I'm going to save this, go back to my
browser, and not only do I need to refresh my browser
| | 07:56 | at this point, but I also need
to resize it to trigger those.
| | 07:59 | And you can see, our tag lines go away.
We don't have our icons in there yet, but everything
| | 08:03 | else is looking good. The menu is centered
inside the tablet layout area, so that is
| | 08:07 | working exactly as we intended.
| | 08:09 | I am going to scroll up a little bit further,
so we can tackle on mobile styles. And this
| | 08:14 | one is going to be
line 470, if I remember correctly.
| | 08:19 | Right about there. Yeah, right around 471 or so.
| | 08:22 | So again, in between the header and mission
styles I am just going to create a little
| | 08:24 | bit of space there and then paste
in my mobile navigation styles, okay.
| | 08:28 | So, these are going to be very
similar to our tablet styles.
| | 08:32 | First off, we start up with the mainNav, we
give it a fixed width again, and we do the
| | 08:36 | auto centering technique. So we are
really centering it just in a smaller space.
| | 08:39 | However, this time we're giving a considerably
larger margin on the bottom, and that has anything
| | 08:43 | to do with the mission statement following
it, not having the photo. So we're just giving
| | 08:47 | ourself a little bit of negative space there.
| | 08:49 | The other thing that we're doing is we're
lowering the amount of margin we need to the
| | 08:52 | right, because we have less space.
We're still stripping it from the last child, however.
| | 08:56 | But then we have got a couple of
things that are a little different. The font size
| | 08:59 | is smaller, the text alignment is still on the center,
but take a look at the padding bottom we have here.
| | 09:03 | The padding to the bottom is 50 pixels, which
is fairly sizable when you compare that to
| | 09:07 | the tablet in the desktop layouts.
| | 09:09 | Now, the reason for that has everything to do with
the size of your finger. That's right--your finger.
| | 09:13 | Studies have shown that the average touch,
in terms of how much screen real estate it
| | 09:18 | takes up, is around 44 pixels
by 44 pixels, right around there.
| | 09:22 | So when you're creating these target areas
for your navigation on mobile devices, you
| | 09:26 | need to have that number in mind, because
if you have a link that is smaller than that,
| | 09:31 | an icon that's smaller than that image,
you know, something like that as somebody is going
| | 09:35 | to select, chances are they're
going to have trouble selecting it.
| | 09:38 | If you also put these items too close
together within that range, then they are likely to
| | 09:43 | make a mistake by touching
the wrong thing by accident.
| | 09:45 | So that's something you want to consider
when you're planning your mobile navigation.
| | 09:49 | And just like our tablets, we're turning the
display of our emphasis text off to hide those.
| | 09:53 | So again, I'm going to save this, go back into my
browser, refresh, and let's go down to our mobile size.
| | 09:59 | So our menu is up here. You could see that
we have the extra padding underneath it where
| | 10:03 | icons are going to go. Then we have this sort
of extra white space here to make that a little
| | 10:08 | bit more readable so that this headline is
not butting right up against our navigation.
| | 10:12 | All right, that's pretty much it.
For the most part, our basic menu is looking okay
| | 10:18 | across all the different screen sizes,
but it's still lacking all of those icons that
| | 10:22 | I was just talking about.
| | 10:23 | So, we need to go ahead and explore adding those
icons, and we're going to do that in the next exercise.
| | 10:28 |
| | Collapse this transcript |
| Using CSS sprites in menus| 00:00 | We'll finish up our basic menu
styling by adding a set of icons.
| | 00:04 | When using icons in responsive designs,
you have the additional consideration of icon
| | 00:08 | size and how using them is going
to impact your site's performance.
| | 00:12 | I want to take a deeper look at this by
first taking a look at the set of icons that we
| | 00:16 | are going to be using for our basic menu.
| | 00:18 | Now, I have opened these up in Photoshop.
You don't have to do this, but if you want
| | 00:22 | to open up and kind of
experiment with them, you can.
| | 00:23 | They are the icon_sprites_25.png. You can
find this in the 03_03/_images directory.
| | 00:31 | I have two sets of sprites.
I have got the 25.png and the 50.png.
| | 00:36 | They are exactly the same.
| | 00:37 | They are just a little bit larger. The 50 is
50 x 50 pixels for each one of them, whereas
| | 00:42 | the 25 of course is 25 x 25.
| | 00:44 | So you can see in a sprite file, each of
the icons are just sort of occupying
| | 00:48 | their own space within this much larger file.
| | 00:51 | What this allows me to do is by using
background images, I can use the background position
| | 00:55 | property to sort of only
show one of these at a time.
| | 00:59 | So I can define, almost like a window if you
will, for the element that's displaying them,
| | 01:03 | give it a width and a height or enough
volume to display this, and then just sort of use
| | 01:06 | background position to move these around
so that only one is showing at a time.
| | 01:10 | That's basically how sprites work.
| | 01:12 | The reason that that's so effective for
responsive design--and I will talk a little bit more about
| | 01:16 | this later on in the course when we talk
about the performance. But one of the reasons why
| | 01:21 | this is so effective for responsive designs
is it reduces the amount of HTTP requests.
| | 01:25 | It reduces the amount of requests
made to the server for resources.
| | 01:29 | So in this case, I only have four icons, but let's
imagine that we are using twenty icons within our site.
| | 01:34 | Each separate icon, if you were to do them one at
a time, would be a separate request to the server.
| | 01:40 | Now, that doesn't mean much over a wired
connection or a fast wireless connection, but over a
| | 01:45 | cellular network or network where there
is a lot of latency, that is an issue.
| | 01:49 | So or mobile devices, all those requests to
servers are really performance inhibitors.
| | 01:54 | So by using sprites, we are essentially making
that request a single request and then moving
| | 01:59 | it around when we need to use a different one.
| | 02:01 | So there's a trade-off because of course
these are all going to be larger in file size
| | 02:04 | because they are just bigger, but the
performance enhancement that you get by reducing requests
| | 02:09 | is often times very, very much worth it.
| | 02:12 | So let's take a look at
how to put these in action.
| | 02:13 | I have opened up the index.htm, along with
the corresponding main.css file found in the
| | 02:20 | 03_04 directory. And like most of these things,
we are going to start off in the desktop style,
| | 02:25 | so I am going to scroll all the way down towards
the bottom and find my desktop style navigation.
| | 02:31 | And it's just underneath these header
styles, right around line 1110 or so.
| | 02:35 | And I am just going to put these at the
very, very bottom of my navigation style,
| | 02:39 | so again, just above the mission styles.
As we have in the past, I am just going to enter
| | 02:43 | the code in, just paste it in, and then go
over each line by line, so feel free to pause
| | 02:47 | the video and then type all of these in. But I
want to talk about what these are doing for us.
| | 02:52 | You'll notice that each of these selectors
is targeting a link with a specific class.
| | 02:55 | When we structured our navigation, we gave
each menu item its own class that identified
| | 03:00 | it: gallery, gear, interact, and shop.
| | 03:02 | Now we are going to take advantage of that.
| | 03:04 | So we are essentially applying a background
image, and it's that 25 x 25 pixel image.
| | 03:09 | You will notice that for the no repeat, we
have both the horizontal and vertical values
| | 03:14 | for how we want to position these sprites.
| | 03:16 | Now, the vertical values make sense, because
you may have noticed it was a very thin sort
| | 03:21 | of vertically aligned set of icons. So the
three pixels--the -98, the 197, the 297--they
| | 03:26 | kind of tell you how far apart these are.
| | 03:28 | They are about 100 pixels apart.
| | 03:30 | I have always found that as much as I try
to align the icons with exactly 100 pixels
| | 03:36 | apart from each other, l always tend to
have to change it up just a little bit so they
| | 03:40 | visually it looks centered.
| | 03:42 | So it's a couple pixels off. For me it's
generally just sort of knowing where it's supposed to
| | 03:46 | be and then kind of
experimenting around with it.
| | 03:47 | You can see that the negative value move
you up along the axis of the graphic itself.
| | 03:51 | Now what may be confusing you there are
the horizontal values, and the reason for this,
| | 03:55 | remember, is that we are using centered text.
| | 03:57 | So the text is center-aligned.
| | 03:59 | So even though we have a little bit of padding
off the left-hand side to allow for the icons,
| | 04:03 | I had to do a little bit of adjusting of
the horizontal value to make sure that it was
| | 04:08 | accurately lined up with the text as well.
| | 04:10 | So I would love to tell you that every single
time I use sprites I know exactly which values
| | 04:13 | to plug in, but that's not true.
| | 04:15 | A lot of times I have an idea of what the
values are going to be and then I have to
| | 04:18 | tweak them based on how the
particular icon looks with the text.
| | 04:22 | So if I save this and go into my browser and
refresh, I can see now that my icons are all
| | 04:28 | coming into place. And they are all
positioned relatively well in terms of lining up with
| | 04:32 | the text the way that I want.
| | 04:33 | So I am going to shrink this down to tablet size,
and we can see that we don't have our icons here,
| | 04:38 | so let me go back into my code, and
we will tackle our tablet styling.
| | 04:42 | So I am just going to scroll up
again till I find our tablet styles.
| | 04:45 | So around line 774 or so
should be my tablet styles.
| | 04:49 | Again, I am just going to give myself a little
bit of space between the current into my main
| | 04:53 | navigation styles and the mission styles,
and I will place in my tablet sprite code.
| | 04:58 | Same icons, same code for the most part.
You'll notice that this time, instead of having to
| | 05:03 | horizontally adjust, we're centering this
horizontally, and then vertically, again,
| | 05:08 | we're going down through these.
| | 05:10 | These values are different as well, and the
reason for that is if you remember from when
| | 05:15 | we looked at the finished version of this,
these icons are appearing below the text.
| | 05:18 | So exactly how they're going to be positioned
within that parent element is going to change
| | 05:23 | to allow room for the text above it. And then
the centering there horizontally is going
| | 05:27 | to align it horizontally centered with the text.
| | 05:29 | So if I save this, go back and I refresh my
tablet view, the icons just come right into
| | 05:35 | position just where I want them
underneath the text. Fantastic!
| | 05:38 | Now, the last one we are going to
deal with is our mobile styles.
| | 05:42 | So let me go back into my code, scroll up
through my styles until I get to my mobile
| | 05:47 | navigation, right above my mission style here,
around the line 494 or so, and we will just put code in.
| | 05:55 | Now, I am just going to allow you to pause
this and kind of go ahead and type these out.
| | 06:00 | And then I want to talk about
one of the big differences here.
| | 06:03 | You'll notice that the icon sprites that
I am using is not the 25 x 25 pixel one.
| | 06:07 | I am actually using the 50 pixel
one, and there's a big reason for that.
| | 06:09 | And the big reason for that again--we talked
about in the last movie--that is your finger.
| | 06:13 | So when somebody's finger is used to navigate
or touch a device, typically the average size,
| | 06:19 | research has shown it to be
around 44 pixels x 44 pixels.
| | 06:23 | So I wanted to make sure that I had a large
enough active area to where it'd be very easy
| | 06:27 | for somebody to touch and activate it, and they
wouldn't be so small that they are going to miss it.
| | 06:32 | So in that case I am
actually going to use larger icons.
| | 06:35 | Now, that seems almost contradictory to what
you'd think; you'd think, oh, you're going
| | 06:39 | down to a mobile screen size--you are
probably going to want to use a smaller icon, when
| | 06:43 | in fact, in this case we want to use
larger icon so that we are giving people a nice
| | 06:46 | large visible area to target for and click.
| | 06:50 | And because of this file being bigger,
you will notice that the vertical values for our
| | 06:54 | background positioning are quite a bit more.
| | 06:56 | So if I save this and go into my browser and
refresh, there is our active clickable area.
| | 07:02 | It also puts more emphasis on the icons
themselves than the text, so it's a much more visual style
| | 07:07 | of menu than we have been using before.
| | 07:09 | It allows people to really visibly say okay,
I want to go to the galleries, I want to check
| | 07:13 | out the camera equipment, I
want to shop, that sort of thing.
| | 07:15 | And for a mobile context, that's
actually a little bit better as well.
| | 07:19 | So now we have a fully functional basic
menu that operates pretty much the way that we
| | 07:24 | want it to across multiple screen sizes.
Even in case of a simple menu like this one,
| | 07:29 | you still have a lot of factors to consider
when building your menus that need to work
| | 07:33 | across all these multiple
contexts that we have been talking about.
| | 07:36 | Just be sure to carefully plan through site
navigation before you start building the site.
| | 07:41 | Extra time given to those initial planning
stages can really save you a tremendous amount
| | 07:46 | of work later on, and that will sure that your
users have effective navigation work regardless
| | 07:51 | of which device they are using.
| | Collapse this transcript |
| Structuring complex menus| 00:00 | As menus become more complex, the challenges around
making them responsive grow, almost exponentially.
| | 00:07 | Not only do you have to deal with a shrinking
screen real estate, but you also have to deal
| | 00:11 | with changes in device functionality, things
like touch screens and different user expectations
| | 00:18 | across different devices.
| | 00:20 | So in this next series of exercises, we are going to be
creating a relatively simple responsive dropdown menu.
| | 00:25 | Now, as we build this, I am going to point out
many of the factors that we need to consider
| | 00:29 | to get our menu functioning across
different screen sizes and devices.
| | 00:34 | And as you'll see, even simple menus like
this one can require a great deal of thought.
| | 00:40 | So I'm going to start by working in the
index.htm file, which is found in 03_05 directory.
| | 00:46 | Our menu is going to be fairly long
structurally, so again, I'll be pasting some code in and
| | 00:51 | then kind of going along with you guys.
| | 00:53 | But we are going to be building this in stages.
| | 00:55 | So you know as I'm working, I'll explain the
code, but feel free to pause the video and
| | 00:59 | kind of look and see what we are doing.
And where we are placing the code matters, so
| | 01:02 | just be really, really careful about
how you are coding along with me here.
| | 01:06 | So just below the site navigation, about
line 18 or so is where our first bit of code is
| | 01:11 | going to go, and we'll start building our menu
the way we start building almost all menus.
| | 01:14 | We are just going to go ahead
and put an unordered list in.
| | 01:17 | This unordered list is going
to have a class of topMenu.
| | 01:21 | So just start by building an unordered
list and then give it a class of topMenu.
| | 01:25 | Now, the reason I am using that top menu
class is it identifies which menu this is, and it
| | 01:31 | also allows me later on to toggle that
menu off and on on smaller mobile screens.
| | 01:37 | So even though it's a fairly semantic class,
it's got some behavioral usage there as well.
| | 01:42 | Inside that unordered list, we are going to
go ahead and do sort of the top level of our
| | 01:46 | menu, so none of the dropdowns yet, but the
top level of this. And let me kind of go over
| | 01:52 | this carefully with you guys. And I am just
going to apply a little bit of source formatting
| | 01:56 | so this is easier to read.
| | 01:59 | So inside the unordered list, here is what
I want you to do. You are going to create
| | 02:03 | several list items. The first list item
that you are going to do is this one, and notice
| | 02:07 | it doesn't have a link inside of it.
| | 02:08 | It has an h3, Heading 3,
with the title of Galleries.
| | 02:12 | Now here's the reason that I'm
using a heading instead of a link here.
| | 02:17 | This is obviously going to also contain a
submenu, or a subdirectory, a dropdown menu,
| | 02:22 | and so with touch devices, there's some real
problems in having a link actually trigger
| | 02:28 | the dropdown menu, because clicking on the
link obviously takes you to the page.
| | 02:32 | So on touch devices you can change it so that
a quick touch drops the menu down and a
| | 02:38 | longer touch actually navigates into the page,
but that can be fairly complex to code, and
| | 02:43 | it can also be upsetting to the user if they don't
really have those expectations or haven't figured that out.
| | 02:48 | So it's one of those things where in this case, I
can go ahead and use the h3 semantic because
| | 02:53 | it's a heading of the submenu section.
| | 02:55 | I am using the h3 because I'll use the h2
above it, and I can wire up the behavior exactly
| | 02:59 | the way that I want it.
| | 03:01 | If you don't see an h3, it's just a link,
in this case going to the blog where it's
| | 03:06 | just a normal link.
| | 03:07 | It doesn't have a dropdown menu. So we only
have three dropdown menus. We have the Galleries,
| | 03:11 | the Gear, and Shop. So each one of those,
| | 03:14 | notice that each one of those h3s is contained
within a list item, so as you're coding this,
| | 03:19 | make sure you're paying close attention to that,
and you have the individual list items themselves.
| | 03:24 | So now that you've completed that portion of it,
we are going to go ahead and do our submenus.
| | 03:28 | Now, what's really important about how you
enter the submenus is where we locate this code.
| | 03:33 | It needs to be inside the list item that
occupies the heading that it represents, so for the first
| | 03:38 | submenu, we are going to go inside
the list item that contains Galleries.
| | 03:41 | I am going to create a little bit of empty
space below that, and I am going to go ahead
| | 03:44 | and enter in our first submenu.
| | 03:46 | Now, once again, I'll let Dreamweaver do its
magic, apply a little bit of source formatting
| | 03:50 | so this easier to read, and then scroll down.
| | 03:52 | As a matter of fact, let me close this pane.
| | 03:54 | That's going to be much, much better.
Give ourselves a little bit more real estate for our code here.
| | 03:59 | That's easier for you guys for read.
| | 04:00 | So a couple of notes about this. As you guys
are coding it for free, again, to pause the
| | 04:04 | video and go ahead and code this, or you can
pull the code over from the Finished Files
| | 04:08 | folder as well, and it's not cheating.
| | 04:10 | I am copying and pasting the code as well.
| | 04:12 | So below the Galleries,
we have another unordered list.
| | 04:15 | This one have a class of submenu that
identifies that this is indeed a submenu for a main menu.
| | 04:20 | We have links to all of our galleries, our recent
galleries, archived galleries and members' favorites.
| | 04:25 | There is nothing really going on here special
in terms of classes. We do have classes that
| | 04:29 | identify kind of which gallery it is, but we are
not really going to be doing anything with them.
| | 04:34 | They are more just for
semantic purposes than anything else.
| | 04:36 | I am going to do my second menu now, which
is going to be a dropdown menu which is below
| | 04:41 | gear. So going right below gear, let me go
ahead and paste that in and again apply some
| | 04:45 | source formatting, just so
that's a little easier to read.
| | 04:49 | There we go. And now you can pause the
video for just a second and code this.
| | 04:54 | Again, pretty much the same thing.
| | 04:56 | It has a ul, the class of submenu. We have
gear, cameras, lenses, bags, favorite apps,
| | 05:01 | that sort of thing, and now we have one
last submenu, right down here for shop, and I am
| | 05:06 | going to go ahead and put that in, apply a
little bit of source formatting so it's easier to
| | 05:11 | read, and then you can pause the
video and go ahead and code that.
| | 05:16 | So same structure, a ul, unordered list with a
class of submenu. Make sure it's fully inside
| | 05:20 | the list item that holds
the heading that it refers to.
| | 05:23 | And this one has shop, prints, clothes, and
accessories. Again, nothing really out of the ordinary
| | 05:28 | here, a fairly simple dropdown menu.
| | 05:30 | For the most part, our menu is nice and semantic.
We have got classes that identify the different
| | 05:35 | submenus, the different elements themselves,
and we even have a class on the top menu of
| | 05:40 | a ul class topMenu to identify that as being
sort of the parent menu of all of our submenus.
| | 05:45 | And when you're coding these, for the most
part you're going to be able to keep a really
| | 05:49 | nice and semantic clean code. A lot of the
dropdown menus I've seen people do for responsive
| | 05:55 | menus will just be littered
with just useless--not useless.
| | 05:59 | They are obviously not useless, but non-semantic class
names that sort of enable the functionality of the menu.
| | 06:05 | I try, when I'm working, to do as little that as
possible, but I'm not always able to avoid it.
| | 06:12 | Case in point, what I want you to do, last
thing we are going to do here to structure
| | 06:15 | these is, the list items that contain the
submenus, so for each one that has a heading, I want
| | 06:20 | you to go ahead and apply a class of
hover to those, so to each one of those.
| | 06:27 | Now the reason that we're doing this has
everything to do with the fact that in our tablet dropdown
| | 06:33 | menus, we need to support
both touch and hover events.
| | 06:38 | I want to show you what I am talking about
when we are entering this class of hover in and
| | 06:42 | why that's necessary.
| | 06:43 | So if I go out to my browser and sort of
refresh my menu here, you can see that at the desktop,
| | 06:49 | our dropdown menu is working fine.
The styles for this, by the away, are already written,
| | 06:54 | and when I go down to my Tablet Styles, you can
see for tablet, galleries and gears working
| | 07:00 | just fine, but shop is not yet.
| | 07:02 | Now, the reason that shop is working at the
desktop size but not at the tablet size
| | 07:09 | has everything to do with those classes.
The tablet size for tablet devices, or for this
| | 07:15 | size screen, which might include netbooks
or chromes, there's a lot of devices at this
| | 07:19 | screen size range that support either
touch or click or even both. So they may have a
| | 07:24 | mouse pointer, they may have touch, and I
want to be able to support those. So essentially,
| | 07:29 | we are going to write a script that says, hey if
touch is enabled, let's use touch for this menu.
| | 07:33 | If it's not enabled, let's use hover styling.
| | 07:36 | The problem is, if I use the same hover
styling that I have here, then the hover styling and
| | 07:43 | the touch functionality would be happening
at the same time, and it would be really easy
| | 07:46 | for people to register multiple events.
| | 07:49 | So I have to use a different set of styles
for the dropdown menu for my tablet, and that's
| | 07:53 | what that particular class is doing for us.
So if I go back into my code, scroll down,
| | 07:58 | and get this list item here, and do
class="hover" on that, if I save this now and refresh, you
| | 08:06 | can see that now the dropdown menu is
working there. So it's actually a different set of
| | 08:09 | styles on tablet this driving that, and
that's why we have to use the slightly non-semantic
| | 08:14 | class of hover on those individual list items.
| | 08:17 | So it does clutter up the menu a little bit,
but it's not bad, and it gives us that ability
| | 08:21 | later on, as we are going through these
exercises, to wire up the tablet functionality a little
| | 08:27 | differently than the rest of the menu.
| | 08:29 | Now, I do want to point out that you are probably
testing is along with me, hopefully, and thinking
| | 08:33 | well, that was really, really simple.
| | 08:34 | Notice that when we get down to mobile,
however, the menu is gone, and that's not good,
| | 08:38 | so we are going to need to fix that. And you
know, you will notice that the styling for
| | 08:42 | this is already done, so we are actually
not going to go over how to style the dropdown
| | 08:46 | menu in this particular course.
| | 08:48 | If you have never built one of those HTML
and CSS dropdown menus before, check out my
| | 08:53 | course on CSS: Styling Navigation, where I
have an entire chapter on styling dropdown
| | 08:58 | menus with pure HTML and CSS.
| | 09:00 | I am using the exact same technique
that I covered in that course here,
| | 09:04 | so it's pretty much the same thing.
| | 09:06 | What we want to focus on is
the functionality of that.
| | 09:09 | So in the next series of exercises are
actually going to be focusing on controlling
| | 09:12 | the functionality and behavior of our menu,
not so much styles. So here we have created
| | 09:17 | this menu, and it is for the most part nice
and semantic and lean, but it is worth noting
| | 09:21 | that part of its structure is going to be
driven by functionality. And I want to emphasize
| | 09:25 | the point that when you're planning a
responsive navigation like this, it's really, really
| | 09:29 | important to sit down and carefully plan out
all aspects of how you want this menu to perform
| | 09:35 | prior to actually creating the initial
structure so that you don't find yourself having to
| | 09:39 | go back and modify that structure later on.
| | Collapse this transcript |
| Using jQuery for menu behavior| 00:00 | I'm a firm believer in keeping
things about as simple as possible.
| | 00:03 | If it can be done through HTML and CSS alone,
I'm likely to use that solution over one
| | 00:08 | that uses client- or server-side scripting.
| | 00:11 | However, there are times that you need scripting
to help with functionality, and that's certainly
| | 00:15 | going to be the case with our responsive menu.
| | 00:18 | Now, for our menu, we're going to use jQuery
to help the menu respond to changes in screen
| | 00:22 | size, respond to click and touch events, and
become more efficient in smaller screen sizes.
| | 00:26 | In this exercise, we're going to create the
bare bones of our menu functions and then give
| | 00:30 | you a general overview of what the
jQuery is going to be doing for us.
| | 00:34 | Now, if you've never used jQuery before, don't
panic; we're going to go through all the code.
| | 00:38 | We'll type it line for line for the most part,
although there will be some times where I'm
| | 00:42 | pasting the code in and having you type it.
| | 00:43 | But we'll still explain what the code is
doing and why it's doing it, and what it's doing
| | 00:47 | for us. And if you are familiar with jQuery
and have used it for a while, I can tell you,
| | 00:52 | you're probably better at it than I am.
| | 00:54 | I don't dislike jQuery.
| | 00:55 | I enjoy what it does for me, but I don't find
myself staying up late at night wishing that
| | 00:59 | I was programming or
writing jQuery, if you will.
| | 01:02 | So the very first thing we're going to have
to do here, we're working in the index.htm
| | 01:05 | that can be found in the 03_06 directory,
and the first thing we have to do, since we
| | 01:09 | want to use jQuery, is load it up.
| | 01:12 | There are a couple of different ways to do
this. We're going to do it the really easy
| | 01:15 | way here for this portion of our course,
and later on, I'm going to show you guys some
| | 01:20 | loading techniques you can use to load some
fallbacks in and maybe even do some asynchronous loading.
| | 01:26 | Okay, so once we're done towards the bottom
of our page, I'm just going to create some
| | 01:29 | empty space here between
the footer and the body tag.
| | 01:32 | I like loading my scripts towards the bottom
of the page, simply because that way the loading
| | 01:38 | of your scripts doesn't interfere
with the actual loading of your content.
| | 01:43 | This is really kind of a long string to type
out, because I want to be loading this from
| | 01:46 | Google's content delivery network.
| | 01:48 | Let me show you online where you can find this.
| | 01:50 | If you go to developers.google.com or just to
Google and search for a Google hosted jQuery,
| | 01:55 | you'll find this page. And they have a
list of available libraries that they host.
| | 02:00 | And I'm just going to click on the jQuery link.
| | 02:01 | Now, there are several advantages to
letting Google host jQuery for you.
| | 02:05 | One is that their content delivery server is
really fast, probably faster than your server.
| | 02:09 | So even though you're not hosting it locally,
it's still probably going to be faster to
| | 02:12 | pick it up from here.
| | 02:13 | Also, they are going to make sure that you
have the most recent version, that sort of thing.
| | 02:17 | So I'm going to find this script
tag right here for the jQuery library.
| | 02:20 | I'm going to copy that, and then in my page,
in that little empty space that I created
| | 02:25 | down there between the footer and the closing
body tags, I'm going to go ahead and paste that in.
| | 02:29 | For the most part, the reason that we don't
have our protocol here is because when you
| | 02:32 | deploy your application or your site or whatever,
it allows that your server and Google server
| | 02:37 | to figure out which protocol is going to be
best suited for that, whether it's the secure
| | 02:41 | protocol or something else.
| | 02:43 | I have found, however, that for local testing
purposes, leaving that protocol off means
| | 02:48 | that it doesn't get loaded.
| | 02:49 | So I'm going to go ahead and add the protocol,
the http to that, but if I was going to deploy
| | 02:54 | this or upload this to my remote
server, I would not include that protocol.
| | 02:57 | So I'm going to go ahead and save that.
| | 02:59 | Now that we've got that out of our way, we're ready
to go ahead and start writing the scripts for our menu.
| | 03:03 | Now I'm going to do that
in another empty script tag.
| | 03:06 | So, I'll create another script tag, an
opening and a closing tag below that, and I'm just
| | 03:11 | going to create a little bit of empty
space to allow me to write my jQuery.
| | 03:16 | Okay, so inside that script tag we're going
to go ahead and do sort of the bare bones, if
| | 03:20 | you will, of the functionality.
| | 03:21 | The very first thing I want
to do is create a variable.
| | 03:23 | So I'm going to do a comment.
| | 03:25 | I really like to comment out my code and if
you look at the finished files, you'll probably
| | 03:29 | find comments that are a little bit more
involved than the ones that I'm typing in here, just
| | 03:32 | in the interest of time.
| | 03:33 | But I like comments. They help me understand
what it is that I'm doing, and they help explain
| | 03:37 | it to other team members as well.
| | 03:39 | So for this comment I'm going to type in
variable to hold current window state. And I'm just
| | 03:46 | going to do dash small, medium, or large. And
that's definitely one of the things, in terms
| | 03:53 | of functionality, that we're doing here.
We're going to have jQuery check the current window
| | 03:58 | and see whether the user is using it on a
large screen, a medium screen, or a small screen.
| | 04:02 | Notice that I'm avoiding terms
like desktop, tablet, and mobile.
| | 04:05 | I still use them interchangeably, occasionally,
but really, a medium screen size doesn't mean
| | 04:10 | a tablet, and it doesn't mean a
netbook and it doesn't mean a chrome.
| | 04:12 | It just mean screen dimensions.
Same thing for smaller screens.
| | 04:15 | It doesn't mean smartphones.
It just mean smaller phone.
| | 04:18 | So basically, it's just going to check the
size and apply the appropriate functionality
| | 04:21 | for that size screen for the menu.
| | 04:22 | All right, so after that, I'm going to create
a variable, so I'll use the var keyword.
| | 04:26 | And then right after that I'm going to go ahead and type
in windowState using CamelCase for the naming event.
| | 04:33 | So windowState = large.
| | 04:36 | So basically, I'm establishing an
initial value for this variable
| | 04:40 | that's going to be large.
| | 04:41 | So I'm just assuming that it's going to large,
and then we'll have the functions handle whether
| | 04:45 | or not it is actually large.
| | 04:47 | Since we have three separate menus--we have
the small, medium, and large size menus-- we're
| | 04:51 | going to need to have the behavior or the
functionality for each one of those controlled
| | 04:55 | by a separate function.
| | 04:56 | So we're going to go ahead and
create the bare bones of those as well.
| | 04:59 | So the first comment I'm going to do, underneath
the variable, is handle menus for small screen.
| | 05:07 | Then I'm going to go ahead and use the function
keyword to create a function, and this function
| | 05:11 | is going to be named small menu. And then I'm just
going to open and close a couple of curly braces there.
| | 05:17 | So function small menu, open and close your
parenthesis, and then open and close that.
| | 05:21 | Now, I always give myself a little bit of
empty space there, and what that does for me is
| | 05:25 | it just allows me to just click right in and
start typing when I start building this function.
| | 05:29 | I'm going to build two more functions.
| | 05:31 | So, handle menu for medium screens. And this
one is going to be function medium menu, so,
| | 05:40 | very similar. And I'm going to do the same
thing, where I'm just sort of building out
| | 05:44 | the bare bones of this.
| | 05:45 | And then one more, handle menu for large
screens. And this is going to be a function, lgMenu,
| | 05:55 | and again, I'm just going to
finish out the structure of that.
| | 06:00 | So I've got three functions here.
| | 06:02 | There's nothing in them yet, but eventually
they are going to control the functionality
| | 06:05 | for the screen, whether
it's small, medium, or large.
| | 06:08 | Now, how in the world is the browser going
to know, or the user agent is going to know,
| | 06:12 | what screen size it is? Well, we
have to do that function as well.
| | 06:15 | So just above those three individual functions
we've created and below the initial variable,
| | 06:20 | I'm going to create a function that checks
the state of the window size and then fires
| | 06:25 | off the appropriate behaviors.
| | 06:26 | So I'm going to create a comment. I'm going to say
check initial width of the screen and respond
| | 06:35 | with appropriate menu.
| | 06:37 | On the line below that, I'm going to use the
document ready function, so I'm just going
| | 06:42 | to type in (document).ready. And I'm
actually not going to pass the event into this.
| | 06:48 | Now, I'm using Dreamweaver to kind of help
me out with this, but if you've never used
| | 06:52 | Dreamweaver or you're not using Dreamweaver,
you don't have code hinting for jQuery,
| | 06:56 | essentially you're just using the document
object. You're using the ready function, so
| | 06:59 | you're ready and then inside a parenthesis
you do a function and then you close that.
| | 07:05 | So inside that I'm going
to type in a new variable.
| | 07:07 | I'm going to create a
variable to track screen width.
| | 07:10 | So variable sw = document.body.clientWidth.
| | 07:18 | So essentially, it's going to go out to the
device or the browser that they're using,
| | 07:22 | they're going to say, okay, what width are
you, and that value is going to become a variable
| | 07:25 | called screen width, which
is going to allow us to check.
| | 07:29 | So now we're going to do some conditional logic.
| | 07:30 | I'm going to say, if screen width is less
than 481. And I always like, again, starting
| | 07:38 | my curly braces and ending them so that when
you get into any type of situation where you
| | 07:42 | are chaining together some conditionals,
it's really, really easy to forget to close a
| | 07:46 | curly braces or forget where you
are, so I like kind of doing that.
| | 07:49 | So if it's less than 41,
we're going to fire the small menu function.
| | 07:52 | Then we're going to do an else if, and then
inside that we're going to say screen width
| | 07:57 | is greater than or equal to 481 and screen
width is less than or equal to 768. In that
| | 08:09 | case, we're going to firing the medium menu.
| | 08:14 | Now, if you're not familiar with writing
jQuery or JavaScript, it is all case-sensitive, and
| | 08:20 | punctuation matters.
| | 08:21 | So if you start testing what you are doing
a little bit later on and it's not working,
| | 08:25 | go back into your code and look and make
sure that you've closed all of your braces, make
| | 08:30 | sure that everything is spelled correctly.
| | 08:31 | Make sure that the case is
correct. All that stuff matters.
| | 08:35 | And then finally, we're just going to do an else,
and then inside the else, we'll fire a large menu.
| | 08:43 | Now, essentially, what this is going to do
for us is this is going to say, hey, go ahead
| | 08:47 | and check the screen size.
| | 08:48 | If the screen width is less than
481 pixels, run the small menu code.
| | 08:52 | If it's between 41 and 768, run medium menu;
otherwise, we're going to assume we're on a
| | 08:57 | large screen monitor or
desktop and we'll run large menu.
| | 09:00 | Now you'll notice that we're using the exact
same values to check for here that we're using
| | 09:04 | in our media query breakpoints,
and that's really important.
| | 09:06 | We want to tie the media, we want to tie
the menu functionality along with the styling
| | 09:10 | that we're doing as well, and we're going
to use the breakpoints to do that for us.
| | 09:13 | All right, so I am going
to go ahead and save this.
| | 09:15 | So now we have the initial
structure or our menu functions.
| | 09:17 | Now, before we can get into the needs of each
menu, however, you may have noticed that what
| | 09:21 | this function is doing for us is it's
checking the initial width, but it's not dealing with
| | 09:25 | the fact that somebody might resize that.
So next, we're going to need to account for
| | 09:29 | our screens being resized, and
we'll tackle that in our next exercise.
| | Collapse this transcript |
| Responding to changes in screen size| 00:00 | Before we can begin dealing with the
functionality of the individual menus, we need to address
| | 00:05 | what happens if the screen is resized.
| | 00:07 | Now, in real life people don't just resize
their screens as often as you see in all those
| | 00:12 | responsive design demos.
| | 00:13 | That always cracks me up, actually, when
people demonstrate a responsive site and the first
| | 00:17 | thing I do is keep resizing the browser
window over and over again, and people don't really
| | 00:20 | use the web like that.
| | 00:22 | But however, it does happen, especially on
some smaller devices when you have changes
| | 00:26 | in things like orientation.
| | 00:27 | So we're going to write a quick function
that's going to handle any screen resizing for us.
| | 00:31 | So I'm working on the index file inside the 03_07
directory, kind of picking up right where we left off.
| | 00:37 | So I'm down there towards the bottom of the
page inside our existing script. And I'm just
| | 00:42 | going to create a new line or two, just
below the document ready function, and I'm going
| | 00:47 | to do another comment here, and I'm going
to type in "take care of resizing the window."
| | 00:54 | Or window resizing and all that,
however you want to write that, all right?
| | 00:58 | So what we're going to do is we're going
to grab the window object and we're going to
| | 01:02 | check for resize, and then inside that I'm
going to type in function, and we'll go ahead
| | 01:09 | and close out our function.
| | 01:13 | So essentially we're saying hey, when
the window is resized, let's do something.
| | 01:16 | Now, the first thing I am going to do is
create another variable, and I'm going to create the
| | 01:20 | screen width variable, so sw, and we're
going to say sw=document.body.clientWidth.
| | 01:29 | So that should look fairly similar. It's exactly
what we did in our last one, and it's essentially
| | 01:33 | again going out and saying, okay, I want to
create a new variable and I want the value of that
| | 01:37 | to be the document body width.
| | 01:38 | So with the clientWidth screen size,
basically is what I am trying to get at.
| | 01:41 | So every time the browser or the window is
resized it will check and that variable will be updated.
| | 01:46 | All right, so now we can do
some more conditional logic.
| | 01:49 | We are going to say if(sw<481 && windowState
!= 'small'), then I'm going to open and close
| | 02:05 | those curly braces.
| | 02:05 | Okay, so let's talk a little
bit about what this is doing.
| | 02:08 | So we are doing some conditional logic, and
we're saying, okay, check the screen size.
| | 02:12 | If the screen size is less than
481 pixel and the windowState !='small'.
| | 02:18 | So remember, earlier we created that variable
for windowState and now we can start checking
| | 02:22 | it to see kind of where we are at, because if
the screen is already small and somebody resizes
| | 02:25 | it and it stays small, you don't want any
changes to occur. You only want changes to
| | 02:29 | occur if the screen size become small and
that your windowState wasn't at that moment,
| | 02:34 | or wasn't at the outset of that, small.
| | 02:36 | And what we're going to do is we're going
to fire the small menu function, so we're
| | 02:39 | going to say that hey, if the screen is
resized to a small size, go ahead and fire the small
| | 02:43 | menu function so that it will
function properly at that size.
| | 02:47 | And then what we're going to do is, just below
that, I'm going to do another conditional statement,
| | 02:50 | and I'm going to say if(sw>480 && sw<769 &&
windowState != 'medium') and then once again, I'll go
| | 03:13 | ahead and open and close my curly braces here.
| | 03:16 | Now, for this one we're going to
fire medMenu, as you probably guessed.
| | 03:20 | What this is doing is it is saying, hey,
if the screen width is greater than 480 but
| | 03:24 | still less than 769 and the windowState is
not equal to medium, let's change something.
| | 03:30 | Now, you've probably noticed that above here,
I'm using less than or greater than equals
| | 03:33 | to, and down here I'm not.
| | 03:35 | Yes, I could have done consistently, but
it's just kind of six of one, half dozen of the
| | 03:40 | other's personal preference. Whatever
you like to do, it doesn't really matter.
| | 03:44 | Under that conditional statement I'm going to
do one more. I'm going to say if(sw>768 && windowState
| | 03:59 | != 'large') inside that we're going
to fire lgMenu, and we'll go ahead and save that.
| | 04:04 | Again, notice that we are using the same
values as the breakpoints in our media queries and
| | 04:09 | the same values that we used earlier.
| | 04:12 | We now have just the basics of
our menu functionality covered.
| | 04:16 | When the file initially loads--and that's what
this function is doing, above it--it's going
| | 04:20 | to check the screen size and run the
function that's appropriate for that size.
| | 04:24 | Now, this function that we just got finished,
what this one is going to do is if there's
| | 04:28 | a change to the screen size, it's again going
to check the screen dimensions and then it's
| | 04:31 | going to run the appropriate function as well.
| | 04:34 | So now that we have those bases covered, we can
now move on in our next exercises and focus
| | 04:38 | on the individual menu functions.
| | Collapse this transcript |
| Minimizing menus for small screens| 00:00 | One of the biggest problems in dealing with
larger menus is how to display them on smaller screens.
| | 00:05 | They take up an inordinate amount of space,
and if your menu is at the top of the screen,
| | 00:10 | you could be forcing users to scroll all
the way through your menu before they can get
| | 00:14 | to what they are actually
there to see, which is your content.
| | 00:18 | To address that in our responsive menu, we
are going to initially hide the menu from
| | 00:21 | users and give them a small menu button that will then
allow them to toggle that menu either open or closed.
| | 00:27 | Now, there are a lot of different ways that
you could approach this, so you know, the way
| | 00:31 | that I choose to do it within this menu
isn't necessarily the way that you might choose
| | 00:35 | to do it or somebody else, and it's okay.
| | 00:37 | I tend to lean towards using
CSS to do as much as possible,
| | 00:41 | so if I switch over to my CSS and I go down
to my mobile styles--so I am looking in the
| | 00:46 | main.css file in the 03_08_css directory.
Say that three times as fast. It takes a while
| | 00:53 | to get down here at this point, but here we go.
| | 00:56 | So if I get down in to the styles, I want
you to focus on two styles in particular that
| | 01:00 | are going to be important
to what we are doing here.
| | 01:03 | The top menu, which is the actual menu
itself, is the unordered list. The initial styles
| | 01:07 | for it is a maximal height of zero and a
visibility of it, which is why we can't see it by default.
| | 01:13 | You'll notice that there is another selector
below that that change the class expand span
| | 01:17 | to it. So when the class expand is applied
to the same element that has top menu, which
| | 01:22 | will be our top menu, now max-height
changes to 900 ems, which allows it to grow, and the
| | 01:28 | visibility is set to visible.
| | 01:29 | Now, would one of those
two suffice instead of the other one?
| | 01:32 | They would, and let me give you the
reason why I use both of them here.
| | 01:35 | One, I use max-height because you can
animate maximum height using transitions.
| | 01:39 | The final version of this, I am not actually
transitioning or animating the menu, but max-height
| | 01:43 | gives me that capability, so later on, if you
guys want to experiment and play around with
| | 01:47 | it, if you want to see how it would look like
if that were animated, that would work just fine.
| | 01:51 | One of the things I've noticed, however, on
some of the iOS devices and on some of the
| | 01:55 | android devices, when you set the height of
element 0, you still get like one pixel's worth
| | 02:01 | of that element at the very top so it
makes it look like there is a border there that
| | 02:04 | isn't really there.
| | 02:06 | So the other thing I am
doing is using visibility.
| | 02:07 | I am hiding it and then
using the visibility: visible.
| | 02:10 | So what's going to happen is, through jQuery,
we are going to create an element on the page
| | 02:14 | that there is a toggle button. When somebody
touches or triggers that toggle button, it's
| | 02:18 | essentially going to go to the unordered
list and apply the class expand to it, and then
| | 02:21 | the CSS will actually
handle the visibility of that.
| | 02:25 | Now, that means that we're not relying on
JavaScript to show and hide the element.
| | 02:30 | There are a couple of reasons why I choose that.
| | 02:32 | Later on when we talk about fallback methods,
I am going to talk about how to make the expanded
| | 02:36 | version of the menu actually the default version,
so that if JavaScript is not enabled, somebody
| | 02:41 | will still be able to see your menu.
| | 02:42 | I've seen a lot of examples of this where jQuery
and JavaScript is used to show or hide the menu.
| | 02:47 | It's hidden by default and then if JavaScript is
turned off, the menu just isn't going to be visible, period.
| | 02:51 | All right, so I am going to go back to the
index.htm file, into the source code, and I
| | 02:55 | am going to scroll down into our functions.
| | 02:58 | Now, we are going to start working on the
small screen function, because remember, right now
| | 03:02 | the behavior that we are wanting to
target is the toggling of the menu itself.
| | 03:06 | So I am going to go into the function for
small menus. And as we've done in a couple
| | 03:11 | of exercises previous to this, I am going
to paste some code in, just because number
| | 03:15 | one, it's faster, and number two, you really
don't want to watch me make a lot of typos.
| | 03:20 | And there are some really complex--not
complex, but in terms of the characters we
| | 03:24 | are using here, so it's just easier for me
to paste it in than explain it to you.
| | 03:27 | All right, so the first thing that we are
going to do--I do need to tab this out so
| | 03:31 | that it looks appropriate. There we go.
| | 03:33 | The first thing is we are going to
create the actual menu toggle itself.
| | 03:36 | So the element does not exist.
| | 03:38 | I didn't want to clutter up my menu with an
element that wasn't going to be visible on
| | 03:43 | medium screens and large screens.
| | 03:44 | So I am just going to go ahead and create that.
| | 03:46 | So I am going to say hey, go find that
menu top menu and then before that, what I want
| | 03:51 | to do is I want create this.
| | 03:52 | So we are creating a div tag
with a class of menu toggle.
| | 03:56 | It has a link surrounding
the text menu inside of it.
| | 04:00 | That link literally doesn't really go anywhere.
| | 04:01 | It's just a dead target link.
| | 04:03 | And then we also have a span that
surrounds a plus symbol and its class is indicator.
| | 04:09 | Now I want to talk about that a little bit too.
| | 04:11 | It's quite common when you have menus that can
expand or contract to show some type of indicator.
| | 04:15 | A lot of people will use a triangle
that points either sideways or up or down.
| | 04:19 | I like the plus and minus, and one of the
reasons I like that is because I can just use text.
| | 04:23 | I don't have to use icons or images
with that or any type of an icon font.
| | 04:28 | It's a fairly standard way of indicating
that there's more there, so people are going to
| | 04:32 | automatically know what it is.
And then, surrounding it with a span tag,
| | 04:35 | it's going to allow us to style it and sort
of push it off to the right so that it's not
| | 04:38 | right up against the text.
| | 04:40 | Now the next thing that we want to do is we want
to append that plus indicator to all of the h3s.
| | 04:45 | If you remember the h3s within the menu,
all those guys, they have the submenu, so they
| | 04:50 | are going to be expandable as well.
| | 04:52 | So I want go ahead and use that same
indicator, and so I'm using the span of the class of
| | 04:57 | indicator and the plus symbol and I'm
appending it to that h3 so that it's going to be part
| | 05:02 | of that as well, so that
it will have the indicator.
| | 05:04 | So that's the first two things we are doing.
| | 05:06 | The next thing I want to do--and I want to
go ahead and get this out of the way now--is
| | 05:08 | at the very bottom of the small menu function I
need to return and change the value of the windowState.
| | 05:14 | Remember, the default windowState is large,
so if the small menu function fires, I want
| | 05:20 | to change that windowState so that any
device or browser window or whatever can track
| | 05:23 | it and say, okay, currently I have the small
window active. So I am just going to do a
| | 05:27 | comment here, and I am going to
type indicate current window state.
| | 05:34 | We really can just go ahead and do it for
all of them if we wanted to. windowState = 'small'.
| | 05:39 | And that's going to be at
the bottom of every function,
| | 05:42 | so the last thing we are going to do is go ahead
and set the windowState once that function is fired.
| | 05:46 | If I save this and preview this in
my browser--and let's shrink it down--
| | 05:54 | now we can see our Menu toggle is
in place. So there is the word Menu.
| | 05:58 | There is the plus symbol
that's been appended to it.
| | 06:00 | There is the div tag. Of course the
styles are already written in the CSS.
| | 06:03 | But if I click this, nothing happens, and
that's because we haven't wired up any functionality
| | 06:06 | yet, so that's what's next.
| | 06:07 | Let's go back into our function and just
below the existing code, I am going to go ahead and
| | 06:13 | put in the second part of this.
| | 06:15 | Let me even this up a
little bit. There we go.
| | 06:19 | And feel free to go ahead and pause the video and
read through this. And in fact, what I am going
| | 06:26 | to do is I am going to indent this correctly.
| | 06:28 | I have a bad habit of not indenting my code
correctly and having it come back to bite me.
| | 06:34 | So let's talk about what this is doing.
| | 06:36 | So inside that menu toggle that we've just
created right here, we are going to find the
| | 06:39 | link and we are going
to bind a click event to this.
| | 06:42 | Now you might be wondering about the
different streams touch events and click events, and
| | 06:45 | there is a big difference.
| | 06:47 | Touch events obviously is part of the touch
API, and it's wired to touch screens, and it's
| | 06:52 | a specific event that happens with touch screens.
Click, on the other hand, deals more with the mouse.
| | 06:58 | However, most devices that are touch-enabled,
the touch event, if there is not a touch event
| | 07:03 | bound to an object, then the touch will
replicate the click event. As a matter of fact, one of
| | 07:07 | things that you have to really look out for is
having both touch and click bound to something,
| | 07:11 | which can cause what are called ghost
clicks where you hit it and you get two.
| | 07:15 | So we are binding click, and the reason we
are using Click and not touch here is that
| | 07:18 | there are some smaller devices like the
BlackBerrys where there are pointer devices that only
| | 07:23 | respond the click events and not touch.
| | 07:25 | So we are going to ahead and just saying,
okay, since touches register as clicks, and
| | 07:29 | since clicks gives us that wider coverage,
we are going to use that instead of touches--
| | 07:32 | at least here anyway.
| | 07:33 | When we start doing the medium one, I'll
show you guys how to deal with touches so that
| | 07:37 | you can form your own opinion
about which ones you want to use.
| | 07:39 | So we are creating another function, and
what we are doing is we are going to expand the
| | 07:43 | menu. So we are going to say top menu.
Remember, that is the unordered list. We are going to
| | 07:47 | use the toggle class method to
apply the class expand to that.
| | 07:51 | Now I really like toggle class in jQuery
because what that does is if the class doesn't exist,
| | 07:57 | it applies it; if it exists, it takes it off.
| | 07:59 | So we don't have to sit there and create
our own Boolean value and say, if it exists go
| | 08:03 | ahead and take it off; if it doesn't exist apply it.
It goes ahead and handles all the logic for us,
| | 08:08 | which is what jQuery does beautifully.
| | 08:09 | It just makes something so much easier.
| | 08:11 | All right, the next thing we need to do is
we need to keep track of that indicator.
| | 08:15 | If the menu could be expanded, I want it to
be a plus, but once the menu is expanded, I
| | 08:18 | want it to be a minus.
| | 08:20 | So we are creating a variable called new value
and we are just saying, hey keep track of this.
| | 08:24 | So essentially, what we are doing is we are
saying hey, go up to the menu toggle and find
| | 08:27 | the expand indicator and check
the text, see what it equals.
| | 08:31 | And so this will operator right here, hey,
if it equals plus, if that's true, then the
| | 08:36 | value of variable should be minus.
| | 08:38 | If it doesn't equal plus,
go ahead and make it plus.
| | 08:41 | So this is just a way of sort of tracking it
and seeing what it is and then giving different
| | 08:45 | values based on what its value is.
| | 08:47 | And then, using the variable that's
been set, we can go find expand indicator
| | 08:51 | and the text inside that expand, since it's
just the plus or the minus, we can go ahead
| | 08:55 | and pass along the new value of that.
| | 08:58 | So if I save this and preview this
in my browser and refresh the page,
| | 09:02 | now when I click the menu, you can see that's
toggling open and closed. Notice that the indicator
| | 09:05 | is showing that there is either a menu to display
or that I can collapse the menu, so that's working.
| | 09:11 | And the indicators show up on our submenus
as well, and that lets people know which of
| | 09:15 | these menu options has a submenu.
| | 09:17 | Now, if I click on these, they don't work yet,
so we've still got to wire those up, but our
| | 09:21 | menu toggle is working fine.
| | 09:22 | So all we have to do in the next exercise
is use the same logic to go ahead and add
| | 09:27 | toggles for all or our submenus,
and we are going to tackle that next.
| | Collapse this transcript |
| Expanding submenus through touch| 00:00 | Touch events can be really tricky. Although
you can bind both touch and click events on
| | 00:05 | an object, binding both can lead
to some very unexpected results.
| | 00:09 | Now, there are some ways around this, but I
generally like to pick one or the other, in
| | 00:15 | terms of how I'm going to
handle a menu or an application.
| | 00:17 | Now, for our responsive navigation, I'm going
to use click events for the small screens and
| | 00:22 | then use touch events for the medium-sized
screen; that way you can check both out and
| | 00:26 | see the pros and cons of using each one of them.
| | 00:30 | So we're going to start our
discovery process by adding click events
| | 00:33 | that are going to toggle our
submenus in the small screen function.
| | 00:37 | So I've got the index.htm file open from
the 03_09 directory, and I've already scrolled
| | 00:44 | down into our small menu
function that we've been working.
| | 00:46 | So we're really just sort of picking up where
we left off. And what I'm going to do is I'm
| | 00:51 | going to find the windowState indicator
and I'm going to create a little bit of empty
| | 00:55 | space above that. So this is where
our next function is going to go.
| | 00:59 | Now, it's really important in
terms of where you place this.
| | 01:01 | You want the next function that we're going
to be wiring up to be outside of the closing
| | 01:06 | curly braces for the menuToggle and
still above the variable for windowsState.
| | 01:12 | Again, I'm just going to paste some code in,
and then I'm going to go over this line by
| | 01:16 | line. And I'm probably going to have to
adjust my spacing on a few of these items so that
| | 01:22 | my indentation is correct.
| | 01:24 | The first thing we're going to do is,
as I mentioned, wire up the submenus.
| | 01:28 | I'm going to go ahead and tab that in.
| | 01:32 | We're going to find all of the heading 3s
inside of topMenu and then we're going
| | 01:37 | to bind a click event to them.
| | 01:39 | So again, we're using click
and we're not using touch.
| | 01:42 | When they're clicked, we
want certain things to happen.
| | 01:44 | One of the first things we want to do
is establish which one has been clicked.
| | 01:48 | So I create a variable called currentItem, and
what it does is it says, go in and find the submenu.
| | 01:55 | You might be wondering why we're doing this.
| | 01:56 | Well, it's the submenu that we're expanding,
so I need to check and see if any of them
| | 02:00 | have been expanded, because the way I want
the menu to work is if somebody clicks or
| | 02:03 | toggles one of the submenus open, if they click
on another submenu, the first submenu should close.
| | 02:09 | So one of the things we have to do is we
have to sort of keep track of where we're at.
| | 02:13 | What this is going to do is this is
going to find the currently opened submenu.
| | 02:18 | Remember, the h3 is not the submenu.
| | 02:20 | That is what somebody is going to click to
toggle them, but it's not the submenu itself.
| | 02:23 | The submenu is a sibling of that, and it's
an unordered list with a class of submenu.
| | 02:28 | So essentially it's saying, hey, whoever is
being clicked on, whichever h3, find any siblings
| | 02:32 | that are a submenu.
| | 02:33 | It's only going to have one, but it's a
quick and easy way of doing that, and I'm storing
| | 02:37 | that within a current item.
| | 02:39 | Now, the next line underneath that is saying, go out
and find any unordered list with the class of submenu,
| | 02:46 | so go find all my submenus, that are not the
current item and then strip off the class expand.
| | 02:54 | We're using the same
technique we used for the menu toggle.
| | 02:56 | When a submenu is expanded, it will have the
class expand applied to it; when it is closed,
| | 03:02 | the expand class will be removed from it.
| | 03:04 | So essentially, what we're doing is
we're just doing a shot across the bow.
| | 03:07 | As soon as one is clicked it's going to say,
hey, go ahead and check any other submenu
| | 03:12 | other than this one and if it has a class
applied to it, go ahead and remove that class
| | 03:15 | so those will close.
| | 03:17 | So then, if we close any of those, we need
to change the indicator, the plus to a minus.
| | 03:22 | So again, we're just doing a very similar
thing here. We're saying, hey, go find any
| | 03:25 | of those h3s that aren't the one that's
currently being clicked, and what I want you to do is
| | 03:29 | find that span indicator and
change the text to the plus symbol.
| | 03:34 | So that handles taking care of any open menus.
| | 03:36 | Now we need to handle the logic of
actually opening that menu itself.
| | 03:39 | So we're going to say, go find the h3 that's
been clicked, find its sibling with a class
| | 03:44 | of submenu, and then toggle the class expand.
| | 03:47 | So once again, we're using the toggle class
method, and this is exactly what we did with
| | 03:51 | our menu toggle in the previous exercise.
| | 03:54 | And then, finally, we're going to say, go and
change the selected submenu indicator as well.
| | 03:58 | And essentially, we just create a new
variable where we look inside this, we find the span
| | 04:03 | indicator text, and we did a test on it.
| | 04:05 | We say, is it plus?
| | 04:07 | If it's plus, make it minus.
| | 04:08 | If it's not plus, make it plus.
| | 04:10 | And then, we go find it and
actually input that new value.
| | 04:13 | So we just create a variable that says,
should it be a plus or minus, and then we go in and
| | 04:18 | we replace that text with
whatever the new value would be.
| | 04:20 | So I'm going to go ahead and save this, but
this time instead of previewing it in a browser,
| | 04:25 | I want to show you it in the environment that people
are most likely to encounter it on, which is the phone.
| | 04:32 | So I'll go ahead and open up a menu.
So there are all of our submenus.
| | 04:35 | You'll notice that when I click on Galleries,
that submenu opens up and if I click Galleries
| | 04:41 | again, it's going to close.
| | 04:43 | Now, there's a little bit of animation
happening, and that's being done through CSS transitions.
| | 04:47 | So there isn't any jQuery
animation going on there. That's all CSS.
| | 04:51 | Now, if I click Gear, and Gear opens up,
this time if I go up and click Galleries, notice
| | 04:57 | that Gear is going to close and Galleries
is going to open. Same thing if I scroll down
| | 05:02 | here and click Shop, Shop will open
up and Galleries is going to close.
| | 05:06 | So not only am I able to toggle these menus
off on and on by clicking themselves--if we
| | 05:09 | hit Shop again for example, it will close--
but I could hit Galleries and then Gear, the
| | 05:16 | proper one is going to open up
and the other one will close.
| | 05:18 | And of course, anytime that I want, I can
hit Menu and it will toggle the whole menu
| | 05:22 | close, so that's working great.
| | 05:25 | This finishes the basic
functionality of our small screen menu.
| | 05:28 | We saved a little bit of screen real estate
by hiding it initially, as you can see here,
| | 05:32 | and we're dynamically creating these toggles and
indicators to help keep our code a little bit cleaner.
| | 05:38 | So next, we're going to move on to
working with our medium screen size menus.
| | Collapse this transcript |
| Replacing hover styling with touch| 00:00 | When we start scripting our medium-sized screen
function we find ourselves with a little bit of a problem.
| | 00:06 | While the 481 pixel to 768 pixel screen
size generally means tablet or maybe even a large
| | 00:13 | phone and that generally is going to be
touch-enabled, the rise of netbooks and hybrid
| | 00:19 | laptops means that we really can't take it
for granted. And if we are really being honest,
| | 00:24 | that's probably true of all the screen sizes that we
are looking at: we can't tell if it's touch or not.
| | 00:29 | So with that in mind, we are going to start
working on our medium screen function with an
| | 00:33 | eye towards making it work regardless of
whether or not the device is touch-enabled.
| | 00:39 | This approach we could actually use also
in our large screen and small screen if we
| | 00:42 | wanted to. I am just showing you a different aspect of
how you can start planning for touch-enabled devices.
| | 00:49 | One of things I want to point out to you
really quickly, if I go over to the source code of
| | 00:53 | index.htm found in the 03_10 folder,
| | 00:57 | remember, back when we structured this menu,
we have a few list items with the class of hover.
| | 01:02 | Well, this is where they come into play and
if I go over to the Main.css file, which is
| | 01:07 | found in the _css directory, if I scroll down,
all the way into my tablet styles, which is
| | 01:14 | a little bit further down than this, notice
right here, we have a selector that is going
| | 01:21 | to be handling the dropdown menus if any
list item with a class of hover is hovered
| | 01:27 | over, or if a submenu has the class expand.
| | 01:31 | Essentially, what we are going to be using,
is if its touch-enabled, jQuery will go ahead
| | 01:36 | and toggle that class on or off. If touch-
enabled is not the case, then we'll go ahead
| | 01:42 | and style it using the hover styling.
| | 01:44 | Now, that also means that if touch is detected,
we are going to need to strip this class out
| | 01:50 | so that styling doesn't apply, because one
of the dangers of using touch events is that
| | 01:55 | click events and hover events can often sort
of--I don't want to use the word interrupt,
| | 02:00 | but it sort of registers
them all at once if you will.
| | 02:02 | So it's very easy, if you have both a click
event or hover event and a touch event firing
| | 02:07 | simultaneously, especially if you are doing a
toggle, it would be very easy to hit something
| | 02:11 | and then have it toggle open and close at
the same time, because it registers both of
| | 02:15 | them, so we will need to strip that out.
| | 02:16 | So I am going to go back to my source code.
| | 02:19 | I am going to scroll all the way down to our
menu functions down here, to work on the medMenu
| | 02:26 | function this time.
| | 02:28 | Again, to save a little bit of time and
typing, I am going to be pasting some code in.
| | 02:32 | The first thing that we need to do is check
to see if the device supports touch, and then
| | 02:36 | if the device does support touch, we're going
to strip out the hover styling and then add
| | 02:40 | all the functionality that we need.
| | 02:41 | So I am going to go and paste this code in,
and I want to scroll up and go over all this
| | 02:47 | code and what it's doing. And I am just going
to take just a minute here to even the stuff
| | 02:51 | out a little bit and make sure that my
indentation makes it a little bit easier to read.
| | 02:57 | So I have some comments up here.
| | 02:58 | I will forgo reading those, just
to tell you what this is doing.
| | 03:01 | So feel free if you want to write the
comments in, you can go ahead and pause the video
| | 03:05 | and type this in. Just be sure that your
closing brackets are handled correctly.
| | 03:11 | This is the closing bracket for the medium
screen function, and then this is what we just
| | 03:16 | added right here that I have highlighted.
| | 03:19 | So the first line is a conditional statement that
checks to see if ontouchstart is available in the document.
| | 03:26 | If ontouchstart is available, that
means this is a touch-enabled device.
| | 03:30 | So essentially, that's our way of
saying, is this a touch device or not?
| | 03:34 | So if this evaluates to true, we will go
ahead and apply all the logic underneath this.
| | 03:39 | So the first thing we are going to do is
find the hover class and strip them out so that
| | 03:42 | those hover events no longer trigger anything.
| | 03:45 | So we go into the topMenu, we find any list
item in the class of hover, and we remove it.
| | 03:49 | The next thing that we need to do is
actually bind touch events to the submenu headings.
| | 03:53 | Now, this is a little different in terms of syntax
compared to the way we were binding our click events.
| | 03:59 | You will notice that we are
actually using the bind method.
| | 04:02 | We are going out and finding those heading
threes. Remember, that heading three(h3) is
| | 04:05 | the top of the gallery, the
gallery header for the submenus.
| | 04:09 | And we are saying I want you to bind touchstart
and then once you bind touchstart, when touchstart
| | 04:14 | has been detected, I want you to do this.
| | 04:16 | So that's what the function is after that.
| | 04:18 | So inside this function,
here is what we are doing.
| | 04:21 | The first thing that we are going
to do is find the current submenu.
| | 04:24 | So we are creating another variable called
currentItem. We are finding this in the siblings submenu.
| | 04:29 | So very similar to what we did earlier.
| | 04:30 | We are going to have to remove the expanded class
from other submenus to close any currently open.
| | 04:35 | So it might seem to you that we are
working backwards, like why are we closing things;
| | 04:39 | we haven't even opened anything yet?
| | 04:40 | But remember, these touch
events can happen multiple times.
| | 04:43 | So whenever you touch a menu event, you
want to close any of the open menus, and that's
| | 04:47 | the first thing we do.
| | 04:49 | I am going to go find anything that's not
the current item that's a submenu and I
| | 04:53 | am going to remove the expand class.
| | 04:55 | Then I am going to go in to the selected submenu, which is
this siblings submenu, and then toggle that expand class.
| | 05:01 | So pretty much the same
logic we have been using.
| | 05:03 | The difference here of course that we are
binding it to a touch event rather than a click event.
| | 05:08 | The very last thing I want to do here--and I
am actually going to have to create a blank
| | 05:11 | line to give me space to do this.
| | 05:13 | So, below the touchstart closing brace but
in front of the closing brace for the medium
| | 05:19 | screen function, I need to
indicate the current window state.
| | 05:22 | So I am just going to do
indicate current window state.
| | 05:26 | So we have to do this for all of our functions.
| | 05:28 | We will go ahead and do
windowState equals medium.
| | 05:35 | And that way, as soon as this function is done
firing, as soon as the medium screen function
| | 05:39 | is finished, it will go ahead and change
that value to medium to let the device know that
| | 05:42 | we are on a medium-size screen.
| | 05:43 | Okay, I am going to save this.
| | 05:45 | Now I want to test this, but I want to test
it on my actual iPad and not in the browser
| | 05:50 | window, because I want you to see this working
on the touch device and not responding to clicks.
| | 05:55 | So let me go ahead and switch over to that.
| | 05:58 | So here I am, on my iPad, and I am just going
to start touching some of these menu options.
| | 06:02 | So I am going to touch GALLERIES and
you'll notice that it goes ahead and opens up.
| | 06:07 | Now, if I touch SHOP, it's going to open up, and notice
that when I touch SHOP, GALLERIES is going to close.
| | 06:11 | Now, you can also toggle these.
| | 06:13 | If I touch SHOP again for example, you can
see that it toggles closed. Touching it again
| | 06:17 | will open it. And the same
thing works for GEAR and GALLERIES.
| | 06:23 | But notice that as I touch each one of these
individually, the other ones close, so that works fantastic.
| | 06:28 | But I'm not done, because one of the
things about menus like this is, if somebody for
| | 06:33 | example were to click down below the menu--let's
say I clicked on this text, we're betting you do to.
| | 06:38 | Let's say I click on that.
| | 06:40 | Obviously I double-
clicked on it and it zoomed up,
| | 06:42 | so that's one thing but, most people would
expect that when they click off of the menu
| | 06:46 | somewhere, even to the scroll around, that
that submenu would close, and it's not closing.
| | 06:51 | It's remaining open.
| | 06:52 | That's because right now the only way to
close it is either to click on the heading itself
| | 06:57 | or to click on another menu
option that has a submenu.
| | 07:01 | So we have one more thing left to
do on our medium screen function,
| | 07:03 | so let's jump back in to our code.
Where we add this is very important.
| | 07:11 | So what we are going to do is we need to close the
submenus if the user is going to click somewhere else.
| | 07:17 | We need to make sure that this code is going
to be inside of the check for touch-enabled,
| | 07:23 | but we don't want to do it
inside of the touchstartbind function.
| | 07:27 | We don't need it to fire multiple times.
| | 07:28 | So I am going to create an empty line
between the closing brackets of the touchstart bind
| | 07:35 | function and the closing
bracket for the touchstart detection.
| | 07:39 | So you want it to be between those two.
| | 07:41 | It's very important that you place it there.
| | 07:42 | If you don't, the functionality is
going to be affected severely, I should say.
| | 07:47 | So now I am going to place some additional
code in there, and we'll go over what this
| | 07:51 | code is actually doing.
| | 07:54 | The first section right here, close submenus
if users click outside the menu, you can see
| | 07:58 | what we are doing. We are taking the HTML
element, which is the top parent-level tag,
| | 08:03 | and we are binding touchstart to that.
| | 08:04 | That means that no matter where somebody
clicks on the screen, this touch event will render.
| | 08:09 | Now, you might wonder why we
used HTML instead of body.
| | 08:13 | Body initially broadcasts itself
as being the height of the screen.
| | 08:17 | So if somebody were to scroll, there's the
possibility that something below that originally
| | 08:22 | visible area wouldn't actually register. HTML is
going to do the entire document, no matter how tall it is.
| | 08:27 | So that's a little bit of a safer choice there.
| | 08:29 | So we are going to bind touchstart to that,
and what we are going to do is we are going
| | 08:33 | to say go to the top menu, find any
open submenus, and remove that class expand.
| | 08:39 | That means anywhere on the screen that
somebody might touch, it's going to close the menu,
| | 08:44 | including the menu itself.
| | 08:45 | So you've got some logic here that says, hey,
if somebody just clicks the menu, close all
| | 08:50 | the menus, and that is not the
way you want that to behave.
| | 08:54 | So we are going to use the concept
of bubbling to help us with this.
| | 08:57 | So the next line right here is going to
find to the mainNav. Remember, that is the actual
| | 09:02 | nav element itself and everything inside of
it. We are going to bind a touchstart event
| | 09:05 | to that, and we are essentially
going to say stop propagation.
| | 09:09 | Now, if you have never worked with the
concept of bubbling before, I want you to imagine
| | 09:14 | the pages extruded out in three dimensions,
and the background of the page is at the very
| | 09:20 | bottom and then everything is
sort of stacked on top of it.
| | 09:25 | Think about the iPad being a glass.
Like if you touched the HTML element, it's at the
| | 09:29 | top and then the A element is way, way, way
down there towards the bottom, nested deep.
| | 09:35 | So when you click something, everything that
you've touched, including the nested elements
| | 09:39 | inside of it, register that event,
| | 09:42 | and then that event bubbles down to the very
bottom element, which might be the anchor link,
| | 09:46 | and then bubbles back up. And you can
capture that anywhere along the way.
| | 09:51 | I could bind a touch event to the mainNav,
to the unordered list inside of it, to the
| | 09:56 | links inside of that, to the
list items inside of that--anywhere.
| | 09:59 | So essentially, at the mainNav, I'm binding
a touch event and then I am saying, but, don't
| | 10:04 | report further back up the
chain--only go this high.
| | 10:08 | That means that if you click on a link
inside there, it will broadcast to the list item
| | 10:12 | that it's been touched.
| | 10:13 | It will broadcast to the
unordered list that's been touched.
| | 10:16 | It will broadcast to the navigational element,
the mainNav that it's been touched, but it
| | 10:19 | won't go any higher.
| | 10:21 | That means everything inside the mainNav
won't broadcast that it's been touched to the HTML
| | 10:26 | element because we've stopped the propagation at
this point, which is a very, very neat thing that we can do.
| | 10:33 | So that means that everywhere else it will
register this touch event but anywhere inside
| | 10:37 | the mainNav, it won't come back
up and broadcast to this element.
| | 10:42 | So let's see that in action.
| | 10:43 | I am going to go ahead and save this, and
then I am going to open my iPad back up, refresh
| | 10:48 | the page, and now notice that when I touch
GALLERIES, it opens up; if I touch it again, it closes.
| | 10:54 | Same thing for GEAR here.
| | 10:55 | If I touch that, it opens up.
| | 10:57 | If I touch SHOP, it opens up and then closes.
| | 11:00 | So the same functionality was before.
| | 11:01 | But let's say I touch GEAR and then touch
somewhere down below it, under like the text
| | 11:06 | here, we are betting you do too.
| | 11:07 | Now when I click there,
notice that that goes away as well.
| | 11:10 | If I click GALLERIES and I try
to zoom up, it's going to go away.
| | 11:15 | Zoom back. Click it again, it will come back.
| | 11:18 | And if I click, say, up here in
the top of the screen, it goes away.
| | 11:22 | So clicking anywhere on the screen other than
the menu is going to close all the submenus.
| | 11:27 | You can toggle the submenus on and off by
touching them again, or you can open one submenu
| | 11:32 | and close another one by touching it.
| | 11:35 | Now, what's nice about this is that now, not
only do we have a menu that responds to touch
| | 11:39 | on this touch-enabled devices, on non-
touch devices, it's still going to work as just
| | 11:44 | your normal, everyday dropdown hover menu.
| | 11:48 | Although we have to use a single
nonsemantic class--that list item hover class--it does
| | 11:53 | allow us to support both options
without really a lot of overhead.
| | 11:57 | Now we could certainly use this approach for
the smaller screen menu as well, if you felt
| | 12:01 | that it was appropriate.
| | Collapse this transcript |
| Resetting menus for large screens| 00:00 | For the most part, we don't really need to do
anything for our dropdown menu on larger screens.
| | 00:05 | We have a traditional HTML- and CSS-driven
dropdown that really doesn't require any scripting
| | 00:10 | for it to work. And that would be great,
except for the fact that we have to account for
| | 00:15 | users maybe resizing their screens in a way
that triggers our menus to move from one of
| | 00:20 | those smaller states up to a
larger one or back down again.
| | 00:23 | Now in that case, we could end up with
added elements and bound click and touch events
| | 00:28 | that could affect both styling and performance.
| | 00:31 | So, in order to make sure that our large
screen menu functions properly, we're going to have
| | 00:35 | to ensure that anything that may have been
added by other menu functions is stripped out.
| | 00:39 | So, we're going to be working in the
index.htm file found in 03_11 folder.
| | 00:44 | I'm just to kind of show
you what I'm talking about,
| | 00:46 | before we start working, I'm going to preview this in my
browser. And as you can see, everything is looking okay.
| | 00:51 | The dropdown menu is working just fine,
just hovering over things the way that they are
| | 00:56 | wont to do. But if I resize this,
| | 00:59 | let's say I go all the way down, okay, to the
small screen view, all right, which is still
| | 01:03 | working and works fine.
| | 01:06 | But let's say we resize.
| | 01:08 | Now, look what happened. Whoa! Hey, look at that.
| | 01:10 | So this menu shows up.
| | 01:12 | We're having those indicators that show up
now as well, and that's because those were all
| | 01:15 | dynamically injected because the small screen
function ran and there was nothing to strip them out.
| | 01:21 | So that's essentially what
we're going to have to do.
| | 01:23 | We're going to have to account for the fact
that somebody somewhere--maybe some guy doing
| | 01:27 | a demo, showing the responsive website off--
would resize the screen down to that size and
| | 01:32 | then back up again, and you want the menu
to return to its original sort of pristine
| | 01:35 | condition if you will.
| | 01:36 | All right, so we're going to go back into
our code and to our large menu function, and
| | 01:39 | this one is pretty easy. We'll just go
ahead and code all of this by hand.
| | 01:43 | The first thing that we're going to do
is unbind any click and touch events.
| | 01:46 | So, I'm going to do a little comment here, and
I'm going to say unbind click and touch events.
| | 01:52 | So, you don't want those hanging around, even
if you're not really responding to them anymore.
| | 01:58 | The bindings can be sort of left behind
and still registering and that can cause some
| | 02:01 | performance issues, so
we're going to strip those out.
| | 02:04 | And we're just going to come in and anywhere
that we've bound any touch events or any click
| | 02:10 | events, we need to unbind those.
| | 02:11 | So, the first thing I'm going
to do is find the menuToggle a.
| | 02:19 | So that's the toggle that we're actually
creating earlier, and then I'm going to use the off
| | 02:24 | function--or I should say the
off method--to remove the click event.
| | 02:29 | Now, what I really like about
off is it strips everything out.
| | 02:33 | So anything that might be associated with
that--any functions, anything like that--it just goes and
| | 02:36 | strips them all out.
| | 02:38 | Next, after that, we'll go in
and target the h3 as themselves.
| | 02:41 | That's the headers that represent
of course the top of the submenus.
| | 02:45 | And that will be a topMenu h3,
and then we'll use off as well there.
| | 02:52 | Remember, those h3s in the medium size have
touch events bound to them, and the small screen,
| | 02:57 | they have click events bound to them.
| | 02:58 | So, we have to strip both of those out.
| | 03:00 | Now, rather than having to do this twice,
you can actually use a space-separated list
| | 03:03 | of events that you want unbind from this, so
I'll do click space and then touchstart and
| | 03:09 | then close that out.
| | 03:11 | Be really careful when you do that.
| | 03:13 | Make sure that this is a space-separated list,
and make sure that you have a beginning quotation
| | 03:18 | mark and an end quotation
mark at the end of that.
| | 03:20 | If you don't get the syntax right, in terms of
that, it won't work, as I found out the hard way.
| | 03:24 | So, make sure you do that.
| | 03:26 | And then the next thing we're going to do is
we're going to get rid of the listener on the HTML tag,
| | 03:31 | so htm. We'll also do off there as
well, and for off, we'll just do touchstart,
| | 03:38 | since that's the only one we bound to that.
| | 03:41 | After that, we'll come in and
we'll find the MainNav, so, #mainNav.
| | 03:48 | Again, we'll use off, and we'll do
touchstart, because that, if you remember when we were
| | 03:55 | doing the propagation, that's
what we stop the propagation on.
| | 03:58 | So, that's going to go ahead and unbind any
touch events and any click events so that
| | 04:03 | we don't have to worry
about those hanging around.
| | 04:04 | The next thing that we need to do is
remove any of the span indicator tags, close any
| | 04:09 | expanded submenus, strip out any of the
classes that may have been dynamically added.
| | 04:14 | So, I'm going to go down just below that--and
we're still in the large menu function here.
| | 04:18 | I'll type another comment, and I'll say,
remove any expanded submenus. All right.
| | 04:25 | So, down below that, we're
going to go and find the topMenu h3.
| | 04:31 | So remember, that's the
headers for all of our submenus.
| | 04:35 | We're going to find inside of that any
unordered list with a class of submenu, and then what
| | 04:41 | we're going to do is we're going to do
removeClass and we're going to remove expand.
| | 04:45 | So, that's going to strip out any of the
submenus that might have the expand class added to them.
| | 04:51 | The next thing we're going to do, I'm
going to do another comment here.
| | 04:54 | I'm going to say, remove
the span tags inside the menu.
| | 05:00 | So those span tags that we added that were menu
indicators, we need to strip those out as well.
| | 05:05 | So underneath that comment, I'm going to go ahead
and target, once again, the topMenu h3, topMenu h3.
| | 05:16 | And we're going to do a find, and we're going
to find any spans with a class of indicator,
| | 05:23 | and we just want to remove those.
| | 05:26 | So that will go ahead and strip out any of
those span tags and their contents--the pluses,
| | 05:30 | the minuses, all that stuff, it will
go ahead and strip those out as well.
| | 05:34 | Now, that menu elements that was the toggle
that shows up at the very top at the small
| | 05:38 | screen, we're going to
need to remove that as well.
| | 05:40 | So, I'm going to type in remove menu
toggle, just in case it has been added.
| | 05:45 | So, we're going to target it by finding the
menuToggle, and then we'll just remove it, so, fairly simple.
| | 05:55 | All right, that will strip it out and remove
any of its contents as well, including the links.
| | 05:58 | So you don't have to do them all individually; you
can just find the parent element and remove that.
| | 06:02 | And then finally, at the very bottom, we're
going to do what we did with the other two
| | 06:05 | functions, which is to
indicate the current window size.
| | 06:09 | So, indicate current window state, and this
time windowState is going to equal large, which
| | 06:15 | is also the default if you remember.
| | 06:17 | Since this is responding to the possibility that it
might be resized, we need make sure that that is done.
| | 06:22 | So, we'll save this.
| | 06:23 | And I'm going to go back into my browser and
refresh the page. All right, so that resets the menu.
| | 06:29 | And now, if I resize this all the way down to,
say, the small menus where we have our pluses
| | 06:33 | or minuses and things like that,
| | 06:35 | now if I come back up to
large menu, those are now all gone.
| | 06:38 | They're stripped away.
| | 06:40 | We've unbounded all the click and touch events,
and any of the added classes and HTML contents
| | 06:45 | such as the menu toggle and the
span indicators are also removed.
| | 06:48 | So that goes ahead and takes care of our large screen
menu, but this does kind of point to a bigger problem.
| | 06:54 | Although we've avoided conflicts when
screen sizes increase to the large screen,
| | 06:59 | we haven't accounted for any of the conflicts that
might happen between, like, some of our smaller menu.
| | 07:05 | So, say when we go down to
this menu and we come back up,
| | 07:08 | we notice that that's still a problem as well.
| | 07:09 | So, we're going to have to modify our small
and medium sized menu functions in order to
| | 07:14 | account for that, next.
| | Collapse this transcript |
| Preventing conflicts| 00:00 | If users would only use our menu on one
device and at one screen size, we would be all set.
| | 00:06 | Unfortunately, there are times when
conflicts could occur between our menus, especially
| | 00:11 | if screens are resized or
orientation changes, things like that.
[00:00:17.0 1]
Take our existing menu on an iPhone5.
| | 00:21 | When I show the menu on portrait size and
just kind of interact with it, it works the
| | 00:26 | way you expect it to work.
| | 00:28 | Submenus open and close. They animate.
| | 00:30 | It depends upon which one you clicked. You can
collapse the menu down again, and that's great.
| | 00:34 | But now if I go into landscape mode,
that's actually going to trigger the tablet styles,
| | 00:41 | and you'll notice that the tablets styles
aren't designed to have the menu and the indicators.
| | 00:46 | Although the dropdown menu does work, you'll notice
that click and touch events firing at the same time.
| | 00:52 | So that's why we are getting the sort of
weird effect of the submenus opening up and then
| | 00:55 | closing immediately again.
| | 00:58 | And even worse than these is if somebody
were to use this and go, "Oh, that's horrible. I
| | 01:01 | want to go back to the portrait view."
| | 01:03 | And when they do this, notice what happens.
| | 01:05 | Now they have two of those menu items, and
every time they go to Landscape mode and come back,
| | 01:11 | they're going to another one. Why?
| | 01:14 | Because remember, in the small menu
function, every single time that function fires, it
| | 01:18 | creates one of these.
| | 01:20 | A lot of times you might get something
working right, and then you test it and you start
| | 01:25 | thinking of some of the variables and the
things that might happen, or the different
| | 01:29 | ways that people might use it, and you come up
with some really unintended things happening.
| | 01:33 | Let's fix this, and then we'll come
back and look at it after we fix it.
| | 01:37 | So, I'm in the index.htm,
found in the 03_12 folder.
| | 01:41 | I am going to scroll down to our function,
and the good news is, getting rid of those
| | 01:46 | type of conflicts really isn't that difficult.
| | 01:49 | And our previous exercise where we did the
large menu kind of leads the way for us.
| | 01:53 | So, you will notice that in order to make
sure that large menu looks and behaves the
| | 01:57 | way that we want it to, we strip out everything.
We stripped out all the click and the touch
| | 02:00 | events, and then we removed any of the
added classes and removed the added content.
| | 02:04 | That's essentially what we are going to do
at the front end of both small and medium
| | 02:09 | menu functions: we are just
basically going to reset everything
| | 02:12 | so that the menu has a nice fresh clean
start every single time the functions fires.
| | 02:18 | So what we are going to do is start at the
very top of the small menu function, and I
| | 02:22 | am going to go ahead and paste some code in.
| | 02:24 | I want to go ahead and tab this in so
that it's all looking about right. There we go.
| | 02:30 | There's really not a lot here. We are just
going ahead and unbinding all the touch starts
| | 02:35 | and click events to all the things they have
been bound to either in the small menu function,
| | 02:40 | or the medium menu function.
| | 02:42 | So, even if the small menu function fires over and
over again, it'll continue to bind these click events,
| | 02:47 | so we want to get rid of
them first and then rebind them.
| | 02:50 | And then the next thing that we need to do
is reset the menu, in case it's being resized for
| | 02:55 | A
a medium screen. And again the easiest thing
to do there is to go ahead and find anything,
| | 03:00 | whether it's a menu or a submenu, that
has the classic expand applied to it and then
| | 03:05 | remove that class. And then finally, if
the menu toggle has been created, remove it.
| | 03:10 | That will prevent us from
having four or five of those added.
| | 03:15 | You could modify the comment down here to
create the menu toggle. We could say now that
| | 03:20 | the menu has been reset, create the menu toggle.
| | 03:25 | That's maybe a little bit more descriptive.
| | 03:27 | So, now I am going to go down to the
medium menu function, and we are going to have to
| | 03:31 | handle that as well. Again, I am going to create a
little bit of space before the touch event detection.
| | 03:36 | I am going to paste my code in here.
| | 03:38 | Again, I am just going to space this a little
bit so that it looks little nicer. There we go.
| | 03:42 | So, again, we are doing essentially the same
exact thing. We are not unbinding any touch
| | 03:47 | events, because the small menu doesn't
have touch; we are just unbinding the clicks.
| | 03:51 | We are again removing the expanded class
anywhere it might be found. That's going to
| | 03:56 | reset any of the submenus or
any of the menus that are expanded.
| | 03:59 | And then we are going to move
the span tags that have been added.
| | 04:02 | So, we didn't necessary need to do that
with the small menu, because it's okay if they
| | 04:06 | stick around, but for the medium menu, we
needed to go ahead and strip those out. And then
| | 04:10 | finally, we are also going to remove the
menuToggle if it's been added as well.
| | 04:15 | And once that's all been done, we can go
ahead and go back and start detecting for touch
| | 04:20 | and then wiring up the behavior there.
| | 04:22 | So, that's really all we needed to do.
| | 04:24 | If I save this and then go back into my phone,
previewing the finished page, notice we are
| | 04:31 | in portrait mode and I'm interacting
with the menu in my normal, regular way.
| | 04:38 | But now if I go into landscape mode, we
don't have all those added indicators. The menu
| | 04:45 | is functioning the way it's supposed to.
| | 04:46 | If I touch off the menu,
it will close the submenus.
| | 04:49 | If I open one submenu and
click another one, again it closes.
| | 04:53 | If I touch anywhere else on screen,
it will close the submenus. Perfect!
| | 04:57 | If I go back to portrait, it just resets
the menu, starts all over again, and gives the
| | 05:02 | users a very nice consistent experience, no
matter what size screen they are looking at
| | 05:08 | or what device you are looking on,
which is exactly what we're wanting to do.
| | 05:11 | We are almost done. We have one more thing,
however, that we need to take care of, and
| | 05:16 | that is the fact that we are relying on
JavaScript maybe a little too heavily here.
| | 05:21 | So in our next movie, we are going to take
a look at creating a default state for our
| | 05:26 | menu, just in case.
| | Collapse this transcript |
| Providing fallbacks| 00:00 | Throughout this series of exercises, we relied
on jQuery to help us provide the functionality
| | 00:05 | we want for our menu across
multiple screen sizes and capabilities.
| | 00:09 | But we've been ignoring one very important
question, what happens if JavaScript isn't available?
| | 00:16 | And to prove that point I have our index.
htm file here from the 03_13 folder opened in
| | 00:21 | a browser and I've disabled JavaScript.
| | 00:24 | Now a Desktop size, doesn't really matter,
we've got a nice, HTML, CSS, driven dropdown
| | 00:30 | menu, doesn't rely on JavaScript at all.
| | 00:32 | Nice clean works; no big deal.
| | 00:34 | However, let's go down to the mobile size.
| | 00:39 | At the mobile screen size or the small screen
size, JavaScript being disabled, absolutely,
| | 00:43 | totally disrupts the experience.
| | 00:46 | The menu is hidden by default and
relies on JavaScript to show it.
| | 00:51 | So, in this case that is not workable at all,
same can be said if I go to tablet, we're
| | 00:58 | still okay, because we have our nice drop
down HTML, CSS menu, but at the mobile screen
| | 01:03 | size that is going to be a bit of an issue.
| | 01:07 | So, one of the things you really need to think
about when you're planning any type of really
| | 01:12 | complex menu like this, is how
reliant on JavaScript are you?
| | 01:17 | Would somebody be browsing
with JavaScript turned off?
| | 01:20 | And if they are, what type of
experience are you providing for those guys?
| | 01:23 | So, if I go back into my index.htm file,
one of the things that we've done here by sort
| | 01:30 | of tying the JavaScript and the CSS together
is we have given ourselves a way to go ahead
| | 01:35 | and give the non-JavaScript user a default
experience that while maybe it's not ideal,
| | 01:40 | at least it will be functional
and that's the point of this.
| | 01:43 | So, I am going go into our navigation and
for this <ul class="topMenu">, I am going
| | 01:48 | to go ahead and give it a class of expand.
| | 01:51 | Now remember that the expand class in CSS
is being dynamically applied to JavaScript
| | 01:57 | and that's what's expanding the menu.
| | 01:58 | So, if we apply this by default that means
that by default this menu is going to be expanded.
| | 02:03 | I want to do the same
thing for the submenus as well.
| | 02:06 | Let me go ahead and just apply a class of
expand to each one of those, and we will just
| | 02:14 | make that the default.
| | 02:15 | I'll go ahead and save that, and member in
all of our functions, the small menu function,
| | 02:19 | the medium menu function, and the large
menu function, the very first thing that any of
| | 02:23 | those functions will do is strip
out this class if they find it.
| | 02:27 | So, if JavaScript is enabled, that's fine.
| | 02:30 | It will go ahead and strip them out and
the menus will appear as they would normally,
| | 02:33 | but if JavaScript is disabled, let me go and
save this, go back into my browser and refresh
| | 02:38 | this, the menu shows up.
| | 02:40 | Now it's fully expanded.
| | 02:41 | It's not functional in the fact that it won't
collapse and expand, but any user that doesn't
| | 02:46 | have JavaScript turned on, will at least be
able to see the menu and navigate it, even
| | 02:50 | if it's less than ideal.
| | 02:52 | However, I can promise you if they are used
to browsing around with that JavaScript turned
| | 02:56 | on, they are probably used to a
less than ideal browsing experience.
| | 02:59 | Now the real problem with this particular
technique comes in with the tablet mode.
| | 03:05 | So, if I expand this a little bit, you can
see, again for the desktop, or large screens
| | 03:10 | it's not a problem, but for tablet mode, it
is a little bit of a problem, because, remember
| | 03:13 | with tablet mode we were
doing little bit of both.
| | 03:16 | We had the hover effects still going on
with the hover class, and then with the expand
| | 03:20 | class, it goes ahead and sort of drops us down by
default and hovering doesn't really move them back up.
| | 03:26 | So, it just sort of exposes the menu.
| | 03:28 | We even have a little bit of menu
overlap here that's pretty distasteful.
| | 03:32 | So, the real downfall to this particular
approach on the tablet side is that we don't really
| | 03:37 | know whether we're dealing with a
touch device, or a non-touch device.
| | 03:41 | If we knew, the touch wasn't a factor; we
could just go ahead and do what we're doing at.
| | 03:45 | The desktop level, which just simply allow
the HTML, CSS to do its thing, but here at
| | 03:50 | the tablet level, we don't know whether it's
touch device or not and if it's a touch device
| | 03:55 | and we don't have the touch events wired to
the menus, and don't have them fully exposed
| | 03:59 | like this, they are not going to able to browse.
| | 04:01 | So this is definitely not a
great solution. It's a tab level.
| | 04:04 | But again, they are browsing at their size
screen, and they don't have JavaScript turned
| | 04:07 | on, at least they'll be able to access
the menu and navigate where they want to go.
| | 04:12 | Now, I'm going to be the first to admit that a non
-JavaScript fallback solution is less than ideal.
| | 04:18 | It is certainly more reactionary than you want.
| | 04:21 | Now you may not believe me when I say
this, but I sort of did this on purpose.
| | 04:25 | I wanted to show you what happens when you
fail the plan, any aspect of our complex system
| | 04:32 | that you're building in your site.
| | 04:33 | If I had designed this menu to give a decent
fallback experience as a default if I started
| | 04:39 | with that and then enhance the menu through
jQuery at each level, I could have probably
| | 04:44 | come up with a much better, much more
elegant solution, than trying to shoehorn in here
| | 04:48 | at the em like I did.
| | 04:50 | So, trying to plan for all contingencies
isn't always possible, but you need to spend time
| | 04:54 | carefully considering the ways that users
could encounter your navigation, so that you
| | 04:59 | can at least at a minimum, always provide a clear
and functional way to navigate through your site.
| | 05:04 |
| | Collapse this transcript |
| Dynamically replacing menus| 00:00 | In our previous series of exercises, we've
covered how to change the presentation and
| | 00:05 | functionality of a menu across
multiple devices and screen sizes.
| | 00:09 | While this can be extremely effective,
it's not always the right option.
| | 00:13 | In some cases it can actually improve
usability to convert menus to other elements, like a
| | 00:20 | select menu that can take advantage
of a device's native user interface.
| | 00:25 | I'm previewing in my browser right now
the index.htm file from the 03_14 folder.
| | 00:31 | I know we're back to that more simple menu,
and I'm going to explain kind of why we're
| | 00:35 | doing that here in just a little bit,
but that's not what I want to focus on.
| | 00:38 | When I scroll down, you can see that we have a
list or a menu of the archived galleries for the site,
| | 00:44 | so if people want to go look at the photos of
Charlotte or something like that, they could go do that.
| | 00:49 | In this context, within the desktop layout,
within a larger-screen layout where we have
| | 00:53 | a two-column layout, it
fits on the screen very easy.
| | 00:56 | It's really easy to sort of scan through that
visually and see all the different galleries
| | 00:59 | that might be available to you, so
it fits this form factor really well.
| | 01:03 | But when we start talking about going down
to a tablet layout or to a smartphone layout,
| | 01:07 | well, those are going to be single-column
layouts. The users are already going to be
| | 01:11 | doing a good bit of scrolling by the time
they get down to that, and adding that sort
| | 01:15 | of vertical height is not really
the best usage of the screen space.
| | 01:19 | So what I'm going to do is I'm going to show
you solution that we're going to do over the
| | 01:22 | next couple of exercises.
| | 01:23 | I'm going to switch over to my phone.
| | 01:26 | Here's the same exact file
opened up in my mobile browser.
| | 01:29 | I'm just going to scroll down to find that
list of archived galleries and when I get
| | 01:34 | down there, notice that instead of having
that vertical list, I have a select menu.
| | 01:38 | And it's even customized for this as well,
because it says choose a gallery, which the
| | 01:43 | Archived Galleries on the
right-hand side does not do.
| | 01:45 | So it's sort of customize for that use context.
| | 01:47 | And when I select this, the phone's user
interface takes over and I get to use this menu in the
| | 01:54 | context that any user of this phone is
going to be very familiar with. We are going to
| | 01:58 | be able to quickly peruse through the cities
that they are looking for without having to
| | 02:02 | deal with that extra vertical scrolling.
| | 02:05 | This is what we're going to be building over
the next couple of exercise. We're going to
| | 02:07 | take a look at how we can take some menus
within the navigation and transform them into
| | 02:12 | another form factor.
| | 02:14 | If you're working along with me, go ahead
and open up index.htm from the 03_14 folder in
| | 02:19 | your code editor, and I'm just going to
scroll down towards the bottom of the page.
| | 02:23 | We're going to use jQuery again to
help us with this operation.
| | 02:27 | I've got a script tag down there at the
bottom that's linking to the jQuery library from
| | 02:31 | Google APIs, and then I
have an empty script tag.
| | 02:34 | Now, a lot of what we're going to do in this
movie is very similar to what we did before,
| | 02:38 | because a lot of the logic is the same.
| | 02:41 | We need to check the screen size, and if
somebody resizes the window, we also need to take that
| | 02:45 | into account as well.
| | 02:47 | So I'm just going to go ahead and
start pasting in some code here.
| | 02:49 | I'll go over what each line of code is doing,
but it should be very familiar to you if you
| | 02:54 | did the previous set of exercises.
| | 02:57 | So the very first thing we're going to
do is establish the default windowState.
| | 03:00 | So once again, we're going to
say, var windowState = large.
| | 03:04 | Just after that, we have a document ready
function that when the document has finished
| | 03:08 | loading, is going to
check the width of the screen.
| | 03:10 | It's going to store that in a variable called sw,
and then we do just a little bit of conditional
| | 03:15 | logic--certainly not as much as we were doing
before--where we say, hey, if the screen width
| | 03:18 | is actually lower than 769--remember,
that's the trigger for our tablet layout--
| | 03:22 | go ahead and run small screen.
| | 03:24 | So as before, where we had three functions--
small screen, medium, and large screen--here
| | 03:28 | we really are only going to need two.
| | 03:30 | We have the menu as it's going to appear
in its large screen context, and then we
| | 03:35 | have the menu as it's going to
appear on tablets and smartphones.
| | 03:39 | Right after that we need to
go ahead and resize the window.
| | 03:41 | We can take care of that. We're going to
create another function here, and if you're
| | 03:45 | coding along with me here, just pause
the movie and finish writing this function.
| | 03:50 | And so what this is going to do for us is it checks
every single time the window is resized in any way.
| | 03:56 | It's again going to create that variable
for screen width, based on the width of client,
| | 04:00 | and then it's going to
check some really simple logic.
| | 04:02 | It's going to say, hey, if the screen size
is lower than 769 and the windowState = large,
| | 04:09 | go ahead and run small screen, and if the
screen width is greater than 768 and the windowState
| | 04:14 | == small, go ahead and run large screen.
| | 04:18 | Finally, we're going to create the
placeholders for the two functions that we're going to
| | 04:21 | be using, and for those, we're going to have
two functions: one that's called small screen
| | 04:26 | and one that's called large screen.
| | 04:27 | I am just creating the skeleton or the
placeholders for them, if you will right now. And the first
| | 04:31 | one is going to convert list menus to select
elements, and the second one is going to convert
| | 04:36 | select elements to list menus.
| | 04:37 | Now, we're going to be kind of specific in
what we're doing here. We're targeting a very
| | 04:40 | specific menu, but of course, you could
write the functions that we are going to be doing
| | 04:44 | in a very generic way so that they could go
ahead and pass arguments into these functions.
| | 04:48 | You could say, hey, this
time I want this menu converted.
| | 04:51 | Then next time you want this one converted.
| | 04:52 | So there are lot of different ways that
you can do what we're about to do here.
| | 04:57 | This is very similar to what we did initially with
our dropdown menu, and that's one of the reasons
| | 05:00 | why we're looking at the simple menu version
of the site rather than the dropdown menu;
| | 05:05 | it's because these functions are so similar
that really, if you were to externalize these
| | 05:09 | scripts, you could combine a
lot of what's going on here.
| | 05:11 | So we are going to talk a little bit about
making your scripts more efficient and externalizing
| | 05:16 | them later on in the title.
| | 05:17 | So for right now, I just want to be able to
focus on what we're doing with the select menus.
| | 05:22 | I don't want to be distracted by any of the
code that was used for our dropdown menus earlier.
| | 05:28 | With that basic structure intact, all we need
to do now is move on to dynamically replacing
| | 05:32 | the elements themselves, and we're going to start
next by replacing list menus with select elements.
| | 05:38 |
| | Collapse this transcript |
| Converting menus to select elements| 00:00 | Sometimes there just isn't a very
elegant way to do what you are trying to do.
| | 00:05 | In the case of our Archive Galleries menu,
we want to replace it on smaller screens with
| | 00:10 | a select element. Although we could have
two versions of the menu in our HTML and then
| | 00:17 | use CSS to either hide or
show them based on screen size,
| | 00:21 | this would not be a very
accessible or a semantic solution,
| | 00:25 | so let's take a look at how we can do
this dynamically through the use of jQuery.
| | 00:29 | So I am working in the index.htm file found
in the 03_15 folder, and you can see I have
| | 00:36 | already scrolled all the way
down to our small screen function.
| | 00:38 | Now, what I am going to do probably won't as
popular with lot of you guys that are following
| | 00:42 | along with me, but there is a lot of code
involved in this, and rather than trying to
| | 00:47 | type every single line of this in, what I am
going to do is I am going to paste the function in.
| | 00:51 | Now, I am going to go through it line
by line and talk about what it's doing.
| | 00:54 | So at certain point, you can just sort of pause
the screen and sort of type what you see here. Now,
| | 00:58 | I do want you to be very, very careful
because, in terms of how the code fits inside of the
| | 01:03 | functions, is really, really important.
| | 01:05 | But I will probably get through and tidy it
up little bit after I pasted it to make sure
| | 01:08 | all the indentations are where they are
suppose to be and you can tell who's going with who.
| | 01:12 | Now if you test the code and it doesn't
work the way you've typed it in, I do have--and
| | 01:17 | I will show it to over here--in the finished_
files folder of the 03_15, there's the index, and
| | 01:22 | it'll give you the function
that we are working with as well.
| | 01:25 | All right, so let me minimize that.
| | 01:28 | I am just going to go ahead and paste the code in,
and let's just go through this line by line, shall we?
| | 01:34 | Like I said, I may have to do a little bit
of housekeeping here. It looks the way
| | 01:38 | I want it to. Okay, good.
| | 01:39 | All right, so let's talk about the first
thing that we are going to do. So this line here,
| | 01:43 | find the unordered list that you wish to change.
| | 01:45 | We are being very specific, we are going in
and we are saying hey, find a nav element with
| | 01:50 | the class archives and find the UL
inside of that or find any UL inside of that.
| | 01:55 | Now, I'm using each here, and we could target
it more specifically without using each, but
| | 02:00 | what each allows us to do is if I had a
region of the page or the entire page itself and
| | 02:05 | I wanted to find a certain type of UL that
maybe had a class to it called convert or
| | 02:10 | select or that sort of thing,
| | 02:11 | it would find each one of
those and it would do this to them.
| | 02:14 | So this is a little bit more flexible.
For those of you that might be looking for a solution
| | 02:18 | that's going to do multiple unordered lists
on the page based upon the criteria you pass
| | 02:21 | in, each is a little better choice
for that, which is why I'm using it.
| | 02:25 | So, inside this function,
let's talk about what we're doing.
| | 02:28 | The very first part of it is that we are
creating a select element. We are doing this through
| | 02:32 | jQuery and we are just saying hey, I am
going to create a variable called select,
| | 02:35 | so we are storing this element inside of a
variable. I like this method of creating
| | 02:39 | elements in jQuery,
| | 02:40 | so rather than having to type out a long list
of code that you are trying to create or a little
| | 02:44 | string, you just say, hey I am going to do
a select element, you make it self-closing,
| | 02:48 | and it will go ahead and
create the entire element for you.
| | 02:50 | So, jQuery is good like that.
| | 02:52 | So, we have created the select element now.
| | 02:54 | We haven't placed it on the page anywhere; we have
just created it and stored it in the variable.
| | 02:58 | So that's step one.
| | 02:59 | Now, the next thing that we are going to do,
right here, this section of code, where we
| | 03:03 | are adding an initial choice for the select
element and then assigning it some attributes.
| | 03:08 | So in our menu--and I'll just switch back
over to the browser so you can see this.
| | 03:11 | Let me scroll down a little bit.
| | 03:14 | In our menu there really doesn't need
to be any type of instruction given here.
| | 03:18 | It says Archived Galleries.
| | 03:19 | Here is a list of cities.
Most people can figure that out.
| | 03:22 | But for a select menu, if it said Archived
Galleries and the first option was a city,
| | 03:26 | that might be a little more confusing.
| | 03:28 | So I would like something there that
sort of gives a little bit guidance.
| | 03:31 | So what I'm doing is I'm creating another
variable, this one called Initial, and inside
| | 03:36 | of that I am placing an option, which is
each individual unit within a select menu that
| | 03:41 | gives you your choices.
| | 03:43 | And for this one I've put some text inside
this one, Choose a gallery. So, that's going
| | 03:47 | to be very first option.
| | 03:49 | And I am attaching some attributes to that, so I
am populating this option with some attributes.
| | 03:53 | The value is going to be just a
generic hash tag so if somebody selects it,
| | 03:57 | it's not going to navigate off the page.
| | 03:59 | And then the selected variable, the optional
value of selected, its initial value is going
| | 04:03 | to be selected. That's a Boolean value and that just
means that that is going to be initially selected element.
| | 04:09 | So, so far we have created a select element,
and then we've also created an option with
| | 04:13 | a couple of attributes, but we haven't
joined the two together, and that's what we do in
| | 04:17 | the next couple of lines of code.
| | 04:19 | So I added the initial
choice to the select element.
| | 04:22 | So we target the select variable, which
holds the select element, and then to that we are
| | 04:26 | appending the initial,
which is this option element.
| | 04:29 | So we are placing this inside
the select element we just created.
| | 04:33 | Okay now, here comes the tough part. We need
to populate this new select element with the
| | 04:38 | links from our list menu, and I am just going to
scroll up to the HTML code so you guys can see this.
| | 04:45 | So our unordered list inside here,
each list item has a link inside of it, the link has
| | 04:50 | an HREF attribute, which goes to navigates to
the page and also has a title that we can use too.
| | 04:56 | So there is a couple of attributes here
that we can use to populate our select menu.
| | 05:00 | Okay, going back down, let's take
a closer look at this function.
| | 05:05 | So what it's doing is it's saying hey, go
inside that unordered list that we have targeted
| | 05:09 | and find every single link, find each one.
And then because each is going to loop through
| | 05:14 | them for us, it's going to do this
for every single link that it finds.
| | 05:18 | So the first thing it's going to do is it's
going to create a variable called option and
| | 05:22 | it's going to store in
it another option element.
| | 05:24 | Now initially, we are not
populating the option with anything.
| | 05:26 | That's what these next
couple of lines of code do for us.
| | 05:29 | So the first thing that we are going to do
is we are going to go in to this option that
| | 05:32 | we just created and we are
going to set a couple of attributes.
| | 05:34 | The first attributes is the value
attribute, and that's going to be populated with the
| | 05:38 | HREF attribute from the link.
| | 05:40 | Now, there's also something else going on here
that you might miss. We're taking this little
| | 05:44 | option and not only we are setting attribute
here, but we are also setting the HTML, meaning
| | 05:48 | the content of the option, the actual text
inside of it, and we are setting it to the
| | 05:52 | HTML or whatever the contents of that link were.
| | 05:55 | So essentially, let me kind
of map out how this is working.
| | 05:58 | It's saying, okay, this is going to
be the value of the option element.
| | 06:02 | This is going to be the actual
text that's inside the option element.
| | 06:06 | The option below that is setting the
title attribute to the title of the links as well.
| | 06:10 | Now again, all we are doing right now is
creating these options and we are populating them,
| | 06:15 | but we're not actually placing them anywhere.
| | 06:17 | So the very next line says, okay, go up and
find the select menu that we created earlier,
| | 06:21 | and every single time you create one of these
I want you to append it, or I want you to place
| | 06:25 | it in that select element.
| | 06:26 | So now we are populating that select element that
we created with all of those different options.
| | 06:32 | Okay, now, the next thing we need to do is
handle what happens when a user selects one
| | 06:36 | of these. So, we are creating a change handler
for the select element, and we are saying that
| | 06:41 | when somebody changes the value, what we
want you to do is we want you to navigate to a
| | 06:45 | new page--that's window location--
| | 06:47 | and we want you to use the value that
you're getting from the selected option.
| | 06:52 | So we are saying hey, whichever option is
selected, go ahead and grab its value--remember, the
| | 06:56 | value is coming for the HREF from
the links--and then navigate there.
| | 07:00 | So here we have a select element that's
been populated with a custom initial option
| | 07:05 | and then thereafter it's populated with
options that were generated from the unordered list.
| | 07:10 | We're using the values of the list, such as
the HREF attribute, the title attribute, and
| | 07:15 | then the actual contents of the link to
populate the option values for the select.
| | 07:19 | But we haven't really done
anything with the select yet,
| | 07:22 | and that's what this very
last line of code does for us.
| | 07:25 | So target the unordered list and
replace it with the generated select element.
| | 07:29 | So here we are going to target the unordered list and then
we are going to say replaceWith($select) that we generated.
| | 07:34 | So you can create that select and populate
it all day long, but until you do that last
| | 07:37 | line of code, you haven't
actually placed it on the page.
| | 07:41 | And by using replace, the replace with
method, we don't have to worry about putting it on
| | 07:45 | the page and then removing the unordered
list; we do it all in one single operation.
| | 07:50 | Now, I managed to paste most of this in, but
we still need to do one last little thing
| | 07:54 | here. So I am going to go down to the closing
curly brackets of our unordered list function,
| | 07:59 | but I still want to stay
inside the small screen function.
| | 08:01 | So I am just going to create a little empty
space right here, and I am just going to type
| | 08:05 | in a comment that says, set
the current window state.
| | 08:09 | So just like we did when we were creating
the dropdown menus, we need to keep track
| | 08:14 | of the current window state, so we have that
variable window state. And this one is going to equal small,
| | 08:19 | so if this function is run, it's at a
smaller window size so we are going to go to small.
| | 08:22 | So I am going to go ahead and save this, go back
in my browser, and I am going to refresh the page.
| | 08:28 | So at large screens of course,
nothing has happened here.
| | 08:30 | But as soon as I resize the screen and I
go down to, say, the tablet size, if I scroll
| | 08:33 | down now, instead of seeing the unordered list,
I'm seeing the select menu, and of course that's
| | 08:37 | also going to be the case
at my smaller screen sizes.
| | 08:40 | Now, at the moment, we have successfully
replaced the list menu with a select element, but if
| | 08:46 | we resize the screen back up again--and
scroll up to show you what happens here--oh boy!
| | 08:53 | We don't get our menu back; we
are stuck with that select element.
| | 08:56 | So we need to take care of that using the
large screen function, and we'll do that in
| | 09:01 | our next exercise.
| | Collapse this transcript |
| Converting select elements to menus| 00:00 | Now that we've successfully converted a list
menu to a select element, we need to do the
| | 00:05 | opposite, in case the screen is
resized from a small screen to a large one.
| | 00:10 | So to do that, I am going to be working in
index.htm from the 03_16 folder, although
| | 00:15 | we really sort of just picking up where we
left off last time; so if you want to keep
| | 00:18 | that file open, that's fine.
| | 00:20 | I am going to scroll down and find my large
screen function, and much like the last time,
| | 00:25 | in the interest of time and boredom of
watching me type, I am going to paste some code in
| | 00:29 | here, and I am just going to scroll up and
we're going to go over this line by line and
| | 00:34 | talk about what it's doing.
| | 00:35 | At each stage you can pause the movie, type in the
code, and then we can just kind of move on together.
| | 00:41 | You could probably take a good stab at doing
this yourself, because really, all we are doing
| | 00:46 | is sort of the reverse of what we did before.
| | 00:48 | So, we are using a lot of the same methodology,
a lot of the same functions and methods, but
| | 00:52 | we're just sort of doing it
the other way, if you will.
| | 00:56 | So the very first thing we need to do is
target the select menu, and to do that, we pass the--
| | 01:01 | almost the same exact function,
| | 01:03 | only this time, instead of targeting the
unordered list, we're targeting the select element inside
| | 01:08 | of the archives nav.
| | 01:10 | Now, inside that we have to deal with the
fact that we have an option that doesn't need to
| | 01:15 | go into the unordered list.
| | 01:18 | Remember, last time we created that Choose a
Gallery, that initial offering, and obviously
| | 01:23 | when we switch back to the unordered list,
we don't need that because it wasn't part
| | 01:27 | of the original list.
| | 01:27 | So, the easiest way to do that is just go
ahead and find the first child of that
| | 01:33 | select element and then remove it.
| | 01:34 | So, that will just go ahead and get rid of
the original option and it won't be converted.
| | 01:39 | Now, the next thing we need to do, the same
way that we created a select menu last time,
| | 01:43 | this time we need to create an unordered list.
| | 01:46 | We use the exact some method. We create a
variable, we are going to name that variable ul, and
| | 01:50 | we are going to pass an
unordered list into that.
| | 01:54 | Now the thing that we need to do is instead
of cycling through all of the links in the
| | 01:58 | menu like we did last time, we are going to cycle
through all the options in the select menu this time.
| | 02:03 | So, we are going to say, hey, go inside the
select element and find every single option,
| | 02:08 | and for each one of those I want you do this.
| | 02:10 | So, we are going to go ahead and for each
one of those options, we are going to create
| | 02:14 | a list item and an anchor element, and we are
going to store them both in those variables.
| | 02:19 | So, for each option it gets its own list item
and its own anchor, and then we need to populate
| | 02:25 | that anchor element with some attributes
from the option. And this is almost exactly the
| | 02:29 | opposite of what we were doing before.
| | 02:31 | We are going to set the attribute href, we
are pulling that from value, and then we're
| | 02:36 | going a little bit further. We're saying,
hey, inside that anchor element, I want you
| | 02:40 | to write some HTML, and I want you to just
go ahead and pass in whatever the contents
| | 02:45 | of the option are, go ahead and pass that in.
| | 02:47 | So, it's basically putting those things back
into place, if you will. And then we are going
| | 02:52 | to do the same thing with the title attribute
using the same title attribute from the select
| | 02:57 | to populate that anchor.
| | 02:59 | Now, the next thing we need to do is we need
to join all of this together, so we are going
| | 03:02 | to take the unordered list and we are going
to append those created list elements, these
| | 03:07 | guys, into it, and then we are going to take
the list items, each one of those, and we are
| | 03:12 | going to append the link inside of that.
| | 03:14 | So, every time we create one of this list
items, it's kind of goes inside the unordered
| | 03:18 | list, and every single time we create a list item,
the created anchor is going to go inside of that.
| | 03:24 | And that's it. That's the whole function of
creating this unordered list.
| | 03:27 | It's a little bit simpler.
| | 03:29 | Then we have to go out and find, again, that
select element, and then we are replacing it
| | 03:33 | with the unordered list.
| | 03:35 | So again, replaceWith allows us to do the
whole two-birds-with-one-stone thing where
| | 03:39 | we are replacing, we're moving the select item
and then replacing the unordered list in its place.
| | 03:44 | We are left to do one more thing.
| | 03:47 | So, outside of that function but still
inside the large screen function, remember, we need
| | 03:51 | to go ahead and set the
current windowState back to large.
| | 03:54 | So, I am going to say set the current window
state, and in this case, windowState='large'.
| | 04:05 | So, I am going to save this.
| | 04:06 | Now I am going to test this, but I am going to
test it in my iPad, so you guys can see this working.
| | 04:10 | So, here's our page previewed in our iPad
and if I scroll down, I can see, just as I
| | 04:17 | was expecting, I see the select menu, and clicking
that gives me the select menu ui, here in the iPad.
| | 04:23 | But then, if I go to my landscape mode, this
actually triggers our full screen layout, and
| | 04:29 | you'll notice that right over here,
we have our regular, normal unordered list.
| | 04:35 | And then going right back to portrait mode
gets us right back to our select menu, so
| | 04:40 | that is working perfectly.
That's really cool!
| | 04:42 | Now this wasn't that complex of a function,
but if you don't feel like wiring up this
| | 04:47 | type of functionality yourself every time
you need to do it, it's actually pretty easy
| | 04:50 | to go out online and find some prebuilt libraries
that do exactly this type of conversion, unordered
| | 04:55 | list to select menus and vice versa.
| | 04:58 | They're typically a good bit more advanced
than what I have shown you here, because they
| | 05:01 | give you lot of options to place in them,
| | 05:04 | but it can sometimes be a little bit harder
to integrate them directly into your app or
| | 05:07 | some of your site's other functionality.
And if you're not using all of the functionality
| | 05:12 | that they offer you, they can sometimes
add a little bit of bloat to your project.
| | 05:15 | So in the end, whether or not you're going
to use this type of responsive navigation
| | 05:19 | pattern and how you're going to create it
is really largely going to depend upon the
| | 05:24 | project itself and your specific goals.
| | Collapse this transcript |
|
|
4. Creating Responsive MediaCreating fluid images| 00:00 | Earlier in the course, we saw how
background images can be very effective in responsive
| | 00:04 | design, but not only giving you flexible
containers that can change how much of the image they
| | 00:09 | reveal, but also allowing you to swap out images
at smaller screen sizes using media queries.
| | 00:15 | Well, that's great if the images are purely
decorative, but what if you actually need the
| | 00:19 | image element itself?
| | 00:21 | Images are, by their nature, a fixed size,
and incorporating them into a fluid layout can
| | 00:26 | quickly ruin your well-planned design.
| | 00:28 | Take a look at our page here.
| | 00:29 | This is the media.htm file found in the
04_01 directory. And I am just previewing it in my
| | 00:35 | browser and I notice that this a two-column
layout. The flexible columns, the one on the
| | 00:41 | left is a good bit wider, I think, probably
is 60%-70% than the one on the right-hand side,
| | 00:47 | but these images are just
not getting with the program.
| | 00:50 | Notice that this nice image of the sailboat
up here in the water at the sunset is a lot wider
| | 00:55 | than the column that it's inside of it.
As a matter of fact, it's just sort of forcing
| | 00:58 | its way right outside of it, and it is
just ignoring the flexibility of our column.
| | 01:03 | We don't really have any better results
over here with this picture of a flower that
| | 01:06 | is inline in a paragraph. The sailboat's
in its own paragraph, and I notice that when
| | 01:11 | I flex here, it is just not listening.
| | 01:15 | So these guys aren't behaving at all.
| | 01:17 | Now, I know some of the techniques that I
have been showing you guys in responsive design
| | 01:20 | take a little bit of work.
| | 01:21 | Thankfully though, making our images fluid
doesn't take a lot of work at all, so let's
| | 01:25 | take a look at some of the
techniques that we can use.
| | 01:28 | So, I am in my code editor here,
and I have opened up the media.htm file.
| | 01:33 | I just want to show you where these images
are and show you a little bit of how these
| | 01:35 | images are structured as well.
| | 01:37 | You'll notice that the image inside the paragraph,
the image of the flower there, it has a class
| | 01:41 | applied to it called inline, so it is a little bit of
foreshadowing; we are going to be using that in a moment.
| | 01:46 | You'll also notice that that there are no
width and height attributes, so if you want
| | 01:49 | to make your images fluid, that's step number on.
| | 01:52 | Within the code, go ahead and strip out any of those
width and height attributes or just don't put them in.
| | 01:56 | If you don't put them in and your images
aren't fluid for whatever reason, it's okay, because
| | 02:00 | the browser will take the image and just show it at
its native size, so you don't really need them.
| | 02:05 | As I scroll down, I can see that our other
image of the sunset there in Key West is sitting
| | 02:10 | inside of its own paragraph and it
does not have the class of inline.
| | 02:14 | Okay, so I am going to scroll right back up.
And it's a very simple layout, as I mentioned.
| | 02:18 | We have a 60% column on one side, 35% column on
the other. When we go down below 100 pixels,
| | 02:24 | we take everything down to a
single column, so, very, very simple.
| | 02:27 | Just above the first media query, I am going
to go ahead and write our first selector, and
| | 02:30 | this one is just going to
be an image selector, img.
| | 02:33 | So if you want to target some images
specifically in your style sheets, you'd use classes or
| | 02:38 | IDs or some type of specific selector, but
right now we are just using the global image
| | 02:42 | selector, all the images on the page.
| | 02:44 | So what we are going to do is we are going
to use a property called max-width, and what
| | 02:47 | max-width does--and we are going to go
ahead and give it a max-width of 100%.
| | 02:50 | Now, you might have been tempted to say, well,
what about giving it a percentage for width?
| | 02:54 | Well, that would work.
That would absolutely work.
| | 02:57 | But max-width, on the other hand, instead of
talking about the width of the image, talks
| | 03:00 | about the width of the container.
| | 03:02 | So what max-width is saying, it's saying hey!
| | 03:04 | Whoever you're inside of, you can only be
as wide as 100% of the container. So, as long
| | 03:12 | as your image is actually a little larger
than the container that it's inside of, your
| | 03:16 | image quality is going to be fine
and it is going to scale to fit.
| | 03:19 | The other nice thing about this technique
is that we don't have to put height auto or
| | 03:24 | put any height value.
| | 03:25 | The intrinsic aspect ratio of the
image will be maintained by the browser.
| | 03:30 | So if I save this, go back into my browser,
and refresh the page, you can see what happens.
| | 03:36 | Automatically, our image right up
here in the right-hand column is fixed.
| | 03:39 | As soon as I resize the
page, it resizes as well.
| | 03:42 | Now, you may have remembered how large it
was when we first looked at our page, and you
| | 03:46 | might think, well, wait a minute.
| | 03:47 | That column is really, really small.
Why did you make that image that big?
| | 03:50 | Well, remember, at 800 pixels, we go down
to a single column, and when I do that, it's
| | 03:55 | going to show up rather large.
| | 03:57 | So one of the tricks of using fluid images
is understanding exactly how big this image
| | 04:02 | needs to be in order to display properly.
| | 04:04 | It does sort of expose one of the
downsides of using this technique.
| | 04:08 | You're likely going to be using a larger image
than you actually need almost all of the time.
| | 04:13 | You certainly don't want to have a smaller
image that needs to scale up to fit that 100%
| | 04:18 | of its container, because if you have that,
you're going to lose image quality, and that
| | 04:22 | means that on mobile devices and smartphones
and tablets and things like that, you're going
| | 04:26 | to make your users download a
larger graphic than they actually need.
| | 04:30 | But the trade-off of that is that you get
an image that's going to fit anywhere, and
| | 04:34 | it's going to flex right along with your layout.
| | 04:36 | Now, that worked perfectly for our
sailboat over here, but what about our flower?
| | 04:40 | I notice that as I scale, my flower doesn't
really scale at all, until it starts to already
| | 04:45 | take up that 100% width, and that has
everything to do with the fact that currently
| | 04:49 | it's inline, so it is, along with the rest of the
paragraph, is kind of doing what we told it to do.
| | 04:56 | What happens when we have a situation like this,
where we have an image that's inline in text?
| | 05:00 | Well, first off, you're probably going to
use float to wrap the text around the image in
| | 05:04 | the first place. Believe it or not,
that's kind of what float was designed for,
| | 05:08 | so we are going to do that. And once we do
that, then we can more precisely target exactly
| | 05:13 | how wide we want this image to
be and do it in a flexible manner.
| | 05:16 | So if I come back into our CSS, I am just
going to create one brand-new selector here,
| | 05:22 | and I am going to use that inline
class that I showed you guys earlier.
| | 05:26 | So write the selector for inline, and inside
that I am indeed going to float this to the
| | 05:30 | right so that the text will wrap around it.
| | 05:33 | I am going to give it a margin, and the
margin I am going to give this is 0 for the top,
| | 05:37 | 0 for the right, 1 em for
the bottom, 2 ems for the left.
| | 05:43 | So, that's going to deal with
the text wrapping around it.
| | 05:46 | It's going to give a little bit of space
between the image and the text on the left-hand side,
| | 05:49 | and it's also going to give a little space
on the bottom as the text wraps underneath it.
| | 05:54 | Now comes the flexible part.
| | 05:55 | Now I am going to go ahead and say width,
and this time instead of using maximum width,
| | 05:58 | I am just going to use an actual
width, and I am going to do 45%.
| | 06:03 | So what that's going to do for me is it's
going to say hey, this parent paragraph that
| | 06:06 | you're inside of, which is
filling up the entire column,
| | 06:09 | I want you to only be 45% of that.
| | 06:12 | So remember, when you use percentages on
width, it refers to the percentage of the parent
| | 06:17 | that it is inside of.
| | 06:19 | And the next thing that I am going to do
is I am going to set a minimum width, and this
| | 06:22 | is one of the really neat
parts of this technique.
| | 06:25 | Specify a minimum and a maximum width for my
images. So, depending upon how it fits within
| | 06:30 | the layout, if it scales way up for example,
you might at some point say, okay, you're
| | 06:35 | allowed to flex until you get to 400
pixels wide and then stay right there.
| | 06:39 | In this case, I am giving it a minimum width
so that when we go down to a smaller screen
| | 06:43 | size, it's not getting any smaller than that.
| | 06:46 | If I save this, go back in, and refresh the
page, now you can see our image is appearing
| | 06:52 | at 45% of as wide as the paragraph, our margins are
working, and as I resize the page, it flexes as well.
| | 07:00 | Now remember, we have a minimum width of 200
pixels, so when it gets to that 200 pixels,
| | 07:05 | about right there, it doesn't get any smaller.
| | 07:07 | That helps it stay proportional to the text
that it's inside of and never get tremendously small.
| | 07:12 | Now when we go down to a single-column layout,
it does the same thing. It goes down to 200 pixels
| | 07:17 | and it just freezes there.
| | 07:19 | Now, that might be acceptable for you, but
at a really small screen size, you might think
| | 07:23 | that this is a little hard to read--I know I do.
| | 07:25 | So I am going to go back into our styles,
and what I am going to do is I am going to go
| | 07:29 | right underneath the existing media
query and I am going to write another one.
| | 07:32 | Now, earlier in the course, I talked about
letting the content determine where your breakpoints
| | 07:37 | are, and one of things I did when I was
building this exercise is I started to resize my page
| | 07:41 | and I said, you know, at what point should
this image really sort of take over and fill
| | 07:45 | up that entire column?
| | 07:47 | It's when it got to a certain size and I just
kind of froze the screen right there and said,
| | 07:50 | okay, about right there is good and then I wrote
the media query to go along with that breakpoint.
| | 07:54 | So don't feel like you have to stay in the
sort of dogma of, okay, 320 is mobile, 480
| | 07:59 | is mobile, 726 is tablet; you don't have to
do that. You can let the content drive this.
| | 08:05 | All right, so I am going to say @media screen,
and this gives us some good practice writing
| | 08:11 | media queries as well. max-width of 550 pixels,
so this time I have found a breakpoint around
| | 08:18 | 550 pixels. And then inside this I am going
to write my inline selector again, so inline.
| | 08:26 | And this time, inside of this,
I am going to say float: none,
| | 08:29 | so I am turning the float off.
| | 08:32 | I am going to say, display:block
so that it occupies its own line.
| | 08:37 | I am going to give it a margin of 0 for top,
auto for left and right, and 2 ems for the bottom,
| | 08:44 | so that's going to center it within that space.
And then, just to give it a little bit of flexibility,
| | 08:48 | we are going to give it a width of
90% and a minimum width of 300 pixels.
| | 08:53 | So I am going to save that,
| | 08:56 | refresh my page, and now as I begin
breaking it a little further down, you will
| | 09:00 | notice that right when I get to this
breakpoint, it goes to a display property of block.
| | 09:05 | It occupies that whole space.
| | 09:06 | It's got a little bit of margins
underneath it there, and notice that it has a minimum
| | 09:09 | width of 300 pixels, so even as I get down
smaller, it's going to freeze right there.
| | 09:19 | Now, there's one thing I want to point out
here: the techniques that I showed you guys
| | 09:22 | earlier, the maximum width technique,
| | 09:24 | it's actually been around for a long time.
| | 09:26 | As a matter of fact, I have got a link right
here to an article by Ethan Marcotte called
| | 09:30 | Fluid Images, where he talks about that
technique. He wasn't the first guy to come up with it,
| | 09:35 | but he really sort of expanded on it and brought
it into the lexicon of responsive design techniques.
| | 09:40 | But in that article he talks a little bit
about supporting older versions of Internet
| | 09:44 | Explorer, so if that's something that you
need to do, you want to check that article out.
| | 09:49 | And these techniques, as I mentioned before,
they're really not that hard, but they do
| | 09:52 | fail to solve many of the
issues related to responsive images.
| | 09:56 | For example, in order to protect image quality,
your image is usually going to be a little
| | 10:00 | bit larger than you actually need, and
there's no real way to swap out images at smaller
| | 10:04 | screen sizes if you need
some sort of an editorial change.
| | 10:07 | So if you resize your screen for example and
when it gets really small you wanted a bigger
| | 10:11 | picture of the boat, there's really no way
to do that with the techniques that I have
| | 10:14 | showed you here. Still, this is a very good start,
and it can be a great solution in most instances.
| | 10:20 | Now, for more information on responsive
images and to learn more about the techniques that
| | 10:24 | are evolving to solve the problems
surrounding them, check out some the resource links in
| | 10:28 | this exercise, as well as the additional resources
movie at the end of the title. And I can recommend
| | 10:33 | very, very highly The Problem With
Responsive Images, by Matt Wilcox, where he goes into
| | 10:38 | sort of where we are currently with
responsive images and why none of the solutions that
| | 10:42 | we have right now really give us the
full range of solutions that we need.
| | 10:46 | And then for resources, a really good way to
keep up with what's going on with responsive
| | 10:51 | images is to bookmark and keep checking
out the Responsive Images Community Group.
| | 10:56 | These guys are part of the W3C.org, and they
are committed to bringing several types of
| | 11:01 | solutions to responsive images.
| | 11:04 | So this is a good group to track, follow,
and see what they're currently doing in the
| | 11:08 | field of responsive images.
| | Collapse this transcript |
| Making video fluid| 00:00 | Much like images, video can often be
difficult to integrate into responsive designs.
| | 00:05 | In this exercise, we are going to explore
how to embed a YouTube video into your page
| | 00:09 | and then ensure it's just as
fluid as the rest of your layout.
| | 00:13 | So I have got the media.htm file open in
the 04_02 directory, but before I can start
| | 00:18 | working on this, I've got to go get a video.
So, I am going to jump out to YouTube and
| | 00:23 | just pick, oh, I don't know any
old random video. Hey, that's me.
| | 00:27 | All right, let's say I want to
embed this video on one of my pages.
| | 00:31 | What I would do is I will just go down to
the embed link right here and I would just
| | 00:36 | sort of choose some of the
options here. So let's say video size,
| | 00:38 | I will just pick some of the big here, 853.
I am not going to show any suggest videos
| | 00:43 | when the video finishes. Yeah, this is fine.
| | 00:45 | All right, so I am just go and copy
this and jump back into my HTML.
| | 00:51 | Now, what I want to do is I want to scroll down in
my code, and I am going to find this paragraph
| | 00:55 | right here that says if the image is purely
decorative. And I am going to create a line
| | 00:59 | between those two paragraphs. Now, make sure
you are outside of the closing tag or the
| | 01:03 | paragraph above it and above the opening
paragraph tag of the paragraph below it and then just
| | 01:09 | paste that iFrame in.
| | 01:11 | All right, I am going to save this. So, I am
going to test this in one of my browsers and
| | 01:16 | as I scroll down, oh, my
goodness, wow. I like that video.
| | 01:20 | I know it's just a really big one, but you
can see that that video cares not one iota
| | 01:24 | about our carefully crafted layout.
| | 01:27 | It just is going to do its own thing.
| | 01:29 | All right, so I am going to go back into my
code editor, and let's take a look at how we
| | 01:33 | can make that video just as fluid as our images.
| | 01:36 | Now, this technique actually requires a
little bit more effort than our images did.
| | 01:41 | For one thing, I am going to have to take
the iFrame that we place on the page and I
| | 01:45 | am going to wrap a div tag around it.
| | 01:47 | So right off the bat, we are doing a
little bit of a nonsemantic structure.
| | 01:50 | It's not the worst thing we could do, is it?
| | 01:52 | So I am going to create a div tag, and I am
going to give the div tag a class of video.
| | 01:57 | You could call anything you want, but I
think video is relatively descriptive. And then I
| | 02:02 | have got to remember to close the div tag.
There we go. So, I am going to save that.
| | 02:05 | And then I am going to scroll up to my CSS,
and I am going to create a blank line or two
| | 02:11 | just above the media queries there.
| | 02:13 | So last line but, just above the media query.
| | 02:15 | So the first I am going to do is style the
container, so I am going to say .video, so
| | 02:19 | I am styling the div tag that we just created.
And inside that I am going to do a position of relative.
| | 02:26 | I am going to place some padding on the
bottom, and this padding is going to be 56.25%.
| | 02:34 | I am going to come back to that in just a moment,
because that really is the key to this technique.
| | 02:37 | I want to do padding top of 25 pixels.
| | 02:43 | I'm going to do a height of 0
and a margin bottom of 1 em.
| | 02:50 | Those may be the strangest collection of box
model properties you have ever put on one element.
| | 02:55 | So let's talk about what's going on here.
| | 02:57 | Our position is relative because we are going to
absolutely position the iFrame inside of this element,
| | 03:01 | so that's the first thing.
| | 03:03 | The margin bottom of 1 em is simply to keep
the paragraph that follows it from butting
| | 03:07 | right up against it, so it doesn't really
have anything to do with the technique itself.
| | 03:10 | The other three, on the
other hand, are very important.
| | 03:13 | First things first, padding top.
Let's get that out of the way, 25 pixels.
| | 03:17 | All the video players that you are going to
use out there are going to have some type of chrome
| | 03:21 | associated with the video that they are
above and beyond the video's intrinsic ratio.
| | 03:26 | So if the video, say, is 16x9 for example, the
chrome might actually make it a little taller than that.
| | 03:31 | I would love to tell you that I have a list
for you of all the video chrome out there,
| | 03:36 | but I don't, and 25 pixels was
arrived at a little bit of trial and error.
| | 03:39 | I have seen some people use 30. I use 25.
| | 03:42 | I have seen other people use 20. You are
just going to have to experiment with that until
| | 03:45 | the entire video fits into the
frame that you are creating for it.
| | 03:49 | The real magic is the padding on the bottom.
| | 03:52 | That 56.25%. If you haven't guessed already, that
padding is a percentage of the parent container.
| | 03:59 | Now, the parent container, remember, is the
actual column that it's inside of. So, what we are
| | 04:04 | doing is we are making the actual height of
this, because the only thing that's driving the
| | 04:09 | height since the height is at 0, is the
padding on the bottom and the padding on the top.
| | 04:13 | So they only thing driving the
height is the width of the actual column.
| | 04:17 | 56.25% of that just happens due to
math to give you an aspect ratio of 16x9.
| | 04:25 | So, essentially what we are doing here is we
are establishing an aspect ratio of 16X9 for
| | 04:31 | the height of this, and it's going to have that
aspect ratio in relation to the width of the column.
| | 04:36 | So as the column flexes, this height will
flex based on this percentage, and we will always
| | 04:40 | have an extra 25 pixels or
so available for the chrome.
| | 04:45 | Now, you might ask yourself, well, can I just
leave the height off, since it's not defined?
| | 04:49 | No, not really. And one of the reasons for
that is that in certain browsers, which will remain
| | 04:54 | nameless, you need to trigger layout in those
browsers. You need to trigger has layout and
| | 04:58 | height is one properties that would do that,
but height auto will not do that for you,
| | 05:02 | so a height of zero is a nice trade-off
without forcing our aspect ratio to be wrong.
| | 05:07 | So if you're using a video that doesn't have
16 x 9, if you are using something that has,
| | 05:11 | say, 4 x 3 then you'd use
like--I think it's around 75%.
| | 05:13 | So you just have to do a little bit of math,
figure out what the percentage is for the
| | 05:17 | aspect ratio, and that's what you
would use for the padding on the bottom.
| | 05:21 | Now we're only halfway done.
| | 05:22 | I know I did a lot of explaining there, and
the next rule won't take as long to explain.
| | 05:26 | So the next rule I am going to do video, the
video class, space, iFrame. So I am doing a descendent
| | 05:31 | selector here, targeting any iFrame inside
of a video element, and what I am going to
| | 05:36 | do there is I am going to
set the position to absolute.
| | 05:38 | I am going to give it a top
offset of 0 and a left offset of 0.
| | 05:44 | So that's going to line the top left-hand
corner of the video with the top left-hand
| | 05:47 | corner of its video wrapper.
| | 05:50 | The next thing I need to do is I am going to
set its width equal to 100%, and I am going to
| | 05:55 | set the height to 100%.
| | 05:56 | I would love to tell you that it will calculate the
height for you automatically as it does with images, but it does not.
| | 06:02 | So you have to put that in there.
| | 06:03 | So what that's going to do is it is going
to position the iFrame at the top left-hand
| | 06:07 | corner of its parent container and then
it's going to make the width and height of that
| | 06:10 | iFrame 100% of its parent container.
| | 06:14 | So now, if I save this, go back
into my browser, and refresh, yay!
| | 06:18 | Now my video fits nicely inside my column and as I
resize, the video becomes fluid right along with it.
| | 06:26 | How cool is that?
| | 06:29 | As with the case with our images earlier,
creating a truly responsive video can be a
| | 06:34 | little tricky, but this technique is
going to work for you in most cases.
| | 06:38 | Be sure to go ahead and check out the "Additional
resource" movie at the end of the course, where
| | 06:41 | I will provide a resource to a couple of
libraries that deal with creating responsive video.
| | Collapse this transcript |
| Using CSS in place of images| 00:00 | Occasionally, the correct approach to
responsive images is to really not use images at all.
| | 00:06 | In the case of buttons, icons, and patterns,
it's sometimes just as effective to use a pure
| | 00:11 | CSS solution that can solve some of the scaling
and resource-management problems that plague images.
| | 00:17 | To show this off, we are going to be working with
the contact.htm file found in the 04_03 folder.
| | 00:25 | Now, if I preview this page in a browser--
I am going to scroll down a little bit.
| | 00:29 | I want you to focus on the right-hand column
over here, where it says This month's contest.
| | 00:33 | So right down here, we have a little link
that people can click to enter our contest.
| | 00:38 | I think I want to make that a little bit more
attractive, maybe draw a little bit of interest to that link.
| | 00:43 | In the past, I probably would use some
type of an icon or an image or something there
| | 00:48 | instead of just a direct link, but now with
a lot of capabilities we have with CSS3, we
| | 00:53 | can do that type of a graphics
approach without ever using an image.
| | 00:57 | So I am going to go back into the contact.htm
file, and I am going to switch over to my main.css,
| | 01:04 | so you can find that in the _images
directory also in 04_03 directory.
| | 01:10 | Now I am going to scroll down into my
global styles, and I just happen to kind of know
| | 01:15 | where this is already, but it's around line
381 or so. Yeah. We can see I have a little
| | 01:21 | comment right there, that says /*enter
button styles go here*/. All right, fair enough,
| | 01:25 | I am going to get rid of that comment and
just make myself a little bit of extra space.
| | 01:30 | Now, this time, for the most part, I am
going to be typing everything in by hand, so you
| | 01:33 | probably won't have to pause the video and type it
in; you can just type it in along with me.
| | 01:37 | All right! The first thing I am going to do is take
advantage of class that I have applied to that link
| | 01:41 | and say .enter a, and then
create my curly braces there.
| | 01:47 | So inside the rule, the first thing I am
going to do is apply a border to it. So, I am going
| | 01:52 | to say border: 1px solid, and I am going to give it
a color of #999, which is kind of a nice medium gray.
| | 02:00 | Inside of that I am going to do a margin,
and the margin is going to be 1 em for the top,
| | 02:05 | 0 for right and left,
and 1.5 ems for the bottom.
| | 02:09 | The color of this, we are going to go with
rgb(76, 67, 65). That's kind of a dark
| | 02:20 | gray. And then for width, I am going to
increase the width to 5 ems, so I'm making it a
| | 02:26 | good bit wider than it would be normally.
| | 02:28 | For height, I am going to make it 1.4 ems.
| | 02:30 | Now you will notice that I am using relative
units of measurement here. One of the reasons
| | 02:34 | I'm doing that is if somebody does scale up
the page--let's say they have trouble reading
| | 02:39 | and they make the text size larger--then
the button is going to get bigger as well.
| | 02:42 | So that's one of the reasons why I am
using ems instead of pixels. All right!
| | 02:45 | For text-align, I am going to choose center
so it's aligned in the center of our button,
| | 02:50 | and for border-radius I am going to use .5 em.
| | 02:55 | Finally I am going to give it a background,
and the background is going to be rgb(226,
| | 03:01 | 226, 226), and that is going to be a light gray.
| | 03:07 | Now, I am almost done.
| | 03:09 | I am going to go down to the next line, and
I am going to create a hover effect for this.
| | 03:12 | So I am going to say .enter a: hover.
| | 03:17 | So if it's a button, we definitely want
some type of a hover state so that people know
| | 03:20 | that they can click it, and for that, I am
just going to give it a background of rgb(254,
| | 03:28 | 254, 254), which is almost white.
| | 03:33 | So if I save this, go back into my browser,
and refresh the page, now I can see my Enter
| | 03:40 | button looks more like a button.
| | 03:42 | If I hover over it, it goes from that sort
of light gray to white. It's not bad, but
| | 03:47 | it could look a little better.
| | 03:49 | So I am going to back into my code and
rather than make you type all this and rather than
| | 03:54 | make you actually watch me type all
this, I have a little surprise for you.
| | 03:58 | If you go over to the assets folder--so if
you're not using Dreamweaver, you are using
| | 04:02 | another code editor, you can just open it
up in the Explorer or your Finder window or
| | 04:05 | whatever, the 04_03 directory. Find the
directory that says _assets, and there is a file in there
| | 04:11 | called gradient.txt. It's just a text file.
| | 04:14 | So you can now open that up with text editor or
whatever editor you are currently working with.
| | 04:18 | So this is the syntax necessary to create
the linear gradient that I am going to use
| | 04:22 | for our buttons, because they would look a
lot more button-like, or glossy if you will,
| | 04:26 | with the right gradient.
| | 04:28 | Now, before you freak totally out looking at
the syntax, the syntax is really not that bad.
| | 04:33 | This is actually the result of our
vendor-prefix situation that we find ourselves in.
| | 04:38 | The gradient syntax changed so much over just
a course of a year or so that browsers really
| | 04:44 | sort of struggled to keep up. The vendor prefixes
had all these different syntaxes, so what you're
| | 04:49 | seeing here is you are seeing one piece of
syntax repeated like five or six times for
| | 04:54 | different browsers and
different versions browsers.
| | 04:56 | The only thing that really matters is this
one right here. All the vendor prefixes go away.
| | 05:01 | This is the syntax that will be used.
| | 05:03 | You can see we are doing a linear gradient
so that means of course a gradient and a line.
| | 05:07 | It's going to start from the top and go down.
| | 05:09 | It's going to start with this color, an RGB
with an alpha-transparency. So, notice at this
| | 05:14 | point the transparency is 100%.
| | 05:16 | The first break will occur at 50% down.
| | 05:19 | So, you can see, we actually
have several color stops.
| | 05:21 | This one is at 0, this next color stop
is at 50%, the next color stop is at 51%, and
| | 05:27 | the final color stop is 100%.
| | 05:29 | So 50 and 51, but you might think that's a
little odd, but that is going to give us a
| | 05:33 | line sort of right in the middle of it.
| | 05:35 | So you can do as many color stops
as you want inside your gradient.
| | 05:38 | Now, if you are not familiar with creating
gradients in programs like Illustrator or
| | 05:41 | Photoshop or something like that, the term
color stop might not be familiar to you, but
| | 05:45 | essentially what that means is when you have
a gradient, you are typically going from one
| | 05:49 | color to another, but a color
stop sort of interrupts that.
| | 05:52 | So let's say you had a gradient starting at
yellow and it went all the way down to white,
| | 05:56 | but in the middle of it, you stopped that
gradient with another color and you put red in it.
| | 06:00 | So now you are going from
yellow to red and then red to white.
| | 06:03 | This is essentially what color stops do for us.
| | 06:05 | I am going to highlight all the syntax right
here, where it says Gradient for enter button,
| | 06:10 | all that below that.
| | 06:11 | I don't need this text Gradient for enter
button. I just need the first background all
| | 06:15 | the way down to the last background in this.
I am just going to copy this and go back
| | 06:19 | into my .enter a selector and
paste the code right in there.
| | 06:24 | It's going to look messy, but as long as
you place it in the right place, just below the
| | 06:29 | last background and just above the closing
curly brace, you are okay. And then I am going
| | 06:35 | to need to do the same thing for
my gradient, for the enter button.
| | 06:38 | So I am going to find it.
| | 06:39 | I am going to highlight all that, copy it,
go back to contact, and then same thing.
| | 06:46 | Just below the top background, which is basically
going to be a fallback for any browsers that
| | 06:50 | don't support the gradient syntax,
and then I am going to paste that in.
| | 06:54 | So I am going to go ahead and save this, go
back into my browser, we'll refresh the page,
| | 06:59 | and now we have a much glossier-looking
button. And notice that when we hover over it, we
| | 07:03 | get that nice glossy
look and feel to it as well.
| | 07:06 | Now, not all graphics need to be images.
By using some of these native CSS capabilities,
| | 07:12 | you can often achieve exactly the same--
frankly, if not better--graphics than you get using
| | 07:16 | an image, and you are going to have
lower overhead on the page at the same time.
| | 07:19 | I mean, notice for example within the browser,
that if I begin to increase the size of my
| | 07:23 | text, my button is going to
go right up there with me.
| | 07:28 | You can see, it just gets bigger with me.
| | 07:30 | Now, we could do a little better job
of centering it, but you get the idea.
| | 07:34 | It's going to scale right along with the text.
| | 07:37 | Now, before we move on, I want to
point out one more thing on the page.
| | 07:39 | Let me go back into the browser
for just a minute and reset the size.
| | 07:43 | If I scroll up, you are going to see
of these social media icons over here.
| | 07:46 | Now, no, these are not the best icons that have ever
been created before, but these are not images either.
| | 07:52 | Now, if I go back into my code and scroll up,
I wasn't being a hundred percent accurate with you.
| | 07:57 | They are images, but they are images
that are encoded directly into the CSS.
| | 08:02 | This is what's known a data URI, and
essentially you take an image--in this case these were
| | 08:07 | PNG files--and you base 64 encode it.
| | 08:10 | Then you take that base 64 encoding, put it
directly within the CSS, and then your browser
| | 08:16 | can decode this and present the image.
| | 08:18 | So it's really just a way of storing
image information directly in your CSS.
| | 08:23 | So you might be asking yourself,
man, why isn't everybody doing this?
| | 08:25 | Well, there are a couple of things here.
| | 08:27 | First off, your base 64
encoding can really bloat your CSS.
| | 08:31 | You can see, just a simple image like these
icons takes up a lot of space. In fact, the
| | 08:36 | code necessary for this is often sometimes
larger, in terms of the actually code itself,
| | 08:40 | than the image size.
| | 08:42 | So sometimes you're not really gaining
anything size-wise, so you just want to restrict it
| | 08:46 | to smaller images, icons, and things like that.
| | 08:49 | The real value that you get out of
using this is the reduced HTTP requests.
| | 08:54 | So for every little icon that you have on
the page, or in this case these social media
| | 08:58 | icons, you are not sitting there pinging
the server back and forth for these images,
| | 09:02 | which on mobile devices is fantastic.
| | 09:05 | So you make one request via the
CSS and then the images all display.
| | 09:09 | So it's very, very handy for that.
| | 09:11 | Generating these yourself
can be pretty difficult,
| | 09:13 | so there are some online
generators that can help you do this.
| | 09:17 | My favorite one is right
here, websemantics.co.uk.
| | 09:20 | It's not the best-looking site in the world,
but the nice thing about this one is you can
| | 09:24 | browse for an image, you can upload it, and
then when you convert it, it's going to give
| | 09:28 | you the base 64 encoding inside a selector.
| | 09:31 | So it's very, very easy
just to copy and paste it.
| | 09:33 | Some of the other ones, it's a little trickier
to get the base 64 encoding out, but for this one,
| | 09:38 | it's really, really super simple.
| | 09:39 | So, I love this technique.
| | 09:41 | Just keep in mind that these data URIs, they
work best for smaller graphics, but they give
| | 09:45 | you that additional savings of reducing HTTP requests,
so it's definitely worth your time to learn more about them.
| | 09:51 |
| | Collapse this transcript |
| Image gallery overview| 00:00 | The more that users access content across
multiple devices, the more they expect that
| | 00:05 | content to function in a way that's
consistent with the device's capabilities.
| | 00:10 | Take photo galleries for example. Not only
to users expect them to display in some sort
| | 00:14 | of modal window. On phones or tablets, they
expect them to also be able to swipe through
| | 00:19 | the images as well.
| | 00:21 | Creating a responsive image gallery that
takes the capabilities of multiple devices into
| | 00:25 | consideration is a daunting task.
| | 00:26 | In the next series of exercises, I'm going to show
you how to integrate one such gallery into your site.
| | 00:33 | I have opened up the finished version of the gallery
that we're going to creating in a browser right now.
| | 00:37 | I'm just going to scroll down a little bit to
show you a few images of the city of Philadelphia.
| | 00:40 | And what I like about this type of gallery
is it's nice and fluid and flexible. You can
| | 00:46 | scan the images really quickly and easily.
| | 00:49 | It's very easy for somebody to see all the
images, but if they want a closer look at
| | 00:54 | one, they can hover over it.
They get the nice caption that goes there.
| | 00:57 | If they click it, it activates the actual
gallery itself, and now, they can use their
| | 01:01 | arrow keys to navigate through it.
| | 01:02 | They've got the arrow on the bottom
that helps them navigate through it or close it.
| | 01:07 | If we go down and look at this on the actual
devices themselves, say we are on a tablet for example,
| | 01:13 | the captions are showing up over the images
and we still get that sort of two-column layout.
| | 01:17 | If you click on an image, it will go ahead
and activate the gallery. And this time, in
| | 01:21 | addition to the toolbar down there at the
bottom, you'll notice that we can swipe through
| | 01:25 | the gallery as well. And on the
phone we have a similar experience.
| | 01:29 | The images are showing up as a single column, and
when we click on one of them it activates the gallery.
| | 01:35 | And this one is touch-enabled as well.
As you can notice, I can swipe through the images
| | 01:39 | and it responds to orientation.
| | 01:42 | It's a very flexible image gallery.
| | 01:46 | Now, we're not going to be building this gallery
from scratch. In fact, we're going to be using
| | 01:50 | Photo Swipe, which is one of my favorite
responsive image galleries on the web, if not the favorite.
| | 01:57 | The reason that I like this one is because it's really
how I would want to build a responsive image gallery.
| | 02:04 | It allows you to build galleries that are
very clean. The semantic structure is what
| | 02:08 | you want to use; you don't have the use
any extra elements that I've found in a lot of
| | 02:12 | other image galleries out there.
| | 02:13 | It has a very good fallback experience.
| | 02:16 | If your jQuery is not working, if your
JavaScript isn't working, if the gallery doesn't work,
| | 02:20 | you still have the images on the page, and people
can still click and get a larger version of it.
| | 02:24 | It has a minimal JavaScript dependency. As a
matter of fact, we're going to use the version
| | 02:28 | that is jQuery-dependent,
but it doesn't have to be.
| | 02:31 | You don't have to make it
jQuery-dependent if you don't want to.
| | 02:34 | And it's very flexible.
| | 02:35 | I can style however I want.
| | 02:36 | I'm not tied to one specific graphic style,
so I can integrate into any site that I want.
| | 02:42 | If you are wanting to grab this for yourself,
you can go to photoswipe.com. They have a video.
| | 02:47 | They've got a lot of documentation. You can
read up how to use them. And of course, you
| | 02:50 | can also download it here as well.
| | 02:53 | Keep in mind that by the time you see this
series of exercises that we're going to be
| | 02:56 | doing here, there could be an
update available for Photo Swipe,
| | 02:59 | so be sure to consult your documentation so
that you'll be prepared for any changes in
| | 03:03 | implementation or gallery functionality
from what you are going to be learning here.
| | Collapse this transcript |
| Structuring a responsive image gallery| 00:00 | One of the goals of any responsive image
gallery is to make sure that regardless of where the
| | 00:05 | gallery is being viewed, that users have
access to the images, and they fit seamlessly into
| | 00:11 | the responsive layout that you've crafted.
| | 00:14 | So in order to do that, we're going to have
to start our gallery with a really nice lean
| | 00:19 | well-structured gallery of images.
| | 00:21 | So, we are going to start of with the
philadelphia.htm file, and you find in the 04_5 directory.
| | 00:29 | I have already scrolled down
to about line 31 in the HTML.
| | 00:33 | There's a little HTML comment right there
that says gallery goes here. I am going to go
| | 00:37 | and get rid of that, and that is
indeed where our gallery is going to go.
| | 00:41 | Now the first thing I want to do is
create a div tag to hold my gallery.
| | 00:45 | I am just going to call it div class=photos.
| | 00:49 | What I'm doing right now--and again this is
one of the things that I love about the photo
| | 00:52 | swap gallery that we are using--none of what
I'm doing here structurally is being driven
| | 00:56 | by the gallery itself.
| | 00:58 | I can create the structure of this. The only
thing I have to have our certain attributes
| | 01:03 | that I'll talk about, but for the most part, I get
to choose exactly how I want the gallery structured.
| | 01:08 | That makes it a lot easier to fit this
responsive image gallery into whatever layout I'm doing,
| | 01:13 | because I'm controlling it.
| | 01:15 | Now the next thing I want to do is I am going
to create an unordered list, and that's a really
| | 01:19 | nice logical way to structure an image gallery.
| | 01:22 | It's a collection of images. In this case they are all
related, so a list makes a perfect container for them.
| | 01:27 | Now I am going to give this an id of
photoGallery and then close my unordered list. And then
| | 01:34 | each image is going to be
contained within a list item element.
| | 01:37 | Now I am going to do a list item, my first
one, and then I'm also going to have a link.
| | 01:42 | Now, the link is important for the gallery,
but I would probably want the link here anyway.
| | 01:46 | This link is going to be the
larger version of the graphic.
| | 01:49 | So, the href attribute for this one is going to
be _images/gallery/philly_01_lg for (large).jpg.
| | 02:04 | I'm going to give it a title. The title
for this one is going to be 0street at night.
| | 02:10 | And then the image that's going to sit
inside this is img tag. The src for this is going
| | 02:15 | to be _images/gallery/philly_01.jpg.
| | 02:23 | So, same thing just without the large.
This is the smaller version.
| | 02:28 | This one is also going to have some alt text
and the alt text for this one is street at night.
| | 02:34 | What I am going to do there is close the image,
close the link, and then close the list item.
| | 02:39 | Now, let's take a look at
the structure of this, okay?
| | 02:42 | We have a list item, and
inside that list item is an image.
| | 02:45 | There's a link wrapped around the image.
| | 02:47 | The link goes to the
larger version of the image.
| | 02:49 | So, if somebody were to click the image, it would
navigate them to a bigger version of that photo.
| | 02:55 | The title attribute of the link and the alt
text are the same, and it's going to be true
| | 02:59 | for every single one of these guys.
And really, since we're just repeating this, you can go
| | 03:03 | ahead and copy and paste this
and just change the attributes.
| | 03:05 | Now one more thing: I know if any of you guys
are from Philadelphia you hate the term philly.
| | 03:09 | I understand that, but it's a lot
easier to type, so please forgive me.
| | 03:13 | Now, through the magic of video editing,
I saved you from having to watch me type all of that.
| | 03:18 | So, I am just going to go over each one of
these. You can copy and paste your previous
| | 03:22 | ones and just change the
values where you need to change them.
| | 03:25 | You can probably guess on the images.
They are going to go from 01 all the way to 08,
| | 03:31 | so I am going to have eight of these.
| | 03:32 | So, 01_lg would be link, 01.jpg would
be the image, 02_lg, you get the idea.
| | 03:38 | Now, the second one, the title for that one
is going to be beautiful dome, and remember
| | 03:41 | the alt text for the image is going to
mirror that, so that will also be beautiful dome.
| | 03:47 | For the third one, the title is going to be
skyline at night, and so will the alt text.
| | 03:51 | And for the fourth one, the title in the alt text
will be read angels wings. For the fifth one the
| | 03:56 | title in alt text will read crossing zone.
| | 03:58 | For the sixth one it will be apartments for
both, and for seventh one it will be construction
| | 04:03 | at dusk, and finally, the last one will
be liberty place. Again, it's title and alt.
| | 04:09 | So you can just go ahead and pause the video
for a second, type all this in. Like I said,
| | 04:13 | copying and pasting can certainly speed that
up a little bit, and that will be our gallery.
| | 04:16 | So, if I save this and preview it in my browser,
if I scroll down, you can see the gallery doesn't
| | 04:23 | look all that great right now.
| | 04:25 | We have the unordered list styling.
| | 04:27 | It's all in one big column.
| | 04:28 | However, it is functional. If I click one of
these, the image comes up. Now I am actually
| | 04:32 | navigating to the larger image, if you are
wondering. Obviously photoswipe we haven't
| | 04:36 | integrated that yet.
| | 04:37 | So, even though our gallery doesn't look that
great right now, it is presented in clean logical code,
| | 04:43 | so our next task is going to
be to add little styling to it.
| | Collapse this transcript |
| Controlling gallery styling| 00:00 | Our gallery is in place, but it doesn't
look all that great yet, as you can see here.
| | 00:06 | So let's take a moment and write the general
styling for our gallery, keeping in mind that
| | 00:11 | we need the gallery to be responsive as well.
| | 00:14 | So to work on this, I'm going to go and open
the Philadelphia.htm file found in 04_06 folder.
| | 00:21 | So, this is the gallery that we structured
in our previous exercise and this is what
| | 00:25 | I am going to be previewing up in my browser.
But in order to do the styling of course,
| | 00:29 | I am going to have to open up the main.css
file, and that can be found in _css directory,
| | 00:34 | in the 04_06 folder.
| | 00:36 | Now, we have a lot of CSS to add here,
so as we have in some of the previous exercises,
| | 00:41 | I am simply going to paste the code, a
snippet a code into the CSS file, and then kind of
| | 00:47 | go over what the code is doing. So in order
to write the same selectors as me, just pause
| | 00:51 | the video, kind of write down what you see
there, and then I will go over what's going
| | 00:54 | on there. And that will just save us a little
bit of time and still give us a nice thorough
| | 00:58 | overview of the styles.
| | 01:00 | So the first thing I want to do is affect any
of the global styles. Before I start worrying
| | 01:04 | about how the gallery looks like in the desktop,
versus tablet, versus mobile, I am going to
| | 01:08 | go ahead and style the things
that are global to all of them.
| | 01:11 | So I am going to go down
to about line 260 or so.
| | 01:15 | Yeah. Now, one of the things I want to point
out to you guys is that all the gallery styling
| | 01:20 | that we are going to be doing is essentially
going to come right above the contact style.
| | 01:25 | So when you see this comment, you know that
we are in the right place. You will also notice
| | 01:29 | that we already have a series of gallery styles here,
but right now they are not really styling the images.
| | 01:33 | They are merely styling the container
itself and some of the text inside of that.
| | 01:37 | Now, I am going to place my cursor right
above the contact styles there, giving myself a little
| | 01:41 | bit room, and I am going to
write our first selector.
| | 01:45 | So this selector is targeting both the
unordered list and the list items inside the gallery.
| | 01:50 | And essentially we are stripping out the default list
styling, so, no list styling, no margin, no padding.
| | 01:54 | If I save this, go back into my browser, and
refresh, you can see that really all it is
| | 02:00 | doing is getting rid of those little
bullets that we had out beside them.
| | 02:03 | It's getting rid of the list styling.
And the margins and padding, we are just sort
| | 02:07 | of covering our bases.
| | 02:08 | Those were already stripped, but we
are making sure that they were stripped.
| | 02:12 | Now we can focus on the individual regions,
and I am going to start with our desktop styles,
| | 02:16 | so I am going to scroll all the way
down, right to about line 1277 or so.
| | 02:23 | So 1277, somewhere right in there, yeah.
| | 02:26 | So there are our contact styles, and that
is what I am looking for. So, it's really line
| | 02:30 | 1282, but it's right around that area.
| | 02:32 | I will give myself a couple lines of empty
space there, and I am going to go ahead and
| | 02:37 | paste in the code that we are
going to need for our desktop styles.
| | 02:40 | Now, there is a little bit going on here, so
let me scroll back up after I get done pasting
| | 02:44 | that snippet in and I will go over
these rules one at a time for you.
| | 02:47 | Again, feel free to pause the video, type
in the selector, and then restart it, so you
| | 02:52 | can hear kind of what we are doing here.
| | 02:53 | Okay, so the first thing that we are targeting is
an element with the class of photos applied to it.
| | 02:57 | If you remember, that is the parent div tag
that is surrounding our unordered list.
| | 03:02 | What we are doing here is we are using
the CSS 3 feature of multiple columns.
| | 03:06 | Some of these are still using vendor prefixes,
so we have got the Mozilla column-count and
| | 03:10 | the webkit-column-count, but essentially these are the
properties you want to pay attention to, right there.
| | 03:16 | So column-count of 2 means inside this
div tag I want a two-column layout and I want
| | 03:21 | 1 em between the two of them, and then on
the bottom of it I want 2 ems' worth of margins,
| | 03:26 | and that's going to push whatever is
below our gallery down a little bit.
| | 03:29 | Now if we focus on the individual items themselves,
if we will look at the images inside the photos,
| | 03:34 | we are using the max-width technique that
we learned earlier in this chapter to make
| | 03:38 | sure that the images stretched
to fit the width of their container.
| | 03:42 | Now one of the really cool little things
about CSS3 is since we are placing these images
| | 03:46 | inside of a two-column layout by just using
column count, that 100% now equals whatever
| | 03:52 | those columns actually calculate to.
| | 03:55 | So that's a really neat way of getting
responsive of images that fit within a space and not
| | 03:59 | really having to worry about doing too
much of the math there. We're letting the browser do
| | 04:03 | that for us. And then the margin bottom of
a half of the em is going to keep the images
| | 04:08 | away from themselves by a half em.
| | 04:11 | And then the photos li, this is going to
target the list items inside of our list, and notice
| | 04:16 | that we have position relative, float of none.
| | 04:19 | The float:none is canceling out any of the
existing list item styling that may propagate down to it.
| | 04:25 | So essentially, it's going to say hey, if I
messed up somewhere and I wrote styling on
| | 04:29 | a menu to float all of my list items,
let's just strip it off, just in case.
| | 04:35 | Position relative allows me to take anything
inside this gallery and use absolute positioning,
| | 04:39 | and it will still be relative to the list item.
| | 04:41 | All right, if I save this, go out to my browser
and refresh, we can see the images are now
| | 04:47 | flowing into a two-column layout.
| | 04:49 | They are stretching to fit the columns based
upon the maximum width, and the margins that
| | 04:53 | we are using there are giving us our spacing.
| | 04:55 | Now, you might be wondering, yeah, but you
gave a 1 em space between the two columns
| | 04:59 | and you gave a half em space
below them, so what's going on there?
| | 05:02 | Well, remember, margin collapsing only
happens when the margins touch each other, and since
| | 05:07 | these are applying to the images which are
inside the list items, they don't really touch
| | 05:10 | each other, so we don't have margin collapse.
| | 05:13 | So that half em margin is actually giving
us one em total, which is giving us equal
| | 05:17 | spacing between our images and beside each
other as well, so it's a nice little trick.
| | 05:20 | I am going to scroll up to our tablet gallery
styles. The line we are looking for is around
| | 05:25 | line 951 or so, right above our contacts there.
And I am just going paste in my tablet styles.
| | 05:32 | Once again, I am going to scroll up and go
over each one of these. Now you will notice
| | 05:37 | that for the most part, the code is exactly
the same: photos, photo image, photo lis.
| | 05:41 | As a matter of fact, you can copy and paste
it in if you'd like. The only difference that
| | 05:45 | we have going on here is that the column gap
itself is now half em too. Because we are shrinking
| | 05:51 | the size on those tablet screens,
that is going to shrink as well.
| | 05:54 | If I save this, go back in the browser, and
resize so that I trigger my tablet layout--
| | 06:00 | let me refresh the page--and you can see
that now our tablet layout is also using the two-
| | 06:06 | column layout as well.
| | 06:07 | Now I am going to scroll up to my mobile styles,
about lines 608 or so, right here, and paste
| | 06:14 | those in. And you are going to notice
pretty much the same selectors, except for the fact
| | 06:19 | that this time we are not
actually targeting the photo's container.
| | 06:22 | We are setting the images maximum width to
90%, because the container is going to be
| | 06:26 | 100%. So instead of a two-column layout now,
we are just going to have a single-column layout.
| | 06:29 | So we are telling the images to be 90% of their parent,
we are centering them using the auto margin technique,
| | 06:34 | we are having them display as blocks so
that they display on their own line, and we are
| | 06:39 | spacing them using that .8 em bottom margin.
| | 06:42 | For the list items inside of photos, we're
giving them a position of relative and floating
| | 06:45 | them as none, so that remains the same as well.
| | 06:47 | I am going to save that, go into my browser,
shrink that down so that it triggers the
| | 06:52 | mobile layout, and refresh my page.
| | 06:54 | There we go. So now our styles take effect, and you
can see that we are getting a single-column layout.
| | 07:01 | We still have one last thing
to do for all of our layouts.
| | 07:04 | I don't know if you remember, but when we
previewed the finish version of the gallery
| | 07:07 | earlier, we had captions that were showing up.
| | 07:10 | So I want to go ahead
and display those captions.
| | 07:12 | I can do that using CSS rather than
JavaScript. I'd really like to do that.
| | 07:16 | As little dependency on the external
JavaScript as possible is kind of the way
| | 07:21 | I like to do things.
| | 07:22 | So what I am going to do, I am just going to
stick with our mobile styles for the moment.
| | 07:26 | Just below the styles that I just pasted in
here, I am going to add another selector, and
| | 07:33 | this one is using generated content.
| | 07:35 | So it's going to say, hey, gallery, so I am
being really specific here, so I make sure
| | 07:39 | that I'm overriding anything else.
| | 07:41 | I am just adding to the specificity of the rule.
| | 07:43 | I'm saying okay, any link after that link--
so this is going to insert generated content
| | 07:48 | at the end the link. And for the content,
instead of a literal string, I am going to
| | 07:53 | tell it to place in an attribute, and the
attribute I am looking for is the title of the link.
| | 07:58 | If you remember, the title attribute for the links and
the alt tags of the images are the exact same thing.
| | 08:04 | Partly that's for accessibility; partly it's
because now I knew I wanted to use this technique.
| | 08:09 | Now the generated content,
that title that gets placed,
| | 08:11 | I am displaying it as block, so that
it'll stretch to fit the width its container.
| | 08:15 | I wanted its width to be 90%,
which is the same as the image.
| | 08:19 | I'm positioning it using absolute positioning,
giving it a top position of 0 so that it
| | 08:23 | lines up with the top of the image,
and I'm getting a left offset of 5%.
| | 08:27 | Remember, since its width is 90, that left
of 5% is going to line it up directly with
| | 08:33 | the left-hand side of the image.
| | 08:35 | I give it a line-height of 2 ems to control
the height and center the text in the side
| | 08:39 | of it, gave it a color of white, text-align center
so the text will be horizontally centered in it.
| | 08:44 | I give it a dark background, that rgba 25,
25, 25, with 80% alpha, and then I gave it
| | 08:51 | a z-index of 500 so that it's
always going to be on top of the images.
| | 08:54 | Now, if I save this and refresh my page,
you can see the captions now come in.
| | 08:59 | There is our generated content, and they line up
and stretch to fit the same width of the image.
| | 09:04 | There might be a little overlap depending
upon the browser you are looking at, but for
| | 09:07 | the most part, it's going
to fit there pretty nicely.
| | 09:11 | So now I just need to do that for both my
tablet styles and my desktop styles, so I
| | 09:16 | am going to scroll down to our tablet styles,
and we are looking for right around line 991 or so.
| | 09:22 | It's somewhere in that area, depending
upon how you have done this so far. Just make
| | 09:26 | sure I have the right one in.
| | 09:28 | Okay, now the selector is going to be the
same, and for the most part all these are going
| | 09:31 | to be pretty much the same.
| | 09:32 | You will notice that again, we are using the
generated content from the title attribute,
| | 09:37 | The width this time is going to be 100%
because we want to stretch to fit the width of the
| | 09:41 | column. The position is going to be absolute,
which is lining it up with the list item
| | 09:44 | The top and left of 0 are going to align
it up at the top left-hand corner of the list
| | 09:48 | item. line-height is again 2 ems, the color is
white, the text-line is centered, so everything
| | 09:52 | else is pretty much the same for that.
| | 09:54 | If I save this and switch back to my tablet
layout and refresh the page, now you can see
| | 10:00 | the captions are coming in on that.
| | 10:02 | Now, on the desktop, however, I wanted
to do something a little bit different.
| | 10:06 | On the tablet and the mobile screens, they
don't really support hover styling, and I don't
| | 10:12 | want somebody to have to touch the
image in order to see the caption.
| | 10:14 | I am going ahead and
making them show up by default.
| | 10:17 | However, on the desktop, it's pretty common
for people with pointers to just hover over
| | 10:22 | these gallery images. So I am going to go
back into my code, so I am going to scroll
| | 10:26 | down to our desktop styles, which for me is
right around line 1352 or so. I am going to
| | 10:32 | go ahead and paste in my rule.
Now, this one is a little different.
| | 10:35 | You will notice for example, that instead of just the
generated content pseudo selector here after,
| | 10:40 | I am also using hover, so I am
just chaining those together.
| | 10:43 | It's going to be a:hover:after.
| | 10:46 | The rest of the code is exactly the same.
| | 10:48 | The only other change is I am
making is the line-height about 3 ems.
| | 10:51 | That's just to make it a little bit taller
when somebody is hovering over it, so it draws
| | 10:54 | more attention to it.
| | 10:55 | I am going to go ahead and save that, go back
out to the browser, and refresh my page. I'm going to
| | 10:59 | resize it till I come up to the desktop and as I
hover over it, now we can see the captions showing up.
| | 11:06 | Now, we have this really nicely styled image
gallery that resizes, well, really all they
| | 11:12 | way down to mobile. It goes from two
columns to two columns to a single column.
| | 11:15 | There are captions displayed when
we want them to, so that's awesome!
| | 11:19 | It's linking to larger version of the image,
which is going to save on resources. We are
| | 11:22 | not going to download them until we need them,
and it displays the image captions based on
| | 11:26 | the context with where it is viewed.
| | 11:28 | So overall it's really, really successful.
| | 11:29 | Now the only thing missing right now is that
photo swipe functionality, of opening up the
| | 11:33 | larger images on a mobile window and then on
smaller devices, allowing us to swipe through it.
| | 11:38 | So in the next exercise we are going
to start adding that functionality.
| | Collapse this transcript |
| Adding image gallery functionality| 00:00 | All we need to do to finish our gallery
is add the photo swipe functionality to it.
| | 00:05 | Now, while this process is pretty
straightforward and they give you plenty of examples on their
| | 00:10 | site to learn from, there are still a few
things that you are going to need to pay attention
| | 00:14 | to, in terms of integrating it into your own
projects. And sometimes that's the hard part.
| | 00:19 | You'll download this, you'll expand all the assets,
and then it's kind of like okay, now what do I do?
| | 00:24 | It's actually a really easy process.
There are just a couple of things you need to track.
| | 00:27 | You'll notice that I'm not
in any one particular program.
| | 00:29 | I'm just kind of out
here in a new Finder window.
| | 00:32 | So open up Explorer, if you are on a PC,
Finder window if you are in a Mac, and focus on
| | 00:37 | the 04_07 directory.
| | 00:40 | If you open up the assets folder inside of
that, you'll find a download from photo swipe.
| | 00:45 | Now again, this is using
305, in terms of the version.
| | 00:48 | If a new version has been released in
between now and when you watch the video, then if
| | 00:52 | you downloaded it, of course you'll see a
little bit different version and maybe some
| | 00:55 | different organization inside of it,
but for the most part what we're doing here is
| | 00:58 | exactly what you are going to need to do.
| | 01:00 | So if I open this up it can get a little
bewildering, because there's all the stuff going in here,
| | 01:04 | like how much of this do I need?
| | 01:05 | And what do I really need?
| | 01:07 | So there are a couple of things
that we're going to be doing here.
| | 01:09 | First off, I'm going to grab the
code.photoswipe.jquery-3.0.5.js.
| | 01:14 | Now I'm not going to use the minified
version of it, just so that if you ever wanted to
| | 01:18 | in there and look at the
functionality, you could.
| | 01:20 | For deployment, you would want to
use the minified version of that.
| | 01:23 | I'm also going to open up a library
folder right here and select the klass.min.js.
| | 01:30 | Now it's simply a small library that helps
people write and instantiate classes in their
| | 01:36 | own applications, and so photo swipe uses klass.
| | 01:40 | It's one of its dependencies,
so we want to have both of those.
| | 01:44 | So I'm going to go ahead and copy these, and
in my own _scripts folder right here, which
| | 01:49 | is where I like to put
all my scripts in one place,
| | 01:52 | I'm going to go ahead and just
paste those right inside that.
| | 01:56 | I added the klass and the
photoswipe jquery version.
| | 02:00 | Now, if you're wondering why we're using the jQuery
version instead of just regular JavaScript version,
| | 02:05 | the jQuery version works
across broader platforms.
| | 02:08 | The non-jQuery version really targets WebKit and iOS
devices, so I wanted a little bit of a broader base.
| | 02:14 | It also means that we're going to have a
dependency upon jQuery and it will be a little bit larger,
| | 02:19 | but I think the additional functionality
across different platforms will be worth it.
| | 02:23 | I also need to grab the photoswipe.css file,
and I'm going to copy that into the _css directory.
| | 02:31 | So that should have both my main.css and the
photoswipe.css now. And there are few images that I need.
| | 02:37 | I need the loader.gif, which will display if
the gallery is taking a long time to load.
| | 02:43 | I also need to grab the icons, both of
these. The 2x is for retina displays.
| | 02:48 | The regular icons are just for
your everyday nonretina display.
| | 02:52 | These are sprite sheets, so they're using CSS
sprites as well. And I'm going to grab the error.gif.
| | 02:58 | I guess I should say a gif file.
| | 03:01 | So I'm going to grab those, copy them, so
these are all the images. And I'm going to
| | 03:06 | paste them inside of my _images directory.
| | 03:10 | Okay, so that's all I really need from the
photo swipe download in order to integrate
| | 03:16 | it into my project.
| | 03:18 | You'll notice that I am changing the way
that they have organized their files so that it
| | 03:23 | fits with the way that I like to organize them,
and there's nothing wrong with you doing that.
| | 03:27 | If you want to keep it the same way they've got
it, that's okay; you can copy those directories,
| | 03:31 | but just remember that it's probably not
going to fit your organization to a T.
| | 03:36 | All right I'm going to go back into
Dreamweaver now, and I'm focusing on the 04_07 directory,
| | 03:42 | and I'm going to open up
the philadelphia.htm file.
| | 03:45 | Now, this is the file of course that contains
our gallery, and this is the one that we need
| | 03:49 | to integrate photoswipe into.
| | 03:51 | The first thing I want to
do is link to the style sheet.
| | 03:53 | So I'm just going to come up, grab my
existing style sheet link, and paste it.
| | 03:58 | Yes, I am that lazy. And I'm going to type
in photoswipe.css and save that. And as a
| | 04:06 | matter of fact, I'm going to refresh this so that
I get this up here in my related files. Awesome!
| | 04:11 | And now I need to do one more thing in the
CSS. Because we've moved things around, the
| | 04:18 | references to external things
like graphics have changed now.
| | 04:22 | So for example, here I'm going to go through
and I'm going to find any reference to an image.
| | 04:27 | Now thankfully, the CSS here is very, very small.
| | 04:30 | There is loader.gif.
| | 04:32 | I'm going to do ../_images/, and I'm just
going to copy this path and then paste that for
| | 04:41 | each one of these guys.
| | 04:42 | So if we had not done this, when we looked at
the gallery online we wouldn't see our images.
| | 04:46 | So you got to make sure that the path to
the images, regardless of where you place them
| | 04:50 | within the CSS, the path knows how to find them.
| | 04:53 | So I'm just going to keep
looking and finding images.
| | 04:55 | They're aren't that many, but
there's one more left. There is icons.
| | 05:00 | I'm going to paste that in front of that.
And one more towards the bottom. It looks good.
| | 05:06 | You can see how minimal the CSS is here.
And if there is anything going on with the gallery
| | 05:10 | that you don't like, color-wise, or things
like that, it's pretty easy to change.
| | 05:14 | Let me go back to my source code, and I'm
going to scroll down to the bottom of the page.
| | 05:18 | The only thing that we have left to do now
is call the external resources for our photo
| | 05:23 | gallery and then instantiate a new
photoswipe object, and that's easy enough to do.
| | 05:30 | So what I'm going to do is I'm going to copy
the one of the existing script tags here and
| | 05:35 | I'm just going to change some stuff.
| | 05:36 | I'm going to do a little cheating and if
you're not using Dreamweaver, you probably won't
| | 05:40 | be able to do this, but this
is really easy for me to do.
| | 05:43 | It's so easy to mistype some of the stuff, so I'm
just going to copy the name of the file that I need.
| | 05:48 | Actually, in this case, I need klass first.
| | 05:50 | So the klass minified, I'm going to copy that,
and I'm going to replace the jQuery call with that.
| | 05:58 | So that's really all I'm doing here.
| | 05:59 | I'm going to do the same thing underneath that.
| | 06:01 | I'm just going to copy the script tag and
paste it in. And again, I'm going to make
| | 06:06 | sure that I have the title of the code
swipe correct, by pasting it in there.
| | 06:11 | Now, if you downloaded a different version
of that, or if you're using the minified version
| | 06:15 | of it, make sure that the
title of file is correct.
| | 06:18 | So we're going to call klass first, because
photoswipe has some dependencies on it, and
| | 06:22 | then photoswipe after that. And jQuery I'm
calling before either of those because this
| | 06:28 | version of photoswipe does depend on jQuery.
| | 06:30 | All right, I'm going to go ahead and save
that, and I can collapse this panel down now.
| | 06:34 | The last thing I have to do here is
instantiate a new photoswipe gallery, and just to remind
| | 06:38 | you of kind of the structure that we're using
here, remember that we have this unordered list.
| | 06:43 | It has an id of photoGallery. And then each
one of the links inside of that is targeting
| | 06:48 | the larger photo and has the
title that can be used as a caption.
| | 06:53 | So that's the only structure that we really
needed to have based on the photoswipe; that's
| | 06:59 | what it's looking for is those links.
| | 07:01 | Now I already have a document ready function,
and inside that I'm using the lettering method
| | 07:06 | on one of our titles up there, and that's
allowing me to create that really cool
| | 07:10 | typographic effect that you see up top.
| | 07:12 | So I'm just going to go ahead and use that and
instantiate our photoswipe gallery from there.
| | 07:17 | So to do this, I just
need to establish a new one,
| | 07:20 | so I'm going to do var myPhotoSwipe, and
that could be any name you want it to be.
| | 07:26 | I think myPhotoSwipe is just fairly descriptive.
| | 07:28 | I'm going to say equals, and now we have to
tell it which element on the page to target
| | 07:33 | to build the gallery out of. And I'm going
to say go inside photoGallery and find the
| | 07:38 | links inside of that, so
that's what I'm targeting.
| | 07:41 | I'm saying, go find the element up there that
has an id of photoGallery and target the links
| | 07:45 | inside of that and then we just use
the photoswipe method, photoSwipe.
| | 07:51 | What's interesting about the photoswipe
method is there are a lot of parameters that we can
| | 07:54 | pass into that constructor function.
We can do things like mouse-wheel scrolling and
| | 07:59 | whether we want the keyboard enabled or not,
whether we want the images to go full screen,
| | 08:04 | whether we want the photo
slideshow to play automatically.
| | 08:06 | There's so much stuff we
can do. It's really cool!
| | 08:08 | But we're just going to do the default, okay.
And to do that, we just go ahead and leave
| | 08:12 | the array of parameters empty and
then type in a semicolon, and that's it.
| | 08:16 | So if I save this now and then preview this
in my browser, and if I scroll down and grab
| | 08:22 | one of the images and I click, there is
our photo gallery, working just wonderfully.
| | 08:28 | If I resize it, it scales right along with it.
| | 08:31 | It's very responsive, and if I were on touch
screen devices, the touch would be enabled as well.
| | 08:36 | So I really love that
photoswipe gallery. That's very nice.
| | 08:40 | The other thing that I want to point out
about it, before we move on, is how little of the
| | 08:45 | gallery is actually being controlled by the
photo swipe JavaScript. Really, the images
| | 08:50 | on the page, how they're styled, how they
react to the layout, how we display the captions,
| | 08:55 | that's all up to us.
| | 08:56 | We did all that using just HTML and CSS, and
then the photoswipe gallery just adds that
| | 09:00 | nice bit of functionality on top of
that, which I really, really love about it.
| | 09:04 | Just remember that anytime that you are
integrating an outside library or asset like photoswipe
| | 09:09 | into your projects, you really have to be
mindful of how the asset package is put together
| | 09:14 | and what all of those dependencies are,
what it really needs in order to function.
| | 09:18 | So make sure you spend a good bit of time
deconstructing how something like this works,
| | 09:23 | so that you'll know what to modify to make
it fit into your site's organization and what
| | 09:28 | your capabilities are, in terms of
modifying it the way that you see fit.
| | Collapse this transcript |
|
|
5. Enhancing Sites for MobileHTML5 form inputs| 00:00 | In this chapter we are going to take a look
at a couple of the ways that you can enhance
| | 00:03 | your site's experience for mobile users.
| | 00:06 | Most web designers are quite comfortably
designing for desktop devices, so much so that we probably
| | 00:11 | simply take for granted the
context that we are designing for.
| | 00:16 | Because of that, a fair part of learning
responsive design is also learning how to enhance the
| | 00:21 | user experience on devices like smartphones
and tablets. The good news is that most of
| | 00:26 | the things that you can do don't really
require a lot of extra work, and many are the result
| | 00:30 | of simple using the latest web standards.
| | 00:33 | Take forms for example. By simply using some
of the newer input types and attributes found
| | 00:38 | in HTML5, we can improve our
site's performance on mobile devices.
| | 00:42 | Let me show you what I mean.
| | 00:44 | I have the contact.htm file
open in the 05_01 directory.
| | 00:49 | Now, before I start working on this, I am
going to preview this on a mobile device.
| | 00:54 | In previewing this page on a mobile device,
let's say I scroll down to where the forms are.
| | 00:59 | So, if I click inside the form element, of
course the keyboard comes up and allows me
| | 01:03 | to type in name, email, things like that.
| | 01:06 | Well, notice when I hit Next and go to email,
nothing really happens with the keyboard.
| | 01:10 | It doesn't change, because there is no contextual
awareness about what is that I am really looking at.
| | 01:15 | The reason for this is because there's
nothing really happening here, in terms of some of
| | 01:19 | the newer HTML5 form attributes that smartphones just
sort of inherently understand and know how to react to.
| | 01:27 | So, let's take a look at
how we do that. All right!
| | 01:29 | So I am going to go into my form here, my
contact form. The first thing I want to do
| | 01:33 | is find the email form element.
It's an input. Right now it's type=text.
| | 01:38 | What I am going to do is I am going to change that
type from text to the new HTML5 type of the email.
| | 01:43 | The next thing I am going to do is I am going
to put up some placeholder text inside that.
| | 01:46 | So, I am going to use the placeholder attribute,
and I am going to say "valid email." Placeholder
| | 01:55 | attributes aren't just for emails.
| | 01:55 | I am just going to do placeholder, and I am
going to type in "your full name."
| | 02:01 | That way they give us their whole
name and not just their first name.
| | 02:04 | You know there are also things that we can
do like required. It's a Boolean attribute
| | 02:09 | and basically, what this does is
it triggers native form validation.
| | 02:14 | I'll be honest with you.
| | 02:15 | I haven't really seen a really good
implementation of it yet, and most people are still handling
| | 02:20 | form validation through
server-side or client-side scripts.
| | 02:23 | So, I'm just showing that.
| | 02:25 | The next thing I want to do is "website."
Instead of the type being "text" that's going to be
| | 02:30 | "url." So we have a lot of different new
input types that we can use. I'm also going to
| | 02:34 | put some placeholder text here,
and I'll just say "website."
| | 02:40 | There's another form element that I want to
change as well, and it's not actually in this form.
| | 02:44 | I am going to scroll down to the bottom of the page,
and I can see that I have a search field down there.
| | 02:50 | Again, instead of "text," this time I am
going to change it to "search," and I'm also going
| | 02:56 | to put some placeholder data in there as well.
| | 02:58 | So, let's do placeholder, and inside that I
am just going to type in Search, or you can
| | 03:03 | type in "what you are looking for?" or
"what can help you find?" that sort of thing.
| | 03:08 | So I am going to go ahead and save that,
and I'm going to preview this again in my phone.
| | 03:12 | So now, if I go scroll down to my form, you
can see that right there, we have the placeholder
| | 03:18 | information that we placed in.
| | 03:19 | So, right off the bat, we're being a little
bit nicer to our users, but watch happens
| | 03:23 | when I click inside these now.
| | 03:24 | When I click inside the first one, Name, it's
still text, so we don't really see any difference.
| | 03:28 | But when I hit Next, check out the keyboard.
The keyboard changed and it gave me the @ symbol,
| | 03:32 | because it realizes that this is an email
address, and that's probably a character that
| | 03:36 | you are going to use a good bit.
| | 03:38 | Same thing for my URL.
| | 03:39 | If I click in that, the keyboard changes again.
I get the forward slash with the dot and the
| | 03:43 | .com, which is really nice.
| | 03:45 | Now, if I hit Done and I go all the way down
to my Search, notice that by changing it to
| | 03:50 | Search input, when I click inside that, the
keyboard changes as well, and we have a nice
| | 03:55 | little search button down there in the lower
right-hand corner when we are going to look
| | 03:58 | for something. That is a
much better user experience.
| | 04:02 | And although it is a better experience,
it's really only scratching the surface in terms
| | 04:06 | of some of the new HTML5 form elements.
| | 04:09 | There are things like date pickers, slider,
and numeric steppers that are really gaining
| | 04:14 | support from devices like
smartphones and tablets.
| | 04:18 | It's also worth noting that in many ways, mobile
devices are actually early adopters of these new standards,
| | 04:23 | so, be sure to check support before using
them so that you can provide fallback to
| | 04:27 | nonsupporting devices and browsers.
| | Collapse this transcript |
| Adding phone functionality| 00:00 | Often we focus so much on the amazing
browsing capabilities of smartphones that we forget
| | 00:06 | that at their core, they're phones.
| | 00:09 | As such, we can enhance contact information
by easily formatting phone numbers to trigger
| | 00:12 | calls when selected.
| | 00:14 | So I'm going to be working in the contact
file again, this time from the 05_02 directory.
| | 00:20 | And the first thing I'm going to do is find the
phone number for our website. Here it is, line 37 or so.
| | 00:29 | And what I'm going to do here is I'm just going
to wrap the existing phone number in an anchor tag.
| | 00:35 | I'm going to do an href here. Now the href
for this is actually going to have the telephone
| | 00:40 | scheme in it, so it's tel and then a
colon and then the phone number you want.
| | 00:46 | Now you could do like a +1 for the United
States, or if you knew the country you were in,
| | 00:50 | you could add that as well. A lot of
people really recommend doing that.
| | 00:53 | I, on the other hand, I'm just going to put
the number in 888555, because it's not a real
| | 00:58 | number, and then 1234.
| | 01:00 | It's not a bad idea for accessibility to
give it a title I'm going to be a bit of smart
| | 01:05 | alec and go ring, ring, ring, since it is a phone.
| | 01:09 | And then for class, I'm going to give it a phone.
The only reason I'm doing that is for styling.
| | 01:14 | So again, we're taking our phone
number and we're wrapping it in an anchor tag.
| | 01:17 | We're using the tel schema to
format it as a telephone number.
| | 01:21 | I don't need any dashes, although
you can certainly put them in there.
| | 01:24 | And you could put the
international code before it, as I mentioned.
| | 01:26 | We're giving it a title, for accessibility's sake,
and then I'm giving it a class for styling sake.
| | 01:31 | Now in terms of styling let's
talk about that for a moment.
| | 01:34 | This is a link which means that if somebody
hovers over this in the browser, they're going
| | 01:38 | to see a link that they can click.
| | 01:40 | Now there are ways to trigger things like
Skype calls using a protocol called call to.
| | 01:45 | But this is just a telephone number, so I
really don't want people in the browser to
| | 01:49 | know that they could click on it.
| | 01:51 | On the other hand however, inside a phone,
now I want it to be really obvious that yes,
| | 01:56 | this is my telephone number and
yes, I'm clickable, please click me.
| | 02:01 | So we're going to go into
our styles and work on that.
| | 02:04 | So I'm going to switch over to main.css.
You can find that in the _css directory.
| | 02:09 | And I'm going to scroll down into
my global styles, about line 128.
| | 02:14 | So right above the HTML tag,
I'm going to add a couple of selectors here.
| | 02:19 | So I'm just going to do a.phone so I'm targeting
any anchor tag with a class of phone applied it.
| | 02:26 | I'm just going to say
border:none, color:inherit.
| | 02:33 | So what that's going to do for me is it's
going to strip out any default border styling
| | 02:37 | that I've placed on my links,
| | 02:39 | and it's going to assign the color to
whatever the parent element's color is and get rid
| | 02:42 | of any of that default link styling.
| | 02:45 | The next thing I'm going to do is I'm
going to style a hover for that one as well, so
| | 02:49 | a.phone hover. And inside that, I'm going to
do a border of none. That might look familiar.
| | 02:57 | I'm going to do a color of inherent.
| | 03:00 | And I'm going to take the cursor and change
that to the default cursor instead of the pointer.
| | 03:05 | So essentially, what I'm doing is I'm making the
hover look exactly the same as the nonhover.
| | 03:11 | What that's going to do it's just going to
have the effect of kind of hiding the fact
| | 03:14 | that this is a link.
| | 03:15 | So as a matter of fact, if I save
this and preview this in my browser,
| | 03:20 | you can see that as I hover over this, there's
really no indicator that it's a link. So far so good.
| | 03:27 | The next thing I need to do is
style it for the phone itself.
| | 03:30 | I'm going to scroll down in my mobile styles,
somewhere around the 400s. There they are.
| | 03:37 | And I'm going to find the styles
that are covering my form's page.
| | 03:43 | And so I'm looking of those contact styles.
There they are. They're right above the connect styles
| | 03:47 | where I want to start, and for this one I'm
going to save you and me a lot of typing and any typos.
| | 03:54 | What I want you to do is go check out
the _assets folder in the 05_02 directory.
| | 04:01 | You're going to find the phone.txt file.
| | 04:03 | And in there, you're going to find this selector.
| | 04:06 | So if you remember from earlier when I was
talking data URIs, I want a icon for my phone,
| | 04:12 | but again, I really don't want to
make another image request to do that.
| | 04:14 | So this is a perfect example of
when a data URI is appropriate.
| | 04:19 | And again, we're just reducing the amount of
HTTP requests, which, over a phone connection,
| | 04:23 | is a really big deal.
| | 04:24 | So I'm going to highlight all that and copy it,
and then right there, about line 635 or so,
| | 04:30 | I'm just going to can paste it in.
| | 04:31 | So what are we doing? We're adding a little
bit of padding all the way around this; we're
| | 04:35 | giving it a background image, which is going
to be that phone icon; we're putting a solid
| | 04:39 | border all way around it; we're giving it
some margins top and bottom; we're giving
| | 04:44 | it a width of 200 pixels so we're making it big
enough for people to see; and we're displaying
| | 04:47 | it as a block-level element
so that occupies its own space.
| | 04:51 | The last thing I'm going to do is apply a
little bit of a hover styling to this.
| | 04:55 | Now, I know most phones don't have hovers, but
there are phones out there like the BlackBerry
| | 05:00 | that allow you do a pointer, and
touch events will trigger hovers as well.
| | 05:04 | So for this one I'm just going to do a
border of 1 pixel solid, and the color for this one
| | 05:09 | is going to RGB 123, 121, 143,
so that sort of bluish color.
| | 05:17 | So I'm going to save this. Instead of previewing
that in my browser I need to preview that on my phone.
| | 05:24 | If I scroll down a little bit, I can see the
phone number, and now it's a lot more prominent
| | 05:30 | than it was on the desktop version of this.
| | 05:32 | We've got the border all the way around it,
we've got the nice phone icon that we've placed
| | 05:35 | in there, the number is nice and bold, and
if I click it, notice that my phone is like,
| | 05:40 | do you really want to call it a
number, because it's not a real number.
| | 05:42 | As a matter of fact, if click and hold
this down, notice that it says, hey do you want
| | 05:46 | to add that to your contacts?
| | 05:47 | There's all sorts of really cool things
that phones know what to do with phone numbers,
| | 05:51 | so take advantage of that.
| | 05:54 | Also, be sure to explore some of the other
link formats that you can use as well, such
| | 05:58 | as the SMS format that
allows you to send text messages.
| | 06:02 | And there are link formats out there that
can launch services like the app stores.
| | 06:07 | Giving your users a convenient way to
take advantage of the capabilities of their
| | 06:11 | device is a simple but powerful way
to improve their overall experience.
| | Collapse this transcript |
| Adding home screen icons| 00:00 | If you've designed a website or two,
you've probably created a favorite icon--
| | 00:04 | you know, that tiny, little icon that displays in
the address bar when somebody visits your site.
| | 00:08 | Well, for mobile devices we can actually go
one better and create icons that will display
| | 00:13 | on the phone's homepage or home screen
and allow people to launch your site the same
| | 00:18 | way that they launch apps.
| | 00:20 | So to do that, I'm actually--first here in
Photoshop--just to kind of show you what you need to
| | 00:25 | create to cover all of your bases here,
| | 00:28 | I've got four pngs that I've created. Very simple
logos with the desolve logo on it on a gray background.
| | 00:35 | The first one is named apple-touch-icon-
precomposed.png, and this is a 57x57 pixel icon.
| | 00:45 | I have the apple-touch-icon-72x72.png.
| | 00:47 | You see this is just a larger version, 72x72.
| | 00:52 | I've the apple-touch-icon-114x114.png.
| | 00:57 | And of course I have the 144x144.
| | 01:01 | And these are going to be
used on different displays,
| | 01:03 | so the older iPhones are going to use the
smaller icons; the larger iPads with the retina
| | 01:08 | displays are going to use the bigger ones and
then sort of scaling down for the retina displays.
| | 01:12 | And also, the Android devices, one of the
nice things about the Android devices is rather
| | 01:17 | than having their own standard, they just go
ahead and accept the Apple ones as well.
| | 01:22 | So there is a couple that you want
to make sure you have in there.
| | 01:25 | Now I'm going to show how to do the code for this,
so I'm going to switch back to my code editor.
| | 01:30 | And we're going to be working on the
index.htm file from the 05_03 directory.
| | 01:37 | What I'm going to do is, just after meta
viewport tag, I'm going to create an empty line.
| | 01:42 | And although I'm going to paste a code in here,
I'm going to go in one line at a time just
| | 01:45 | so, you don't have to see
me typing all of this in.
| | 01:49 | So the first line should seem familiar to
anybody that's worked on websites for a while,
| | 01:53 | but this is a link that's going out to favicon.
| | 01:57 | That's a little icon file that's going to
appear up in the address bar of the browser,
| | 02:00 | so nothing new there.
| | 02:02 | So let's start right here,
on the next line below that.
| | 02:06 | So we've got a comment.
| | 02:08 | I actually put these comments in all of mine, just so
I remind myself what size this is and what it's for.
| | 02:14 | The first one, the 57x57 PNG file,
that's for older iPhone and Android devices.
| | 02:19 | Notice that I'm using the apple-touch-icon-
precomposed relationship, so the rel attribute will be
| | 02:26 | apple-touch-icon-precomposed.
It has to have the dashes in it.
| | 02:29 | It has to be spelled this way.
| | 02:31 | Now, you don't have to do precomposed.
| | 02:33 | If you don't do precomposed, what the
iPhone will do is it'll put the glossy finish on it.
| | 02:39 | You'll notice for the rest of them I don't use
precomposed, so why do I use it for the first one?
| | 02:43 | Well, older Android devices only used precomposed,
so that's why that first one has to be precomposed
| | 02:49 | from me, whether I want it to be or not.
And then for the href you're going to point to where it goes.
| | 02:55 | Now, I'm showing you this as a local
testing thing. For your own deployment, one of the
| | 03:02 | things that I've found, almost 90% of the time,
you're going to want the entire path to this.
| | 03:08 | You're going to what
that to be an absolute link.
| | 03:10 | So you would probably want to just put in,
you know, http://www.desolve.org/. So you would
| | 03:17 | want to put in the entire
path to that for your website.
| | 03:21 | Right now I'm just showing you're a relative
link pointing to the image, but when you deploy
| | 03:25 | that to your site, my advice to you is
to go ahead and put in the entire path.
| | 03:31 | The second icon is the 72 x 72, and I'm doing
them in order for a reason. The phone is going
| | 03:36 | to browse to them and find the one that it
wants or the tablet is going to find the one
| | 03:40 | that it wants and it's going to apply them.
| | 03:42 | But I want to put them in this order so
that the largest newest ones are the last ones
| | 03:46 | that they run into.
| | 03:48 | The next one is for the iPad 1 and 2,
older-generation iPads, and also the iPad mini,
| | 03:54 | which is the non retina screen.
| | 03:55 | That's going to use the 72x72. Notice that
I'm doing the apple-touch-icon, so you're
| | 04:01 | doing apple-touch-icon-precomposed or
apple-touch-icon for the rel attribute.
| | 04:05 | However, for the href you need the
size of this in the title of the PNG file.
| | 04:13 | The next one is for the iPhone 4 the
4s, the 5, and the iPod touch as well.
| | 04:18 | Those are the first-generation retina screens,
| | 04:21 | and they're going to use the 114x114.
Again, notice no difference in the rel attribute,
| | 04:27 | but the name of the file is markedly different
using the size. And then finally, for the third
| | 04:31 | generation iPad, you're going to use the 144x144.
| | 04:36 | So if I save this and I
deploy this out to my server,
| | 04:39 | now I'm going to show you an
example of this on the phone.
| | 04:43 | So if a user is browsing
your site and they are like, wow,
| | 04:45 | this site is so awesome I wish I
could come back to it all the time,
| | 04:49 | all they have to do is click on the phone--and
different phones have their ways of doing this.
| | 04:53 | Right here I've an option that says, Add to Home
Screen. You'll notice its already picking on that icon.
| | 04:57 | And because I'm not using the precomposed, its
putting the nice little apple gloss thing to it.
| | 05:02 | Notice also that I didn't have to the
rounded coroners. The device is doing that for me.
| | 05:05 | So I'm just going to go ahead and click on that.
| | 05:07 | It uses the title of your page by the way.
But I'll just say desolve. And as soon as I hit
| | 05:14 | Add, you can see right there on my home screen,
| | 05:16 | there is the desolve icon, and if click on
that, it opens up right up again. Awesome!
| | 05:23 | Now, while this technique does require you
to put a fair amount of this proprietary code
| | 05:28 | that you're seeing here on your page,
| | 05:29 | it does allow you to have more visual
control over how your site is represented on mobile
| | 05:34 | devices if your users decide to
create a shortcut to your site.
| | Collapse this transcript |
|
|
6. Managing ResourcesModernizr and Respond.js overview| 00:00 | It would be lovely if we can handle everything
necessary for responsive sites with just HTML and CSS.
| | 00:06 | But, you know, in reality the incredible
diversity of all those browsers, devices, and screen
| | 00:12 | size, and their capabilities means that often
we have to turn to JavaScript to help us create
| | 00:17 | consistent experiences across multiple
devices, and there's nothing wrong with that.
| | 00:22 | But in this movie I want to give you a
quick overview of two JavaScript libraries that
| | 00:26 | are absolutely, in my opinion, crucial pieces
of many responsive sites, and that would be
| | 00:31 | Modernizr and Respond.JS.
| | 00:34 | So, let's take a look at Modernizr first.
| | 00:36 | Modernizr, as you can see, they say
front end development done right.
| | 00:39 | So, why use Modernizr? What is Modernizr?
| | 00:42 | Well, it is a JavaScript library that helps
detect a lot of different features, almost
| | 00:47 | of all the new features of HTML and CSS3.
| | 00:50 | So, what it will do is it will check your
user agent and say, okay, do you support the
| | 00:54 | following features?
| | 00:56 | And if it does support the following
features, you can do a lot of cool stuff with it.
| | 00:59 | I am going to scroll down just for a minute
here. And you can see right down here where
| | 01:02 | it talks about how it works, as it's loading,
it's going to check for all these different
| | 01:07 | features and if it finds them, it's going too
appended to the HTML element a class for that.
| | 01:12 | So, let's say if it supports border radius, it
will put up a class of border radius on there.
| | 01:16 | That's means when you are writing
your CSS, it's really, really simple.
| | 01:19 | If border radius is supported, you can just use the
border radius class and everything will just work.
| | 01:24 | If the border radius isn't supported, then
those classes won't be applied. And that's
| | 01:28 | really kind of how it started out, but it
has grown into much, much more than that.
| | 01:33 | So if I go to the full documentation, there
is lot of information about what is and all
| | 01:37 | the features that can be detected.
| | 01:39 | I just want to browse
through those really quickly.
| | 01:42 | So, here are some of features that are
detected by Modernizr. Notice you can see @font-face,
| | 01:47 | background-size, border_size, image, flexbox,
the hsla color values, Multiple Backgrounds,
| | 01:53 | textshadows, CSS Animations.
| | 01:55 | I mean there are really--Transforms, Transitions--
and when you start getting into HTML features,
| | 02:00 | you are talking about some of the new APIs,
like Canvas, Drag and Drop, whether that's
| | 02:04 | supported or not, HTML5 Audio.
| | 02:06 | So, it allows you to create fallbacks for
these things when they are not supported,
| | 02:10 | Also HTML5 Video, the Web Workers, Geolocation API,
SVG, Touch Events, which is huge for responsive sites.
| | 02:18 | So, you can use Modernizr to detect whether
touch events are found, and if so, you can
| | 02:23 | do whatever you want to do with them, or if
they are not, then you can create fallback
| | 02:27 | events for them, or you can just know that
you're not on a touch device and you can
| | 02:30 | handle something a little bit differently.
| | 02:32 | We actually did that a little earlier without
using Modernizr. Modernizr would have made
| | 02:35 | that much, much easier.
| | 02:38 | Modernizr is also extensible, meaning you
can go ahead and put your own tests in it,
| | 02:42 | so you can detect for things that aren't even in
the library right now, which is really, really neat.
| | 02:46 | But perhaps one of the biggest reasons to
use Modernizr, and one of my favorite things
| | 02:50 | about it--I am just going to scroll back--is
the fact that it also includes what's known
| | 02:54 | as the YepNope.js library for loading.
| | 02:57 | So, essentially it has a script loader built
into it, and what's really special about the
| | 03:01 | YepNope script loader--we are going to
actually work with this in just a little bit--is it
| | 03:05 | allows you to test for certain features
and then load resources based on that.
| | 03:10 | So, we can conditionally load resources, and we
can also asynchronously load those resources,
| | 03:16 | which is just a nice fancy way for saying
we are going to load them all at the same
| | 03:19 | time. And that speeds up your page loading,
and it prevents that sort of rendering blockage
| | 03:24 | that a lot of sites do when they're
loading in all their external resources.
| | 03:28 | Modernizr is just chalk-full of goodness,
and what's even cooler about it is that when
| | 03:33 | you downloaded it you can download a
development version of it, which you can kind of go in
| | 03:37 | there and tinker around with it and do what
you want. Or if there's a production one,
| | 03:41 | click Production--and I am
just going to show you this.
| | 03:44 | You can go in and do your own custom download.
| | 03:46 | If you don't need everything, then you don't
have to have everything, which means you can
| | 03:50 | make Modernizr just as small as you want it.
| | 03:52 | So, you can add in these extras.
| | 03:55 | If you are not going to use the
loader, you can take the loader out.
| | 03:57 | You can test for the Geolocation API, or if you know
you are not going to use it, you can leave it out.
| | 04:01 | So, you can toggle all these things on and
off and generate your own custom download
| | 04:06 | of it, which is really, really nice.
| | 04:09 | Now, the next library I wanted to show you
was Scott Jehl's respond.js. And you've probably
| | 04:14 | heard me mention him before if you've watched
some of my titles. Scott is with the Filament
| | 04:18 | Group, and they just do some amazing stuff.
| | 04:22 | They just make the web a better place.
| | 04:24 | And what respond.js does is it takes a look
at older versions of Internet Explorer that
| | 04:29 | does not support media queries, and
it makes it support media queries.
| | 04:32 | So, by combining Modernizr with Respond.JS,
we can test for media queries, whether they
| | 04:38 | exist or not, and then we can load this up
as a poly fill, if they don't exist, which
| | 04:42 | is really, really nice.
| | 04:43 | Now Respond used to be built into Modernizr,
so if you've heard somebody say, well, respond
| | 04:47 | is part of Modernizr,
| | 04:48 | it used to be, but it's not anymore.
| | 04:50 | So, if we want to use it, we
still have to use them separately.
| | 04:52 | So, for this project I went ahead and
downloaded both of these and they're in our exercise files.
| | 04:57 | If you want to experiment with downloading them,
you can, or if you are watching this video
| | 05:01 | a good bit later than I have done it here,
and Moderizr puts that updates quit frequently.
| | 05:05 | So, chances are there's going to be a different
version of Moderizr out by the time you watch this.
| | 05:09 | If you want to download your own
copy of it, you can certainly do that.
| | 05:13 | Honestly, very rarely anymore do I build any
site that doesn't use Moderizr and Respond.
| | 05:18 | I use them all the time.
| | 05:19 | Now Respond helps me ensure that older
versions of Internet Explore are going to support the
| | 05:23 | media queries that I am doing, and then
Modernizr gives me a complete set of tools for building
| | 05:28 | a modern responsive site, so I
recommend both of them highly.
| | Collapse this transcript |
| Loading resources with Modernizr| 00:00 | While Modernizr is fantastic for detecting
capabilities and then allowing you to create
| | 00:05 | fallback experiences,
| | 00:06 | it also really excels as a resource loader.
| | 00:09 | Modernizr comes with the yepnope.js loader
built right in, so you have an amazing amount
| | 00:15 | of control over how external resources load,
what happens after they load, and then providing
| | 00:19 | fallbacks for what happens
when content doesn't load.
| | 00:23 | Best of all, Modernizr can load resources
asynchronously, which can dramatically speed up page loads.
| | 00:28 | Okay, so for this exercise,
we're going to be doing a lot here, guys.
| | 00:31 | Go in the 06_02 directory, and you want to open
up index.htm, contact.htm, and philadelphia.htm.
| | 00:38 | Go ahead and open all those up.
| | 00:40 | Right now, they have been stripped of
all their resources, which is terrible.
| | 00:43 | So all that stuff that we were doing before,
where we down towards the footer and loading
| | 00:47 | up all these external scripts,
we have done away with all of that.
| | 00:50 | Now what that means is,
right now nothing is working.
| | 00:53 | Our gallery is not working; our dropdown
menus are not working; our archive galleries menu
| | 00:59 | isn't being converted over to a select menu.
| | 01:01 | All that stuff that we've worked so hard on
up to this point in our course no longer work.
| | 01:05 | Okay, now the reason for that is because
we really want to do this in an efficient way,
| | 01:10 | and we want to have a lot of control over
when and how resources load, and that's what
| | 01:13 | Modernizr is going to help us do.
| | 01:15 | So what I am going to do is I am going to
start on the index page, and I am just going
| | 01:17 | to create a line here between
the footer and the body, okay.
| | 01:22 | So I'm going to create a script tag.
| | 01:23 | First, I am going to load
up my Modernizr file.
| | 01:26 | Now in this exercise, in _scripts directory,
we've added the customized build I did for
| | 01:32 | modernizr and respond.js.
| | 01:34 | Now, I have changed the title or the name of
the Modernizr download, so if you download
| | 01:39 | your own and you want to change the name to
make it a little bit easier to type in, you
| | 01:43 | can certainly do that.
| | 01:44 | So, the source for this is
going to be _scripts/modernizr.
| | 01:50 | It takes a while for you to learn how to spell
Modernizr--it's just the way they did it--.custom.js.
| | 01:56 | And I probably should
have copied and paste that.
| | 01:58 | I know that's going to come
back and bite me later on.
| | 02:00 | I'll close the script tag.
| | 02:01 | So, that is one thing that we have to do. We do
have to load up the Modernizr library obviously
| | 02:05 | before we can start using the
resource loader built into it.
| | 02:09 | But after that, now we can do
everything using the yepnope loader. All right!
| | 02:13 | So I am going to do another opening script tag and
then close it, and I am going to scroll down a little bit.
| | 02:18 | And then I am going to give myself some space.
| | 02:19 | If you guys have never used a loader script
before, the syntax may be a little odd here.
| | 02:23 | So just bear with me, and I am
going to walk you through it.
| | 02:25 | I am going to type in a comment here.
| | 02:27 | This is actually going to help me explain what's
going on or what the Modernizr script is doing.
| | 02:31 | I am going to say use the Modernizr
loader to load up external scripts.
| | 02:44 | This will load the scripts
asynchronously, but the order listed matters.
| | 02:54 | All right, so what this means is, we're going
to pass an array of scripts that we want to load.
| | 02:58 | It's going to load them all in parallel,
okay, so they are going to load at the same time.
| | 03:02 | It's not going to wait for one to
finish load and then load the other one.
| | 03:05 | So, that is good because that's quick, but
it's also dangerous because that means that
| | 03:09 | you could have one library that's
dependent on another one and the dependent library, if
| | 03:14 | it finishes after the other one and
then that one calls it and it's not there.
| | 03:17 | So, this is why the order that it loads in matters.
| | 03:20 | Although it will load all scripts in parallel,
it will execute them in the order listed.
| | 03:35 | So that's what's important about the order.
| | 03:37 | It's going to load them up in parallel, but it
won't start executing them until they all
| | 03:40 | load, and it's going to load them in the
order that we list them into the array.
| | 03:44 | Let's get into loading this up. So I am just
going to type in the Modernizr.load, and then
| | 03:51 | what I am going to do is I am going to
open a parenthesis and then I am going to do a
| | 03:55 | square brace, or bracket.
| | 03:57 | I don't know, whatever it's called.
And then down towards the end, again I am a big fan
| | 04:01 | of closing the stuff before
I start doing something else.
| | 04:05 | I am going to close that, type in a semicolon.
| | 04:07 | All right, so there is
our Modernizr loader object.
| | 04:10 | One of the nice things about this loader
object is we can pass in several different loading
| | 04:14 | requests, and we do that by
using these curly braces.
| | 04:17 | So I am going to open up a curly brace,
and then I'm going to come down here and close
| | 04:22 | a curly brace, just like that.
| | 04:24 | Now there are multiple
ways to use loader syntax.
| | 04:27 | One is you can do them all individually.
You can just do a load, call, and then point to
| | 04:31 | the resource you want and then type in a comma,
and you can just do this comma-separated list.
| | 04:36 | I actually like using this
method of passing in an array.
| | 04:40 | To me it seems like it's a
little bit more efficient.
| | 04:42 | You can do it all on a single line, but I
am going to do it on multiple lines, just so
| | 04:46 | it's a little easier for us to read.
| | 04:47 | So I am going to type in load and then a colon,
and then I am going to open up a square bracket
| | 04:54 | and then close the square bracket.
| | 04:56 | Let me tab and indent this so I
could read this a little bit better.
| | 05:00 | Now each of these can go on their own line, and
I just have to pass in who I want to load up.
| | 05:04 | And first one is going to be http://ajax.
googleapis.com/ajax/lib/jquery/1.9.0/jquery.min.js.
| | 05:32 | And yes, I probably should have copied and
pasted that from somewhere. And also remember,
| | 05:37 | in deployment, if I am not testing this
locally, I would leave off the protocol.
| | 05:42 | Now, we separate these with a comma,
so this is a comma-separated list.
| | 05:45 | I am going to go down to the next line and
I am going to load in my desolve scripts.
| | 05:49 | So I am just going to point to my scripts
folder /deslove.js, then another single quotation
| | 05:56 | mark there as well.
| | 05:57 | So you can string as many
of these in as you want.
| | 06:00 | I really only need these two right now.
| | 06:02 | So I'm going to save this,
test this in my browser.
| | 06:10 | Now, my menus are working, but this version of
the menu doesn't use JavaScript anyway, but
| | 06:14 | I am going to resize my page, and when I do
that, I can see I'm getting my dropdown menu.
| | 06:21 | My dropdown menu here is looking good.
| | 06:23 | I am not looking at the default.
And my dropdown here is working good.
| | 06:27 | So all of my JavaScript
libraries are loading again.
| | 06:30 | They are loading in the way that I want
them to, and they are loading in right currently
| | 06:34 | asynchronously, okay.
| | 06:35 | I'm going to highlight this, copy it, and
then paste it in each of these pages, just below
| | 06:43 | the footer, but before the closing body tag.
| | 06:46 | I'm going to save the contact, and then I
am going to do this on the Philadelphia one.
| | 06:50 | Now, here is one of the
beauties of using this loader this way.
| | 06:55 | Because Philadelphia has the photo gallery,
it needs more resources than the other ones do.
| | 07:00 | Well, that's okay. I can just put as many
resources into this loader object as I need to.
| | 07:06 | so what I am going to do is I am just going to
create a couple of blank lines here above the desolve.js.
| | 07:11 | Remember, I am doing them in the order that
I want them to execute. So, this one is going
| | 07:14 | to be _scripts/klass.min.js.
| | 07:20 | Now, don't forget the comma between these guys.
| | 07:25 | Then the next one is going to be _scripts/code.photoswipe.
jquery-3.0.5.js. And yes, it would have been better had I copied and
| | 07:43 | pasted it. And then don't forget your comma.
| | 07:45 | All right, so in addition to what we were
loading up in our other pages, now I am also
| | 07:50 | loading up my klass library and my
photoswipe library, and I'm listing them in the order
| | 07:55 | that I want them to execute.
| | 07:57 | They will all load in parallel, but I want to
list them in the order that I want them to execute.
| | 08:01 | Okay, that's great, but how do we
instantiate our photoswipe library? How do we do that?
| | 08:05 | How do we make that call?
| | 08:06 | Well, I don't have to write
separate functions anymore.
| | 08:09 | I can just call right
directly from the loader object.
| | 08:12 | So as soon as this is done loading,
you can call anything that you want.
| | 08:15 | So right after my loader object, right
after that square little closing brace there, I
| | 08:20 | am going to add a comma. Then I am going to
go down on the next line, and now I am going
| | 08:25 | to type in complete.
| | 08:27 | So there are a couple of things that you
can do. You can use callback functions or you
| | 08:30 | can use a complete.
| | 08:31 | Now the complete basically is going to say hey,
when those guys have executed, when they've
| | 08:36 | all executed, now do this.
| | 08:38 | And I can just go ahead and do function,
and then inside that function I can just go ahead
| | 08:45 | and instantiate my photo gallery.
| | 08:47 | So just the same way we did before, var.
As a matter of fact, if you don't feel like typing
| | 08:51 | it, you can simply copy and paste it.
| | 08:53 | myPhotoSwipe =. And then if you remember,
we were targeting the photoGallery a, and then
| | 09:05 | we're going to do just the
generic photoSwipe instantiation.
| | 09:10 | And now, if I save this and test the
Philadelphia page, not only are the menus working, but
| | 09:21 | if I click the gallery, the gallery is now
working as well, so it's bringing in those
| | 09:25 | resources and I am firing a complete
function to instantiate the photo gallery as soon as
| | 09:30 | they've finished loading.
| | 09:32 | And you know, if we really only needed to load
just these assets, using a loader like Modernizr
| | 09:37 | really wouldn't make a whole lot of sense.
| | 09:39 | You know, it's one of those if you have a hammer,
everything starts little like a nail type deal.
| | 09:43 | We're not really gaining that much speed by
using these guys in parallel. Most browsers,
| | 09:47 | as a matter of fact, will start to
load things in parallel now by default.
| | 09:51 | So we could just load them up using normal
script tags if we want and let the browser
| | 09:54 | handle loading and we wouldn't
really notice that big of a difference.
| | 09:57 | But if we had a lot of external resources,
we'd see better performance enhancements based
| | 10:01 | on this asynchronous loading. And using
Modernizr as a loader has other benefits as well, as
| | 10:07 | we're going to see in our next exercise.
| | Collapse this transcript |
| Conditional resource loading| 00:00 | Where Modernizr really shines as a loader
is in its power to conditionally load assets--
| | 00:05 | that is, loading resources when
certain conditions have been met.
| | 00:09 | In this exercise, we are going to see how
conditional resource loading allows us to
| | 00:12 | test for things like media query support and
screen size and then load in the necessary resources.
| | 00:18 | So I am working from the 06_03 directory.
| | 00:22 | Once again I have got the index, contact, and
Philadelphia.htm files open. We're really picking
| | 00:26 | up right where we left off,
| | 00:28 | so if you want to leave your
old ones open, that is just fine.
| | 00:30 | Now, I want to point something out to you guys.
Right now--if I scroll up to the top of the
| | 00:36 | page--I have a conditional comment at the
top of the page that targets Internet Explorer,
| | 00:43 | and it loads respond.min.js in case it happens
to detect Internet Explorer lower than version 9.
| | 00:52 | That's actually really common.
| | 00:53 | I have seen that a lot, and what that'll do
for you is these conditional comments are
| | 00:58 | only recognized by Internet Explorer, so other
browsers and devices and things will ignore them.
| | 01:03 | Well, it's nice that it's there, but one of
the things that Modernizr does that we can
| | 01:06 | take advantage of is it allows us to test for
features and whether those features are supported or not.
| | 01:11 | That way we don't even really have to be as
generic as saying Internet Explorer 9 or less
| | 01:16 | than Internet Explorer 9, we can just say, hey
if this device doesn't support media queries,
| | 01:21 | let's try respond.js. All right!
| | 01:23 | So I am going to delete--I am actually
going to get rid of that and then I am going to
| | 01:26 | scroll down, back down to my loader object.
And now, here's where the syntax can get a
| | 01:33 | little tricky, okay.
| | 01:34 | The way that I sort of deal with this
is that these curly braces represent sort
| | 01:39 | of distinct discrete calls to the loader object.
| | 01:42 | And you can have as many of them as you want
in here, and you separate them by using commas.
| | 01:47 | We have already got one going on,
and we want to actually do a test.
| | 01:50 | So what I am going to do is I am going to
do a comma and then go down to the next line.
| | 01:55 | And again, I'm just going to speed up the
process a little bit here by pasting some code in,
| | 02:00 | but I want you to see exactly what I pasted in,
so that you guys know what you are adding here.
| | 02:06 | So, code that I am highlighting is what
I'm adding, and you can go ahead and pause the
| | 02:10 | video and type that in.
| | 02:12 | Don't forget the comma that's going to
separate these two blocks of code, okay?
| | 02:17 | So what we're doing here, the first comment sort
of tells you, we are testing for media query support.
| | 02:22 | If it's not found, let's load up respond.js.
| | 02:24 | So what we are doing here is we are saying,
hey, test : Modernizr.mq('only all') so we
| | 02:30 | are just passing an argument in saying,
does it support only for media queries?
| | 02:36 | And if it supports only--you know only is
a keyword that basically is just a trigger
| | 02:40 | that says, hey do you support media queries--
you could pass a full media query into it,
| | 02:44 | but I really just want to test if it supports
media queries at all, not a specific screen size.
| | 02:51 | These methods that Modernizr has, you can
look at the Modernizr documentation and find
| | 02:56 | all of those, so that mq stands for Media Query.
| | 02:59 | So basically, it's going to test. Right after
that we have a little comma and then we say,
| | 03:02 | if not, load the response file.
This is where yepnope really shines.
| | 03:07 | We can use either yep or nope, so if we
wanted to do something in case it did support them,
| | 03:11 | then we would use yep.
| | 03:13 | But this time we only want to do something
if they are not supported, so we use nope.
| | 03:17 | And we just tell it what we want to load up,
in this case the '/_scripts/respond.js'.
| | 03:22 | So this same little section of code here,
I am going to copy this, and I am going to
| | 03:27 | paste this into each of these files. And of
course I am going to get rid of the conditional
| | 03:34 | comment on all of them as well.
| | 03:35 | So I will type in a comma, paste that, save it.
| | 03:39 | I am going to go into
Philadelphia and do the same thing.
| | 03:42 | Now, when we get to Philadelphia, we have
slightly larger fish to fry, if you will.
| | 03:47 | Once again, I am going to do the same thing
here. We will do a comma at the end of this,
| | 03:51 | and we will paste it in. All right!
| | 03:54 | So notice that, again, these are just discrete blocks
of code, and you want to use commas to separate them.
| | 04:00 | All right, so there's another thing going
on in the Philadelphia page that you may or
| | 04:05 | may not have noticed
when we tested it last time.
| | 04:07 | That sort of cool typographic
effect up top, it didn't happen.
| | 04:10 | And the reason it didn't happen is because
there is a library that we are loading up
| | 04:14 | to help us with that and that is lettering.js.
| | 04:16 | Now, what lettering does for you is you pass a
target into it and then it takes every single
| | 04:21 | character in that particular target element,
every letter, and it wraps a span tag around
| | 04:26 | it, and it gives it a class that you can target.
And that way you can do kerning, you can do
| | 04:30 | special type effects through your
CSS, all sorts of things like that.
| | 04:34 | Now, for this page we are only doing that
special type effect at the tablet size and
| | 04:39 | at the desktop size. We are not doing it at
the mobile size, because it's so small that
| | 04:43 | it could kind of overpower things and it just
doesn't look all that great at that small size.
| | 04:48 | So we are not doing it.
| | 04:48 | So we actually don't need
lettering.js at those sizes.
| | 04:53 | And what that can do is we can
conditionally load whether lettering.js is requested or
| | 04:58 | not based upon the screen size by
using that same media query test.
| | 05:02 | And what that does for you, if you think
about this for a second, is it means that you're
| | 05:06 | lowering the overhead for mobile devices because
it's not requesting resources that it wouldn't use.
| | 05:11 | So it's a really powerful feature.
| | 05:13 | All right, so to do this, again I am going
to type a comma right after the last block
| | 05:17 | of code, and then I am going to type in an
opening and a closing curly brace, just like that.
| | 05:23 | Now I am going to enter some more text this
time, and let me even the stuff out here, get
| | 05:31 | my tabs all right. There we go, cool.
| | 05:34 | So what we're doing here is we are testing
to see if it's a bigger screen. So this time
| | 05:38 | instead of testing to see if it supports
media queries just in general, we are testing a
| | 05:42 | very specific media query. We are saying
only all and minimum width the 481 pixels. Again,
| | 05:47 | that's targeting our mobile devices.
We could go to 480 I suppose, but anyway that's the
| | 05:52 | minimum width that we are targeting.
| | 05:54 | So after that, if that happens, this time
instead of using nope, we are using yep.
| | 05:58 | This syntax is a little different because
when you use yep, or nope for that matter,
| | 06:03 | you could use a callback function. And what a
callback function is, it says okay, if that
| | 06:08 | evaluated successfully, I want you to do
something, and that's what callback allows you to do.
| | 06:12 | The callback function passes several
different objects into it. One of the objects you can
| | 06:17 | pass into it is a key.
| | 06:18 | A key is simply just a variable
that says, yes, that did happen.
| | 06:21 | In this case I am naming the key
bigscreen because it's kind of descriptive.
| | 06:26 | So we are defining a key and then we are
telling it which resource to load, so we are saying,
| | 06:30 | yes, big screen is yes, load this script for me.
| | 06:34 | Now that means that there's
still some code left to right here.
| | 06:37 | You will notice that we have a nice little
comma right after this, so I am going to go
| | 06:41 | down to the very next line and I am
going to enter in the rest of the code.
| | 06:46 | Now, this gets a little tricky, so make
sure that when you're looking at this that you
| | 06:51 | understand where the opening and closing curly
braces and all the functions and everything fall, okay?
| | 06:57 | I'm trying to make sure that the tabs are okay
here, so let me even these out. There we go.
| | 07:04 | This should all more or less even out.
| | 07:06 | So what you are looking at here is, after
loading lettering, we are going to target the gallery
| | 07:10 | title item on the page with the lettering
library. So we are performing a callback function
| | 07:14 | and we do that by saying callback and then
function. The parameters that are being passed
| | 07:19 | in or URL, the result, and the key, so
the result is that it was a success.
| | 07:23 | And the key of course is going to be this
bigscreen variable value that we pass in.
| | 07:28 | So we can say hey, if the key is equal to
big-screen, meaning it was a success, we are
| | 07:33 | going to do something. We are saying when
the document is ready, go ahead and apply
| | 07:36 | the lettering functions.
| | 07:38 | So this way we are conditionally applying it
conditionally calling that when it's a big screen.
| | 07:43 | Now, you'll notice that this
isn't handling resizing it all.
| | 07:46 | I could certainly write a resize function
in here so that when the screen is resized,
| | 07:51 | it does it. But one of the things that I'm
doing here is I'm only asking and requesting
| | 07:55 | for this library if the
screen is larger than mobile.
| | 07:58 | So in this case, if somebody resizes
it or turns it into a landscape mode and the
| | 08:05 | lettering doesn't come up, it's not the end
of the world, and I've saved that user from
| | 08:09 | having to download that resource, so
they are getting it faster anyway.
| | 08:12 | So, now if I save this, I am going to go ahead
and preview this up in my browser. There we go.
| | 08:20 | And you can see now the
lettering effect is happening.
| | 08:22 | Now, I'm going to resize this down, refresh, and
the resource is not loaded, which is fantastic.
| | 08:30 | Now, I know that went on for a little while,
but I have seriously just barely scratched
| | 08:34 | the surface of what Modernizr can do.
| | 08:36 | If you want a more complete look at using
Modernizr and especially using it to load resources,
| | 08:41 | go ahead and check out the documentation on
Modernizr's website as well as going to the
| | 08:45 | home page for the yepnope JavaScript library.
So be sure to check out yepnope.js because
| | 08:51 | they have a lot more documentation about conditional
resource loading and the asynchronous loading as well.
| | 08:55 |
| | Collapse this transcript |
| Testing responsive sites| 00:00 | Testing responsive sites is a bit
tricky, I've got to be honest with you.
| | 00:05 | Although you can certainly test them locally,
figuring out how your site is going to perform
| | 00:09 | on mobile devices can be incredibly frustrating.
| | 00:13 | You could download and install a few
mobile emulators, but while they will give you a
| | 00:17 | decent idea of how your site is going to
perform, they're really not 100% reliable and very
| | 00:22 | difficult to debug, to be quite honest with you.
| | 00:25 | I recommend checking out a
couple of resources here.
| | 00:28 | The first one is weinre, although some
people are fond of pronouncing it weiner.
| | 00:33 | weinre actually stands for WebKit Inspector Remote,
or WebKit Remote Inspector, or I don't know whatever.
| | 00:40 | But what it does is it allows you to remotely debug
and test sites on mobile devices from your desktop.
| | 00:44 | So essentially, you'll browse to the site
on your phone or your tablet and then you'll
| | 00:49 | use your desktop browser to run
WebKit Inspector, so it's really cool.
| | 00:54 | You can also download this and install it
locally and then connect all your mobile devices
| | 00:58 | through Chrome or any WebKit browser.
| | 01:01 | Now, this does require a little
bit of technical expertise to set up.
| | 01:05 | I'm going to be honest with you.
| | 01:06 | If doing this on your own isn't really for you,
| | 01:09 | it is bundled into PhoneGap's service, so if
you're working with PhoneGap, you'll be able
| | 01:14 | to use it as well. And it's also bundled
inside of Adobe's Edge Inspect, which is Adobe's
| | 01:19 | new remote debugging and testing service
for mobile devices. And I love Edge Inspector.
| | 01:25 | I talked about it a little
bit earlier in the title.
| | 01:27 | I am a big fan of it.
| | 01:29 | It's available with a membership in
Creative Cloud and you can go try it out,
| | 01:33 | if you're not sold on it right off the bat.
| | 01:35 | But what it allows you to do, basically, is
not only do the remote debugging that
| | 01:39 | weinre allows you to do, but let's say you're
working locally. You can sync a ton of devices
| | 01:44 | up to it. As you save something locally, it
will push updates to all of your remote devices,
| | 01:49 | so you can kind of see your changes real time on
multiple screens and multiple devices all around you.
| | 01:53 | So, a very, very handy piece of software in
terms of testing your performance and developing.
| | 01:58 | Now the last thing I want
to show you is Mobitest.
| | 02:01 | This was formally run by blaze I/O, but I think they
were acquired by Akamai, so it's on their site now.
| | 02:08 | So if you just do a search
for Mobitest, this will come up.
| | 02:10 | Now, what's cool about Mobitest is you have
to have a hosted site, but then you type in
| | 02:14 | the URL, and it'll run a test and you can
choose what device you want it run it on,
| | 02:20 | what server you want to use, how many tests
you want to run, that sort of thing, and then
| | 02:23 | what you get back is what you're seeing here.
| | 02:25 | You get back an Average Page Size--whew, bloated--
| | 02:28 | a load time, and then it gives you a couple of
waterfall charts down here, some screenshots,
| | 02:33 | which is really cool, and it also gives you
an HTTP archive file, which you can download
| | 02:38 | or you can click to just kind of view it through the
software's hard viewer, which is awesome. I love that thing.
| | 02:43 | And you can open it up, and it shows you your
waterfall, so you can see what resources were
| | 02:48 | requested, when they were requested, how
long it took them. You can really see where you
| | 02:52 | need to do a little bit of work maybe.
| | 02:54 | This would still have some work on it, in
terms of getting it to load as efficient as
| | 02:58 | I would like it to.
| | 02:59 | But that's not too bad, I suppose.
It's 1.29 seconds. That loads fairly quick.
| | 03:05 | So it's not 100%. For example, for whatever
reason, does keeps reporting to me that it's
| | 03:10 | actually requesting some of my external
scripts twice, although it's not, so it's not
| | 03:16 | 100% accurate, but it does give you nice
picture of it. And really what that tells you more
| | 03:20 | than anything else is you just can't
beat testing these on your own devices.
| | 03:25 | So that is definitely something that if
you're committed to doing responsive design, you're
| | 03:29 | going to have to try to get as many devices
as you can and you're going to have to try
| | 03:33 | to test on those actual
devices as thoroughly as possible.
| | 03:37 | It's just part of the new reality that we have as
web designers in dealing with responsive design.
| | 03:41 |
| | Collapse this transcript |
|
|
ConclusionAdditional resources| 00:00 | I hope you've enjoyed Applied Responsive Design,
and that you'll take the techniques and strategies
| | 00:04 | that I've outlined here and delve a little
deeper into how they can transform your projects
| | 00:08 | into responsive sites that take full
advantage of the diverse capabilities that all those
| | 00:12 | user agents have to offer.
| | 00:14 | Now, before I go, I want to take a quick look
at some of the additional resources that I've
| | 00:18 | compiled for you that can help you learn
a little bit more about the concepts that
| | 00:21 | were presented in this course.
| | 00:22 | Now, the first section of the Additional
resources--and by the way, you can find this file in
| | 00:27 | 07_01 Exercise Files directory as well.
| | 00:31 | So I've got links to a couple of sites here,
to Luke W's site. You've probably heard me talk
| | 00:35 | about him before. He is a writer of all things
mobile and really one of the biggest contributors
| | 00:40 | out there right now of what it means
to design towards mobile devices.
| | 00:44 | So he is definitely a must-read.
| | 00:47 | Unstoppable Robot Ninja is the home page of
Ethan Marcotte, who is the coiner of the term
| | 00:52 | responsive design. So I guess you could say
he is kind of the granddaddy of it all, and
| | 00:56 | he is the author of the Responsive Web
Design Book that A Book Apart put out.
| | 01:00 | bradfrostweb.com is the blog of Brad Frost,
and he is one of the guys out there that really
| | 01:07 | writes and focuses a lot on responsive design.
As a matter of fact, I've got another one
| | 01:11 | of his sites that he curates called This is
Responsive, a little bit further down the page.
| | 01:16 | A List Apart, if you are a web designer or
web developer, this is an online journal that
| | 01:20 | you should be reading all the time.
| | 01:22 | We've also get to a set of Resources down there for
you too. The first one was that This is Responsive.
| | 01:28 | This is great.
| | 01:30 | This is kind of like, this is what I should
have put together for all of your Additional
| | 01:34 | Resources anyway, so a lot of things that
they didn't list on the page, because, well,
| | 01:37 | they're listed here.
| | 01:38 | So there's a lot about strategy here,
approaches, concepts, processes, different tools, style
| | 01:44 | guides, different ways to
approach layout, media queries.
| | 01:47 | I mean, what can I say?
| | 01:49 | This is incredibly comprehensive.
| | 01:50 | So, and he is adding stuff to it all the time,
so this is a site that if you're serious about
| | 01:56 | responsive design, you're
going to want a book like this.
| | 02:00 | Next we have Touchscreen Stencils.
This is one of the places where I've got those
| | 02:05 | handy-dandy touch icons.
| | 02:07 | You can download these. They have
them from different programs.
| | 02:09 | They also have some vector ones that
you can download. You can print them out.
| | 02:13 | They've got stencils.
| | 02:14 | They've got all sorts of really cool stuff
here, and they're offering to you for free,
| | 02:18 | which is just awesome. So this is from Kicker
Studio. You want to take a look at those.
| | 02:23 | We have some GestureIcons. These GestureIcons are
some of the most beautiful ones I've seen out there.
| | 02:28 | These are fantastic!
| | 02:29 | Now, they are not free, but they are well
worth it if you're doing a lot of prototyping. Y
| | 02:33 | might want to check these out.
| | 02:35 | We also have an Open Source Gesture
Library, and this is actually massive.
| | 02:39 | When I first started looking into this, I
was amazed by all the things that are here.
| | 02:43 | There are not just icons and vector artwork
for you to take a look at too, but there is
| | 02:47 | actually a markup language that's
designed around gestures and that's GML.
| | 02:50 | So there's a lot going on with this group,
and if you're interested in touch and gestures,
| | 02:55 | which, if you are doing responsive design,
you're going to have to deal with that,
| | 02:58 | this is a website that you
want to spend some time on.
| | 03:01 | We also have the Data URI
Generator that I showed you guys earlier.
| | 03:03 | It's a great way for generating
Base 64 Encoding for your images.
| | 03:08 | We have FitVids.JS. I mentioned that
earlier as well. And this is a JavaScript Library
| | 03:14 | that helps you create responsive video on
your page, and can help you out maybe when
| | 03:18 | some of the techniques that showed you hit
a wall or don't quite work with the delivery
| | 03:22 | system that you're using.
| | 03:24 | We also have of course as always, lynda.com,
the online training library. We have
| | 03:29 | a ton of courses available
for you for web and development.
| | 03:32 | And if missed out on my Responsive Design
Fundamentals course in the lynda.com online
| | 03:36 | training library, I highly recommend going
back and watching it, because it focuses more
| | 03:41 | on the strategies and
concepts behind responsive design.
| | 03:44 | So it's a nice overview of all that as well.
| | 03:47 | And finally, on the Additional
resources, I have a link to me on Twitter.
| | 03:52 | If you'd like follow me on
Twitter, I am @jameswillweb.
| | 03:55 | I would love to hear from you. Most the give-
and-take I do with subscribers is on Twitter,
| | 04:00 | so please follow me and join the conversation.
| | 04:03 | Well, that is all for now folks!
| | 04:05 | Thanks so much for watching, and
I will see you in my next course.
| | Collapse this transcript |
|
|
