Web Design Archives - Precision Global Marketing

Top Web Design and UI Trends for 2021

PGM Team — Mon, 01 Feb 2021 19:25:42 +0000

Jumpstart new projects and website redesigns with a few of the hottest elements in design for 2021. These trending styles are sure to help you create in a way that’ modern, fresh and perfect for the new year.

Here’s the best part: Many of these design elements can be mixed and matched with each other (and many other elements as well) to help you create something as unique and special as your projects.

Many of the trends that are emerging are extensions of things we predicted (and saw in 2020) – dark mode, breaking typography rules, artistic illustrations, color, layering, and more. Watch a video about 2021 web design trends:

The Web’s Grain

PGM Team — Mon, 01 Feb 2021 19:23:53 +0000

Can I play something for you? Trust me: it’s worth it. Oh, and while you’re listening, pay attention to your chest. You may feel a growing warmth, kind of like the fiery trickle after a shot of whiskey.

All right, here we go:

Wasn’t that great? I’ve listened to those irritating bing-bongs 30 or 40 times in the process of making this page, and while you can’t see it, I’m typing this with a big, stupid smile on my face. If you came online in the ’90s like me, you’re probably smiling too.

Windows 95 Dial-Up Dialog

Windows 95 Dial-Up Dialog Box

That sound, of course, is the audio handshake of a modem connecting to the internet. And the fiery feeling in the chest it creates is the warm pang of nostalgia. I’ve managed to tether that grating sound to all the wonder and magic I felt my first years on the internet. Back then, if you told me that I’d get to spend the next decade or so making things for the web—well, that would be just about the best news I could be told.

But things have changed, as they always do. I’m writing this fifteen years after the bing-bongs, and the fascination has faded. What happened is what always happens: the wonder I felt was diminished by experience.

The awe goes—time takes it.

There’s a quote from the French philosopher Gaston Bachelard: “We begin in admiration and end by organizing our disappointment.”

Now, this is a bit pessimistic—he is a French philosopher, after all—but right now the statement does ring true for the technology industry. Think about the weight we’ve added to the world: attention-greedy devices and services, new business structures that turn out to reinforce existing inequalities instead of working against them, technocratic blowhards, never mind the surveillance shit storm we all now must navigate.

How could any self-aware person who works in technology not start to organize their disappointment? It’s gotten to where several of my peers are floating half-hearted speculations about their next careers. This isn’t good: you want the talented and mindful people to stick around, not get husked out, then leave frustrated, exhausted, and conflicted.

The closer I get to it all, the more I become confused and overwhelmed. A thing I knew so well has reached out wider and wider, only to make less and less sense. So last year, instead of being stubborn, complaining, or feeling powerless, I went searching for a different perspective. I wanted to take something big and make it small again. This was urgent: I needed a way to re-engage with my craft on a foundational level. Otherwise, I’d also be looking for a second career.

In Buddhism, there’s something called the beginner’s mind. If you’ve ever done any kind of guided meditation, you’re probably familiar. It refers to having an attitude of openness, of eagerness. You drop your heavy preconceptions and revitalize a practice by finding a new way to look at it. Making things for the web started to feel very heavy to me, so this seemed to be what I needed.

Most investigations into beginner’s mind eventually lead to the same zen koan. It’s a small story, and it goes like this:

Before I began to practice, mountains were mountains and rivers were rivers.

After I began to practice, mountains were no longer mountains and rivers were no longer rivers.

Now, I have practiced for some time, and mountains are again mountains, and rivers are again rivers.

So what’s the lesson? Here’s my take: we eventually work through the naive belief that profundity comes from complication. It simply isn’t so. Things have enough depth and worth on their own terms. No metaphors or analogies are needed for insight, only the willingness to listen to the subject speak for itself, even if it contradicts received wisdom.

I’d like to do some listening today.

What is there to see when you look at a website as itself? A lot, actually, but let’s simplify things down to their core. As we go through this, please excuse me for stating the obvious. My intent is to describe and document the apparent. Rivers as rivers, remember?

Here we have a very vanilla website. No styles, just markup. All defaults.

Super plain markup for a website

The first thing to notice about this page is that it is fluid—it adapts to the width of the viewport to fill it up. We can’t quite say it’s responsive, because responsive sites require media queries, but this site, like a responsive one, isn’t opinionated about the size of the viewport. It works well at whatever size you throw at it.

The page’s fluidity leads to the second thing to notice: the page is vertical.

Okay, terribly obvious, but let’s tease this apart.

