SlideShare a Scribd company logo
1 of 4
Download to read offline
.net technique css




CSS adaptive layouts
with media queries                                                                                                                                                           l CD
                                                                                                                                                             Your essentia uire
                                                                                                                                                                       ’ll req
                                                                                                                                                             All the files you
Create a beautiful website employing adaptive layouts and optimised for the                                                                                  for this tutori
                                                                                                                                                                             al can be
                                                                                                                                                                              issue’s CD.
                                                                                                                                                             found on this
latest mobile devices. Aaron Gustafson, founder of Easy! Designs, explains how

Knowledge needed Intermediate CSS                                                           realise that there was more to it and started to appreciate it for those things
Requires Text editor, modern browser, project files                                         that made it unique. Those who ‘got it’ started pushing back, arguing that:
                                                                                            l The fold doesn’t exist
Project time 30 minutes
                                                                                            l People aren’t confused by scrollbars
                                                                                            l Users hate those inane animated intros and constant ‘loading’ dialogs
           In 1993, NCSA’s Mosaic browser gave the web a visual makeover                       We were finally starting to understand that this medium was more than the
           that changed the medium forever. Designers from the print world                  sum of its parts.
           began experimenting with this new canvas and did their best with                    As the years bore on, we began to fully comprehend how different the web
the rudimentary tools that were available to them at the time. The web                      was from any medium we’d known before. It was print because people were
became home to thousands of ‘brochure’ sites, and print concepts (the                       printing out web pages. It was interactive because people were watching
‘fold’, for one) began to find their way into pretty much every discussion of               movies and playing games on it. It was a platform because people were
web page layout. The web became print.                                                      replacing their desktop applications with online equivalents. It was all these
   Within a year, the web came alive with audio, followed quickly by video

                                                                                             Drafted back in 2001, media
and animation. Tools such as Director and FutureSplash beckoned to
designers from the motion graphics world and they came in droves. The
web went through its second major shift and nearly every big site was
redesigned as if it were an interactive CD-ROM. Any project that didn’t have
the budget for full-scale interactive reinvention got an animated splash page
                                                                                             queries are finally supported
and at nearly every design discussion someone would decry the scrollbar.
The web became a kiosk.                                                                      widely enough to be useful
   Over time, the geeks returned and reshaped the web, yet again, as a series
of APIs upon which software could be built. Developers more familiar with                   things and more. Beyond that, people were also beginning to demand that
programming languages than markup poked, prodded and beat the building                      the web be available to them wherever they were: on their television, their
blocks of the web into submission, with their discussions centring around                   video game console, their mobile phone and even their refrigerator. We
bringing the desktop to the browser. The web became a platform.                             wanted the web everywhere.
   This was all understandable, really. The web was new to us and, as with any
new experience, we tried to make sense of it by focusing on its similarity to               Adaptation
what we already understood. Thankfully, many working on the web began to                    As designers and developers, we began noticing this trend early on, mainly
                                                                                            because we were the very people placing these demands on the web (well,
                                                                                            maybe not the refrigerator one). As such, the CSS2 spec introduced the
                                                                                            capability for designers to tailor styles to a particular medium. Out of the
                                                                                            gate, it proposed support for computers, mobile devices, televisions, printers,
                                                                                            projectors and assistive devices.
                                                                                               Shortly after the idea of media-specific styles was conceived, vendors began
                                                                                            putting it into practice. The ‘screen’ medium was, of course, picked up by
                                                                                            default in browsers, but some added support for print style sheets as well,
                                                                                            opening the door for the first truly adaptive layouts.
                                                                                               In 2002, Eric Meyer made a case for jettisoning the separately maintained
                                                                                            ‘printer friendly’ pages in favour of a style sheet designed specifically for the
                                                                                            print medium. Using CSS, he showed us how to hide the stuff that didn’t make
                                                                                            sense in print (navigation, background images) and even demonstrated a few
                                                                                            ways to cater specifically to the print experience (such as using generated
                                                                                            content to expose link destinations). Suddenly, the vision for the web of
                                                                                            ‘publish once, deploy everywhere’ was looking like a reality.
                                                                                               A few short years later, Cameron Adams gave us the first resolution-
                                                                                            dependant layout as a way of helping a site adapt to the myriad of browser
                                                                                            dimensions it might be called upon to fill. The technique built upon the
                                                                                            concept of style sheet switching popularised by Paul Sowden and was
