Вы находитесь на странице: 1из 14

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

Kyle Schaeffer Web Design and SharePoint Branding

Available for work

I am currently available for consulting. If youd like to work together, send me a few details
about your project.

Your name *

Your email address *

Your message *

Are you human? *

Type the characters you see into the box.

Sendmessage

Blog
Topics
My work
About me
Contact me

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

1/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

Responsive Layouts Using CSS Media Queries

The days of the desktop are numbered. In the past, designing a web interface involved targeting
a screen resolution in the vicinity of 960 pixels wide. For many years, this worked, and it
worked well, because 99% of online users could easily read and scroll at that resolution,
regardless of the browser, operating system, or machine they were using.Times have changed.

The supreme rule of desktop design began to wane in the past couple of years. With the
explosion of the mobile browser phenomenon (largely due to devices like the iPhone,
Blackberry, and the Android operating system), online traffic began to show the first signs of
diversification. With increasing numbers of users on these mobile devices, the distinction
betweenmobile anddesktop content was born. As you most likely have noticed, many online
publishers have chosen to neatly dissect their content into two distinct applications that serve
two distinct types of devices. You have mobile versions of many websites available today,
which often offer similar or identical content to what can be found on the desktop version of that
same website. Very simply, the web server detects the device thats requesting the content, and
serves up a different document (or redirects to a different location) depending on the device
being used.

Today, thisdichotomybetween mobile and desktop content persists as the most popular
strategy for serving up web content to a multitude of devices. The technical implementation of
this strategy differs from site to site, but the end result is the same: a design and layout that
targets a single device or resolution. This has been a great approach for many online publishers
because it offers so much flexibility in the appearance of mobile content. By segregating a design
into two entirely different implementations, the limits to what can be done on a mobile site are
nearly limitless. As with every design, however, there are disadvantages to this approach that
cannot be overlooked:

Increased effort it is more difficult to create and maintain two separate design layouts

simultaneously.
Publishing concerns creating a division between mobile and desktop content begs the

question: where does the content come from? Should all desktop content be available on
the mobile site? Do you publish everything twice (once for desktop, once for mobile users),
or do you dual-publish to both mediums simultaneously?
Planning for diversification is mobile vs. desktop really good enough?

The last disadvantage listed here is perhaps the most important point to consider. Recent history
has shown that targeting a single device (i.e. the desktop) did not withstand the test of time. Is

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

2/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

the simple distinction between mobile and desktop content really good enough?

Mobile is important, but not end-all.

The truth of the matter is that mobile devices are taking off. According toMary Meeker of
Morgan Stanley, the sale of smartphones is expected to overtake PC sales (both desktops and
notebooks) by next year. Browsing statistics are showing this trend as well.StatCounter shows
that about 6.5% of all users in North America are browsing on mobile devices. You can count on
about one in twenty users experiencing your online content on a three inch screen how does
your content stack up in this scenario? If you havent thought about it yet, its time to start.

The growth of the smartphone landscape and the diversification of browsing statistics are the
driving factor behind the explosion of mobile-friendly site design. Today, this practice is entirely
acceptable, but dont count on anything in this industry to stick for more than a few years.
Mobile devices arent the only new kids on the block.

Enter the tablet.

Tablet devices like the iPad and similar devices that utilize the Android operating system have
been somewhat of a curveball in the industry of web design. Theyre not quite mobile devices,
and theyre not quite desktops, but rather somewhere in between. In the current design
landscape, where everything has been neatly divided between mobile and desktop content,
many designers are choosing to place tablets into the mobile category, serving up tablet
content in like kind. This does not always go over well with tablet users, who justifiably feel that
the tablet offers unique advantages of a desktop computer, namely a better browsing experience
than what can be had on a smaller mobile device.

What, then, do we do with these users?

Responsive Web Design

The ongoing problem is that as designers, weve set our minds on this idea that a web interface is
going to be displayed on a screen that is 1024 pixels wide (or larger). Its a desktop mindset;
anything smaller than 1024 is a mobile device and generally gets a pixel value of about 320
pixels. All devices that access our online content must adhere to one of these two layouts there
are two numbers, and nothing in between.

