Build Responsive Site

7/29/2019 Build Responsive Site

1/11

8/1/13 Build a basic responsive site with CSS | Tutorial | .net magazine

www.netmagazine.com/tutorials/build-basic-responsive-site-css

Knowledge needed: Basic CSS and HTML Requires: Text editorProject time: 1-2 hours

DOWNLOAD SOURCE FILES

VIEW DEMO

By Jason Michael on January 10, 2013 | 20 comments

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then

walks us through building a simple re sponsive website

This article first appeared in issue 231 of .net magazine the world's best-selling magazine for web

designers and developers.

Everyones talking about responsive web design. But does everyone understand what its for? Im not

sure. Many web designers and developers seem to me to have misunderstood the problem its trying to

solve.

Put simply, its not about making sites for mobile devices, its about adapting layouts to viewport sizes.

In this tutorial Ill look at the principles behind responsive web design in detail, so were sure to

understand the concepts correctly. Once weve got that out of the way, Ill walk you through building a

website that scales perfectly on both large and small screens.

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.

Build a basic responsive site with CSS

Like ShareShare
http://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.htmlhttp://www.netmagazine.com/shop/magazines/summer-2012-231http://www.netmagazine.com/tutorials/build-basic-responsive-site-css#commentshttp://www.netmagazine.com/files/tutorials/demos/2013/01/build-a-basic-responsive-site-with-css/demo/demo.htmlhttp://mos.netmagazine.com/site/files/tutorials/assets/2012/12/netmag-build-a-basic-responsive-site-with-css.zip


2/11


www.netmagazine.com/tutorials/build-basic-responsive-site-css 2

So its 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 werent considered for during design and build phases. They become fiddly

to navigate around or maybe the fixed width is wider than the users 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 deemless 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 thats so badly designed or built that it cant scale gracefully?

ADVERTISEMENT

User frustration


3/11



Some people believe that its 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 cant.

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 League, which I found really interesting its one of the

main features as you get to the website.

Nike Footballs f ull site features main navigation offering all available options including the feature on the companys f ootball

academy thats visible in the image above...

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 Nikes 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.

Its not just Nike thats guilty of this its hundreds of sites. And I find it highly frustrating that I should

get penalised for using a different device. I feel that if content isnt worth showing to smaller device

user, then it probably isnt worth showing to anybody.

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, its

important to give your website the best possible chance to facilitate a solid user experience.
http://www.nike.com/gb/en_gb/lp/football


4/11



We know that by having a responsive site we can

use a single codebase. This is great in that it

means we neednt 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 doesnt mean the content

doesnt 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.

The real reason many full websites are unusable on mobile devices is because they are unusable on

any device. If its designed well enough in the first place and built correctly, then it should scale up ordown gracefully and effectively. A responsive site doesnt necessarily have to be targeted at mobile

devices; if its built correctly it doesnt have to be targeted to any particular device. It will just work. And

Ethan Marcotte sums it up well in his article Responsive Web Design from A List Apart: Rather than

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.

...but view the site on an iPhone and the academy f eatures

now here to be seen


5/11



The iPad vers ion of Nikes site says train like a pro, but the desktop vers ions football academy article cant be found here at all

With the vast evolution of devices, responsive web design wont fully prevent us from making changes

for new devices, but it should eliminate the need to make viewport related changes. Weve all been

through it building websites that dont quite work in IE6. Its an issue that drove us all crazy and we

spent hours applying hacks to fix it. However, there has never really been that much of an issue with

IE6, its just we were building our sites wrong. With a vastly growing number of web-enabled devices it is

important that we build our sites in a way that allows it to adapt to change

The walkthrough

For the purpose of this tutorial I have put together a website that scales beautifully between large and

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 to get

to the main body of content.


6/11



Mediaqueri.es is a nice site that is perfect for inspiration as it show s you versions of many sites degrading into smaller

screensizes

The key element of flexibility in responsive design is a fluid layout width. All you need to do is create a

wrapper, content, and column widths that will adapt to different device widths. Its nothing new, but is

now more important than ever. To keep things simple, Im going to show you how to create a fluid pageconsisting of navigation, feature image and two-column, which takes into consideration the layout on

various sized devices. Youll notice Ive includedrespond.min.js, which is a lightweight polyfill that