Adapt or die In this tutorial, we’ll look at how to                                         introduced to address the 800×600 vs 1024×768 debate. But it did far more
make your site digestible on different devices. These techniques are
especially useful when sites deal with lots of detailed information, such as this BarCamp   than that, paving the way for other techniques such as ‘Invasion of the Body
Chattanooga timetable (see page 73 to see how Daniel Ryan made it work for mobile)          Switchers’ and ‘Switchy McLayout’. Though this technique (and the others that



70     .net summer 2010
.net technique css




Above The gorgeous homepage of one Simon Collison works on an iPad if you hold it
horizontally, but is a bit difficult to appreciate on a smaller screen

Right When the iPad is vertical, the two-column version of the site is really quite nice


followed) worked well, they all relied almost entirely on JavaScript to work.
Then along came media queries.
    Drafted as a module of CSS3 back in 2001, CSS media queries are finally
supported widely enough to be useful. In essence, they are just more
descriptive media assignments. Here’s an example:

@media (min-width:801px) {
 /* Browser window must be at least 801px wide to get these rules */
}

   In effect, media queries are very similar to the hacky filters we used to use
and the Conditional Comments you’re probably using today, but are far more
robust. And, they can be used wherever media types can be assigned (ie link
and style elements, @import directives and @media blocks).                                 bit as good at different screen widths. While we’re at it, we’ll make sure the
   The CSS3 module that defines media queries reached the Candidate                        appropriate view is triggered on the latest versions of the iPhone and iPad,
Recommendation stage last Summer and offers introspection into the                         both of which have decent support for media queries.
browsing environment based on the following factors:                                           Media queries fit perfectly into the progressive enhancement toolbox
l browser dimensions (width, height and aspect-ratio);                                     because of the very nature of CSS: anything a browser doesn’t understand
l device dimensions (device-width, device-height and device-aspect-ratio);                 is ignored. By crafting our media queries carefully, we can create adaptive
l browser orientation;                                                                     layouts that don’t cause problems for browsers that don’t understand them.
l colour information (color, color-index and monochrome) and
l device-specific details such as its resolution, whether its display is grid              Application
or bitmap-based, and the scan type (progressive or interlaced … applicable                 Keeping all of that in mind, we’ll apply our adaptive layouts on top of Simon’s
to televisions).                                                                           existing CSS, only altering his original code if absolutely necessary. To play
   Not all of these properties are currently supported, but many are.                      along at home, fire up your favourite editor and open css/screen.css from the
Additionally, most of them support min and max prefixes like the one used                  files on this issue’s CD.
above, enabling you to tailor your queries very specifically.                                  We’ll sequester our alternate layouts at the very bottom of Colly’s CSS
   Media queries can also be combined using the and keyword and negated                    file inside two @media blocks. By setting things up this way, rules from the
using the not keyword. This may lead you to believe that you could get really              original four-column layout will cascade down to both alternate layouts and
crazy with your media queries, but the syntax is still pretty limited; you can’t           the changes we make to the two-column layout will cascade down to our one-
get nearly as specific as you could in a true programming language such                    column layout. That greatly simplifies things and cuts down on the number of
as JavaScript or PHP (eg if A and B or B and C, but not A and C). You can,                 rules we need to write/rewrite.
however, imply ‘or’ using a comma:                                                             Let’s begin with the two-column layout. If you want to watch our progress,
                                                                                           open index.html in a modern browser and reduce the window width to the