Elements get stacked like a layer cake by default, and it make sense—vertical stacks are much easier to adapt across all kinds of screen sizes, because you don’t have layout issues to manage with more or less space across. You simply keep the elements the full width. This is especially handy for design methods like mobile first, since narrower screens can’t necessarily hold designs where elements are beside one another. By stacking, you get greater consistency in a design, what ever the screen size.

But not every site can be a big vertical stack of bricks, can it? What happens if you place things side-by-side?

This leads us to the primary visual challenge of responsive design. It’s the big daddy, the ur problem, the foundational thorn in your side that, for some reason, I have never seen documented.

I’m going to go back to my vanilla HTML page, but let’s add a couple lines of CSS so that our image is beside the text, and both scale in width as the viewport changes.

Super plain markup for a website, with a little bit of CSS added to put the image beside the type

Okay, take a look:

I’ll explain what’s happening. When I change the window width, the image gets taller as it gets wider, because its proportions are fixed. The text, on the other hand, gets shorter as it gets wider since it has no fixed proportions.

If you’ve ever designed a responsive website, this is the source of all your sadness. This is the fount of your tears, the wellspring of your suffering. If you believe in the afterlife, this is the circle of hell where they light the soles of your feet on fire.

You know how people say to add a breakpoint to a responsive design when the layout starts to look weird? This is the thing that makes the layout look weird. Every time. But, this contradiction is unavoidable and unsolvable, so the only choice is to recognize it as implicit to the medium, and devise strategies to manage it.

Most of the solidified techniques about our practice come from the natural ways of the web that have been there since the start. The answer is right there in front of us, in the website itself, and each step we take away from its intentions makes our creations weaker.

What does it look like when you work against the web’s natural character? Well, it probably looks like this:

A bear riding a bicycle. Yes, really.

I think you make what I call “bicycle bear websites.” Why? Because my response to both is the same.

“Listen bub,” I say, “it is very impressive that you can teach a bear to ride a bicycle, and it is fascinating and novel. But perhaps it’s cruel? Because that’s not what bears are supposed to do. And look, pal, that bear will never actually be good at riding a bicycle.”

This is how I feel about so many of the fancy websites I see. “It is fascinating that you can do that, but it’s really not what a website is supposed to do.” For example, behold Apple’s Mac Pro website.

Same response as the bear on the bicycle: all glee, until things go haywire, and you realize it is coming right for you.

What is this monstrosity? Why does it feel like docking a spaceship? Why can’t I scroll? And why is there lag on my fancy laptop? What’s that sound? My computer’s fan?

Apple’s pursuit of cool yielded an incredibly fragile, willfully esoteric website that’s good for no one. And I’m certain you can think of a few similar examples of your own: clumsy sites that work counter to the inclinations of the web. Back to the zen koan—if we see the mountains as mountains and rivers as rivers, these are the sites that try to be different, yet end up swimming up stream and climbing uphill.

I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material. We expect technology to help us overcome limitations, not produce more of them. In spite of those promises, we typically yield consistent design results.

Commercial Type Showcase

Commercial Type’s Showcase Website

We use flat colors and simple gradients, because they’re lightweight, easy to draw with CSS, and can easily scale for areas of unknown proportions.

Website for The Shape of Design

Sites have large horizontal stripes of content, because of the vertical bias I mentioned earlier.

Dropmark

We use text as interface, because the nuanced but significant differences in technology’s abstractions are difficult to communicate visually.

Obvious Ventures

Ambient, atmospheric, blurred, or tinted photographs become background images, because we can’t quite be sure how it will be cropped across different viewports.

And big type is overlaid on top of these images because every client simultaneously wants big images and big type. Plus it dances around those text versus image scaling problems I showed earlier.

Mailchimp

MailChimp

We use photography with props, because software is abstract and hard to embody, so we show it on a device in a related context to have it seem like the product that it is.

DBLG

And mosaics, because every page presents a multitude of elements, and we need structured ways of showcasing this variety.

The web is forcing our hands. And this is fine! Many sites will share design solutions, because we’re using the same materials. The consistencies establish best practices; they are proof of design patterns that play off of the needs of a common medium, and not evidence of a visual monoculture.

So this is a good start, but it is only a start. Could those simple sites I showed earlier assist us beyond the page and provide a larger way to think? To put a finer point on it: What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build with?

It turns out, I found the answer from a painter who also thought to step away from the canvas. Let’s have a short art history lesson, shall we?

