CSS build a basic responsive site .net

.net technique frontend
CSS build a basic
responsive site
Download
the files! >u
All the files yo
torial
need for this tu
can be found at
1
netm.ag/resp-23
Responsive design is much misunderstood. Jason Michael lays to rest some
myths, and then walks us through building a simple responsive website
Knowledge needed Basic CSS and HTML
Requires Text editor
Project time 1-2 hours
Everyone’s talking about responsive web design. But does everyone
understand what it’s for? I’m not sure. Many web designers and
developers seem to me to have misunderstood the problem
it’s trying to solve.
Put simply, it’s not about making sites for mobile devices, it’s about adapting
layouts to viewport sizes.
Over the next few pages, I’ll look at the principles behind responsive web
design in detail, so we’re sure understand the concepts correctly. Once we’ve
got that out of the way, I’ll walk you through building a website that scales
perfectly on both large and small screens.
The mobile world
Responsive web design has mainly become a hot topic because more and more
people are using mobile devices such as iPhones, iPads, and BlackBerrys to
access the internet.
So it’s becoming increasingly important to understand that a website should
not be specifically about either the desktop or the mobile device, but about
building in such a way that its layout adapts to varying viewport sizes.
If you think about the new inventions we will inevitably see in the future,
then an adaptive layout that can automatically respond to the users’ preference
becomes an indispensable and highly valuable commodity.
One of the main reasons media queries have become more popular is the
fact that websites are unusable on devices they weren’t considered for during
design and build phases. They become fiddly to navigate around – or maybe
the fixed width is wider than the user’s viewport, making it difficult to zoom in,
pan, zoom out and find what they are looking for.
Frustrating? For sure. But more frustrating as a developer is that these
websites should have been built in such a fashion that they scale down to fit
any viewport size.
Many sites using media queries strip out information, hiding certain aspects
of the site that they deem less important. So the user with a smaller device gets
an easier to use website, but with stripped-down content.
But why should I, on a mobile device, not get the same benefits from a
website as a desktop user?
With the help of media queries we can completely customise the layout of
our website dependent on screen size. Which is great, but do we really need to
supply several adaptations of our site?
And why should we settle for a site that’s so badly designed or built that it
can’t scale gracefully?
User frustration
Some people believe that it’s okay to cut features and eliminate content they
believe is non-essential to the user. But how can you be sure that the
information you are cutting or pushing to a secondary page is not the content
that is most important to me? You can’t.
As an example, I was on the Nike Football website on my MacBook and
reading about the football academy they are running with the Premier
Desktop delights Nike Football’s full site features main navigation offering all available options – including the feature on
the company’s football academy that’s visible in the image above
88
.net summer 2012
Scaled back But view the site on an iPhone and
the academy feature’s nowhere to be seen
.net technique frontend
Further reading (1)
There’s a wealth of great articles and tutorials out there for anyone
wishing to learn more about responsive design. Here are just a few …
Responsive Web Design
The article by Ethan Marcotte for A List Apart that started it all. “Fluid
grids, flexible images, and media queries are the three technical
ingredients for responsive web design,” he writes. “But it also requires
a different way of thinking. Rather than quarantining our content into
disparate, device-specific experiences, we can use media queries to
progressively enhance our work within different viewing contexts.”
Owww.alistapart.com/articles/responsive-web-design
5 really useful responsive web design patterns
Just padding The iPad version of Nike’s site says ‘train like a pro’, but the desktop
version’s football academy article can’t be found here at all
League, which I found really interesting – it’s one of the main features as you
get to the website.
However, when I tried to show a friend of mine on my iPhone, I discovered
Nike has its own mobile site, and Nike Football consists of just two options: one
about the latest Mercurial Vapor boots (not interested), and one about the new
technology used on Nike’s football shirts (not interested).
I tried my iPad and it was completely different again – and still no sign of the
academy information I was looking for.
It’s not just Nike that’s guilty of this – it’s hundreds of sites. And I find it
highly frustrating that I should get penalised for using a different device. I feel
that if content isn’t worth showing to smaller device user, then it probably isn’t
worth showing to anybody.
Some interesting responsive design patterns that are being
implemented by talented designers all over the web.
O www.designshack.net/articles/css/5-really-useful-responsive-webdesign-patterns
CSS Regions
Adobe’s proposal seeks to enable magazine-style layouts to be created
on the web. Find out more at:
Ohttp://dev.w3.org/csswg/css3-regions
Owww.css-tricks.com/content-folding
Owww.broken-links.com/2011/11/07/introducing-css-regions
Why should I, on a mobile
device, not get the same
benefits as a desktop user?
The first thing we need to understand is that responsive web design isn't just
about mobile – it considers all viewport sizes. And secondly, developing a good
responsive website requires more time and effort than just using media queries
With a vast and growing number of web-enabled devices, it’s important to give
your website the best possible chance to facilitate a solid user experience.
We know that by having a responsive site we can use a single codebase. This
is great in that it means we needn’t adjust our content for each device. But
many websites hide content deemed unnecessary to mobile users, and there
are two issues with this.
Firstly, it effectively penalises mobile users browsing the website. And
secondly, including a hidden style in our CSS doesn’t mean the content doesn’t
get downloaded. This can massively affect performance, especially for those on
poor connections.
So perhaps the best way to go about designing a website is to consider
mobile, or smaller devices, first. This way you can focus on the most important
information your site needs to give. And then, if necessary, you can use
conditional loading techniques where your layout grid, large images and media
queries are applied on top of the pre-existing small-screen design.
Build for adaptability
If a site is designed well enough in the first place and built correctly, then it
should scale down gracefully and effectively. As mentioned earlier, a responsive
site doesn’t necessarily have to be targeted at mobile devices; if it’s built
correctly it needn’t be targeted to any particular device. It will just work.
Ethan Marcotte sums this up well in his influential article Responsive
Web Design (alistapart.com/articles/responsive-web-design): “Rather than
New tricks Chris Coyier’s article (www.css-tricks.com/content-folding) explores
CSS Regions, which enables content to flow through multiple elements
tailoring disconnected designs to each of an ever-increasing number of web
devices, we can treat them as facets of the same experience,” he writes. “We
can design for an optimal viewing experience, but embed standards-based
technologies into our designs to make them not only more flexible, but more
adaptive to the media that renders them. In short, we need to practice
responsive web design.”
The speedy evolution of devices means that if we don’t build our website
correctly in the first place we’ll need to continue to make changes for new
devices. With an ever-expanding number of web-enabled devices it is important
we build our future sites in a way that enables them to adapt to change.
The walkthrough
For the purpose of this tutorial I have put together a website that scales down
beautifully from large to small screens.
You keep all the content on all sizes. And with the use of media queries
I have switched the navigation from a horizontal display to vertical display
for smaller devices, and given the user enough padding on the realigned
adaptation to work well on touch screens.
One thing that I especially like, when you view smaller-screen versions of
sites where the main navigation fills the screen area, is the ability to skip to the
content you really want using page anchors. Having this appear at the
top of the page helps prevent mobile users from having to scroll down
.net summer 2012
89
next>
.net technique frontend
Further reading (2)
Responsive questions
A great post on Jeremy Keith’s Adactio blog. “We’ve always had the
ability to create fluid layouts,” writes Keith. “And yet web designers and
developers have wilfully ignored that fact, choosing instead to create
un-webby fixed-width layouts … It was never specifically about mobile
devices or users in a mobile context; it was always about adapting
layout to varying viewport sizes.”
Ohttp://adactio.com/journal/5351
The future of CSS layouts
Peter Gaston’s article for the .net website takes a detailed look at the
different options for creating rich, dynamic pages.
Owww.netmagazine.com/features/future-css-layouts.
Why we shouldn’t make separate mobile websites
“The reasons many full websites are unusable on mobile devices are
because many full websites are unusable on any device,” says Bruce
Lawson in this article for Smashing Magazine. In other words, if it’s
designed well enough in the first place and built correctly then it should
scale down gracefully and effectively.
Ohttp://mobile.smashingmagazine.com/2012/04/19/why-we-shouldntmake-separate-mobile-websites/
Responsive layouts using CSS Media Queries
A great blog post from Kyle Schaeffer explaining the basics of
responsive web design layouts.
Ohttp://kyleschaeffer.com/best-practices/responsive-layouts-using-cssmedia-queries
Ethan Marcotte answers your responsive web
design questions
The guru of responsive web design asks questions posed by readers of
.net magazine.
Owww.netmagazine.com/interviews/ethan-marcotte-answers-yourresponsive-web-design-questions
CSS3 Flexible Box Layout Module
FlexBox offers exciting possibilities for responsive web design.
Find out more details in this excellent article by Peter Gasston.
Owww.netmagazine.com/tutorials/css3-flexible-box-model-explained
15 Detailed Responsive Web Design Tutorials
Ohttp://designwoop.com/2012/03/15-detailed-responsive-web-designtutorials/
From the top Designwoop’s ‘15 detailed responsive web design tutorials’ offers
plenty for newcomers to the subject to chew on
<prev
90
.net summer 2012
Xxxxxx xxxxxx TXxxxxxxxxxx Si. Agnisl ullaoreet ing eros acidui blandreetuer secte
magna consenim quatin ute cor iril dolore miniat.
and down to get to the main body of content, rather than being greeted
by the main nav at the outset.
The key element of flexibility in responsive design is a fluid layout width. All
you need do is create a wrapper, content, and column widths that will adapt to
different device widths. It’s nothing new, but is now more important than ever.
To keep things simple, I’m going to show you how to create a fluid page
consisting of navigation, feature image and two-column, which takes into
consideration the layout on various sized devices. You’ll notice I’ve included
Many sites are unusable on
mobile devices because they
are unusable on any device
respond.min.js, which is a lightweight polyfill that enables media queries to
work in IE6-8. Here is the basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Demo | Responsive
Web</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link href="styles/main.css"
type="text/css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//html5shiv.
googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript'
src='scripts/respond.min.js'></script>
</head>
<body>
<div id="wrapper">
<header>
<nav id="skipTo">
<ul>
<li>
<a href="#main" title="Skip to Main Content">Skip to Main Content</a>
</li>
</ul>
</nav>
<h1>Demo</h1>
.net technique frontend
Big guns Viewing the tutorial layout on a large screen
(left), max-width restrains it from expanding too far
Perfectly formed Reducing screen size (below), the
site remains in view and elements contract accordingly
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Work">Work</a></li>
<li><a href="#" title="Contact">Contact</a></li>
margin-right: 5%;
float: left;
}
aside {
</ul>
</nav>
<div id="banner">
<img src="images/kaws.jpg" alt="banner" />
</div>
</header>
<section id="main">
<h1>Main section</h1>
<p>Lorem…p>
</section>
<aside>
<h1>Sub-section</h1>
<p>Lorem …p>
</aside>
</div>
</body>
</html>
When it comes to the CSS, setting a max-width is a good idea in order to
stop the site scaling across enormous screens – and this won’t withhold the
page from shrinking.
One main issue when switching from fixed widths to fluid is images. And
there is a simple fix for this in your CSS. Just set your image’s width to 100%:
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
#main {
width: 60%;
width: 35%;
float: right;
}
/* Logo H1 */
header h1 {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(../images/demo.gif) 0 0 no-repeat;
text-indent: -9999px;
}
/* Nav */
header nav {
float: right;
margin-top: 40px;
}
header nav li {
display: inline;
margin-left: 15px;
}
#skipTo {
display: none;
}
#skipTo li {
background: #b1fffc;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
}
#banner img {
width: 100%;
}
.net summer 2012
91
.net technique frontend
Small victory As screen size
reduces our media queries code
shows the ‘skip to content’ link
Fluid movements Combining a series of grabs (above) enables the impact of transitions between screen sizes to be appreciated fully
Your image will now display at its parent elements full width and will
contract along with it. Just be sure your image’s max-width doesn’t
exceed the max-width of its container – otherwise it may pop outside.
Main navigation switch
The main reason that you may want to switch the navigation is because the
scaling down could become unreadable and hard to click. By using this method,
you are enabling the user to access it more easily and giving them enough
padding to click for those touchscreen devices. You will also notice in the code
that we have made some changes to the #main and aside sections to switch
them to one column.
/* Media Queries */
@media screen and (max-width: 480px) {
#skipTo {
display: block;
}
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #efefef;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}
Many mobile devices and tablets utilise a zoom feature to display content
that is too large to fit on smaller display screens. Important as it is for mobile
and tablet users, it can create a frustrating experience having to constantly
zoom in, pan, and zoom out in order to browse your websites content.
You can disable this zooming behaviour by placing this meta tag in the head
of your document (as I have included in the HTML code):
<meta name="viewport" content="width=device-width, minimum-scale=1.0,
maximum-scale=1.0" />
<prev
92
.net july 2012
Defaut option
As I said before, responsive web design has never been about making sites
for mobile devices. It’s about adapting layouts to viewport sizes. Having a
responsive site that adjusts to varying viewports should be the default
option. If you wish to create a mobile version that looks completely different
and shows only ‘important’ content then go ahead, but at least allow the
user that choice to see the ‘full’ website too. We should concentrate on using
the technologies sitting under the ‘responsive design’ umbrella to create a
better web.
The challenge is about what
technologies and methods
we use to develop websites
Game changer
Something that will help us tremendously with fluid layout, and which I’m very
excited about, is Flexible Box Layout Module.
FlexBox, as it’s also known, provides a method of automatically resizing
elements within their parent without having to calculate height and width
values. As well as dynamically changing an element’s size, FlexBox can also
apply properties to a parent that control where any empty space is distributed.
If you’re not aware of FlexBox then check Peter Gasston’s articles at www.
netmagazine.com/tutorials/css3-flexible-box-model-explained – they’re well
worth a read.
This is something I hope will be a game-changer in terms of how we develop
websites in the future.
Developers must consider having the same content organised in a manner
that is the same for everyone. The minimum standard we should set ourselves
as developers is to create websites that work for everyone, everywhere. O
Responsive web design is about printing, too – turn to page 80 to find out how to
make your web pages printable
About the author
Name Jason Thomas Michael
URL jasonthomasmichael.com
Areas of expertise CSS, HTML
Twitter @jasonmichael
How do you like your eggs?
Poached with rock salt and stacks of pepper!
`