(techno music)
- So let's start the class by answering the question
what is responsive design?
Because when I work with a new team or new client,
it's one of the first questions I get.
Because everyone's incredibly excited about that phrase.
Responsive web design.
But everyone tends to have a slightly different
idea about what it means for them and for their company.
I'd like to start today by telling you
some of what it means for me, as a designer.
To do that, I'd like to tell you a story about a tree.
This is a rather special tree,
and it's located in the heart of the Pando forest,
which is in Utah.
Pando's a rather special forest.
It's some 100 acres in size.
Let's say you and I are traveling
side by side through this forest.
As we do so, we are surrounded by some incredible nature.
This beautiful white tree trunks shooting up
out of the ground all around us as far as the eye can see.
After some time traveling through this forest,
I turn to you.
I say that I've lied to you just a little bit,
because you see, Pando's not actually a forest.
Pando is just one tree.
You see Pando is actually the Latin term for I spread.
Pando isn't what's known as a clonal colony.
It's one single giant quaking aspen tree.
So each tree that you and I might see with our eyes,
is actually just one stem, and every single one of them
shooting up out of this massive underground root system,
that they all share.
There's some 40,000 stems estimated to be in Pando today.
Pando's actually quite an old, old tree.
It's some 80,000 years in age,
which basically makes Pando one of the largest,
and one of the oldest known organisms alive
on the planet today.
I think this is a really wonderful story to start with
because I think as designers,
or maybe as human beings,
we tend to look at things that seem visually complex,
and it's our instinct to sort of see them as more distinct
and more separate than they actually are by default.
I've been thinking about that a lot
in my own design practice,
usually when I'm looking at a different forest entirely.
Which all the different devices and browsers
that I'm being asked to deliver
a beautiful and compelling experience to.
That's a more complex forest
than I've ever had to deal with when designing for the web.
The thing is that when we're designing
for the modern web, this is just table stakes.
The web is anywhere and everywhere
that our users happen to be,
with whatever screens happen to be closest at hand.
At least for me it's critical to understand the web
as a completely flexible design medium.
In other words, when we're designing for the web,
we're designing for a complete infinite canvas.
It's a completely flexible canvas,
and our designs have to be as flexible
and as accessible as the devices are
that our users are holding in their hands.
What's exciting for me as a responsive designer
is that there's so much excellent responsive design work
out there on the web today that I can draw inspiration from.
I'm sure you've found so many wonderful
responsive sites out there,
but let me show you a few examples that I really like today.
The exciting thing, I think, about responsive design
as it's happening today is that there is really great
responsive work being done across different industries.
Here's Amherst College, which is a really great example
of a responsive higher ed site.
It's beautiful and it's impactful
on pretty much any size screen.
You notice that as I'm resizing the browser window,
the responsive design is changing its shape
to make it accessible to screens both small and large.
Publishers, too, have been using responsive design
really effectively over the last few years.
Here's the Financial Times, which has a very stately
and very beautiful responsive layout.
Using flexible grids, flexible images, and media queries
to create a really beautiful responsive experience.
But it's not just about publishers or higher ed websites.
There are a number of web applications out there
that have been using responsive design
very effectively as well.
Here's Adobe Typekit.
And they have a very complex interface
that you can use on screens both small and large
to not just browse fonts, but also filter them
along a number of really complex axes.
The reason so many of these organizations and companies
have gone responsive is because they recognize
the fact that being device agnostic is just table stakes
for designing for the modern web.
We're designing for so much more than just desktop devices.
Mobile computing has exploded in recent years.
There are some eight billion mobile devices
estimated to be in use worldwide,
and that number doesn't seem to be going down any time soon.
Tablet computing isn't necessarily
the newest kid on the block any more.
It still floors me that in 2011 alone,
some 80 new tablet devices entered the marketplace
in one 12 month period.
That seems wild to me.
And so with all the churn that we're seeing
in both mobile and tablet computing,
there's an understandable amount of investment
and experimentation in trying to understand
what the next post-desktop context might be.
There's a considerable amount of investment happening
in smart TVs and smart watches,
and so many different screen contexts
that actually have really powerful browsers on them as well.
How many of these are we going to be designing for
in the future?
When we're looking at a complex marketplace like this,
it's very tempting to say that we should be designing
mobile specific experiences, or tablet specific experiences,
or desktop specific experiences.
Actually it's much more powerful, and much more freeing
if we stop designing for individual devices,
and instead think a little bit more flexibly.
Think about delivering one experience
that can be viewed on any size screen.
Because ultimately we're not just designing for devices,
we're designing for the people
on the other sides of those screens.
Think about a reader of your website
who might be coming back to that website
at multiple points in the day
with whatever device or devices
happen to be closest at hand.
This is something that a lot of publishers
and organizations have actually realized.
By being a little bit more flexible,
and not trying to control the experience as much
across different devices,
they can actually drive and improve engagement
across all those devices by being a little bit more
device agnostic in how they design for the web.
Ultimately responsive design means that you're designing
one flexible experience that's delivered to every
device that might visit that website.
That experience might change in its layout
or its presentation, depending on the size of the screen,
but that's okay because ultimately it's one website
that you're delivering to all of your users.
In doing so, that's going to help you reach more devices,
and more people, than ever before.
These are just some of the things that were cycling
through my head when I first wrote that article
called responsive web design.
This is an article that was published back in 2010,
which is basically saying that the flexibility
that's inherent in the web is something
that we need to see as a strength,
rather than something that we need to control or limit.
In the article I put forward this high level recipe
for what makes a responsive design.
Specifically that every responsive design begins with
a fluid or flexible grid-based layout.
A layout that's built with percentages and proportions,
rather than inflexible pixels.
Then there are images and media that are flexible themselves
that work within those flexible layouts.
Finally we have media queries, which are a little bit of
pixie dust from the CSS specification.
They allow us to control the flexibility in ways
that are useful to us.
We can change and adapt those fluid layouts
at different break points.
In other words, creating layouts
that can change their shape and represent information.
In other words, they can respond to the changing shape
of a browser window or of a device's display.
That all sounds very technical,
but ultimately it's important to recognize
that a responsive layout,
at the end of the day is just flexible in nature,
but then it changes and adapts at certain break points
to make it accessible to screens narrow and wide.
In this course, we're going to be looking
at the sample design for a fictitious magazine,
one that was created by, for, and about dinosaurs.
The sample files for that design
are going to be accessible in the resources section
for this course.
If you'd like to follow along, please do.
This design is what we're going to use
to actually show you how those three ingredients
from a responsive design snap together.
We'll be using fluid grids, flexible images,
and media queries to translate this design
into a completely flexible, completely responsive design.
We'll also look at some strategies
to change our design process,
so you can be a more flexible designer
or developer yourself.
And with that, let's get started.
(techno music)