@media (max-width:800px), projection {                                                     point where a horizontal scrollbar appears (989px, as Colly’s design is fixed at
 /* The browser window width must not exceed 800px or this device                          990px wide).
   must be projected media for these rules to apply */                                         The width required for a two-column version of the site is 510px (to
}                                                                                          maintain his original margins, padding, etc for the page). So we’ll start by
                                                                                           adjusting the width of div#page to 468px:
Media queries open up so many possibilities that it’s hard to know where to
begin, so it’s best to start off slow. In this tutorial we’ll take an existing web         @media (max-width:989px) {
page (the homepage of one Mr Simon Collison, seen at colly.com) and use                     div#page { width:468px; }
media queries to create two alternate views of the site that make it look every            }



                                                                                                                                      .net summer 2010        71     next>
.net technique css




That little bit does quite a lot, thanks to Colly’s use of float to create the       Right The iPhone,
columns. Now, we just need to add a few more rules to adjust the spacing             with its condensed
                                                                                     viewport, really
of the design:                                                                       benefits from the
                                                                                     one-column layout
.home ul#navigation_pri, .home ul#subnav-b { padding-bottom: 30px; }                 when held in its
ul#navigation_pri li, ul#subnav-a li, ul#subnav-b li { margin-bottom: 10px; }        vertical orientation
ul#navigation_pri li:nth-child(even), ul#subnav-a li:nth-child(even),
                                                                                     Above In landscape
ul#subnav-b li:nth-child(even) { margin-right: 0; }                                  mode, the iPhone
#page ul[id^=subnav] { margin-bottom: 0; }                                           can handle the two-
                                                                                     column view just fine
You’ll notice that we’re employing :nth-child() to select every other navigation
item to adjust its right margin. Employing this selector helps us reduce the
number of markup changes we might otherwise need to make. We can feel
confident it will work because it’s being used inside of a media query, and          well, we can correct that. You’ll find the background property set on div#page
support for :nth-child() predated support for media queries in pretty much           as part of the first declaration block in the Layout section of the style sheet,
every browser.                                                                       and you can add this tweak there.
   Another thing you’re likely to notice is that there are still a few issues with      Now sit back and admire your handiwork; you’ve just made an adaptive
our design; namely, the External References heading is all the way on the right      layout using media queries!
and slightly cut off. To correct that, we’ll make the first of a few subtle tweaks
to the site’s original rules: under Headings in the style sheet, find the selector   One-column view
h2.ext-dests a and change 0 0 to center top in the background property               Our job is not done, though; we still have a one-column view to create. Create
to adjust the background image’s positioning.                                        a second @media block and have it query for a maximum width of 509px
   Another subtle tweak worth making involves the background image used              (since our two-column layout required 510px of width).
on div#page. With no background positioning set, the grid gets a little off at

                                                                                      Media queries open up so
this smaller size, but by setting its background positioning to center top as


 Resources Where to find out more
                                                                                      many possibilities that it’s
                                                                                      hard to know where to begin
                                                                                        In this single column mode, we’ll optimise the layout for 320px wide, so
                                                                                     set the width on dix#page to 310px and reduce its left and right padding to a
                                                                                     mere 5px each:

                                                                                     @media (max-width:509px) {
                                                                                      div#page { padding:30px 5px 10px; width:310px; }
                                                                                     }
   Responsive Web Design                  Resolution dependent layout
   alistapart.com/articles/responsive-    themaninblue.com/experiment/               Resizing your browser to make it a bit narrower will trigger this layout. You
   web-design                             ResolutionLayout/                          should see just about everything fall into place, with a few remaining issues to
   As I was writing this tutorial,        An oldie but goody, Cameron                address. The first one is the masthead: it’s not centred like it should be. That’s
   Ethan Marcotte was putting             Adam’s seminal work uses                   quickly resolved with:
   together his own thoughts on           JavaScript to offer up alternate
   the subject for A List Apart.          layouts based on screen width.             h1 a { width: 310px; background-position: center top; }
                                                                                     h1 a:hover { background-position: center -90px; }



<prev     72    .net summer 2010
Pro tips Daniel Ryan’s top tips for adaptive layouts
                                                         style sheet will adjust all fonts to scale based on the   Then, in our mobile style sheet, we hid the thead
                          Daniel Ryan                    native text size of the device.                           and set our table, th and td elements to display:
                                                                                                                   block (in addition to applying margins, padding
                         Job title Freelance
                                                         Make tables single-column                                 and so on, to lay it all out nicely).
                         web developer
                                                         The BarCamp Chattanooga schedule (barcampchatt.
                         Expertise Front- and
                                                         com/schedule/) listed all of the presentations in a       Convert nav lists to drop-downs
                         back-end development
                                                         table that doesn’t fit well within a narrow mobile        Most sites have either horizontal or vertical
                         URL dryan.com
                                                         viewport. With only a modicum of additional               navigation. However, in mobile layouts (the most
                                                         markup and a few lines of CSS, however, we made           successful of which tend to be single-column),
  Set a larger default type size                         the table display vertically instead. Since, in a         these navigation lists take up valuable real
  On average, modern mobile screens are 1.5x             vertical layout, the column headers are no longer         estate. Using JavaScript, it’s possible to convert
  denser (in terms of pixels) than their desktop         visually connected to the items under them, the           the navigation into a select that takes up only
  counterparts, so type appears smaller to the           labels needed to be reproduced within each cell.          one line in the layout while preserving all of the
  user. If you’re already using relative font sizes      We solved this by employing a span to hold the            original functionality. If your site uses a nested
  throughout your CSS, this is easy to address;          room information within each cell and, in our             nav scheme, consider using optgroup in your
  adding body { font-size: 100%; } to your mobile        default style sheet, hid them with display: none.         script. See gist.github.com/412126 for code.




    Next up are the navigation blocks. They look nice at this width, but to really    iOS 4.0, but is already available on the iPad) into our media queries, we end
take advantage of the layout, we should probably make them a bit wider.               up with the following:
Unfortunately, however, the background images applied to each span.label in
the blocks are set to repeat, so we’ll need to adjust that too.                        @media (max-width:989px),
    While we’re at it, why don’t we bump the font size of the blocks up ever so                  (max-device-width:480px) and (orientation:landscape),