The trouble for web designers is that internet connectivity is rapidly spreading to a vast array of
devices and products that people use every day. Someone might access your online portal from a
desktop, phone, notebook, netbook, tablet, or even some consumer appliances. The Nintendo
Wii, for instance, comes loaded with an Opera browser thats quite good, and is hindered only by
the fact that many televisions only have a resolution that is 480 to 720 pixels wide. At this
resolution, many website layouts simply dont provide an enjoyable user experience due to poor
formatting and display on smaller screens. Furthermore, there is no end in sight. Expect this

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

3/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

diversification of internet-ready devices to increase in the coming years, and plan to change the
way you design and create layouts for the web.

The great thing is, whether you recognize it or not, this is actually a very good thing. Web
layouts have been too rigid and design-centric for a long time now, and forcing designers to
apply layouts to a multitude of devices will encourage them to create content that can be
consumed in a variety of mediums. In the end, this translates into a better experience for the
user, who doesnt have to worry about what device they are on, what resolution theyve chosen,
or what issues they may encounter.Ethan Marcotte sums it up best 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. 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 practiceresponsive web design.

Responsive web design is creating web layouts that can adapt to a multitude of displays and

devices. Using this technique, you can eliminate the need to create device-centric designs (like a
mobile site), and allow your content to be displayed from a single source, on an unlimited
number of mediums.

Techniques for Responsive Web Design

Responsive web design is not one big thing. Its a collection of disciplines and techniques that
you employ to ensure that your designs can appear fluidly on a multitude of display sizes. The
fundamental change that you have to make to start creating responsive designs is to ask yourself
with everything that you do: what happens with this content when the display shrinks? Plan for
a multitude of resolutions from the very beginning. By mere acknowledgement and foresight,
youll find that the challenge of creating a responsive layout is not so difficult to overcome.

1. Layout Width

The most important element of flexibility that must be employed in your responsive design is a
fluid layout width. This is the condemning factor that breaks many designs when they are
viewed on smaller display screens. Create wrapper, content, and column widths that can stretch
display ideally in different resolutions. There is no trick to this technique, its merely a change
in the way you create columns in your style sheets. Heres an example:

#wrapper{
width:80%;
margin:auto;
maxwidth:1200px;
}
This is a simple example of a fluid design width. Setting a max-width on your design is a good

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

4/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

idea to salvage any formatting issues for users on very large resolution monitors.

2. Responsive Design and Column Widths

In most designs, you might be working with multiple column widths to display content in a
number of different ways. In your style sheet, you could simply apply a percentage width to each
column, but this technique is generally not ideal. In many cases, a sidebar column may include
fixed-width elements like advertisements, menus, or text that does not necessarily adapt in any
beneficial way as the width of your layout grows.Instead, you may choose to adapt only a single
column as the layout width changes. This is a common layout structure that can easily be
created within your existing style sheet. Consider the following example:

#wrapper{
width:80%;
margin:auto;
maxwidth:1200px;
}
#columnmain{
marginleft:200px;
}
#columnsidebar{
width:200px;
float:left;
}
In this example, the main column will always fill the width of the layout area, and the sidebar
column (in this example, on the left) will always remain exactly 200 pixels wide.

3. What about images?

A common concern when moving from a fixed-width to a fluid layout is HTML images (the
<img> element). An image file, for the most part, is a fixed-size file that does not scale as your
design width decreases. This results in some rather unsavory presentation bugs, like large
images being drawn beyond the edge of the browser window. The solution is a simple addition
to your designs style sheet:

img{
maxwidth:100%;
}
This simple addition causes any images in your design to display at full size by default. As the
width of the design layout shrinks so that the image is too wide to display in the confines of its
parent element, the image too, begins to shrink.

Its worth noting that the image scaling ability of Internet Explorer isadmittedlypoor at best.
Ethan Marcotte shares his very handy Fluid Images script to help alleviate your scalable image
woes.

4. No More Zoom

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

5/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

Many mobile devices and tablets utilize a zoom feature to display content that is too large to fit
on smaller display screens. This is an important utility for mobile and tablet users, but it creates
a detrimental experience for users, as they have to constantly zoom in, pan, and zoom out in
order to browse your web documents content. You can disable this zooming behavior by way of
a simple <meta> element in your designs header.

<metaname="viewport"content="width=devicewidth,minimumscale=1.0,maximumscale=1.0"/>
This meta element is only interpreted by a number of browsing devices (namely smartphones
and tablets). You should only disable the zoom feature if it enhances users ability to
consume content on your site. If youve formatted your design layout so that users dont need