Meet David Hockney—artist, painter, and conflicted photographer. In the early ’80s, he took a small break from painting to pursue these mentioned photographic joiners. They were an investigation of time and space. Now, that seems really heady, but once you see them, you’ll know exactly what I’m talking about. They kind of look like cubist paintings, but much quicker to read. I’d like to show you a few.

As Hockney says in the video, he started the project with Polaroids. You can see them tiled together here, because each individual photo can’t capture the whole picture.

Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made)

Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made), by David Hockney, 1982

Inside, Hockney is using redundancy to show action. How many hands are there? How many heads does that man have? Two faces in this image, but you don’t interpret it as a two-headed man. It is two glances at one face—facets of the same thing.

Noya and Bill Brandt with Self Portrait (Although They Were Watching This Picture Being Made)

It’s so seamless, you’d probably not count the faces without me mentioning it. You just know, because this is how you see. You have a small focal range; your brain stitches the bits together into a complete whole.

Here’s another piece, even more advanced. This one is my favorite, because it’s so economical—like a comic strip.

Billy Wilder Lighting His Cigar

Billy Wilder Lighting His Cigar, by David Hockney, 1982

Do you see what’s changed? Hockney stopped using Polaroids. The grid is gone, replaced by overlaid, borderless photos. Nothing cut or cropped, nothing tricky. Hockney’s able to do a lot of work with only six images.

What would this method look like with many more? Hockney asked the same question.

The Scrabble Game

The Scrabble Game, by David Hockney, 1982

This is The Scrabble Game, and in my opinion, it’s the masterpiece from this era of Hockney’s career. This piece is all over the place: so many faces, so many hands. The game board is out of sync from image to image, so you can actually piece together the plays in the order they were made. Also, there are no ends to my aggravation about how he does not see he has a word in his tiles. (Liqueur, anyone?)

So, do you see what’s happened? Recall the first joiner I showed you with the Polaroids, and compare it to The Scrabble Game.

The Scrabble Game beside Noya and Bill Brandt with Self Portrait

Hockney began with an image-making practice that relied on the grid necessitated by the Polaroids’ borders and produced a rectangular final work. When he switched to normal film, he was able to overlay images in any necessary shape that accurately described the time and space of a scene. Nobody would set out to make a picture with these edges—what you see is what was required by the images he managed to snap.

In essence, Hockney abandoned the notion that a two-dimensional work of art needed to exist at a fixed, rectangular size. Instead, small individual photos were overlaid and assembled until they formed a complete picture. Individually, the photos don’t mean much, but collectively they… does this seem familiar?

Okay, I’m sorry. I’ve tricked you, and we’ve come full circle. We’re back to responsive design. Let’s make an analogy.

The Scrabble Game beside Noya and Bill Brandt with Self Portrait

On the left, the Mona Lisa. Cliché, but why the hell not? The painting, to me, is like designing for the printed page. On the right, The Scrabble Game. This assemblage more closely resembles designing for a screen. Do you see it? It is control versus discovery, uniformity versus multiplicity.

With the Mona Lisa, we have fixed, uniform edges that can be planned for with a high degree of certainty and control. We revere and celebrate this painting because of that exquisite control.

With the joiner, we have a different kind of beauty. It is an edgeless surface of unknown proportions, comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment.

Also known as web design. Here, I’ll restate what I just said, but this time, imagine I’m talking about web design and not the Hockney photos:

an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment

That’s a pretty good description of the visual challenges in interaction design, huh?

In November of 2013, I gave a talk called What Screens Want, where I tried to answer what it meant to natively design for screens. I said it was something I called flux—the capacity for things to change. This could be as showy as animation, but also as simple and fundamental as a spreadsheet sorting itself and showing new results. You can’t do that on paper. So, designing for screens is managing this change over time, and expressing it in clear, communicative, and powerful ways.

Now, after looking at Hockney’s work for far too long, I can add another item to the list: edgelessness.

A lack of edges permeates the web at all levels. You just have to look for it:

Network graph

Partial map of the Internet from OPTE.

Edgelessness is in the web’s structure: it’s comprised of individual pages linked together, so its structure can branch out forever.

Infinite canvas

Edgelessness applies to the screens that show the web, because they offer an infinite canvas that can scroll in any direction for however long. Boy, do we take for granted that a screen can show more content than is able to be displayed in a single shot.

Spectrum of Android device sizes

Spectrum of Android Fragmentation sizes from OpenSignal. And this is from 2012.