slightly, to make them easier to read in the compressed space? This will keep                    (min-device-width:481px) and (orientation:portrait) {
the line lengths nicer in the wider blocks as well:                                     /* 2-column */
                                                                                       }
ul#navigation_pri li, ul#subnav-a li,                                                  @media (max-width:509px),
ul#subnav-b li { width: 290px; font-size: 1.25em; }                                              (max-device-width:480px) and (orientation:portrait) {
ul#navigation_pri li a span.label, ul#subnav-a li a span.label,                         /* 1-column */
ul#subnav-b li a span.label { background-repeat: no-repeat; }                          }

   Finally, to tighten up the layout just a bit more, we’ll adjust the spacing        In theory, by using the 480px/481px cut-off on device-width, we should be
around the navigation lists and align the footer text left to keep it from            able to get each device to operate properly. Unfortunately, those solitary
looking odd with such short lines:                                                    max-width queries throw a spanner in the works. In order to minimise their
                                                                                      impact, we’ll need to convert each into a compound query. Also, for the older
.home ul#navigation_pri, .home ul#subnav-b { padding-bottom: 30px; }                  iPhones (pre-iOS 4.0) we’ll still want an alternate view, so we’ll give them the
div#siteinfo { text-align: left; }                                                    two-column as middle ground:

Huzzah! Now we have an attractive single-column layout.                                @media (min-device-width:1024px) and (max-width:989px),
                                                                                                 screen and (max-device-width:480px),
Wither the iPad?                                                                                 (max-device-width:480px) and (orientation:landscape),
As I mentioned, another key task in this exercise is going to be making these                    (min-device-width:481px) and (orientation:portrait) {
layouts apply on the iPhone and iPad. If you happened to view the current               /* 2-column */
state of things on either of those devices, you’ll notice that the results aren’t      }
optimal. Let’s fix that.                                                               @media (min-device-width:1024px) and (max-width:509px),
   The first thing we need to do is make an adjustment to the way these                          (max-device-width:480px) and (orientation:portrait) {
devices handle the viewport. By introducing a new meta element to the page,             /* 1-column */
we can get one step closer to achieving our goal:                                      }

<meta name="viewport" content="width=device-width"/>                                  Lastly, if you’ve been following along in Safari or Chrome, I’ve got a special
                                                                                      treat just for you. Add this line of code outside of the media blocks and then
    This instruction tells devices that support it to set the viewport width          resize your browser:
to the width of the device itself. Now we can begin our iPad and iPhone
optimisations in earnest. But before we do, we should consider what layouts            * { -webkit-transition: width .5s; }
will look best on each device and, beyond that, what layouts would look best
in each orientation (since media queries give us introspection into that as           Nice. Okay, once you stop playing, apply what you’ve learned here to your
well). To me, what seems to make the most sense is giving the iPhone the              own website. After all, Colly shouldn’t be the only one having all the fun! l
single-column view when it’s held vertically and the two-column version when
it’s held horizontally.
    As for the iPad, its vertical orientation would probably best benefit from
                                                                                                           About the author
the two-column view, while the horizontal can probably handle the original                                 Name Aaron Gustafson
four-column layout just fine.                                                                              Site easy-designs.net
    To accomplish all of this with media queries, we can use the device                                    Areas of expertise Front- and back-end development,