to pan or zoom, the zoom feature actually impairs the user from navigating your content (which
only needs to scroll vertically). If youve incorrectly formatted your layout, however, disabling
the zoom feature will only further infuriate your users, as you are removing a very important
navigation capability of the browser.

5. CSS Media Queries

The final and most powerful technique that you can employ for responsive web design is a fairly
new feature of CSS technology called the media query. Very simply, CSS media queries allow
you to apply changes to your sites design based on the viewing size and capability of the device
on which your content is displayed. This is an extremely powerful tool for creating responsive
designs, and it has garnered support across all major mobile browsers (including Safari,
Chromium, Opera, and even the forthcoming Internet Explorer Mobile [Windows Phone 7]).
Heres a simple example of using a media query in your designs style sheet:

#wrapper{
width:80%;
margin:auto;
maxwidth:1200px;
minwidth:800px;
}
@mediascreenand(maxwidth:800px){
#wrapper{
width:90%;
minwidth:0;
}
}
In this example, we use the same fluid layout as before, but weve added a new minimum width
(800 pixels) to the style sheet. If the width of the screen drops below 800 pixels, all of the styles
defined in our media query will take effect, and the wrapper will be resized to 90% of the design
width (with no minimum width).

The power of media queries becomes more apparent in a layout with columns. Consider the
following example:

#wrapper{
width:80%;
margin:auto;
http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

6/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

maxwidth:1200px;
minwidth:800px;
}
#columnmain{
marginleft:200px;
}
#columnsidebar{
width:200px;
float:left;
}
@mediascreenand(maxwidth:800px){
#wrapper{
width:90%;
minwidth:0;
}
#columnmain{
marginleft:0;
}
#columnsidebar{
width:auto;
float:none;
}
}
In this example, when the width of the device screen drops below 800 pixels, we completely
reformat the appearance of the columns in our design. Rather than displaying a fixed-width
sidebar column, at 800 pixels or less, this design switches to a stacked column layout (with the
sidebar displaying on top or below the main column). This preserves space on smaller screens,
and provides an easy way to display multiple columns on devices that arent suited for columnbased layouts.

The great part about media queries is that you can define multiple queries in your style sheet.
You can have a design layout for desktop machines, a new layout for tablets, and yet another
new layout for smaller devices like mobile phones. The number of variations is limited only by
what you can do within your style sheet. Furthermore, the latest versions of desktop browsers
like Firefox, Safari, Chromium, and even Internet Explorer will recognize media queries as you
resize the browser window, allowing you to test your variations on the fly. If youre using said
modern browser, simply resize this window to see how my design responds to new device sizes.

Looking Forward

Responsive web design is an important next step in presentation on the web. Expect the device
landscape to broaden and diversify, and expect your job as a designer to increasingly become the
curator of a flexible and fluid online experience that is more focused on content and less on
pixels or devices. The idea of mobile vs. desktop is fairly new and very strong, but the mobile
distinction will likely become an element of features and convenience, rather than an element of
presentation, as it is so largely viewed today.

Posted on May 2nd, 2011 by Kyle in Development, Mobile.

Responsive Design Testing with Screenfly


http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

7/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

SharePoint 2010 Item Styles and DDWRT

30 comments

1.

Cyril says:

May 3, 2011 at 12:23 am

Very interesting introduction to this new technology.

Thanks

Reply
2. Easy Tabs and accessibility Path to SharePoint says:
May 3, 2011 at 7:52 am

[] Web Design is my topic of the day, with my RSS reader bringing me twoarticles on
this theme: Responsive Layouts Using CSS Media Queries, by Kyle Schaeffer, and Now
You See Me by Aaron []

Reply

3.

Claire says:

May 3, 2011 at 9:21 am

My company is in the throes of a massive site redesign, and the mobile/tablet aspect is
something weve been reluctant to touch, partially because mobile viewers represent such
a small fraction of our audience and partially because, as you mentioned, there is such a
variety of screen sizes and resolutions to take into account. While I dont think that
designing a beautiful mobile experience is as imperative for us and B2B software
companies in general as it is for, say, a media outlet or flash-sale site, your guide to
responsive design makes me think having a holistic strategy is worth doing.
Thanks for the great piece!