Edgelessness speaks to the diffusion of device and viewport sizes. Above is a chart of screen sizes across Android devices. How could there be a clear edge on a spectrum with such minor differences between each size?

Collapsing walls

And, most interesting to me, edgelessness means blurred lines between the disciplines that work together to make things for the web. Everyone that I’ve spoken with that’s worked on a large responsive project with a big client says that the process disrupts workflows, expectations, and work culture.

Simply put, the edgelessness of the web tears down the constructed edges in the company. Everything is so interconnected that nobody has a clear domain of work any longer—the walls are gone, so we’re left to learn how to collaborate in the spaces where things connect.

Let’s take a look at how edgelessness affects how we work. Suppose you’re about to start a web project with some sketches. How would you begin?

You’d probably draw a box.

Drawing a box

Then you’d fill that box with the page’s elements.

Drawing the elements

Whoops.

Remember the Hockney photos? The size of what we’re making is unknown until we know what we’re putting there. So, it’s better to come up with an arrangement of elements and assign them to a size, rather than the other way around. We need to start drawing, then put the box around it. Let me show you an example.

This set of images comes from the portfolio of Danish designer Kasper Laigaard. It’s the perfect example of not drawing the box until you know what goes in it. Here, he’s sketching out different content lockups for a redesign of Hello Monday, a digital agency in Denmark and New York. The sketches explain the idea more clearly than my words ever could.

Content lock-ups

Content lock-ups for Hello Monday by Kasper Laigaard

So just like Hockney’s joiners, we’re creating assemblages of elements, then associating them with the appropriate space.

The practice of assembling conflicts with most of the terminology we have in place for responsive design. Our words make it seem that we’re designing how elements break down, but really, we should be focusing on how they build up. And this concept, just like the layouts we create, can reach out a bit further.

Animated dots

We often think making things for the web is a process of simplifying—the hub, the dashboard, the control panel are all dreams of technology that coalesces, but things have a tendency to diverge into a multiplicity of options. We pile on more tools and technology, each one increasingly nuanced and minor in its critical differences. Clearly, convergence and simplicity make for poor goals. Instead, we must aim for clarity. You can’t contain or reduce the torrent of technology, but you can channel it in a positive direction through proper framing and clear articulation.

Technology only adds more—it is never this or that; it is always this and that.

A quick example from my life: Twitter didn’t replace Facebook. The iPad didn’t replace my phone. My phone didn’t replace my TV. Now, I watch YouTube on my iPad, toss the video up to my TV, while checking Twitter and Facebook on my phone. It’s a little constellation of technology. But I keep asking myself: how many more things can I juggle? And for how long?

The answers offered are typically technological solutions. Algorithms. Automation. Tiny programs and sets of rules to filter out what bursts from the internet’s flue hole. While well intentioned (maybe), these answers only become extra points of control and influence.

Using technology to solve the problems it causes is as futile as cleaning a grass stain by rubbing grass on it. More technology only amplifies the problems created by an abundance of it. This leads to the most pressing question: How far out will technology grow? And when does it cross the line of comfort?

We’re building edgeless environments of divergency. Things are added in chaos, then if successful, they expanded further and further out until they collapse and rearrange. This is probably why responsive design feels so relevant, maddening, and divisive: its patterns mimic the larger patterns of technology itself.

What we build is defined and controlled by its unresolvable conflicts. In responsive design, it’s the text and image conundrum I showed earlier. In other, more grand arenas, there is capital versus labor, or collective control versus anarchic individualism. In technology, I believe it comes down to the power dynamics of convenience. To create convenience—particularly the automated convenience technology trades in—someone else must make our choices for us. In other words: the less you have to do, the less say you have.

Up to a point, swapping autonomy for ease is a pretty good trade: who wants to run the math on their accounting books or call the restaurant to place a delivery order? But if taken too far, convenience becomes a Trojan Horse. We cede too much control and become dependent on something we can no longer steer. Platforms that promised to bring convenience to a process or intimacy to a relationship now wedge themselves into the transaction as new middlemen. Then, we’re left to trust in the benevolence of those who have the power to mold our dependencies. Citing a lot of the concerns I mentioned earlier, those people are less responsible and compassionate than we had hoped. In pursuit of convenience, we have opened the door to unscrupulous influence.

You could say that our current technological arrangement has spread out too far, and it is starting to look and feel wrong. Fortunately, we can treat this over-expansion just like everything else I’ve mentioned. We can draw a line, and create a point of reassembly for what we’ve made. We can think about how to shift, move, and resize the pieces so that they fall back in line with our intentions. This power is compounded for those of us who make this technology.

