Tip:
Highlight text to annotate it
X
You've got it!
This simple formula will be key as we convert
Smells Like Bakin' from a fixed layout into a responsive layout.
But let's take a step back a bit.
What exactly is a responsive Web site,
and why do we need to make one?
Some years ago, there was a clear differentiation between
desktop and mobile.
We'd have a computer and a smart phone,
a desktop Web site and a mobile Web site.
But with the introduction of tablets and tons of internet-accessible technologies,
we've been faced with designing for more monitor resolutions
and devices than ever before.
By embracing responsive Web design,
we're able to create a Web site that is
flexible and fits beautifully into all of these devices
rather than trying to create and maintain individual Web sites for each device.
So this all sounds awesome, but how do we create a responsive Web site?
Responsive Web sites are built on a flexible, fluid grid
that adapts to the browser or device that renders the Web site.
As you can see, when we drag the corners of this Web site,
the layout and images scale down as we go.
Notice when we do the same thing to the Smells Like Bakin' Web site, however,
it remains centered and fixed to the middle of the browser.
That's because the first Web site is built on a fluid grid
using percentages for widths instead of pixels
like we used in the Smells Like Bakin' Web site,
creating a fluid foundation is the first step to creating a responsive Web site.
We do this first by taking our completed Web site comp,
and when we're ready to turn it into a working Web site,
instead of using exact pixel widths for the columns in our Web site,
we interpret them with percentages
in relative proportional terms to one another.
While there's absolutely nothing wrong with a fixed layout,
a responsive Web site will create a version of the same Web site
that can stretch and resize with the browser.
This makes sure your Web site adapts to whatever size
browser or device your user may be viewing your Web site in.
Notice again when we drag the corners of this Web site.
When we get to a specific width, the Web site snaps into a different layout.
This is achieved using media queries.
Media queries allow us to target specific widths
where our layout begins to break or start to look a little squished or tight.
They also allow us to take control over our fluid layout
and target specific devices, like tablets and Smart phones.
We'll talk more about media queries in a later stage
and learn how we can use them to get the same effect
on our Smells Like Bakin' Web site.