An article I was reading about jquery
We will design a nice Apple style brushed metal, aluminium looking icon from scratch, using Photoshop.
Device-Agnostic Approach To Responsive Web Design
An article I was reading about css3
 |
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.
The Challenge
Let’s start our journey by looking at these online tools:
Those pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss goes one step further as it allows you to "customize" viewports by setting any dimensions you want.
Now check the-great-tablet-flood of 2011.
Do you get my drift? Trying to check layouts against specific sets of dimensions is a losing battle. Besides, using existing devices to set break-points is not what I’d call a "future proof" approach, as there is no for standard sizes or ratios.
I don’t want to go the "consider it to be harmful" route, but I want to point out that tools like these, or articles promoting a device approach (i.e. Device Diagram for Responsive Design Planning), make people focus on the wrong end of the problem, reinforcing the idea that responsive is all about devices.
To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don’t need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter: “Device Agnostic Mode”.
The Goal
The goal is to surface content, to style boxes as columns so they bring sections above the fold. The question is: when should we bring a box "up"?
Content Is King!
If we consider that content is king, then it makes sense to look at it as the corner stone of the solution. In other words, we should set break-points according to content instead of devices.
The Principle
The content of a box dictates its width. It is the minimum width of adjacent containers that create break points (a size at which we can display boxes next to each other).
Decisions are made keeping these points in mind:
- The width of a box should be as small or as wide as possible without impairing readability.
- The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.
- The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter).
In Practice
Markup
For this exercise, we will consider 5 main blocks:
<div class="grid-block" id="header"></div>
<div id="wrapper">
<div class="grid-block" id="main"></div>
<div class="grid-block" id="complementary"></div>
<div class="grid-block" id="aside"></div>
</div>
<div class="grid-block" id="contentinfo"></div>
The wrapper will allow us to:
- mix percentages and pixels to style boxes on the same row
- set a maximum width for a group of boxes
CSS
To build our grid we will rely on display:inline-block mainly for horizontal alignment and inline flow. But note that this choice also gives us an extra edge to play with (more on this later).
Also note that we will override this styling with float to achieve some specific layouts.
body {
margin:auto; /* you'll see why later */
text-align:center; /* to center align grid boxes */
letter-spacing: -0.31em;/* webkit: collapse white-space between units */
*letter-spacing: normal;/* reset IE < 8 */
word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.grid-block {
letter-spacing: normal; /* reset */
word-spacing: normal; /* reset */
text-align:left; /* reset */
display:inline-block; /* styling all grid-wrapper as inline blocks */
vertical-align:top; /* aligning those boxes at the top */
*display:inline; /* IE hack to mimic inline-block */
zoom:1; /* part of the above hack for IE */
width:100%; /* boxes would shrink-wrap */
}
/**
* rules below are meant to paint the boxes
*/
.grid-block {
height: 150px;
}
#header {
background: #d6cac1;
}
#main {
background: #ad9684;
}
#complementary {
background: #7a6351;
}
#aside {
background: #000000;
}
#contentinfo {
background: #3d3128;
}
This produces a bunch of rows.
Content-Driven Process
We define the width of each box according to its content. These values will then be used to set breakpoints. Note that the values below take into consideration a 10px gutter between columns.
- Header
- content: logo, navigation, search box
- type: banner
- minimum width: n/a
- maximum width: n/a
- Main
- content: diverse (article, blog entry, comments, etc.)
- type: main box that holds the meat of the page
- minimum width: 420px [1]
- maximum width: 550px [1]
- Complementary
- content: directory entries, tweets, etc.
- type: multi-line text box with media
- minimum width: 280px
- maximum width: 380px
- Aside
- content: Ads
- type: 230px wide images
- fixed width: 250px or 490px (2 ads side by side)
- Contentinfo
- content: resources, blog roll, etc.
- type: lists of links
- minimum width: 220px
- maximum width: 280px
The minimum and maximum widths above only come into play when the box is displayed as a column.
Breakpoints
The width of the containers establishes our breakpoints. Breakpoints are viewport's widths at which we decide to display a box as a column (instead of a row).
How Do We "Pick" Breakpoints?
Until we are able to use something like grid layout, we are pretty much stuck with the HTML flow, and thus should rearrange boxes while respecting their source order. So we go down our list, and based on the minimum width values, we create various combinations. The values below show widths at which we rearrange the layout, styling rows as columns, or changing the width of a specific column.
470px
- header
- Main
- Complementary
- Aside (250) + Contentinfo (220)
530px
- header
- Main
- Complementary (280) + Aside (250)
- Contentinfo
700px
- header
- Main (420) + Complementary (280)
- Aside
- Contentinfo
or:
- header
- Main (420) + Complementary (280)
- Aside + Contentinfo
950px
- Main (420) + Complementary (280) + Aside (250)
- Contentinfo
1170px
- Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)
1190px
- Main (420) + Complementary (280) + Aside (490)
- Contentinfo
1410px
- Head (240) Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)
All of the above are potential breakpoints — each value could be used to create different layouts for the page. But is that something we should automatically do? I think not. At least not without considering these two points:
How close are the breakpoints?
We have 2 that are 20 pixels apart (1170px and 1190px); should we set both of them or should we drop one? I think that above 900px, chances are that desktop users may easily trigger a re-flow in that range, so I would not implement both. In other words, I think it's okay to go with close breakpoints if the values are below 800px — as there is less chance to confuse users when they resize their browser window.
Should we try to create as many columns as we can?
Bringing more ads above the fold may make more sense than bringing up a list of links that you'd generally keep buried in your footer. Also, you may choose to give more breathing room to your main content before bringing up boxes that the user does not really care for.
Getting Ready for Media Queries
For the purpose of this article, we'll use every single one of our breakpoints to create a new layout, which should also demonstrate that it is not necessarily a good idea.
/**
* 470
*/
@media only screen and (min-width: 470px) and (max-width: 529px) {
#aside {
width: 250px;
float: left;
}
#contentinfo {
display: block;
width: auto;
overflow: hidden;
}
}
/**
* 530
*/
@media only screen and (min-width: 530px) and (max-width: 699px) {
#wrapper {
display:block;
margin: auto;
max-width: 550px; /* see comment below */
}
#complementary {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 250px;
margin-right: -250px;
}
#aside {
width: 250px;
}
}
/**
* 700
*/
@media only screen and (min-width: 700px) and (max-width: 949px) {
#wrapper {
display:block;
margin: auto;
max-width: 830px; /* see comment below */
}
#main {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 280px;
margin-right: -280px;
height: 300px;
}
#aside,
#complementary {
float: right;
width: 280px;
}
#contentinfo {
clear: both;
}
}
/**
* 950
*/
@media only screen and (min-width: 950px) and (max-width: 1169px) {
#wrapper {
display:block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 250px;
margin: auto;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 250px;
margin-right: -250px;
}
}
/**
* 1170
*/
@media only screen and (min-width: 1170px) and (max-width: 1189px) {
#main,
#complementary,
#aside,
#contentinfo {
float: left; /* display:inline here leads to rounding errors */
}
#main {
width: 36%;
}
#complementary {
width: 24%;
}
#aside {
width: 21%;
}
#contentinfo {
width: 19%;
}
}
/**
* 1190
*/
@media only screen and (min-width: 1190px) and (max-width: 1409px) {
#wrapper {
display:block;
box-sizing: border-box;
padding-right: 490px;
margin: auto;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 490px;
margin-right: -490px;
}
}
/**
* 1410
*/
@media only screen and (min-width: 1410px) {
body {
max-width: 1740px;
}
#wrapper {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100%;
padding-left: 17%;
padding-right: 16%;
margin-right: -16%;
border-right: solid 250px transparent;
}
#header {
float: left;
width:17%;
margin-right: -17%;
}
#main {
width: 60%;
}
#complementary {
width: 40%;
}
#aside {
width: 250px;
margin-right: -250px;
}
#contentinfo {
width: 16%;
}
}
For the 530px and 700px breakpoints, there is a design choice to make. Without a max-width, we'd get everything flush, but the main box (#main) would be larger than the maximum width we originally set.
Demo
The last thing to do is to create a layout to cater for IE6/7/8, as these browsers will ignore the media queries. To do so, we can use a Conditional Comment:
<!--[if lt IE 9]>
<style>
body {
margin: auto;
min-width: 850px;
max-width: 1000px;
_width: 900px;
}
#main {
width: 55%;
}
#complementary {
width: 25%;
*margin-right: -1px; /* rounding error */
}
#aside {
width: 20%;
}
#contentinfo {
clear:both;
}
</style>
<![endif]-->
Conclusion
Not once in this article I referenced the width of a device, be it an iPad, a Xoom, or something else. Building a "content-aware grid" is a simple matter of choosing the "layout patterns" that you want, based on breakpoints that you set according to page content.
After I sent this piece to Smashing Magazine, I ran into Deciding What Responsive Breakpoints To Use by @Stephen_Greig. So obviously, we are at least two who share the sentiment that relying on devices to create layouts is the wrong approach. But I'm curious to know what everyone else is doing, or even thinking? If we had more people pushing for this, the community could be less device-centric, and could start focusing on content again.
Next Step: Responsive Media
Footnotes
[1] According to Ideal line length for content this box should be styled width a min-width of 25em and a max-width of 33em. So if your base font-size is 16px (as it should be), this translates as 400 pixels and 528 pixels.
(jvb) (il) (vf)
© Thierry Koblentz for Smashing Magazine, 2012.
The Smashing Book #3 Cover Design
An article I was reading about css3
|
|
Around the end of October last year, Vitaly Friedman of Smashing Magazine asked me if I would be interested in contributing to the new Smashing Book #3. There were a few options as to how I could contribute to it. But since my days were already filled until Summer 2012, it was clear to me that I could only find time to design the cover.
After some doubting on my end (as I was slightly concerned about the timing), I decided to take on the project. This was just too good an opportunity, as the briefing basically said “Do your thing. We want your design”. It would have been foolish to refuse such a fun, creative challenge. In this post, I’d like to shed some light on the creative process behind the cover design and the rationale behind the cover design.
Sketches & Ideas
My basic idea for the cover design was to do something in combination with the logo, using the shape of the letter “S” as my starting point. I thought I would try out some kind of a geometrical pattern overlaying the logo. When I described this basic concept to Smashing Magazine team, there was already a positive reaction. They were really quite intrigued by the idea, and couldn’t wait to see what I would came up with.
Another idea I had in mind was an “Escher-like” surrealistic 3D effect. Once I sketched both ideas, I was less convinced of this 3D idea as the “S” would be too obvious, while the initial concept was to hide the “S”. What I wanted to achieve was some kind of a blend between some sort of pattern and the logo, making the logo a bit less obvious, but still there at the same time.
My sketches for the cover design. Large preview.
At first I tried to stick with only very minimal shapes (like circles and straight lines, etc.) keeping it all strictly geometrical. But the problem was that the “S” shape from the logo didn’t allow me to do this. As soon as I tried to overlay this on top of the logo, things got messy, because the “S” doesn’t follow the straight lines, or perfect circles; I was afraid this would be the case, but then thought I would just have to try it anyways to see if it could work. Sometimes the clear vision I had in my mind was wrong, and only knew for sure if I made a quick test. So I decided to start from the “S” shape instead, and go from there, which resulted in a more organic form, though still rather minimal.
Experiments showing some of the steps. Large preview.
The First Design Proposal
While covering the entire “S” with the pattern, I realized I was facing a problem: Where do I put the title? So then the idea came to mind for using the wavy line (which crosses the “S”) that is part of the logo, and trying to create some white space in the lower part of it. I also removed a bit of the pattern outside the “S” shape to avoid busyness, and to create a bit of a rest. In a way, I was thinking of creating some sort of transition between the logo and a new design.
The result was some sort of blend (or mix if you like) between the two, if you know what I mean. As an extra touch, I decided to add these white dashed lines. I thought it gave the design this extra detail (though later on, I changed my mind, which isn’t uncommon). Smashing Magazine’s team wasn’t much fond of it either, so we decided to just leave them out.
Choosing & Applying the Colors
As for colors, I decided to keep the palette “warm”, making the link again with the logo. I was mostly inspired by this particular image from my Inspiration Stream. I find it really hard to explain, in a practical way, how I apply colors. For me it has a lot to do with intuition; a feeling that certain colors go well together, and others don’t. It’s a very subjective matter, and who am I to say that, for example, a certain type of soft brown in combination with a flashy red doesn’t work well?
When I applied the colors to this design, I kept in mind that the segments could contrast well with each other. So I tried to apply them in a way that allows a dark brown segment to correspond with a lighter segment, such as yellow or orange. I also tried to make sure I was applying the same color again with a bit of space in between them (especially the darker and lighter ones, as they stand out the most).
Same goes for the blue version. Since the blue contrasted a lot with the warm colors, I made sure the blue was applied to separate locations, and also in proportion. To see if the colors are well applied — in this case with enough contrast — I usually do the test by looking at it from a distance. I enlarge the design, making it as big as possible on my screen, and I step away to look at it from a three meter distance.
After this test I decided to adjust the segment at the top that uses a gradient of yellow and pink; to me this one felt out of place, like the pink didn’t really fit in with the color palette. So I changed that segment into a yellow gradient, which is in harmony with the rest. In my first experiments, I had some magenta and pink in the mix, which was a “leftover”. It was only after this test that I felt I needed to change it. It would have made sense to keep it if there would still be magenta and other segments of pink in the design. But since this was the only segment, it felt out of place.
First steps of the initial design. Large preview
Adjusting The Design
Vitaly and his team really liked what I was proposing, especially the geometrical forms, and so it seemed that I was on the right track. One of the remarks was that the design might become a bit too complex at some point. There was also the suggestion to add more bright colors — such as blue — to match the new “Smashing” branding. Plus, there was the concern as to whether the large white area at the bottom didn’t distract too much, making it a bit difficult to recognize the “S” logo icon.
Adjusting the design, simplifying the shape, adding in some blue. Large preview.
Keeping this feedback in mind, I tried to find a balance between the original design and a lightweight version in terms of complexity — also trying to find the right balance between recognizing the “S” while maintaining the original design. I decided to reduce the segments, going from four divisions to three, instead. In this phase of the design I also began working with an empty Illustrator template to start composing the entire cover, including the back and the spine.
Another variation of the adjusted design. Large preview.
Change Of Plans
Right before I finished, as I showed Vitaly and his team the two designs (shown here above) Smashing Magazine published the article to announce the preorder of the book. They showed the initial cover design, eager to get the buzz starting for the new edition of the book. As it turned out, they also made the decision to publish a second, smaller book which wasn’t discussed in the beginning. To announce this book, which is to be called “Smashing Book #3⅓ — The Extension”, Smashing Magazine decided to create a temporary alternative blue version which was based on my initial design. In a way I found this good news, because apart from changing a few small details, I really liked my initial version. So I thought it might have a good chance after all.
Dealing With Feedback
In my humble opinion, I believe you become a great designer if you try to find the middle ground of what the client likes and what you like. After all, you design for the client, not for yourself. The client has to be 100% satisfied. But don’t get me wrong here, it’s not a one-way communication where the designer blindly follows what the client dictates to them. Sometimes the client’s feedback doesn’t offer any valuable point. Then it’s up to you to explain to the client why you think his or her direction is a bad idea.
But if it’s a matter of suggestion to try things out, or perhaps personal preference (like in this situation), than it’s up to you to make sure the design gets better. So the “middle ground” I just referred to doesn’t mean you end up with a lesser design. It’s our job to always try to top our initial design — sometimes it works out, sometimes it doesn’t, and sometimes the client may also agree with you.
Usually that happens to be the case for me, especially with clients who actually choose “me” because they like “my design style”. What I’m trying to say is, you just have to try to push yourself to the limit, being as creative as possible, to make it better, while taking feedback into account. In a lot of cases you’ll succeed, and it’s always very fulfilling when that actually happens.
Final Design
I had much hesitation when I started working on the previous designs. Based on the feedback, I was almost 100% convinced that it wouldn’t improved the design. I was afraid if I reduced the amount of divisions, it wouldn’t be that strong anymore, that the effect would be lost. But I believe I was wrong. Even though I still liked the initial design a lot, I had a hard time choosing which design I really preferred the most — the new ones seemed strong too, especially with that blue added into the mix. Smashing Magazine guys had the same feeling.
Initial design which is now final, including back and spine. Large preview.
Since there will be two books now instead of one, Vitaly and his team decided to go for one of the new designs for this second book, and keep the initial design for the original #3 edition.
Design for the smaller additional book: #3⅓ The Extension. Large preview.
These designs are now 99% final as the spine will most likely change (at least if we stick to our initial plan). There is some idea for the spine that still has to be worked out, and so this part may just be temporary. A final item still needs to be delivered to me first, to check how it relates to what we originally had in mind. It all sounds rather abstract, I know, but I thought I would show you the cover in its entirety so you can get a better idea of how things will look.
Editor’s note: Veerle Pieters has also published this post on her blog. The team here at Smashing Magazine sincerely appreciates and respects Veerle’s dedication to creative quality work and her creative direction in this project. Please note that the Smashing Book #3 and #3⅓ are already available for pre-order. If you pre-order now, you have the chance to add your name to the printed as well as the digital version of the Smashing Book #3. Stay tuned, folks!
(jvb) (il) (vf)
© Veerle Pieters for Smashing Magazine, 2012.
Learning JavaScript Design Patterns – An Updated Free Book For Developers
An article I was reading about plugins
Over the past year or so I've been actively trying to encourage more developers to invest time in learning about the benefits of design patterns and how they can be applied to JavaScript. To help with this, I wrote a …
AddyOsmani.com | Articles for developers
Design a Sleek Facebook Fan Page in Photoshop
An article I was reading about jquery
In this tutorial I’ll teach you how to create a sleek & stylish Facebook Fan Page! We’ll be using the Shape Tool, Filters, Custom Brush, Text Tool & Blending Options to create this cool layout!
Content Strategy Within The Design Process
An article I was reading about css3
|
|
The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows:
Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.
This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the relationship between content strategy and design in creating, organizing and displaying Web copy.
As a writer and content strategist myself, I’ve worked with designers in all of these areas and find the creative process highly enriching. I’ve been fortunate enough to work with designers who are quick to challenge ideas that are unclear or unsound, who are brilliant at creating striking visual representations of even the most complex concepts. A lively interplay between design and content is not only fun, but is how spectacular results are achieved. This is why content strategy should matter a great deal to designers.
What Is Content Strategy, And Why Should A Designer Care?
Content strategy is the glue that holds a project together. When content strategy is ambiguous or absent, don’t be surprised if you end up with the Internet equivalent of Ishtar. When content strategy is in place and in its proper place, we’re on our way to producing beautiful and effective results.
Slide from The Language of Interfaces by Des Traynor.
While wrapping one’s head around content strategy might be difficult, the thing that makes it work is very simple: good communication. Sometimes a project moves along like a sports car on a superhighway. Other times, the road is so full of bumps and potholes that it’s a wonder we ever reach our destination. As we explore the relationship between content strategy and design, I’ll detail how I keep the channels of communication open and go over the workflow processes that I’ve used to support that effort. I hope that sharing my experiences (both positive and negative) will help you contribute to and manage projects more effectively and deliver better products to clients.
How To Get Started: The First Step Is The Longest
Project manager: We need a landing page for client X.
Designer: I can’t start the design until I see some content.
Writer: I can’t start writing until I see a design.
You may find this dialogue amusing… until it happens to you! At our firm, we find that the best way to get past such a standoff is to write first. This is because content strategy, at a fundamental level, frames a project for the designer. As a content strategist, my job is to articulate the why, where, who, what and how of the content:
- Why is it important to convey this message? This speaks to purpose.
- Where on the website should the message appear? This speaks to context.
- Who is the audience? This speaks to the precision of the message.
- What are we trying to say? This speaks to clarity.
- How do we convey and sequence the information for maximum impact? This speaks to persuasiveness.
Bringing it down to a more detailed level, let’s consider a landing page. A content strategist will determine such things as the following:
- Audience
Is the audience sophisticated? Down to earth? College-level? Predominately male? Female? Etc. - Word count
Some pitches scream for long copy, while others must be stripped to the bare minimum. SEO might factor into the equation as well. - Messaging priorities
What is the most important point to convey? The least important? What needs to be said first (the hook)? What needs to be said just leading up to the call to action? - Call to action
What will the precise wording be? What emotional and intellectual factors will motivate the visitor to click through?
Clear direction on these points not only helps the writer write, but helps the designer with layout, color palettes and image selection. When we start with words, we produce designs that are more reflective of the product’s purpose.
Landing pages are a great place to try this workflow, because in terms of content strategy, they are less complex than many other types of Web pages. A product category page, on the other hand, might have a less obvious purpose or multiple purposes, considerably greater word counts, more (and more involved) messaging points, and a variety of SEO considerations, all of which would affect its design.
Quick Tips for Getting Started
- Make sure someone is specifically responsible for content strategy. If strategic responsibility is vague, your final product will be, too.
- Slow down! Everybody, me included, is eager to dive headfirst into a new project. But “ready-aim-fire” is not a winning content strategy. Make sure everyone is on the same page conceptually before cranking out work.
- If content strategy falls on your shoulders as a designer, cultivate an understanding of the discipline. Resources are listed at the end of this article to help you.
- Make sure designers and writers understand what their roles are — and are not. There’s no need for writers to tell designers how to design, or for designers to tell writers how to write.
Perfecting The Process: Break Up Those Bottlenecks
Project manager: How are things coming along?
Developer: I’m waiting on design.
Designer: I’m waiting on content.
Writer: I’m waiting on project management.
Web development projects in particular involve a lot of moving parts, with potential bottlenecks everywhere. The graphic below describes our Web development process, with an emphasis on the design and content components. Chances are, whether you are freelancing or at an agency, at least parts of this should look familiar:
Link: Larger version (Image credit: Chris Depa, Straight North)
The process is by no means perfect, but it is continually improving. In the next section, we’ll look at the many types of content-design difficulties you might experience.
To help our designers lay out text for wireframes and designs, we utilize content templates based on various word counts. These templates also incorporate best practices for typography and SEO. When the designer drops the template into a wireframe, it looks like this:
SEO content template in a wireframe.
The use of content templates not only takes a lot of guesswork out of the designer’s job, but also speeds up client reviews. When clients are able to see what the content will roughly look like in the allotted space, they tend to be more comfortable with the word counts and the placement of text on the page.
Communication can be streamlined using project management software. We use Basecamp, which is a popular system, but many other good ones are available. If you’re a freelancer, getting clients to work on your preferred project management platform can be an uphill battle, to say the least. Still, I encourage you to try; my experience in managing projects via email has been dismal, and many freelance designers I know express the same frustration.
The big advantage of a project management system is that it provides a single place for team members to manage tasks and interact. Internal reviews of design templates is one good example. The project manager can collect feedback from everyone in one place, and each participant can see what others have said and respond to it. Consolidating this information prevents the gaps and miscommunication that can occur when projects are managed through multiple email exchanges. Designers can see all of the feedback in one place — and only one place. This is a big time-saver.
Quick Tips for the Creative Process
- Make sure someone is specifically responsible for project management.
- Whether or not your process is sophisticated, get it down in writing and in front of all team members before the project starts. This really helps to align expectations and keep communication flowing.
- Meet at regular intervals to discuss status and problems. Hold yourself and others accountable.
- Get approvals along the way, rather than dump the completed project in the client’s lap. Having clients sign off on a few pages of content and one or two templates really helps to align the creative process with client expectations, and it reduces the risk of those massive overhauls at the tail end that demolish budgets and blow deadlines.
- Writers and designers should discuss issues as quickly, openly and thoroughly as possible.
Conflict Resolution: Why Can’t We All Just Get Along?
Designer: All these words are boring me.
Writer: All these images are confusing me.
Project manager: All these arguments are killing me.
No matter how clear the strategy, no matter how smooth the process, design and content will conflict somewhere along the line in almost every project. In fact, if creative tension is absent, it may well indicate that the project is in serious trouble. Here are the issues I run into on a fairly regular basis, as well as ideas for getting past them.
Making Room for SEO Content
Big chunks of content are bothersome to designers; even as a writer, I worry about high word counts turning off some of our audience. However, when SEO considerations demand a lot of words on a page, there are ways to make everyone happy:
- Tabs are a nifty way to hide text.
Tabs allow you to keep the page tight vertically. Even more importantly, they enable visitors to easily find the information they need — and ignore what they don’t need. Below is a tabbed product area in the Apple Store.
The Apple Store - Keep SEO content below the fold.
This is a compromise, because an SEO strategist would prefer optimized content to appear above the fold. However, if a website is to have any hope of converting traffic brought in by SEO, then visitors need to see appealing design, not a 300-word block of text.
The Movies Now landing page. - Step up creativity on non-SEO pages.
For many websites, the pages that are most important to SEO have to do with products and services, where conveying features and benefits is needed more than wowing visitors with design. Conversely, pages on which awesome design matters most are often unimportant for SEO: “About,” bio and customer service pages, for example.
Carsonified’s team pages.
Clarity vs. Creativity
We fight this battle over what I call “design content” all the time — primarily with navigation labels, home-page headers and call-to-action blocks. At a fundamental level, it is a battle over the question, “Which wins over the hearts and minds of visitors more: awesome design or straightforward information?”
Navigation
Making the labels for navigation straightforward is a fairly established best practice. Predictability is important: if visitors are looking for your “About” page, and they finally stumble on it by clicking on “Be Amazed,” then the emotion you will have elicited is irritation, not adoration. Be as creative as you want with the look and feel of the labels, but to maximize the user experience, the text and positioning of the labels must be as vanilla as possible.
For insight on how to achieve clarity, read “The Language of Interfaces.”
Design of the header on the home page
Rotating header images and other types of animation are rather in vogue these days, and they’re a good way to convey a thumbnail sketch of a firm’s capabilities and value proposition. Content must convey information, but the header must work on an emotional level to be effective. Writers must take a back seat to designers! The Ben the Bodyguard home page (below) starts to build a connection using a comic character and storyline. This is different than most sites that simply talk about feature after feature.
The design should tell a story. (Ben the Bodyguard)
Call-to-action blocks
Before all else, make sure your website’s pages even have calls to action, because this is your opportunity to lead visitors to the logical next step. A call to action could be as simple as a text link, such as “Learn more about our Chicago SEO services.” Generally more effective for conversion would be a design element that functions almost as a miniature landing page.
Much like landing pages, the wording of the call-to-action phrase must be crystal clear and be completely relevant to the page to which you are taking visitors. Yet impeccable wording is not enough: the design of the content block must be captivating, and the text laid out in a way that makes it eminently readable.
Designers can get rather snarly when I tell them their design for a call to action needs five more words: it might force them to rethink the entire design. Many times, though, a discussion with the designer will make us realize that we don’t actually need those extra five words; in fact, we’ll sometimes hit on a way to reduce the word count. The creative interplay mentioned earlier makes a huge difference in this all-important area of conversion optimization.
Calls to action require excellent design and content.
Quick Tips for Conflict Resolution
- Keep the lines of communication open between all team members and the client.
- Select a project manager with great communication skills and an objective point of view.
- Stay focused on the purpose of the design: is it to persuade, motivate, inform or something else? Creative disagreements should never be theoretical; they should always be grounded in what will increase the real-world effectiveness of the work at hand.
Long-Winded Writers Vs. Lofty-Minded Designers
One thing I run up against continually is my own tendency to say too much and a designer’s tendency to say too little. Ask a writer what time it is, and they’ll tell you how to make a clock. Ask a designer what time it is, and they’ll give you a stylized image of a pendulum. Neither answer is particularly helpful!
These opposing mentalities pose challenges in Web design. Does an image alone convey enough information about a product’s key benefit? Will the length of a 200-word explanation of that benefit deter people from reading it? How intuitive can we expect visitors to be? How patient?
This is when having a process that encourages communication between team members makes a difference. I wish I had a secret formula for resolving conflict, but I don’t. I know of only two ways to balance design and content philosophies, and one of them is to talk it out as a team. As I said, communication is at the heart of an effective content strategy, and we have to resist the temptation that some of us have to withdraw into a shell when we encounter confrontation.
The other way to resolve conflicts — astoundingly underused, in my experience — is to get feedback from target users. Simply showing people a Web page and then asking for their key takeaways will tell you just about all you need to know about how effective you’ve been in getting the point across. Our opinion of our own work will always be subjective. Furthermore, because we’re emotionally invested is what we’ve created, discussing its flaws calmly and collectedly is difficult. Users are the ultimate judge of any creative effort, so why not take subjectivity and emotion out of the equation by going directly to the source?
Resources
- The New Rules of Marketing and PR, David Meerman Scott
Explains content strategy better than anything I’ve read. The third edition was published in July 2011. - “Content Strategy,” Google Knol
For a thorough overview of content strategy and links to books, blogs and other resources, check out this fantastic Knol. - “Call to Action Buttons: Examples and Best Practices,” Jacob Gube
To promote creative compatibility, designers and writers alike should study this Smashing Magazine article. - “Top Ten Mistakes of Web Management,” Jakob Nielsen
For insight into design-related project management, read this post by the brilliant Web usability expert Jakob Nielsen.
(al) (fi)
© Brad Shorr for Smashing Magazine, 2011.
The Whys And The Hows Of Textures In Web Design
An article I was reading about css3
|
|
Texture is becoming integral to design. It’s gone beyond being a trend — it’s now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the user’s eye and emphasize the importance of key elements.
However, texture has long been synonymous with “dirty” or “grungy” design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.
Textures vs. Patterns
Before we get into textures in depth, let’s distinguish between patterns and textures. These words are often used synonymously. Patterns are typically small, repeating, tileable elements, whereas textures tend to be much bigger images that don’t repeat. Imagine a Venn diagram, with textures on the left and patterns on the right, with a little overlap in the middle. So, some textures are also patterns. Several of the tileable texture packs found on Tileables are good examples.
The Function Of Textures
We love texture on the Web for a multitude of reasons. Design decisions shouldn’t be made simply on the basis of, “Oh, well. It looks good.” Design should serve a purpose, and each decision about texture should be made by weighing the pros and cons. Let’s start by going over some of the key benefits.
Grabbing Attention With a Call to Action
Texture can highlight elements such as titles, headings, icons and buttons. It draws the eye to calls to action and main headings. This is perhaps the clearest way that the trend towards textures is catching on.
When used minimally, texture separates the content from the rest of the website. It guides the user’s eye directly to the intended element. It can be a great way to separate key branding elements.
You can grab attention in different ways, but two common ways can be easily demonstrated with branding: a textured logo against a clean background, and a clean logo against a textured background.
Notice how Poco People’s grunge logo is accentuated against the clean background.
Cultural Solutions UK’s branding is the opposite: a clean logo against a textured background.
Enhancing Information Architecture
Texture can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate content into logical divisions. Using it effectively in conjunction with other methods is vital. The goal is not to abandon other methods of information architecture, but to enhance their effectiveness.
By setting off the sliding banner with a texture, A Modern Eden highlights the content within.
See how you can use textures without violating best practices? High contrast and legibility are evident and work in tandem with the texture.
Sky’s Guide Service perfectly separates its content with textured elements.
Above, each element is individually textured for a particular purpose. Sky’s Guide Service divides the content into logical sections, and the user sees where they start and end. Texture enhances the information architecture by creating logical content areas that help the user process the information accurately.
Also, the texture perfectly suits the style and topic of the website. All of the elements are custom-tailored to fit a logical theme, thus enhancing the website’s overall message.
Building an Atmosphere and Bolstering Identity
More and more, clients want website designs that do more than display their content in a user-friendly way. They want websites that enhance their identity and enable users to identify with the brand. Texture can be used to achieve this in many ways.
While texture is plenteous on Deda, it is gentle and never over-bearing.
Deidre “Deda” Bain does exactly this for her personal brand. Her use of texture helps to put a face — almost literally — to the service. Without the texture, the website would be rather bland and would lack the personality of its creator. With legibility and a proper information architecture, the design would still be nice, but that extra something would be missing.
Texture adds to the “intangibles” of Web design: that wow factor and sexiness of a memorable website.
Tips And General Advice
All of this is fine and dandy, but you’ll want to avoid common traps while refining certain techniques and modes of thought.
Maintain Legibility
Never (ever!) sacrifice legibility for texture. Many of us make this mistake, and will continue to for a while to come. Legibility on the Web is paramount in importance. If a user can’t even read the message, then what’s the point in composing it, let alone texturing it?
Avoid doing this to your type:
Sometimes, we go a bit overboard. This poster shows what happens when you get too excited about texture.
Don’t Beat a Dead Horse
In print, texture is hard to overdo — depending on the genre, of course. On the Web, however, texture can be extremely distracting when used in “bulk.”
On Hinder’s website, legibility gets lost in the menu, and the texture is distracting. (And watch out for the auto-playing music.) Oops!
Practice Means Improvement
Experiment with your designs. Try new things. Apply textures in places where you wouldn’t normally put them. Use textures that you’ve never used before. You never know what you’ll discover until you try it.
If It Serves No Purpose, Take It Out
Refine your technique before using it on a client’s website. Always make sure that your use of texture is based on a sound plan, as would be the case with any website you create. If you can’t justify something that you’ve done as being an improvement, take it out.
There’s no point in overdoing texture. The entire purpose of the Web is to disseminate information. How can you accomplish this if your content is unreadable? Besides, subtlety and nuance are a better way to demonstrate mastery of a subject.
Consider the Effect You Are Trying to Achieve
As we know from experience, getting carried away with texture is all too easy. Keeping in mind the final effect you are trying to achieve is the best way to avoid this. If you want a subtle textured background, just do it and then move on to the next item on your list. Otherwise, you’ll never get it done.
Collect Resources So That You Don’t Have to Search Later
You can save a huge amount of time by downloading and archiving resources that seem useful to you. Keeping your files organized is a great back-up plan. Trust us: nothing is more frustrating than coming across the perfect brush pack and not being able to remember where you found it. Our list of brushes is long and diverse. We’ve been collecting the brushes over the years from websites such as deviantART and Brusheezy, from the freebie sections of various design blogs, and by making our own.
Learn Masks
Learning to work with layer masks will save you a lot of time in the long run and will be a strong tool in your arsenal. Masks are also a fantastic way to non-destructively experiment with your designs. A lot of great tutorials are out there; a quick Google search led me to “Understanding Layer Masks in Photoshop.”
Don’t Sacrifice Quality for Loading Time
There are plenty of interesting ways to keep textures from killing loading times. But don’t sacrifice the quality of the texture too much, because rather than appearing finished and professional, the website will look outdated right out of the gate. Repeating texture patterns are a good way to save on the loading times of backgrounds and larger elements.
Of course, we want to design with the Web’s inherent constraints in mind, but as Internet connection speeds rise globally, loading time shouldn’t be your primary concern. Nevertheless, use texture within reason: a website with a lot of textures will inevitably have a long loading time. A simple method to get around file size is to use repeating textures, especially for backgrounds. Tileables is a fantastic resource to get started. And we’re always learning about CSS Sprites and using Smush.it to further compress our files.
The difference in texture quality here is major. The texture on the left is compressed. The one on the right is, too, but not as much.
Choose Textures Logically
Lastly, and perhaps as important as maintaining legibility, choose textures that are logical for your design. If you’re building a website for a furniture store, then rusty textures wouldn’t make a whole lot of sense. Textures are meant to build identity, not to confuse the visitor, regardless of whether they look good. Usability should always take precedence.
Textures: A D.I.Y. Attitude
One of the many ways to get textures is to create them yourself. We are big proponents of this because it can save you time and give the exact result you’re looking for. And don’t worry: it’s not as difficult as it looks.
Snap Some Photos
The simplest method is to grab your trusty digital camera and snap shots of textures that are around you, especially ones that you’ve never considered to be “textures.” Unique textures can advance your style. For example, would you consider the top of a cake or bubbles in a sink as workable textures? They’re all around you.
This photo from Lost and Taken demonstrates that a distinctive photograph can be used for a special-purpose texture.
If you look around yourself, you will see plenty of grunge: worn-down buildings, concrete walls, rusted metal, tree bark, weathered wood. These are all fantastic specimens. In fact, a decent point-and-shoot camera is enough to start. We started shooting our own textures with an old Nikon Coolpix 4200, which worked flawlessly.
When you shoot, you could use full auto mode. But don’t use flash, because it will “flatten” the image and remove most of the detail in the texture, especially in close-up shots. Let the camera do the work, and always take multiple shots of a texture to get the best possible result. You can always rely on post-processing in your favorite image editor.
Scanners Work, Too
Another great tool is the good ol’ flatbed scanner. Old paper, cardboard, mouse pads (shout out to Trent Walton for this idea), paper bags, skin — the list of what you can scan goes on. Scan at a very high resolution, 600 to 1200 DPI, so that the texture is of high quality and can be adapted to any project, including large print pieces. High-resolution scans also allow you to isolate particular spots in an image to use as a texture.
Once you’re comfortable with that, you can start creating elements using traditional art techniques. For example, apply a bit of charcoal to some beautiful heavy paper, which could be the finishing touch for that grunge background you’ve been after. What about acrylic paint splatters to add depth to your UI? Or coffee stains on paper? The possibilities are endless!
Icing on the Cake
You can always spice up the process by combining textures. Using the layer blending modes in Photoshop, you can combine various textures into one. Caleb of Lost and Taken has posted an in-depth walkthrough of the process that he follows to create his packs.
Believe it or not, Photoshop’s somewhat gimmicky filters can also be used to create textures. Noise textures are a snap with the Noise filter. Playing with the values and levels of the filter, you can obtain results for a wide range of needs. There’s also the Texturize filter, although it’s rather gimmicky and rarely useful. Still, it could help you achieve part of the effect you’re going for.
A brief experiment with noise filters. Light noise is better, but make sure you can still see the effect.
If you want the texture to be seamless, then a uniform distribution is easier to work with. “Monochromatic” ensures that the texture has no color noise that could conflict with other colors in your design.
If you’re interested in learning the basic techniques of applying texture to elements, we’ve produced several videos to get you started. More advanced users may already know these techniques but might want to brush up on them anyway. Either way, we hope you find them useful.
A demonstration of using brushes, levels and layers to create texture.
A demonstration of using texture files, packs, levels and layers to create texture.
A combination of the two techniques above, with an overview of more advanced ideas.
Articles and Resources
Articles and Tutorials
- “Adding Texture in Photoshop,” Method & Craft
- “Creating Tileable Textures,” Method & Craft
- “Vintage Effects Within Illustrator,” Method & Craft
- “Design a Vintage Poster With Vector Pack 16, Part 1,” GoMediaZine
- “Design a Vintage Poster, Part 2,” GoMediaZine
Free Resources
- Smashing Magazine’s Free Textures (2000 free textures)
- Lost and Taken
- Subtle Patterns
- Projectdd
- Valleys in the Vinyl
- deviantART
- Flickr
- Tileables
Premium Resources
- Arsenal, Go Media
- WeGraphics
- GraphicRiver
- Vandelay Premier
- Premium Textures
- Zen Textures
- 48 Pixel Patterns
Related Posts
You might be interested in the following related posts here, on Smashing Magazine:
(al) (tg) (vf)
© Jon Savage and Simon H. for Smashing Magazine, 2011.
Are You Ready For A Web Design Challenge?
An article I was reading about css3
|
|
This is not a normal Smashing Magazine post. I’m not going to teach you something new or inspire you with examples of great work. Instead, I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes.
If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work.
So, what are we waiting for? Let’s get started.
The Challenge
If you’re like me, you did some form of higher education in art and design and will know about “the crit.” These meetings involve the class coming together with tutors to analyze and provide constructive criticism on each other’s work.
These were terrifying meetings in which I justified my design approach and defended it against criticism. Although I hated every minute of them, I believe they nurtured one of the most useful skills I have as a Web designer.
The ability to logically justify our designs is a skill many of us lack. This is the heart of the challenge I wish to lay down.
My challenges is this:
Write a blog post justifying the design approach you took to one of your websites. Then, encourage other Web designers to provide feedback and ask questions.
Admittedly, this might sound like a lot of effort, so let me explain why it is worth your while.
Why This Challenge Is Worth Undertaking
As I said in a previous article, being a great designer is not enough. You can produce outstanding work and be the envy of your peers, and yet struggle to convince clients of your approach. The reason is that clients do not understand design the way your colleagues do. Therefore, you need to be able to articulate what makes your design right.
Our ability to justify our choices is crucial to our relationship with clients. Without it, clients will lack confidence in our abilities or, worse, feel excluded from the process. A lack of confidence leads to micro-management, and exclusion leads to frustration and resentment. Therefore, explaining our approach is vital.
However, it isn’t just about the client. It’s also about your personal development. If you don’t have a clear idea of what works, then improving will be difficult. Design critiques are as much about improving the quality of your work as justifying it to others.
Unfortunately, this requires that we overcome two barriers.
First, many of us don’t fully understand why we have designed a website a certain way. We design at a subconscious level, based on years of experience. When you have been driving for a while, you cease to think about the process of driving. Likewise, design decisions are often handled at a deeper level than the conscious mind.
Secondly, many designers haven’t had to justify their approach in the past. Either they haven’t gone through the rigorous critiques that I experienced in university or they don’t have the experience required to articulate their decisions.
It is for these reasons that this challenge is so valuable. By writing a blog post about a particular design and encouraging feedback, you move your decisions from the subconscious to the conscious level and gain valuable experience in articulating them.
Of course, knowing where to start such a challenge can be a challenge in itself.
Where To Start
If you are not used to thinking about design at a conscious level, then you might struggle to begin. While there is no right way to do this, I can share the approach that I use.
When discussing my design with others, I tend to look at the various components that make up the product. These usually are:
- Grid,
- Layout,
- Color,
- Typography,
- Imagery,
- Styling.
Ask yourself, why did you approach each of these elements the way that you did? Let’s consider each in turn.
Grid
Why did you use that particular grid structure on the website you are reviewing? Can you articulate your reasons for using a 12-column grid instead of a 16-column one? What about the margins and padding? If a client complained that there was too much white space between columns, would you have a response?
Another common issue is when you purposely break out of a grid. Was the choice intentional, with good reasoning, or just an impulsive decision? What would you say if the client asked about it?
The choice of grid might be based on the content or on the constraints of the style guide. It could have to do with making the website work on mobile devices or with allowing flexibility for future changes. Whatever the reason, you need to be able to clearly articulate them to yourself and the client.
Are we selecting a particular grid because it is right for the website or just because we have fallen into the habit? We need to be able to justify our approach to our clients and ourselves.
Layout
Layout and grid might sound the same, but they’re not. By layout, I am referring to white space and the placement of elements on the page. These are often points of conflict between the designer and client, so being able to explain your approach is important. For example, how would you justify all of the white space that Google has chosen to use on its home page?
Why did you leave so much white space on the page? Was it to draw the user’s eye to a particular element, or perhaps to improve readability?
What about the positioning of elements? Why is the search box in the top-right corner? Is it because this is the convention and people look for it there, or perhaps because you wanted to associate it with other elements that are in proximity?
Color
Color is probably the most controversial of subjects, and so we need to understand our motivation. I tend to approach color selection in one of four ways:
- Corporate branding guidelines
The palette has been defined by the guidelines, and I work within these constraints. - Theory
I use a tool such as Kuler, which produces a palette based on established theory. - Emotional response
The extensive research done on people’s responses to colors informs my palette. - Main image
If the website has a dominant image that has already been approved by the client, I use it as the basis for the color palette. There are great tools for extracting color palettes from images.
Adobe Kuler is just one of many tools that help you apply color theory to your palette selection.
By explaining your choices in these objective terms, you prevent color from becoming a matter of personal preference and thus avoid conflict.
Typography
Something as seemingly simple as typography consists of many different decisions. These decisions extend far beyond the selection of typeface and encompass line height, size, weight, kerning and much more.
With services like Fontdeck making so many fonts available to us, the need to understand and justify our choices is more important than ever.
You need to be able to speak confidently about your choices if you are to demonstrate your expertise and convey that what you do is a lot more complex than it might appear. Taking the time to explain the complexity behind your typographic decisions might sound boring, but it will impress. It will also force you to put more consideration into your choices.
Imagery
To many clients, imagery is merely about subject matter. But we know it is about much more. We select imagery based on the mood it sets, the colors it contains and even things such as the eye line of the person in the photograph.
We need to be able to articulate these decisions so that others recognize that you cannot easily substitute one image for another without significantly affecting the design.
Do you know why you selected one image over the thousands of others in your library? What made that image special? Can you explain this to yourself and the client? Was it really more than a “That’ll do” decision?
Styling
For me, styling refers to screen elements that are not directly content-related: buttons, links, call-out boxes and the plethora of other elements that need to be decided on.
How you style these elements can dramatically shape the feel of the website. From the chrome buttons on Apple’s website to the sketched buttons of Moredays, styling can make a huge difference.
Styling dramatically shapes the feel of your website. But can you justify why one approach is better than another?
Can you explain why your styling creates the right feel? Have you shown the client alternative approaches? Did the client sign off on moodboards, which set the style? If so, refer back to them when justifying your design.
Reference Material
In fact, whenever justifying a design, always refer to the material that has already been agreed upon. For example, if the client has signed off on moodboards, we should use these to justify our choice of typography (“I used the same typeface that we agreed on in the moodboarding stage”). We can also refer to the target audience, business objectives, branding guidelines and even previous comments by the client.
Reference material can be taken from farther afield, too. For example, when justifying your decision to ignore the fold, you can refer to research done by ClickTale. Citing research and experts is a great way to justify an approach.
But remember, being able to explain your design is only half of the objective in this challenge. The other half is about improving the quality of your work.
Improving Our Work
Getting into the habit of justifying your decisions will inevitably improve the quality of your designs. Instead of leaving it to the subconscious, the act of considering imagery, layout, typography and so on becomes a part of your conscious decision-making process.
The act of discussing your process refines it and makes you more efficient as a designer. For example, in carrying out the challenge, you will probably struggle to justify some of your design elements, elements that in hindsight would have been better left out or presented differently. This will inform your next website, and over time you will find that your designs become more refined, simpler and more effective.
So, What Are You Waiting For?
Smashing Magazine has a quite large readership and a remarkable community. We have an amazing opportunity to start talking about our work and providing each other with constructive criticism. Write a blog post on one of your designs, justifying your approach. Then link to it in the comments below. Encourage other people to provide feedback on your design, and take their criticism to heart. Finally, don’t forget to make comments and ask questions of other people who have posted their own work.
My hope is that this post will not only help us speak confidently about our designs and improve the quality of our work, but encourage a dialogue about the design process. We are good at showing off our products but bad at explaining how we came up with them. As a community, we could benefit from more discussion about the process itself, rather than endless inspiration galleries.
(al) (il)
© Paul Boag for Smashing Magazine, 2011.
How to create a personal blog theme design in photoshop
An article I was reading about jquery
It has been a while since I’ve published a photoshop tutorial for creating a web layout. Today we’re going to create a personal blog website design in photoshop. If you’re a beginner do not worry just check out some of my past tutorials on how to create a website design.
The ultimate responsive web design roundup
An article I was reading about photoshop
It can quickly get overwhelming trying to keep up with it all.
Here we’ve compiled a list of more than seventy resources for creating responsive designs.
Included are articles discussing responsive design and related theories, frameworks and boilerplates for responsive layouts, tools for testing your responsive designs, techniques for resizable images, and a whole lot more.
Then, to top it all off, we’ve collected a hundred of the best responsive designs out there right now to inspire you and give you some real-world ideas.
Articles and Publications
Below are a number of high-quality articles talking about responsive design and the techniques that go into it. Some might include a few code snippets or other technical information, but for the most part, these are concept-level discussions.
Responsive Web Design
This is the
Responsive Web Design Book
The Practicalities of CSS Media Queries, Lessons Learned
This
Big vs. Small: Challenges in Responsive Web Design
This
Beginner’s Guide to Responsive Web Design
This
Responsive Web Design: What It Is and How To Use It
This introduction to responsive design from
Responsive by Default
This
Content Choreography
We often talk about responsive design strictly from the technical end of things, but the entire point of responsive design is to improve the content experience. This
Understanding the Elements of Responsive Web Design
This post from
A Brief Overview of Responsive Design
Here’s another great basic rundown of what responsive design is and how to achieve it, this time from
Responsive Web Design has Created Opportunities Across the Board
This
Designing for a Responsive Web
This
Experimenting with Responsive Web Design
This
CSS3 Media Queries
20 Amazing Examples of Using Media Queries for Responsive Web Design
This post from
Context
This
A Richer Canvas
This article from
Some Thoughts on Responsive Web-Design and Media Queries
This
Responsive Web Design and Mobile Context
This
The New Front End Design Stack: The Role of Responsive Design
This post from
Responsive Web Design from the Future
To Hell With Bad Devices: Responsive Web Design and Web Standards
This is an
The Pros and Cons of Responsive Web Design
Plenty of articles discuss how to create a responsive design, but not that many discuss the good and bad things about responsive designs.
11 Reasons Why Responsive Web Design Isn’t That Cool
This post from
Tutorials
The tutorials below will teach you about CSS media queries and other responsive design techniques.
Quick Tip: A Crash-Course in CSS Media Queries
This
Adaptive Layouts with Media Queries
This
Responsive Web Design: A Visual Guide
This
CSS Media Queries & Using Available Space
This post from
Working with Media Queries
Here’s a short
How to Use CSS3 Orientation Media Queries
Media queries are great for adjusting the way your responsive design displays on different browser sizes, but a lot of designers overlook the
Optimizing Your Email for Mobile Devices with the @media Query
We often overlook HTML email newsletters when thinking about responsive design, but considering the number of people who are likely to view your HTML emails on their phone, it’s a good idea to use media queries in this case. This post from
How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
This post from
Adaptive & Responsive Design with CSS3 Media Queries
This fantastic post from
Responsive Web Design with HTML5 and the Less Framework 3
This article from
Tools and Techniques
The techniques and tools below make it a lot easier to create designs that respond the way you want them to. Many are for handling images (arguably one of the more challenging aspects of responsive design), but there are others, too.
CSS Effect: Spacing Images Out to Match Text Height
Depending on your layout, you may need text to line up properly with images, regardless of how the images and text are spaced. This
Hiding and Revealing Portions of Images
Resizing images can only take you so far with responsive designs in some cases. At times, it’s more important for a particular part of an image to be visible or readable than for the entire image to be shown. That’s where
Creating Sliding Composite Images
This technique, from Zomigi, lets you create what appears to be a single image but is actually multiple images layered on top of one another. In this way, you can control the exact placement of different elements of the image as your browser viewport changes size and shape.
Seamless Responsive Photo Grid
This
Responsive Data Tables
Responsive design techniques aren’t very friendly to data tables. It’s easy to end up with tables where the type is so small it’s impossible to read. Or you can specify a minimum width, but then that kind of defeats the purpose of a responsive design. This
Foreground Images that Scale with the Layout
So it’s easy enough to create scaling background images, but foreground images are a little trickier. This article covers a technique from Zomigi for creating foreground images in your content that will scale with your layout.
FitText
Sencha.io Src
The Goldilocks Approach to Responsive Design
This post by Chris Armstrong talks about the “
Responsive-Images
Lettering.js
Fluid Images
This
Respond
Modernizr
Responsive Web Design Sketch Sheets
If you wireframe your designs on paper, you’ll find these
Frameworks and Boilerplates
Frameworks and boilerplates can greatly speed up your design process. The good news is that there are tons of boilerplates and frameworks already available for creating responsive designs.
Golden Grid System
The
The Semantic Grid System
Gridless
Less Framework 4
The
Responsive Twenty Ten
Columnal
1140 CSS Grid
The
320 and Up
Skeleton
Fluid Grid System
The
Fluid 960 Grid System
The
Foldy960
SimpleGrid
Testing Tools
These tools make it much easier to test your responsive designs without having to use a bunch of different devices.
resizeMyBrowser
responsivepx
Responsive Design Testing
Screenfly
Adobe Device Central
A number of Adobe Creative Suite products come with
Examples
Below are 100 examples of fantastic responsive designs. There are a lot more sites out there using the technique, and new ones are launched every day. One great resource for finding new sites is
Profi Span
Forgotten Presidents
Ben Handzo
Aaron Shekey
The Highway Hurricanes
dConstruct 2011
Merlin Ord & Media
The Happy Bit
Forefathers
Easy Readers: Adaptive Web Design
More Hazards More Heroes
Facts Regula
Hi, My Name is Andrew
Sifter
FoodDrinkEurope
The Obvious Corporation
Geek in the Park
Mapalong
JCHELBY
10K Apart
Expositio
Food Sense
New Adventures in Web Design Conference
Cisco London 2012
Team PAWS Chicago
Diablo Media
Andersson-Wise Architects
Designing with Data
Full Frontal 2011
Aaron Weyenberg
Web Design Yorkshire
Winnie Lim
Urban Svensson
Luke Williams
Upperdog
Writer
Toronto Standard
Design Professionalism
Impact Dialing
Modernizr
Johan Brook
Dust and Mold Design
Gridchin
Staffanstorp
El Sendero del Cacao
Dustin Senos
Kisko Labs
51bits
digitalHappy
Patrick Grady
Trent Walton
Headshift
Owltastic
WeeNudge
Ash Physical Training
Mark Boulton
The Modern Gentleman
Build Guild
Do Lectures
David Hughes
320 and Up
About.com
Really Simple
Splendid
Leica Explorer
Spigot Design
Cohenspire
Jason Weaver
Joni Korpi
iwantedrock.com
Converge SE
Pelican Fly
Simple Bits
Information Architects
Andy Croll
Hicks Design
8 Faces
The Sweet Hat Club
Little Pea Bakery
Sleepstreet
Andrew Revitt
Cujo.jp
Interim.it
Philip Meissner Design
Teixido
Transfinancieel
UX London
Jeremy Madrid
Brad Dielman
Thomas Prior
Clearleft
Herjen Oldenbeuving
Bureau
City Crawlers Berlin
CSS-Tricks
Robot…or Not?
Marcelino Llano
Caleb Ogden
A Flexible Grid
Simon Collison
More roundups
Here are some more great responsive design roundups from other sites.
Written exclusively for WDD by
Are you using responsive design techniques in your projects? Know of any resources we missed? Let us know in the comments!