But this is not a technological response. It is an explicit act of will—an individual’s choice to change their behaviors about what to use, where to work, what to adopt, what to pay attention to. It is simple mindfulness, that thing which needy technology makes so hard to practice. And it starts with a question: what is technology’s role in your life? And what, really, do you want from it?

As for me? I won’t ask for peace, quiet, ease, magic or any other token that technology can’t provide—I’ve abandoned those empty promises. My wish is simple: I desire a technology of grace, one that lives well within its role.

How will we know that we’re there? I suppose we’ll look at what we’ve built, notice how the edges have dropped away, and actually be pleased it looks like it could go on forever.

The post The Web’s Grain appeared first on Precision Global Marketing.

This is a web page

PGM Team — Mon, 01 Feb 2021 19:22:12 +0000

We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen Simmons will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.

Jen Simmons is a Designer and Developer Advocate at Mozilla, where she advocates for web standards and researches the coming revolution in graphic design on the web. She is the creator of Layout Land (youtube.com/layoutland) and Jen Simmons Labs (labs.jensimmons.com/) and the host and executive producer of The Web Ahead, winner of the 2015 Net Award for Podcast of the Year. Jen launched her first client website in 1998; her clients include CERN, the W3C, Google, Drupal, Temple University, and the Annenberg Foundation.

Enjoy all the videos in An Event Apart’s library at aneventapart.com/news/videos. There are over 30 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers: aneventapart.com/events. And for your free monthly guide to all things web, design, and developer-y, subscribe to The AEA Digest: aneventapart.com/news/post/aea-digest.

The post This is a web page appeared first on Precision Global Marketing.

Responsive Web Design

PGM Team — Mon, 01 Feb 2021 19:20:23 +0000

A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries.

Working on the web, however, is a wholly different matter. Our work is defined by its transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.

But the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop. But as designers, I think we often take comfort in such explicit requirements, as they allow us to compartmentalize the problems before us. We can quarantine the mobile experience on separate subdomains, spaces distinct and separate from “the non-iPhone website.” But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

A flexible foundation

Let’s consider an example design. I’ve built a simple page for a hypothetical magazine; it’s a straightforward two-column layout built on a fluid grid, with not a few flexible images peppered throughout. As a long-time proponent of non-fixed layouts, I’ve long felt they were more “future proof” simply because they were layout agnostic. And to a certain extent, that’s true: flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.

Huge images are huge. Our layout, flexible though it is, doesn’t respond well to changes in resolution or viewport size.

But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. The example design scales perfectly well as the browser window resizes, but stress points quickly appear at lower resolutions. When viewed at viewport smaller than 800×600, the illustration behind the logo quickly becomes cropped, navigation text can wrap in an unseemly manner, and the images along the bottom become too compact to appear legible. And it’s not just the lower end of the resolution spectrum that’s affected: when viewing the design on a widescreen display, the images quickly grow to unwieldy sizes, crowding out the surrounding context.

In short, our flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that.

Becoming responsive

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as “a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.” Emphasis mine, as I think that’s a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.

This is our way forward. 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 practice responsive web design. But how?

Meet the media query

Since the days of CSS 2.1, our style sheets have enjoyed some measure of device awareness through media types. If you’ve ever written a print style sheet, you’re already familiar with the concept:

media=”screen” />

media=”print” />

In the hopes that we’d be designing more than neatly formatted page printouts, the CSS specification supplied us with a bevy of acceptable media types, each designed to target a specific class of web-ready device. But most browsers and devices never really embraced the spirit of the specification, leaving many media types implemented imperfectly, or altogether ignored.

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style sheet’s media attribute:

media=”screen and (max-device-width: 480px)”

href=”shetland.css” />

The query contains two components:

a media type (screen), and

the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

Designers have experimented with resolution-aware layouts in the past, mostly relying on JS-driven solutions like Cameron Adams’ excellent script. But the media query specification provides a host of media features that extends far beyond screen resolution, vastly widening the scope of what we can test for with our queries. What’s more, you can test multiple property values in a single query by chaining them together with the and keyword:

media=”screen and (max-device-width: 480px) and (resolution: 163dpi)”

href=”shetland.css” />

Furthermore, we’re not limited to incorporating media queries in our links. We can include them in our CSS either as part of a @media rule:

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

.column {

float: none;

}

Or as part of an @import directive:

@import url(“shetland.css”) screen and (max-device-width: 480px);

