Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
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