Reply

4.

Theo says:

May 5, 2011 at 1:38 am

Thank you, very nice introduction

Reply

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

8/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

5.

Tex says:

May 7, 2011 at 2:39 pm

I disagree with you on controlling whether or not a user can zoom. Theres no reason to
disable a persons phone like that. It prevents people from blowing up an image, etc.

Reply

Kyle says:

May 9, 2011 at 2:20 pm

Tex, you make a great point. As I mentioned in my post, I only support disabling
mobile zoom when it enhances the users ability to consume content. Your example,
in which users zoom in on an image, is a very important scenario to consider.

In many cases, I prefer to place a hyperlink around my images that allow users to
view the full-size version of that image (usually on a blank page that does not disable
the zoom feature).

Reply
6. Responsive Web Desgin | Brandon Houlihan says:
May 15, 2011 at 9:53 am

[] Kyle Schaeffer []

Reply

7.

Mikael says:

May 27, 2011 at 3:25 am

Hi Kyle thanks for sharing your thoughts. Have you tried implementing a responsive
layout using media queries in SP 2010? If yes, Im veruy interested in your learnings.
Thanks, Mikael

Reply

Kyle says:

May 31, 2011 at 2:57 pm

Mikael, I havent used this in SharePoint quite yet, but Im sure Ill have the
opportunity to do so very soon. SharePoint is a particularly tricky beast, mostly
because it uses a lot of tables and fixed-width interface features, so Im sure that it
will be quite the challenge to figure out how to deal with the outliers.

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

9/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer
Reply

8. Responsive Design Testing with Screenfly | Kyle Schaeffer - Web Design and SharePoint Branding
says:
June 7, 2011 at 12:53 pm

[] Marcotte, just today, released a new book on the subject, of which Im quite excited.
My last post was all about responsive web design, and after writing the article, I couldnt
help but ask []

Reply

9.

StephB says:

June 8, 2011 at 9:48 am

Media queries are great and I love being able to have one site for both mobile and desktop.
Although with setting some of the content to display: none, I feel like I should offer a link
back to the full version of the site for mobile users. How do I accomplish turning off the
mobile stylesheets?

Reply

Kyle says:

June 8, 2011 at 10:17 am

StephB, when you add media queries to your design, theyre always in effect there
is no toggle to turn them on or off. Personally, I prefer to always show all content on
all screen sizes; I use media queries to format that content to display differently
based on the amount of space that is available.

If you want to be able to toggle between mobile and desktop view for users on
smaller screens, youll have to use a server-side programming language (like PHP or
APS.NET) to decide when the mobile stylesheet is attached to your HTML
documents.

Reply

Sam says:

June 22, 2011 at 12:36 pm

You can switch media queries on and off by utilizing alternate stylesheets and a
styleswitcher utilizing a cookie to mark user preference. You can use inline media
queries by default, then switch it for a stylesheet with a static layout (or a blank one
all together if you are using a seperate mobile stylesheet to enhance your default
desktop styles). I would start here

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

10/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer
http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html or cook up a
jquery switching mechanism of your own.

Reply

10.

Matt says:

August 17, 2011 at 8:05 pm

Site looks great on my 4.3 in archos tablet, except one of your code snippets (meta
viewport) isnt wrapping so its overflowing and making the whole page twice as wide.
Could be how my browser displays that type of markup by default.

Aside from that small bug, your site looks great and reads great!

Reply

11.

Matt says:

August 17, 2011 at 8:22 pm

Edit: my wifi connection must have been weak. Upon reloading, the page shaped up
exactly as it should. So much for trying to pull a fast one on ya!

Reply

12.

Greg says:

September 2, 2011 at 9:25 am

Not really sure why, but iPad doesnt adapt with a simple max-width media query. Might
have something to do with the automatic scaling. You have to set max-device-width and
then youre into the world of targeting devices instead of viewports. Grr.

Reply
13. v5, the Responsive HTML5 Master Page for SharePoint 2010 | Kyle Schaeffer - Web Design and
SharePoint Branding says:

October 3, 2011 at 4:25 pm

[] SharePoint 2010. It makes good use of the amazing new features of both HTML5 and
CSS3, including CSS3 media queries. The master page is extremely simplistic in nature,
and is truly meant to serve as a framework for []