measurements to guide us. The iPhone display measures 480px x 320px,                                       strategy
while the iPad offers a much larger canvas of 1024px x 768px. Factoring                                    Clients The Amanda Project, The Charter for Compassion
these dimensions and support for orientation (which comes to the iPhone in                                 The last thing I downloaded was … Opera 10.53



                                                                                                                                            .net summer 2010            73

More Related Content

Similar to CSS Adaptive Layouts with Media Queries

[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivityjylee6977
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivityjylee_kgit
 
Ten design tips for non-designers
Ten design tips for non-designersTen design tips for non-designers
Ten design tips for non-designersAnnika Oeser
 
Phase III Presentation
Phase III PresentationPhase III Presentation
Phase III PresentationGrey Vaisius
 
Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5pemi hua
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdfSonia Simi
 
Create A Tabbed Interface Part 2
Create A Tabbed Interface Part 2Create A Tabbed Interface Part 2
Create A Tabbed Interface Part 2Aaron Gustafson
 
Java _ Definition & Facts _ Britannica.pdf
Java _ Definition & Facts _ Britannica.pdfJava _ Definition & Facts _ Britannica.pdf
Java _ Definition & Facts _ Britannica.pdfRameswarGprec
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recentArtem Shymko
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkitsamuel-holt
 
Responsive Web Design Overview 2013
Responsive Web Design Overview 2013Responsive Web Design Overview 2013
Responsive Web Design Overview 2013Will Jayroe
 
Responsive design
Responsive designResponsive design
Responsive designStudioPixel
 
Devign Intervention: Explaining the Power of the Integrator
Devign Intervention: Explaining the Power of the IntegratorDevign Intervention: Explaining the Power of the Integrator
Devign Intervention: Explaining the Power of the Integratormicrosoftdesign
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
Responsive Design Talk @ Toronto Dev Derby March
Responsive Design Talk @ Toronto Dev Derby MarchResponsive Design Talk @ Toronto Dev Derby March
Responsive Design Talk @ Toronto Dev Derby Marchthemystic_ca
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNNAWAZ KHAN
 
Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud CommunitiesPeter Coffee
 
Bernard carlton a2_evaluation
Bernard carlton a2_evaluationBernard carlton a2_evaluation
Bernard carlton a2_evaluationLCarlton18
 
Large Volume Map Generation via Grid Computing
Large Volume Map Generation via Grid ComputingLarge Volume Map Generation via Grid Computing
Large Volume Map Generation via Grid ComputingJeffrey Stewart
 
Future of Open Source in a Cloudy World
Future of Open Source in a Cloudy WorldFuture of Open Source in a Cloudy World
Future of Open Source in a Cloudy WorldBret Piatt
 

Similar to CSS Adaptive Layouts with Media Queries (20)

[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
Ten design tips for non-designers
Ten design tips for non-designersTen design tips for non-designers
Ten design tips for non-designers
 
Phase III Presentation
Phase III PresentationPhase III Presentation
Phase III Presentation
 
Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5Rettig.Interaction Design History.V1.5
Rettig.Interaction Design History.V1.5
 
Flash Web Development.pdf
Flash Web Development.pdfFlash Web Development.pdf
Flash Web Development.pdf
 
Create A Tabbed Interface Part 2
Create A Tabbed Interface Part 2Create A Tabbed Interface Part 2
Create A Tabbed Interface Part 2
 
Java _ Definition & Facts _ Britannica.pdf
Java _ Definition & Facts _ Britannica.pdfJava _ Definition & Facts _ Britannica.pdf
Java _ Definition & Facts _ Britannica.pdf
 
Theming for mobile devices recent
Theming for mobile devices recentTheming for mobile devices recent
Theming for mobile devices recent
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkit
 
Responsive Web Design Overview 2013
Responsive Web Design Overview 2013Responsive Web Design Overview 2013
Responsive Web Design Overview 2013
 
Responsive design
Responsive designResponsive design
Responsive design
 
Devign Intervention: Explaining the Power of the Integrator
Devign Intervention: Explaining the Power of the IntegratorDevign Intervention: Explaining the Power of the Integrator
Devign Intervention: Explaining the Power of the Integrator
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Responsive Design Talk @ Toronto Dev Derby March
Responsive Design Talk @ Toronto Dev Derby MarchResponsive Design Talk @ Toronto Dev Derby March
Responsive Design Talk @ Toronto Dev Derby March
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
 
Creating Cloud Communities
Creating Cloud CommunitiesCreating Cloud Communities
Creating Cloud Communities
 
Bernard carlton a2_evaluation
Bernard carlton a2_evaluationBernard carlton a2_evaluation
Bernard carlton a2_evaluation
 
Large Volume Map Generation via Grid Computing
Large Volume Map Generation via Grid ComputingLarge Volume Map Generation via Grid Computing
Large Volume Map Generation via Grid Computing
 
Future of Open Source in a Cloudy World
Future of Open Source in a Cloudy WorldFuture of Open Source in a Cloudy World
Future of Open Source in a Cloudy World
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for EveryoneAaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jNeo4j
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 

Recently uploaded (20)

PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 

CSS Adaptive Layouts with Media Queries

  • 1. .net technique css CSS adaptive layouts with media queries l CD Your essentia uire ’ll req All the files you Create a beautiful website employing adaptive layouts and optimised for the for this tutori al can be issue’s CD. found on this latest mobile devices. Aaron Gustafson, founder of Easy! Designs, explains how Knowledge needed Intermediate CSS realise that there was more to it and started to appreciate it for those things Requires Text editor, modern browser, project files that made it unique. Those who ‘got it’ started pushing back, arguing that: l The fold doesn’t exist Project time 30 minutes l People aren’t confused by scrollbars l Users hate those inane animated intros and constant ‘loading’ dialogs In 1993, NCSA’s Mosaic browser gave the web a visual makeover We were finally starting to understand that this medium was more than the that changed the medium forever. Designers from the print world sum of its parts. began experimenting with this new canvas and did their best with As the years bore on, we began to fully comprehend how different the web the rudimentary tools that were available to them at the time. The web was from any medium we’d known before. It was print because people were became home to thousands of ‘brochure’ sites, and print concepts (the printing out web pages. It was interactive because people were watching ‘fold’, for one) began to find their way into pretty much every discussion of movies and playing games on it. It was a platform because people were web page layout. The web became print. replacing their desktop applications with online equivalents. It was all these Within a year, the web came alive with audio, followed quickly by video Drafted back in 2001, media and animation. Tools such as Director and FutureSplash beckoned to designers from the motion graphics world and they came in droves. The web went through its second major shift and nearly every big site was redesigned as if it were an interactive CD-ROM. Any project that didn’t have the budget for full-scale interactive reinvention got an animated splash page queries are finally supported and at nearly every design discussion someone would decry the scrollbar. The web became a kiosk. widely enough to be useful Over time, the geeks returned and reshaped the web, yet again, as a series of APIs upon which software could be built. Developers more familiar with things and more. Beyond that, people were also beginning to demand that programming languages than markup poked, prodded and beat the building the web be available to them wherever they were: on their television, their blocks of the web into submission, with their discussions centring around video game console, their mobile phone and even their refrigerator. We bringing the desktop to the browser. The web became a platform. wanted the web everywhere. This was all understandable, really. The web was new to us and, as with any new experience, we tried to make sense of it by focusing on its similarity to Adaptation what we already understood. Thankfully, many working on the web began to As designers and developers, we began noticing this trend early on, mainly because we were the very people placing these demands on the web (well, maybe not the refrigerator one). As such, the CSS2 spec introduced the capability for designers to tailor styles to a particular medium. Out of the gate, it proposed support for computers, mobile devices, televisions, printers, projectors and assistive devices. Shortly after the idea of media-specific styles was conceived, vendors began putting it into practice. The ‘screen’ medium was, of course, picked up by default in browsers, but some added support for print style sheets as well, opening the door for the first truly adaptive layouts. In 2002, Eric Meyer made a case for jettisoning the separately maintained ‘printer friendly’ pages in favour of a style sheet designed specifically for the print medium. Using CSS, he showed us how to hide the stuff that didn’t make sense in print (navigation, background images) and even demonstrated a few ways to cater specifically to the print experience (such as using generated content to expose link destinations). Suddenly, the vision for the web of ‘publish once, deploy everywhere’ was looking like a reality. A few short years later, Cameron Adams gave us the first resolution- dependant layout as a way of helping a site adapt to the myriad of browser dimensions it might be called upon to fill. The technique built upon the concept of style sheet switching popularised by Paul Sowden and was Adapt or die In this tutorial, we’ll look at how to introduced to address the 800×600 vs 1024×768 debate. But it did far more make your site digestible on different devices. These techniques are especially useful when sites deal with lots of detailed information, such as this BarCamp than that, paving the way for other techniques such as ‘Invasion of the Body Chattanooga timetable (see page 73 to see how Daniel Ryan made it work for mobile) Switchers’ and ‘Switchy McLayout’. Though this technique (and the others that 70 .net summer 2010
  • 2. .net technique css Above The gorgeous homepage of one Simon Collison works on an iPad if you hold it horizontally, but is a bit difficult to appreciate on a smaller screen Right When the iPad is vertical, the two-column version of the site is really quite nice followed) worked well, they all relied almost entirely on JavaScript to work. Then along came media queries. Drafted as a module of CSS3 back in 2001, CSS media queries are finally supported widely enough to be useful. In essence, they are just more descriptive media assignments. Here’s an example: @media (min-width:801px) { /* Browser window must be at least 801px wide to get these rules */ } In effect, media queries are very similar to the hacky filters we used to use and the Conditional Comments you’re probably using today, but are far more robust. And, they can be used wherever media types can be assigned (ie link and style elements, @import directives and @media blocks). bit as good at different screen widths. While we’re at it, we’ll make sure the The CSS3 module that defines media queries reached the Candidate appropriate view is triggered on the latest versions of the iPhone and iPad, Recommendation stage last Summer and offers introspection into the both of which have decent support for media queries. browsing environment based on the following factors: Media queries fit perfectly into the progressive enhancement toolbox l browser dimensions (width, height and aspect-ratio); because of the very nature of CSS: anything a browser doesn’t understand l device dimensions (device-width, device-height and device-aspect-ratio); is ignored. By crafting our media queries carefully, we can create adaptive l browser orientation; layouts that don’t cause problems for browsers that don’t understand them. l colour information (color, color-index and monochrome) and l device-specific details such as its resolution, whether its display is grid Application or bitmap-based, and the scan type (progressive or interlaced … applicable Keeping all of that in mind, we’ll apply our adaptive layouts on top of Simon’s to televisions). existing CSS, only altering his original code if absolutely necessary. To play Not all of these properties are currently supported, but many are. along at home, fire up your favourite editor and open css/screen.css from the Additionally, most of them support min and max prefixes like the one used files on this issue’s CD. above, enabling you to tailor your queries very specifically. We’ll sequester our alternate layouts at the very bottom of Colly’s CSS Media queries can also be combined using the and keyword and negated file inside two @media blocks. By setting things up this way, rules from the using the not keyword. This may lead you to believe that you could get really original four-column layout will cascade down to both alternate layouts and crazy with your media queries, but the syntax is still pretty limited; you can’t the changes we make to the two-column layout will cascade down to our one- get nearly as specific as you could in a true programming language such column layout. That greatly simplifies things and cuts down on the number of as JavaScript or PHP (eg if A and B or B and C, but not A and C). You can, rules we need to write/rewrite. however, imply ‘or’ using a comma: Let’s begin with the two-column layout. If you want to watch our progress, open index.html in a modern browser and reduce the window width to the @media (max-width:800px), projection { point where a horizontal scrollbar appears (989px, as Colly’s design is fixed at /* The browser window width must not exceed 800px or this device 990px wide). must be projected media for these rules to apply */ The width required for a two-column version of the site is 510px (to } maintain his original margins, padding, etc for the page). So we’ll start by adjusting the width of div#page to 468px: Media queries open up so many possibilities that it’s hard to know where to begin, so it’s best to start off slow. In this tutorial we’ll take an existing web @media (max-width:989px) { page (the homepage of one Mr Simon Collison, seen at colly.com) and use div#page { width:468px; } media queries to create two alternate views of the site that make it look every } .net summer 2010 71 next>
  • 3. .net technique css That little bit does quite a lot, thanks to Colly’s use of float to create the Right The iPhone, columns. Now, we just need to add a few more rules to adjust the spacing with its condensed viewport, really of the design: benefits from the one-column layout .home ul#navigation_pri, .home ul#subnav-b { padding-bottom: 30px; } when held in its ul#navigation_pri li, ul#subnav-a li, ul#subnav-b li { margin-bottom: 10px; } vertical orientation ul#navigation_pri li:nth-child(even), ul#subnav-a li:nth-child(even), Above In landscape ul#subnav-b li:nth-child(even) { margin-right: 0; } mode, the iPhone #page ul[id^=subnav] { margin-bottom: 0; } can handle the two- column view just fine You’ll notice that we’re employing :nth-child() to select every other navigation item to adjust its right margin. Employing this selector helps us reduce the number of markup changes we might otherwise need to make. We can feel confident it will work because it’s being used inside of a media query, and well, we can correct that. You’ll find the background property set on div#page support for :nth-child() predated support for media queries in pretty much as part of the first declaration block in the Layout section of the style sheet, every browser. and you can add this tweak there. Another thing you’re likely to notice is that there are still a few issues with Now sit back and admire your handiwork; you’ve just made an adaptive our design; namely, the External References heading is all the way on the right layout using media queries! and slightly cut off. To correct that, we’ll make the first of a few subtle tweaks to the site’s original rules: under Headings in the style sheet, find the selector One-column view h2.ext-dests a and change 0 0 to center top in the background property Our job is not done, though; we still have a one-column view to create. Create to adjust the background image’s positioning. a second @media block and have it query for a maximum width of 509px Another subtle tweak worth making involves the background image used (since our two-column layout required 510px of width). on div#page. With no background positioning set, the grid gets a little off at Media queries open up so this smaller size, but by setting its background positioning to center top as Resources Where to find out more many possibilities that it’s hard to know where to begin In this single column mode, we’ll optimise the layout for 320px wide, so set the width on dix#page to 310px and reduce its left and right padding to a mere 5px each: @media (max-width:509px) { div#page { padding:30px 5px 10px; width:310px; } } Responsive Web Design Resolution dependent layout alistapart.com/articles/responsive- themaninblue.com/experiment/ Resizing your browser to make it a bit narrower will trigger this layout. You web-design ResolutionLayout/ should see just about everything fall into place, with a few remaining issues to As I was writing this tutorial, An oldie but goody, Cameron address. The first one is the masthead: it’s not centred like it should be. That’s Ethan Marcotte was putting Adam’s seminal work uses quickly resolved with: together his own thoughts on JavaScript to offer up alternate the subject for A List Apart. layouts based on screen width. h1 a { width: 310px; background-position: center top; } h1 a:hover { background-position: center -90px; } <prev 72 .net summer 2010
  • 4. Pro tips Daniel Ryan’s top tips for adaptive layouts style sheet will adjust all fonts to scale based on the Then, in our mobile style sheet, we hid the thead Daniel Ryan native text size of the device. and set our table, th and td elements to display: block (in addition to applying margins, padding Job title Freelance Make tables single-column and so on, to lay it all out nicely). web developer The BarCamp Chattanooga schedule (barcampchatt. Expertise Front- and com/schedule/) listed all of the presentations in a Convert nav lists to drop-downs back-end development table that doesn’t fit well within a narrow mobile Most sites have either horizontal or vertical URL dryan.com viewport. With only a modicum of additional navigation. However, in mobile layouts (the most markup and a few lines of CSS, however, we made successful of which tend to be single-column), Set a larger default type size the table display vertically instead. Since, in a these navigation lists take up valuable real On average, modern mobile screens are 1.5x vertical layout, the column headers are no longer estate. Using JavaScript, it’s possible to convert denser (in terms of pixels) than their desktop visually connected to the items under them, the the navigation into a select that takes up only counterparts, so type appears smaller to the labels needed to be reproduced within each cell. one line in the layout while preserving all of the user. If you’re already using relative font sizes We solved this by employing a span to hold the original functionality. If your site uses a nested throughout your CSS, this is easy to address; room information within each cell and, in our nav scheme, consider using optgroup in your adding body { font-size: 100%; } to your mobile default style sheet, hid them with display: none. script. See gist.github.com/412126 for code. Next up are the navigation blocks. They look nice at this width, but to really iOS 4.0, but is already available on the iPad) into our media queries, we end take advantage of the layout, we should probably make them a bit wider. up with the following: Unfortunately, however, the background images applied to each span.label in the blocks are set to repeat, so we’ll need to adjust that too. @media (max-width:989px), While we’re at it, why don’t we bump the font size of the blocks up ever so (max-device-width:480px) and (orientation:landscape), slightly, to make them easier to read in the compressed space? This will keep (min-device-width:481px) and (orientation:portrait) { the line lengths nicer in the wider blocks as well: /* 2-column */ } ul#navigation_pri li, ul#subnav-a li, @media (max-width:509px), ul#subnav-b li { width: 290px; font-size: 1.25em; } (max-device-width:480px) and (orientation:portrait) { ul#navigation_pri li a span.label, ul#subnav-a li a span.label, /* 1-column */ ul#subnav-b li a span.label { background-repeat: no-repeat; } } Finally, to tighten up the layout just a bit more, we’ll adjust the spacing In theory, by using the 480px/481px cut-off on device-width, we should be around the navigation lists and align the footer text left to keep it from able to get each device to operate properly. Unfortunately, those solitary looking odd with such short lines: max-width queries throw a spanner in the works. In order to minimise their impact, we’ll need to convert each into a compound query. Also, for the older .home ul#navigation_pri, .home ul#subnav-b { padding-bottom: 30px; } iPhones (pre-iOS 4.0) we’ll still want an alternate view, so we’ll give them the div#siteinfo { text-align: left; } two-column as middle ground: Huzzah! Now we have an attractive single-column layout. @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), Wither the iPad? (max-device-width:480px) and (orientation:landscape), As I mentioned, another key task in this exercise is going to be making these (min-device-width:481px) and (orientation:portrait) { layouts apply on the iPhone and iPad. If you happened to view the current /* 2-column */ state of things on either of those devices, you’ll notice that the results aren’t } optimal. Let’s fix that. @media (min-device-width:1024px) and (max-width:509px), The first thing we need to do is make an adjustment to the way these (max-device-width:480px) and (orientation:portrait) { devices handle the viewport. By introducing a new meta element to the page, /* 1-column */ we can get one step closer to achieving our goal: } <meta name="viewport" content="width=device-width"/> Lastly, if you’ve been following along in Safari or Chrome, I’ve got a special treat just for you. Add this line of code outside of the media blocks and then This instruction tells devices that support it to set the viewport width resize your browser: to the width of the device itself. Now we can begin our iPad and iPhone optimisations in earnest. But before we do, we should consider what layouts * { -webkit-transition: width .5s; } will look best on each device and, beyond that, what layouts would look best in each orientation (since media queries give us introspection into that as Nice. Okay, once you stop playing, apply what you’ve learned here to your well). To me, what seems to make the most sense is giving the iPhone the own website. After all, Colly shouldn’t be the only one having all the fun! l single-column view when it’s held vertically and the two-column version when it’s held horizontally. As for the iPad, its vertical orientation would probably best benefit from About the author the two-column view, while the horizontal can probably handle the original Name Aaron Gustafson four-column layout just fine. Site easy-designs.net To accomplish all of this with media queries, we can use the device Areas of expertise Front- and back-end development, measurements to guide us. The iPhone display measures 480px x 320px, strategy while the iPad offers a much larger canvas of 1024px x 768px. Factoring Clients The Amanda Project, The Charter for Compassion these dimensions and support for orientation (which comes to the iPhone in The last thing I downloaded was … Opera 10.53 .net summer 2010 73