But in each case, the effect is the same: If the device passes the test put forth by our media query, the relevant CSS is applied to our markup. Media queries are, in short, conditional comments for the rest of us. Rather than targeting a specific version of a specific browser, we can surgically correct issues in our layout as it scales beyond its initial, ideal resolution.

Adapt, respond, and overcome

Let’s turn our attention to the images at the base of our page. In their default layout, the relevant CSS currently looks like this:

.figure {

float: left;

margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */

width: 31.121642969984202211%; /* 197px / 633px */

}li#f-mycroft,

li#f-winter {

margin-right: 0;

}

I’ve omitted a number of typographic properties to focus on the layout: Each .figure element is sized at roughly one third of the containing column, with the right-hand margin zeroed out for the two pictures at the end of each row (li#f-mycroft, li#f-winter). And this works fairly well, until the viewport is either noticeably smaller or wider than our original design. With media queries, we can apply resolution-specific spotfixes, adapting our design to better respond to changes in the display.

First of all, let’s linearize our page once the viewport falls below a certain resolution threshold—say, 600px. So at the bottom of our style sheet, let’s create a new @media block, like so:

@media screen and (max-width: 600px) {

.mast,

.intro,

.main,

.footer {

float: none;

width: auto;

}

If you view our updated page in a modern desktop browser and reduce the size of your window below 600px, the media query will disable the floats on the design’s major elements, stacking each block atop each other in the document flow. So our miniaturized design is shaping up nicely, but the images still don’t scale down that intelligently. If we introduce another media query, we can alter their layout accordingly:

@media screen and (max-width: 400px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 48.341232227488151658%; /* 306px / 633px */

} li#f-watson,

li#f-moriarty {

margin-right: 0;

}

Our figures can responsively change their layout to better suit smaller displays.

Don’t mind the unsightly percentages; we’re simply recalculating the widths of the fluid grid to account for the newly linearized layout. In short, we’re moving from a three-column layout to a two-column layout when the viewport’s width falls below 400px, making the images more prominent.

We can actually take the same approach for widescreen displays, too. For larger resolutions, we could adopt a six-across treatment for our images, placing them all in the same row:

@media screen and (min-width: 1300px) {

.figure,

li#f-mycroft {

margin-right: 3.317535545023696682%; /* 21px / 633px */

width: 13.902053712480252764%; /* 88px / 633px */

}

Now our images are working beautifully at both ends of the resolution spectrum, optimizing their layout to changes in window widths and device resolution alike.

By specifying a wider min-width in a new media query, we can shift our images into a single row layout.

But this is only the beginning. Working from the media queries we’ve embedded in our CSS, we can alter much more than the placement of a few images: we can introduce new, alternate layouts tuned to each resolution range, perhaps making the navigation more prominent in a widescreen view, or repositioning it above the logo on smaller displays.

By designing responsively, we can not only linearize our content on smaller devices, but also optimize its presentation across a range of displays.

But a responsive design isn’t limited to layout changes. Media queries allow us to practice some incredibly precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller screens, better complying with Fitts’ Law on touch devices; selectively show or hide elements that might enhance a page’s navigation; we can even practice responsive typesetting to gradually alter the size and leading of our text, optimizing the reading experience for the display providing it.

A FEW TECHNICAL NOTES

It should be noted that media queries enjoy incredibly robust support among modern browsers. Desktop browsers such as Safari 3+, Chrome, Firefox 3.5+, and Opera 7+ all natively parse media queries, as do more recent mobile browsers such as Opera Mobile and mobile WebKit. Of course, older versions of those desktop browsers don’t support media queries. And while Microsoft has committed to media query support in IE9, Internet Explorer currently doesn’t offer a native implementation.

However, if you’re interested in implementing legacy browser support for media queries, there’s a JavaScript-tinted silver lining:

A jQuery plugin from 2007 offers somewhat limited media query support, implementing only the min-width and max-width media properties when attached to separate link elements.

More recently, css3-mediaqueries.js was released, a library that promises “to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test, and apply CSS3 Media Queries” when included via @media blocks. While very much a 1.0 release, I’ve personally found it to be quite robust, and I plan to watch its development.

But if using JavaScript doesn’t appeal, that’s perfectly understandable. However, that strengthens the case for building your layout atop a flexible grid, ensuring your design enjoys some measure of flexibility in media query-blind browsers and devices.

The way forward

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

The post Responsive Web Design appeared first on Precision Global Marketing.