enables media queries to work in IE6-8. Here is the basic HTML structure:

1.

2.

3. 4.

5. Demo | Responsive Web

6.

8.

9.

12.

VIEW SOURCE

COPY CODE
http://december.com/html/4/element/script.htmlhttp://december.com/html/4/element/script.htmlhttp://december.com/html/4/element/link.htmlhttp://december.com/html/4/element/meta.htmlhttp://december.com/html/4/element/title.htmlhttp://december.com/html/4/element/title.htmlhttp://december.com/html/4/element/meta.htmlhttp://december.com/html/4/element/head.htmlhttp://december.com/html/4/element/html.htmlhttp://mediaqueri.es/


7/11



13.

14.

15.

16.

17.

18.

19.

20. Skip to Main Content

21.

22.

23.

24. Demo

25.

26.

27. Home

28. About

29. Work

30. Contact

31.

32.

33.

34.

35.

36.

37.

38. Main section

39.

Loremp>

40.

41.

42. Sub-section

43.

Lorem p>

44.

45.

46.

47.

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 wont 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 images

width to 100%:

1. /* Structure */

2. #wrapper{

VIEW SOURCE

COPY CODE
http://december.com/html/4/element/html.htmlhttp://december.com/html/4/element/body.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/p.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/img.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/h1.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/a.htmlhttp://december.com/html/4/element/li.htmlhttp://december.com/html/4/element/ul.htmlhttp://december.com/html/4/element/div.htmlhttp://december.com/html/4/element/body.htmlhttp://december.com/html/4/element/head.html


8/11



3. width:96%;

4. max-width:920px;

5. margin:auto;

6. padding:2%;

7. }

8. #main{

9. width:60%;

10. margin-right:5%;

11. float:left;

12. }

13. aside {

14. width:35%;

15. float:right;

16. }

17. /* Logo H1 */

18. header h1 {

19. height:70px;

20. width:160px;

21. float:left;

22. display:block;

23. background:url(../images/demo.gif)00no-repeat;

24. text-indent:-9999px;

25. }

26. /* Nav */

27. header nav {

28. float:right;

29. margin-top:40px;

30. }

31. header nav li {

32. display:inline;

33. margin-left:15px;

34. }

35. #skipTo{

36. display:none;

37. }

38. #skipTo li {

39. background:#b1fffc;

40. }

41. /* Banner */

42. #banner{

43. float:left;

44. margin-bottom:15px;

45. width:100%;

46. }

47. #banner img {

48. width:100%;


9/11


10/11



switch them to one column.

1. /* Media Queries */

2. @media screen and (max-width: 480px) {

3. #skipTo{

4. display:block;

5. }

6. header nav,#main, aside {

7. float:left;

8. clear:left;

9. margin:0010px;

10. width:100%;

11. }

12. header nav li {

13. margin:0;

14. background:#efefef;

15. display:block;

16. margin-bottom:3px;

17. }

18. header nav a {

19. display:block;

20. padding:10px;

21. text-align:center;

22. }

23. }

You will notice on some mobile devices that your website automatically shrinks itself to fit the screen,

which is where we get the issues of having to zoom in to navigate through fiddly content.

To allow your media queries to take full effect a typical mobile-optimized site contains something like the

following:

1.

The width property controls the size of the viewport. It can be set to a specific number of pixels like

width=960 or to the device-width value which is the width of the screen in pixels at a scale of 100%. The

initial-scale property controls the zoom level when the page is first loaded. The maximum-scale,

minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

VIEW SOURCE

COPY CODE

VIEW SOURCE

COPY CODE
http://december.com/html/4/element/meta.html


11/11


Combining a series of grabs enables the impact of transitions betw een screen sizes to be appreciated fully

As I said before, responsive web design has never been about making sites for mobile devices. Its

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.

Something that will help us tremendously with fluid layout, and which Im very excited about, is Flexible

Box Layout Module. FlexBox, as its 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 elements size, FlexBox can also apply properties to a parent that control where any empty space is

distributed. If youre not aware of FlexBox then checkPeter Gasstons articles.

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.

This tutorial has received a technical review from Stephanie Rieger
http://twitter.com/stephanieriegerhttp://www.netmagazine.com/tutorials/css3-flexible-box-model-explained

Build Responsive Site

Documents

Transcript of Build Responsive Site