Reply

14.

Pablo Vos says:

October 13, 2011 at 5:50 am

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

11/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer
I am so going to use this in my day to day webdevelopment for Out of Site

Reply

15.

Thomas says:

October 21, 2011 at 4:06 pm

This is a great article. Im currently working on making my blog responsive. I had all the
CSS media queries in place which was fine for browser but didnt work on mobile. Reading
your post I quickly realised that I had missed the meta information for the viewport.

Reply
16. Responsive web first principles | Anita Luckett says:
November 1, 2011 at 10:55 am

[] to reorder content for specific devices. Kyle Shaeffer gives useful examples in his blog
at: http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
(which references Marcottes blog and book) as well as a good overview of practical []

Reply
17. Responsive | Stuart Kennedy's Blog says:
January 8, 2012 at 6:57 pm

[] design, most of which are easy to find via Google. I did find one particular article
Responsive layouts using CSS Media Queries by Kyle Schaeffer which is easy to
understand and provides a nice intro to Responsive design []

Reply

18.

Trevor says:

March 14, 2012 at 10:37 am

A very interesting article Kyle. Thank you.

Reply
19. SharePoint, HTML5, Mobile Web & More | SharePoint 2010 Migration says:
March 14, 2012 at 12:51 pm

[] couple of other useful reads on his site dealing with mobile SharePoint and responsive
design herehttp://kyleschaeffer.com/best-practices/responsive-layouts-using-css-mediaqueries/and []

Reply

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

12/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer

20.

DJ Monzyk says:

March 21, 2012 at 5:07 pm

Warning for anyone trying to use this approach for anything other than a Publishing
Site.. In the pop-up Dialogs in IE9, any dialog that contain rich-text edit controls WILL
NOT WORK.

http://social.technet.microsoft.com/Forums/enUS/sharepoint2010setup/thread/6bfba2ca-9af9-4b88-af01-1e119351ffd4/

http://corriehaffly.wordpress.com/2011/12/16/ie9-and-sharepoint-2010-are-notcompatible-for-intranets-team-sites-etc/

Reply
21. 15 Tutorials to Get You Started with Responsive Web Design says:
June 5, 2012 at 4:17 am

[] 10. Responsive Layouts Using CSS Media Queries []

Reply

22.

tom says:

July 24, 2012 at 10:11 am

hey just wondering if anybody knows how to use the height 100% in the css because i have
a 3 column website that is responsive using media queiries but the divs i have applied to
100% height on do not go to the size of the div that they are contained in they are only
using a simple float left and right and no positioning and i just cant figure it out =C this
was a great article to read helped me out a lot =D

Reply
23. Container overflow issue says:
July 30, 2012 at 6:40 am

[] <li><a href=""><img src="http://lorempixel.com/300/300/abstract/10&quot; alt=""


width="300" height="300" /></a></li> so when there's not enough width, first the become
only one above the other instead of in pairs, then th ewhole div drops down. You would do
better to make everything, including images, margins, padding etc. % widths. Media
queries can do this by making images max-width: 100%; see Responsive Layouts Using
CSS Media Queries | Kyle Schaeffer Web Design and SharePoint Branding []

Reply
24. Fluid vs. Responsive, or how to design a choreography for the content | Renomme blogg | Teaming

http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

13/15

2/19/2016

ResponsiveLayoutsUsingCSSMediaQueries/KyleSchaeffer
up for you says:

February 8, 2013 at 5:30 am

[] Responsive Layouts Using CSS Media Queries by Kyle Schaeffer []

Reply
25. C/D/H Talks Tech Responsive Design with SharePoint 2010 says:
March 1, 2013 at 8:47 am

[] Schaeffer took this approach and applied it directly to a start master page for
SharePoint 2010. http://kyleschaeffer.com/development/responsive-layouts-using-cssmedia-queries/ . If you have a custom application running on a page and want a way to
template displaying data or []

Reply

26.

Hidayt Rahman says:

May 1, 2015 at 8:01 am

Nice article..

But I have some doubts about scale.

What is the Difference between minimum-scale=1.0 and maximum-scale=1.0 ?


May I use separately ?

Reply

Post a comment

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

PostComment
http://kyleschaeffer.com/development/responsivelayoutsusingcssmediaqueries/

14/15

Вам также может понравиться