Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

August 21 2013

20:57

WebKit Has Implemented srcset, And It’s A Good Thing


  

WebKit has made some serious news by finally implementing the srcset attribute. As Chair of the W3C’s Responsive Images Community Group, I’ve been alternately hoping for and dreading this moment for some time now. It turns out to be good news for all involved parties—the users browsing the Web, most of all.

As with all matters pertaining to “responsive images”: it’s complicated, and it can be hard keeping up with the signal in all the noise. Here’s what you need to know.

What Does It Do?

As originally proposed, the srcset attribute allowed developers to specify a list of sources for an image attribute, to be delivered based on the pixel density of the user’s display:

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Not too scary, this markup. In plain English:

“Use low-res.jpg as the source for this img on low-resolution displays, and for any browser that doesn’t understand the srcset attribute. Use high-res.jpg as the source for this img on high-resolution displays in browsers that understand the srcset attribute.”

Things were starting to look scary, for a little while there. Due in part to high resolution devices, the average website is now nearly an entire megabyte of images. Now developers can target users on high-resolution displays with a high-resolution image source. Meanwhile, users on lower pixel density displays won’t be saddled with the bandwidth cost of downloading a massive high-resolution image, without seeing any benefit.

Can’t We Do That With JavaScript?

On the surface, srcset isn’t doing anything special—it chooses an appropriate source from an attribute and swaps the contents of an img tag’s src. Swapping the contents of an attribute is something we’ve been doing with JavaScript since time immemorial. Well, since the 90s, anyway. So, what does this gain us?

We actually attempted this approach on BostonGlobe.com, one of the earlier sites to make use of any sort of “responsive images” solution. Thanks to increasingly aggressive prefetching in several of the major browsers, an image’s src is requested long before we have a chance to apply any custom scripting: we would end up making two requests for every one image we displayed, defeating the entire purpose. I’ve documented some of those efforts elsewhere, so I’ll spare you the gory details here.

Can’t We Do That With CSS?

“Yes” and “No.” We can do this with background images easily enough, using a combination of media queries concerned with pixel density. srcset as implemented by WebKit is very similar to the recent image-set feature they introduced to CSS. image-set allows you to specify a list of background image sources and resolutions and allow the browser to make the decision as to which one is most appropriate—pretty familiar stuff. We didn’t have anything along these lines for non-presentational content images, however, until now.

Using CSS to manage content images is broken by default, in terms of keeping our concerns separate. It’s an approach that may make perfect sense within the scope of a quick demo page, but stands to quickly spiral out of control in a production website. Having our CMS generate scores of stylesheets full of background images would be no picnic, from a developer standpoint. Worse, however, is that it would lead to requests for stylesheets and images that users may not need unless done very, very carefully. Beyond that, it renders our images—no pun intended—inaccessible to users browsing by way of assistive technologies.

The closest thing we’ve found to a CSS-based approach would swap an image’s sources based on values set in HTMLs data attributes, using some proposed CSS trickery, much of which is only theoretical and may never happen. However, it still didn’t account for the the double download of high and low resolution image assets—the same issue we encountered with JavaScript. Even if a technique like Nicolas’ should become available to us, we’ll still face the same problems as many script-based solutions: attempting to work around a wasteful, redundant request.

What Does It Do About Bandwidth?

Regardless of screen density, there are a number of situations where lower resolution images sources may be preferable: a Retina MacBook Pro tethered to a 3G, for example, or an unstable conference WiFi network—both situations we’ve all been in plenty of times.

Beyond simply providing us with a sort of inline shorthand for resolution media queries, srcset accounts for bandwidth as well, in a sense. It’s buried in arcane spec-speak, but one of the really exciting facets of srcset is that it’s defined as a set of suggestions to the browser. The browser can then use environmental heuristics or a user preference to decide that it wants to fetch a lower resolution image despite a high-resolution display: envision a preference in your mobile browser allowing high-res images to only be requested while connected to WiFi, or a manual browser preference allowing you to only request low-resolution images when your connection is shaky.

Responsive Images
Ideally, we’d love to send only those images to devices which are specifically resized for each screen resolution. The intention is to save bandwidth and allow the images to download faster on the targeted screen. A common use case for responsive images.

This isn’t a part of WebKit’s early srcset implementation, but it does pave the way for their addition without requiring any changes to our markup. We, developers, can safely use srcset today, and these optimizations may come “for free” in the future.

What Does This Mean For The picture Element?

Here’s where things get interesting.

The version of srcset implemented by WebKit matches the original proposed use of srcset, and the version that the Responsive Images Community Group has been working towards. We can think of this incarnation of srcset as shorthand for the whole slew of media queries concerned with resolution, with one key difference where the browser can choose to override the applicable source based on user preference.

While this implementation matches the original srcset proposal, the current srcset spec attempts to expand the syntax to cover some of the use cases that the picture element fulfills, using a microsyntax that performs some—but nowhere near all—of the functions of media queries.

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">

In our opinion not ideal, this markup pattern. We’re restricted to the equivalent of max-width media queries, pixels, and an inscrutable microsyntax, all for the sake of duplicating the function of media queries. Fortunately for us, neither Web developers nor browser reps are particularly fond of this overextended syntax—hopefully, it will never see the light of day.

The picture element exists to address these use cases using a more flexible—and familiar—syntax. picture uses media attributes on source elements, similar to the video element. This allows us to target image sources to a combination of factors: viewport height and/or width, in pixels or ems, using either min or max values—just like media queries in our CSS.

<picture>
    <source src="med.jpg" media="(min-width: 40em)" />
    <source src="sm.jpg" />
    <img src="fallback.jpg" alt="" />
</picture>

The picture specification was written with this reduced srcset syntax in mind, so it could be used on picture’s source elements as well as img elements.

<picture>
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" /> 
    <source src="sm.jpg 1x, sm-hd.jpg 2x.jpg" />
    <img src="fallback.jpg" alt="" />
</picture>

In concert, the two markup patterns give us an incredible amount of flexibility over what image sources we serve to users, depending on their context.

So This Is Good News.

Absolutely, it is. While srcset as implemented by WebKit doesn’t address to all the responsive images use cases, it does represent a major step toward a long overdue solution—hopefully the first of many.

Let’s hope that other browsers follow WebKit’s lead in implementing this feature as it was originally proposed, and stay tuned to the Responsive Images Community Group’s homepage and Twitter account to keep tabs on the subject.

I also wrote about the issues with responsive images and the solutions we’ve come up with when working on the BostonGlobe website in the chapter “The Struggles and Solutions In Responsive Web Design” of the upcoming Smashing Book 4. Grab it, you won’t be disappointed.

(vf)


© Mat Marquis for Smashing Magazine, 2013.

June 25 2013

13:57

My Workflow To Design And Develop A Modern Portfolio Website


  

A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.

I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.

Behind the scenes look at my design and development workflow.
Behind the scenes look at my design and development workflow.

After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:

  • project planning,
  • branding,
  • designing wireframes,
  • responsive design and flexible grids,
  • using LESS and SASS,
  • catering for high definition screens,
  • creating flexible images,
  • animating content,
  • WordPress development and
  • testing and analytics.

I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Project Planning

Defining your Brief

The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.

At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.

Initial Research and Idea Generation

It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.

Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

portfolio of justin aguilar
Justin Aguilar illustrates his workspace in his portfolio design.

portfolio of meng to
Meng To gets straight to the point with his design case studies.

portfolio of stephen burgess
Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.

After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.

  • My skill set is a mix of both coding and design and I want this to be shown prominently.
  • I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
  • I’d like to use my own photo as a hero image to inject some personality into the site.
  • I enjoy the experience of seeing animations happen as I scroll down a page.
  • I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
  • I like generous amounts of white space and a full width layout.
  • Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
  • I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.

Create a Timeline

Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.

Design

Designing your Brand

Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.

adham dannaway logo design
My final logo design.

As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.

After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.

adham dannaway avatar concept
My final avatar image concept.

Creating Content

I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?

When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.

Displaying your Design Work

The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.

People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.

portfolio case study
Soft Facade have beautiful, in-depth design case studies.

Sketching Wireframes

The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.

wireframe elements list
List of page elements for my contact page.

Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.

When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.

contact page wireframe
Contact page wireframe.

Responsive Design and Flexible Grids

I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.

“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.

Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.

Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.

CSS for my responsive grid:



/* 12 Column Responsive Grid */

.row {

    clear: both;
    max-width: 1040px;
    margin: 0 auto;

}

[class^="col-"] {

    float: left;
    margin: 0 3.84615384615% 0 0;
    list-style: none;
    position: relative;

}

[class^="col-"]:last-child {

    margin: 0;

}

.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }

After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.

HTML for my responsive grid:

The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.



<div class="row">

    <div class="col-5">Content spans over five columns</div>
    <div class="col-7">Content spans over seven columns</div>
    
</div>

Setting Logical Breakpoints

When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.

Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.

When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.

Media queries:



/* Mobile styles go first, outside the media queries */

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

    /* Larger mobile styles (above 320px wide) */
}

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

    /* Tablet styles (above 600px wide) */
}

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

    /* Large laptop styles (above 1024px wide) */
}

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

    /* Desktop styles (above 1140px wide) */
}


With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.

Designing High Fidelity Mock-ups

Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.

I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.

adham dannaway about me page
“About me” page mock-up.

Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.

Development

Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.

I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.

Using CSS Pre-processors (LESS/SASS)

If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.

less sass css pre processors
LESS and SASS CSS pre-processors.

We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.

I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.

Progressive Enhancement with Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?

Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.

Creating Flexible Images

Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.



img { 

    max-width: 100%; 
    height: auto !important;
}

Using CSS Image Sprites

We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.

When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.

Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.

Catering for High Definition Screens

To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.

Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.

retina image
Simply create another image twice the size of the original for high definition devices.

Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.

Media queries to target high definition screens:



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    /* Target all high definition screens */
}

@media 
only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {

    /* Target high definition devices with screens wider than 600px */
}

Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?

An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.

Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.

Page to Page Transitions

I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.

To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.

I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.

Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:



/* 
* Function to animate leaving a page
*/
$.fn.leavePage = function() { 	
  	
	this.click(function(event){

		// Don't go to the next page link yet
		event.preventDefault();
		linkLocation = this.href;
		
		// Fade the page out
		$('body').fadeOut(500, function(){
			
			// Then go to the next page link
			window.location = linkLocation;
		});      
	}); 
};


/* 
* Call the leavePage function on click of links with the "transition" class
*/
$('.transition').leavePage();

I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.

So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.

You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.

Preventing FOUC (Flash of Unstyled Content)

One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.

Animating Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).

Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.

Testing And Analytics

Cross Browser Testing

I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.

major browsers
Test your site on the major browsers.

So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.

You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.

Setup Google Analytics

It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.

Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!

Time To Launch

So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.

I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.


© Adham Dannaway for Smashing Magazine, 2013.

Sponsored post
feedback2020-admin
20:51

May 28 2013

13:30

The Complete Beginner’s Guide to Universal Design

Like countless others, I initially perceived user experience design through the lens of usability: as a “science,” devoid of the subjectivity of “users.” If a door equipped with a push bar actually required me to pull on it in order to open it, I became upset. I considered it a bad experience. And while this does describe a bad experience due to poor usability, my viewpoint was also incredibly myopic.

Unusable or inaccessible, what’s the difference?

As many within our community have pointed out, the things we might normally think of as well designed are often only “well designed” within a certain context. People with limited use of their arms, for example, might find a standard keyboard difficult to employ. Ditto those using browsers that might lack support for web standards. They often incur barriers when accessing the web.

Obviously, this is less than ideal. Design shouldn’t serve merely a subset of its audience – it should serve everyone, equally. Doing that, however, requires thoughtful conversations before, during, and after development begins.

That’s where this article comes in. Like others in this series, The Complete Beginner’s Guide to Universal Design won’t provide a comprehensive look at the subject. Instead, it’s written as a springboard, introducing universal design and its close cousin, accessibility. For context’s sake, we’ll take a look at some of the ways in which universal design manifests itself – both online and off – and then close with some thoughts on approaching design more in a more universal way.

Ready? Let’s get started.

What is universal design?

Universal design describes a set of considerations made to ensure that a product, service, and/or environment is usable by everyone, to the greatest extent possible, without the need for adaptation or specialized design. Accessibility is only slightly different, describing the degree to which a product, service, and/or environment is made available to everyone. So whereas the former is a design methodology (similar to user-centered design), the latter is its most commonly associated metric.

Colloquially, accessibility refers to the degree to which a design functions for people with disabilities – those who can’t see, can’t hear, can’t use a keyboard or mouse, or those who have a cognitive or speech disability. Although these people have historically experienced a marginalized web, the times appear to be changing. The recent rise in popularity of mobile devices has forced organizations to finally give due consideration to the idea of dynamic context: usage in a variety of environments under a variety of conditions. This, in turn, blurs the lines between “people” and people with disabilities. Product designer and mobile strategist Luke Wroblewski has taken to describing his target audience as having “one eyeball and one thumb.”

Both universal design (in general) and mobile-first design (as a case in point) make products and services more accessible, paving the way for what the web community calls “one web.” One web is an increasingly pragmatic vision of a browser- and device-agnostic future which, many believe, is the only future-friendly way forward.

What does universal design “look” like?

All this abstract talk about universal design has probably got you thinking: what does this stuff actually look like? Let’s start by looking at universal design in the real world.

During California State University at Northridge’s annual CSUN conference, accessibility champion Wendy Chisholm pointed out that “stairs make the building inaccessible, not a wheelchair.”

Sloped sidewalks are a design detail accompanying contemporary pedestrian walkways. Physically, they’re nothing more than ramps that are added to sidewalks to make things easier for people using a wheelchair; but their actual utility runs far deeper. By addressing the need for people confined to wheelchairs, designers have also made life easier for moms with strollers, people with handtrucks, etc. This is a good example of how designing for the “extreme” case makes the experience better for everyone.

The digital equivalent of sloped sidewalks is progressive enhancement. Web designers and developers (smartly) assume nothing about their target audience and initially deliver a barebones, semantic website. After the page loads, we use feature detection to determine whether or not a richer experience can supersede it.

Like most universal design considerations, progressive enhancement (when done well) isn’t “visible” unless you know how to look for it. Nevertheless, understanding the thinking that goes into universal design for the web makes all the difference with regards to our approach.

What things shape a universal approach?

Many people have given thought as to what constitutes universal design: Alan Cooper mentions some considerations in his book, About Face 3, and NC State hosts a set of principles on their website. Here, I’ll briefly cover some of the aspects I’ve found useful.

Accessibility begins with content. Accessible content is defined as content that’s perceivable (visible or otherwise), operable (usable), understandable (learnable, logically sound), and robust (well described, available in multiple formats). It is, likewise, made available via an accessible service. Accessible services deliver content to people, browsers, and other applications via a user interface (UI) and/or an application interface (API).

Designing content and services so that they meet these criteria isn’t easy. Instead of the normal, user-centered approach with which readers here are likely familiar, universal designers take an opportunistic point of view, asking who are the people/systems that could possibly use this content or service, and what are the barriers that could possibly stand in their way? I’ve found that this breaks down into a few, key activities: building the business case, measuring accessibility, understanding content, understanding code, and, finally, sharing skills. To be sure, all of these revolve around learning about, developing, and adhering to “best” practices.

Building the business case

To build the business case for universal design, user-centered designers might first measure the content or service’s accessibility (see below) and, second, convince stakeholders that it’s a worthwhile investment. Some arguments include:

  • Accessible content is more findable (SEO benefits) and more shareable (social media benefits).
  • Because they’re standards-based, accessible services are comprised of more interchangeable parts (making for more efficient collaboration).
  • Governments legislate against inaccessible products.
  • For some customers / organizations, accessibility directly drives their purchasing decisions.

Measuring accessibility

Universal design is measured by way of accessibility. Designers can begin to understand this link by developing a working knowledge of the accessibility testing tools available and then using them to evaluate the content or service under question. Finally, they might define an accessibility testing heuristic to ensure consistent measurement.

Accessibility testing tools include – but are certainly not limited to – device labs, screenreaders (such as Chromevox), and disability simulators (such as Etre’s colorblindness simulator). These are just the tip of the iceberg, though. I recommend working with stakeholders to determine the range of disabilities that might apply to their target audience.

After determining which accessibility testing tools provide a useful assessment of their content or service, designers can develop a set of testing heuristics to ensure their consistent use. These could be as simple as checklists or step-by-step guides; they could be as complex as a set of video tutorials.

Understanding content

To improve the accessibility of content, designers must first understand what’s wrong from an accessibility standpoint – if anything – with an organization’s content strategy: how content is planned for, created, published, and maintained. Instead of testing for compliance after the fact, they can embed accessibility considerations into the editorial process from the beginning.

This flowchart shows how determining the content of an image’s alt text requires a bit of thought.

Understanding code

To improve our code we must first understand it. After measuring our service’s accessibility, designers should pair with developers (see below) to better understand – and eventually improve – their development lifecycle. Some organizations do this by creating more modular designs, maintaining pattern libraries. Others adhere to standard application architectures, providing RESTful APIs. Still others use developer frameworks such as Quail.js to ensure that their front-end code is accessible.

Sharing skills

Accessible patterns and company-wide conventions are usually developed ad hoc. While creating an instructive CMS or a set of design/development patterns goes a long way towards ensuring things are accessible, documentation alone is no panacea.

As Julie Dirksen points out in her book, Design for How People Learn, facts are learned differently than skills. Because accessibility problems are potentially introduced whenever content is created – whenever code is written – it’s imperative that team members engage in pair programming or pair writing sessions to share their knowledge.

Go forth

So there you have it. Although it feels like we’ve covered a lot, we’ve actually only scratched the surface. I’ve intentionally left many parts out of this article, parts that are much better covered by entire books written on this subject. If you’re interested in learning more, I recommend giving them a read or perusing the related resource list, below.

Thanks to both Matt May and Derek Featherstone who provided feedback on earlier drafts of this article.

Related Resources


The post The Complete Beginner’s Guide to Universal Design appeared first on UX Booth.

April 11 2013

13:00

An Analysis of Responsive Websites – What’s Hot and What’s Not

Let’s face it folks, everyone in the web design world is chirping away about responsive websites these days. People definitely carry strong views about it and whether you like it or not, you cannot deny the fact that responsive web design has gone mainstream and will continue to progress and expand in the future.

Every client on the web these days are looking for a website that will function just as good on mobile devices as it does on desktop browsers. And come to think of it, the need of today’s modern technological era is to have one working design that is compatible across multiple platforms and devices that includes Netbooks, Blackberry’s, iPhones, iPads, Kindle readers and other smartphones and tablets. It’s inevitable that over the next few years, new gadgets and devices will be unleashed in the market, all having their own respective screen sizes and resolutions.

It seems almost impossible or at least impractical to have a different website version for each of these devices. Some people might opt for creating websites for one platform or device only but they stand to face the risk of losing viewers of other devices.
So what is the solution to this predicament?

The answer is simple – Responsive Web Design

For those who are totally new to the concept, Responsive Web Design is a design technique that thoroughly focuses on a user’s environment and behavior based on the orientation and size of his screen as well as the platform. This methodology integrates a blend of cleverly laid out grids and images combined with the smart usage of CSS Media Queries. What happens is that, when a user switches from his desktop or laptop screen to his iPad or iPhone, the website will automatically itself to fit the device’s screen.

In a nutshell, you could say you are empowering a website with a kind of artificial intelligence which lets it respond to the user’s environment. Responsive Web Design has gained tremendous popularity in the Web Design World as it eliminates the need of having different development and design phases for every different gadget in the Industry.

So if you are looking for inspiration for your next website, you should look at these fresh and stylish responsive design layouts (in no particular order) which cover a wide range of companies and design strategies. Here, we will focus on the mobile side of these responsive websites and try to take a look at what practices make these websites an inspiration to everyone who’s looking to transform their web design to function across multiple platforms and devices.

1. Sony

Sony

Sony manages to get everything right in their elegantly designed website. My favorite part of their responsive design approach was seeing the way their navigation bars change when switching from desktop to mobile devices. On a mobile device, the main navigation menu will change places with the social media buttons. The menus also compact themselves into a single drop down button where the different pages can be accessed easily.

2. Starbucks

Starbucks

Starbucks is unarguably one of the biggest retailers in the world and it was one of the first to make the jump to responsive web design. The minute you switch to mobile from desktop on this website, you get the feeling that they have a sizable team with a substantial budget working on the transformation. The first noticeable thing was that the initial breakpoint arrives at the 769px mark (I assume this has been done to accommodate the portrait orientation of tablets). The best thing about the design is that the navigation adapts itself automatically across different breakpoints. For example, at the largest breakpoint, the top level menu allows you to jump across two levels of navigation for viewing a page.

3. Aids.gov

aids.gov

Aids.gov‘s website is probably the first US government website that has made the switch to responsive web design. I noticed that they use the HTML5 doctype without the use of any additional HTML5 elements like articles, headers or sections. Specific attention has been paid to the website for how it is viewed by users on Windows IE Mobile 7. Aids.gov employs the standard responsive web design approach as the website was redesigned from scratch. The theory lies in working with the smallest screen size and resolution first and then building up the additional required CSS code as the breakpoints are increased. Responsive images have been incorporated to make the website more visually appealing with special emphasis on how the script dynamically recalculates the appropriate height and width of each image based on the screen size.

4. Dairy Queen

dairyqueen

If you want to feast your eyes on one of the most perfect examples of responsive web design, head over to the Dairy Queen’s official website. One of the best things about the design is the fluid slider motion for mobile devices. There is a strong emphasis on how visible the content is to users across multiple devices and screen sizes. The main navigation menu wraps up into a smart drop down box at the first breakpoint allowing users to easily navigate the different food categories. All in all, the website is a visual treat and a perfect execution of elegant and efficient responsive web design.

5. Alsacreations

alsacreations

This is one website that has taken a different responsive web design approach than most websites present on the Internet. Alsacreations doesn’t worry about maintaining all their elements and aspects of their desktop website when a reader switches to tablet or mobile. Instead, Alsacreations drops their image slider from widescreen display to square and even more, when the readers switch to mobile they will not be able to see any of the original elements except for the About button and the Email form in addition to the links for all other elements. This has been done keeping the views of the specific target audience in mind where the creators have kept in mind that most users opening websites from their mobile devices do it to get the brief company information only.

6. Gravitate

gravitate

It wouldn’t be fitting to have a design studio website without responsive website design on their own page, right? Even if you are a lone freelancer, you would want your website to reflect your design skills and portfolio and this is exactly the approach that Gravitate Design Studio has incorporated into their website. They have kept and simple yet elegant design without going over the top on borders or shadowing or other flashy elements. The menu buttons on the top compact and nicely re-arrange themselves when you switch to mobile giving users to access to every page on the website.

7. Spigot

spigot

This is another web design and development company that has flawlessly perfected the art of responsive web design for their website. Going through the pages, you cannot deny the fact that the entire layout has been designed to work without any errors on desktop and mobile devices. You would expect that the shifting and animated icons would lose their touch on mobile devices, but this is not the case with Spigot. Although it would have been difficult to make this design work across all devices yet they have pulled it off magnificently setting a truly inspiring example for others in the field.

8. Disney

disney

Entertainment giants Disney have a website which is a perfect example of coherent designing across all devices and platforms. Smaller resolution doesn’t necessarily mean that you have to compromise on content. The beauty of this responsive design is that the focus stays always on the content that matters. Photos and Videos are the main focus of attention whether you open it on a mobile device, tablet or your PC. However the only drawback from usability point of view on mobile devices is that the navigation doesn’t have direct access in mobile version and you have to make up for it with an extra click.

9. Food Sense

food-sense

Another excellent example of sharp responsive web design techniques is Food Sense. It uses wide screen resolutions to the maximum but when limited by width on mobile devices, it adjusts brilliantly by managing to still maintain its smooth flow and tidy outlook. However, one drawback I noticed with the Mobile version was the loss of the latest Tweets and Facebook plugin which can be seen on the full version under the navigation bar on the side column.

10. Skinny Ties

skinny-ties

There is no better definition of perfect responsive web design execution than Skinny Ties. The design is even more impressive considering that it was a complex website – an ecommerce one. You will find a unique navigation experience across all breakpoints and viewpoint resolutions but the best thing about is its exceptionally responsive handling on mobile devices. Despite the use of the hovering function on touch devices, all visual aspects remain intact.

11. Coca Cola

coca-cola

Soft Drinks giant Coca-Cola made their entry into the fast changing web design world with one of the most complicated responsive web designs I have come across so far. One of the noticeable features is how the content boxes on the right hand side automatically align themselves below the slider so the user has no viewing problems. One drawback I came across however was some minor bugs with the navigation on 240×480 portrait screens.

12. Clean Air Challenge

cleanairhanller

First thing you notice about Clean Air Challenge are the moving clouds in the background. Like many, I expected the website to lose this animation on mobile devices, but amazingly the animation stays smooth and balanced. In addition to that, the website intelligently transforms into a vertical format while still maintaining its other aesthetic elements for example you will lose the images of the main navigation icons when you move to your mobile device but when you scroll down, they will be visible to you in the footer.

13. Contents Magazine

contentsmagazine

Contents Magazine gives one of the best illustrations of how effective responsive web designing can keep the content of the website at the center and front at all times – regardless of the device or platform used. The designers have managed to create a near perfect design where the pre-issued illustrations dynamically wrap around depending on the different breakpoints. The best thing about the design is that a reader will find genuine pleasure in reading the various content on his mobile site as the responsive images adjust themselves and never act as a distraction.

14. Crayola

crayola

Crayola gives us a perfect example of how cleverly used responsive web design can lead to navigation and content being scaled down for users operating a mobile device. When you look at the desktop version, the website has loads of tabs for navigation but when you switch to a mobile device, you get to see only the important ones whereas a user-friendly accordion pops up to accommodate the main navigation bar.

15. Time

time

In this day and age, it has become essential for every news site to have a responsive web design since they have to cater to the needs of a large population of their readers who want access to all the latest news and stories on the go. Time gives us an example of a minimalistic responsive web design approach while at the same time it sets an example for other News websites and companies on how to design grids and menus for easy viewing on a mobile device.

16. Smashing Magazine

smashing

Smashing Magazine sets the example for absolutely perfect responsive web designing where they demonstrate how the original design and content of a website does not need to be sacrificed on mobile devices. The developers of this website have paid attention to accommodating virtually every single screen size and resolution. One of the best things about viewing this website in your mobile device is that the ads simply disappear. The left side bar and the main navigation bar all wrap up into a drop down menu giving a mobile user easy accessibility to all pages of the site. One drawback is the absence of the social media buttons and the RSS feeds subscription button which are only visible in the desktop version.

17. Polygon

polygone

Polygon stands out from the rest of the crowd in the Gaming websites industry combining stunning artwork and responsive web design architecture for a superb display across desktop and mobile devices. But one very obvious drawback is that the social media buttons disappear when you switch from desktop to mobile.

18. Ableton

ableton

Even if you have a relatively heavy sight, Abelton demonstrates that with intelligently written code, you can still deliver a vibrant color combination with a mix of bold imagery across all platforms and devices. With the need to incorporate both video and music, Abelton have managed to do keep the focus on the content while making sure the design is not sacrificed.

19. Burton

burton

Although Snowboard retail giant Burton have incorporated responsive web design nicely for most elements of their page, there is still a lot left to be desired. For instance, the main menu navigation bar on a mobile device is nothing but a simple drop down button. The Board Finder tool is also missing which would have been a great feature for customers who are on the go and who want to find the perfect snowboard for themselves.

20. Abduzeedo

abduzeedo

Although Abduzeedo has a lot going on for itself on the Desktop, it doesn’t quite live up to the same expectations on a Mobile device. For starters, the posts automatically align themselves on the grid which makes them look clustered and improper. Regarding the sticky navigation on the Desktop, it has become more of a trend these days although there are two different opinions regarding this.

The Pros

There are companies that have chosen to design dedicated websites for mobile devices, tablets and desktops while there are others who have incorporated a single responsive web design that can accommodate a wide array of devices accessing it. The most obvious advantage of a responsive web design is that since there is a single website, it is much less of a hassle maintaining it. A single website means a single code for all devices and whenever you need to make a change, you will have to do it only once.

Responsive web designing is also beneficial for owners who are trying to get better SEO rankings as the website offers a single unique URL across all platforms and devices. There are numerous success stories in the industry where companies have reported an increase in mobile clicks to their website by as much as by 50% ever since they revamped their websites with a responsive web design.

The Cons

Providing a truly unique experience across different devices can become a hefty challenge for websites that are increasingly complex compared to others. This means your design team will be spending a lot of hours at the desk customizing and integrating various JavaScript sequences with HTML5/CCS3 code to create a balance between a native-app touch and a desktop-website feeling.

Although Responsive Web design is meant to provide a great experience for every user (and every device) accessing a merchant’s website, the ground reality is not always as such. In some cases, users find themselves having a better experience on Tablets rather than their smartphones and in other cases, it’s the opposite. Sometimes on mobile devices, the text can get too small for a user to read, forcing him to use the pinch and zoom actions – the exact same thing that is meant to be avoided by a mobile website. Getting the navigation absolutely right is another challenge that most designers face for responsive web design especially when it comes to smartphones. There is also a need for a fresh approach for image optimization and content management workflow.

The Final Take

Although widely adopted by a number of reputed companies and merchants worldwide, Responsive Web Design is still in its infant stages. And in spite of the challenges faced, many experts are of the opinion that this is definitely something to look out for in the future. More and more websites are leaning toward Responsive Web Design and if it is planned out properly, we might well see every reputable website as a stunningly beautiful blend of responsive web designing with specific touch elements giving mobile phone and tablet users a truly great experience.

April 08 2013

13:00

Create a Responsive Website Using HTML5 and CSS3 – Video Tutorial

A few weeks ago we released two different introductory articles about HTML5 and CSS3, and I promised you we’d do some cool stuff together in the upcoming months. Well, I have been working hard on this video tutorial and I really hope you enjoy it.

In this tutorial I will teach you how to create a responsive website using HTML5/CSS3 from scratch. So rather than talking about, let’s get straight to it. I hope you will leave me feedback in as I would like to get hear some of your opinions very, very much!

Create a Responsive Website – Video Tutorial

July 13 2012

13:00

Responsive Web’s Message to Mobile Website Creators: “Rest in Peace”

If I were to begin this article by telling you that the mobile web has arrived, and it has taken our world by a storm, and it will most likely change the way we create and use websites, it’ll probably be a waste of time and effort. We all know that the future of the internet lies in mobile – if your website does not cater to mobile solutions or devices and focuses entirely on desktops, you are sure to lose a good deal of visitors. Whether or not we decide to give up our desktops and laptops, at some point of time in our daily routine, we do surf the internet via our smartphones and tablets, and trust me, nothing is more annoying than having to browse a non-mobile friendly website on a cramped screen.

One may ask, if mobile is the future of the internet, mobile website creation software must be selling like hot-cakes, right?

Actually, no.

There used to be a time when mobile website creation tools were very popular. In fact, a lot of premium software for mobile website creation had become synonymous with web design itself. However, as of late, they have fallen out of favor.

Why?

Well, this is what we shall be exploring in this article.

Mobile Website Creation…What?

The fact that I have to include this segment, before starting off with the real topic itself, simply shows that what I’m saying is right — mobile website creation tools are indeed dying.

Seriously, if I were to write about “WordPress is dying” (Oh God, No!), would I need to tell you what WordPress is?

But anyway, for the sake of clarity, we shall name some major mobile site creation tools before we actual start predicting their demise.  So here they are:

  1. mobiSiteGalore
  2. mofuse
  3. bMobilized
  4. ConvertWebsite
  5. Mobify

The above five aren’t, by any means, better (or worse) than the others. It’s just that these are the most popular of the lot, and counting their pros and cons is another story.

Now that you probably know what type of ‘mobile website creators’ I am talking about, let’s proceed with the article.

So, What is Killing Mobile Website Creation Software?

To cut the long story short, responsive web design.

Let’s read it again, slowly:

RESPONSIVE WEB DESIGN IS KILLING MOBILE WEBSITE CREATION SOFTWARE.

How? Read on!

1. Evolution of Mobile Internet

Let’s face it: the world of the internet (or even technology, for that matter) is ever changing. We had floppy disks, and now even DVDs are becoming obsolete. A decade and a half ago, animated GIFs were the norm, but today, well, seriously, animated GIFs?

Similarly, mobile internet isn’t untouched by this evolution either. With the rapid evolution of browsers and technology, the manner in which we browse and interact with the web is changing overnight. With a concept such as responsive web design, a developer/designer can keep pace with the changing trends in a better, more organized manner, as compared to mobile website creation software.

Image Credit

In simple terms, relying on responsive design means you need not wait for your software provider to give you that HTML5 patch or update.

2. Need for SMART Uniformity

Ok, so when you visit a website on your mobile, say that of a government agency, what do you have on your mind? Chances are, you want to quickly get that piece of urgent information, such as check the status of an application that you filed, or read the latest tutorial of your favorite design blog, and so on. You probably won’t marvel for hours at the nifty hand-crafted awesome social sharing buttons in the sidebar, will you?

However, when you are browsing that same website via your laptop, you can afford to spend some time enjoying those social sharing buttons (like, clicking the “Tweet” button to your left, you know, I mean…like, share this article.)

Image Credit

Many mobile site creation tools focus too much on uniformity across mobile and desktop versions of a site. In fact, this usage of the term “version” itself is the culprit here – it simply leads to a misnomer such as “why should my website’s MOBILE VERSION be lacking in any manner”? Responsive website design, on the other hand, retains uniformity of content rather than appeal.

3. What is ‘Mobile’, again?

Quick, define “mobile device”.

Having a hard time?

Actually, with the rate at which new devices are evolving, it has become impossible to classify or define ‘mobile’ in rigid terms. What is mobile today, maybe a bulky mess tomorrow. This is what causes the problem – most mobile website creation tools rely on strict definitions – how often do you read “create websites optimized for phones in minutes”? Such claims are nothing but an assumption that the phones of today are going to stick around tomorrow, and will probably not be replaced by tablets (or, if you are innovative, a small screen dangling to your television remote).

Image Credit

Ideally, at the rate with which mobile web is evolving, responsive design is the best solution to design websites catering to the mobile audience.

4. Generic Recipe for Success (Failure?)

Before the advent of responsive web design and progressive enhancement (as well as disclosure), there used to be a generic recipe when designing mobile websites: this is mobile content, that is not. Most mobile web creation tools still stick to a modified form of that recipe. However, our mobile phones have now developed to an extent that you cannot really limit mobile content to a formula in particular. Truth is, we are still only learning to employ responsive and adaptive design in practice.

To understand this fully, visualize this: assume you have launched a book in two variants: hard cover and paper back. Now, since the paperback is the cheaper alternative, will you strip out a chapter of your book, because, after all, your hard cover version is the ‘bigger’ one?

I guess not.

(On an unrelated note, I shall now include a picture of a manuscript: just to facilitate “visualization”).

Image Credit

This is what being ‘adaptive’ means: for your book’s paperback version, you will retain the content in totality, but will also find an alternate place for the author bio or info on the hard cover’s inner jacket. Responsive web design makes allowances for such adaptation; many mobile website creation tools do not.

5. Adaptive, not Adapted

A few years back, whenever you visited a website via mobile, you were often greeted with a footer text (often annoyingly placed in the header, within the content, and five other hidden places like an Easter egg): “Switch to the full site.”

What? Full site?

So, you mean, this mobile site that I am browsing is half-baked? Incomplete? Semi-finished?

Placing such a demarcation between desktop and mobile sites, one being full and the other being, well, “half”, is a disaster. You are telling the world that your mobile website is not adaptive web design; it is, in fact, an adaptation of your “full” site.

Actually, this is arguably the single biggest reason why mobile website creation tools are failing: they tend to place a line of distinction between mobile sites and desktop sites (often blatantly referred to as “mobile version” and “normal version”). Exceptions apart, most mobile site creation tools believe in such demarcation.

Image Credit

True, a mobile site is different from a desktop one, but that doesn’t mean it is ‘separate’, does it? Being different here is a necessity, but being separate is a travesty. Responsive design, on the other hand, ensures that the website adapts to the user’s screen resolution, rather than leaving the mobile “version” an adaptation of the actual site.

In the End

Coming back to the question, are mobile site creation tools dead? Not totally, but yes, they are a dying breed. While it is possibile that newer mobile development tools which cater to the changing trends may come into vogue, overall, responsive web design has handed the pink slip to mobile site creation tools.

What do you think? When creating a website, do you prefer using a mobile site development software, or simply opt for responsive design? Feel free to leave a comment!

February 22 2012

10:00

What is the Trend for Web Design in 2012?

Just a month and a half has passed in 2012 and there are some patterns which are quite easy to notice in how people design. Sure, most of them are similar to the ones of 2011 – it seems 2011 and 2012 will not be too different, however there might be some small changes which I will talk about soon. There is no doubt that screen size is not an issue anymore and designing for all sizes is crucial – this is the stand point of web design trends in 2012.

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of mediaqueri.es.

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

designinfluences.com/fluid960gs/

cssgrid.net/

960.gs/

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

englishworkshop.eu/

kantt.dk/

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

wearepropeople.com/

freshness.hu/

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

January 12 2011

15:39

Responsive Web Design: What It Is and How To Use It

Advertisement in Responsive Web Design: What It Is and How To Use It
 in Responsive Web Design: What It Is and How To Use It  in Responsive Web Design: What It Is and How To Use It  in Responsive Web Design: What It Is and How To Use It

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

The Concept Of Responsive Web Design

Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:

“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.”

Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why should we create a custom Web design for each group of users; after all, architects don’t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).

But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, plus additional ideas in the making.

Adjusting Screen Resolution

With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

Portrait-landscape in Responsive Web Design: What It Is and How To Use It

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.

Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

Sizes in Responsive Web Design: What It Is and How To Use It

Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?

Part of the Solution: Flexible Everything

A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

Moreflexible in Responsive Web Design: What It Is and How To Use It

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:

For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”

While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

Croppinglogo in Responsive Web Design: What It Is and How To Use It

If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).

This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.

Flexible Images

One major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }

As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.

Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.

While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.

Filament Group’s Responsive Images

This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

Filamentgroup in Responsive Web Design: What It Is and How To Use It

This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then, we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.

Stop iPhone Simulator Image Resizing

One nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.

There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.

Iphonescale in Responsive Web Design: What It Is and How To Use It
(Image: Think Vitamin | Website referenced: 8 Faces)

Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

Custom Layout Structure

For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.

For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.

Here is the style.css (default) content:

/* Default styles that will carry to the child style sheet */

html,body{
   background...
   font...
   color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Structural elements */
#wrapper{
	width: 80%;
	margin: 0 auto;

	background: #fff;
	padding: 20px;
}

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}

Here is the mobile.css (child) content:

#wrapper{
	width: 90%;
}

#content{
	width: 100%;
}

#sidebar-left{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

#sidebar-right{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

Movingcontent in Responsive Web Design: What It Is and How To Use It

Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.

In Ethan Marcotte’s article, we see an example of a media query in action:

<link rel="stylesheet" type="text/css"
	media="screen and (max-device-width: 480px)"
	href="shetland.css" />

This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths based on these media query features.

One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files in the mark-up as shown in the post “Hardboiled CSS3 Media Queries.”

CSS3 Media Queries

Above are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.

The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets.

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).

@media screen and (max-width: 600px) {
     .aClassforSmallScreens {
          clear: both;
		  font-size: 1.3em;
     }
}

Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.

While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.

@media screen and (max-device-width: 480px) {
     .classForiPhoneDisplay {
          font-size: 1.2em;
     }
}
@media screen and (min-device-width: 768px) {
     .minimumiPadWidth {
          clear: both;
		  margin-bottom: 2px solid #ccc;
     }
}

There are also other tricks with media queries to target specific devices. Thomas Maier has written two short snippets and explanations for targeting the iPhone and iPad only:

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

@media screen and (orientation: landscape) {
     .iPadLandscape {
          width: 30%;
		  float: right;
     }
}
@media screen and (orientation: portrait) {
     .iPadPortrait {
          clear: both;
     }
}

Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range.

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .classForaMediumScreen {
          background: #cc0000;
          width: 30%;
          float: right;
     }
}

The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.

Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.

You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient.

Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best.

Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

JavaScript

Another method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$(window).bind("resize", resizeWindow);
		function resizeWindow(e){
			var newWindowWidth = $(window).width();

			// If width width is below 600px, switch to the mobile stylesheet
			if(newWindowWidth < 600){ 				$("link[rel=stylesheet]").attr({href : "mobile.css"});	 			} 			// Else if width is above 600px, switch to the large stylesheet 			else if(newWindowWidth > 600){
				$("link[rel=stylesheet]").attr({href : "style.css"});
			}
		}
	});
</script>

There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”

Showing or Hiding Content

It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

Diggmobile in Responsive Web Design: What It Is and How To Use It

Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!

display: none;

Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.

Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout.

Showinghidingcontent in Responsive Web Design: What It Is and How To Use It

Here is our mark-up:

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
	<h2>Main Content</h2>
</div>

<div id="sidebar-left">
	<h2>A Left Sidebar</h2>

</div>

<div id="sidebar-right">
	<h2>A Right Sidebar</h2>
</div>

In our default style sheet below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load.

Here is the style.css (default) content:

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}
.sidebar-nav{display: none;}

Now, we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content (or in another reasonable way).

Here is the mobile.css (simpler) content:

#content{
	width: 100%;
}

#sidebar-left{
	display: none;
}

#sidebar-right{
	display: none;
}
.sidebar-nav{display: inline;}

With the ability to easily show and hide content, rearrange layout elements and automatically resize images, form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability (icons would be more beneficial on smaller screens).

Below are a couple of relevant resources:

Touchscreens vs. Cursors

Touchscreens are becoming increasingly popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, but don’t be so quick. Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.

Touchscreen in Responsive Web Design: What It Is and How To Use It

Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition; they should be considered an additional feature only for cursor-based devices.

Look at the article “Designing for Touchscreen” for more ideas. Many of the design suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability.

A Showcase Of Responsive Web Design

Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.

Art Equals Work
Art Equals Work is a simple yet great example of responsive Web design. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen, then the layout switches to a more readable and user-friendly format. The sidebar disappears, navigation goes to the top, and text is enlarged for easy and simple vertical reading.

Artequalswork1 in Responsive Web Design: What It Is and How To Use It

Artequalswork2 in Responsive Web Design: What It Is and How To Use It

Think Vitamin
With Think Vitamin, we see a similar approach. When on a smaller screen or browser, the sidebar and top bar are removed, the navigation simplifies and moves directly above the content, as does the logo. The logo keeps its general look yet is modified for a more vertical orientation, with the tagline below the main icon. The white space around the content on larger screens is also more spacious and interesting, whereas it is simplified for practical purposes on smaller screens.

Thinkvitamin1 in Responsive Web Design: What It Is and How To Use It

Thinkvitamin2 in Responsive Web Design: What It Is and How To Use It

8 Faces
8 Faces’ website design is flexible, right down to a standard netbook or tablet device, and expands in content quantity and layout width when viewed on wider screens or expanded browsers. When viewed on narrower screens, the featured issue on the right is cut out, and the content below is shortened and rearranged in layout, leaving only the essential information.

8faces1 in Responsive Web Design: What It Is and How To Use It

8faces2 in Responsive Web Design: What It Is and How To Use It

Hicksdesign
The Hicksdesign website has three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design takes on a new layout: the third column to the right is rearranged above the second, and the logo moves next to the introductory text. Thus, no content needs to be removed for the smaller size. For even narrower screens and browser widths, the side content is removed completely and a simplified version is moved up top. Finally, the font size changes with the screen and browser width; as the browser gets narrower, the font size throughout gets smaller and remains proportional.

Hicksdesign1 in Responsive Web Design: What It Is and How To Use It

Hicksdesign2 in Responsive Web Design: What It Is and How To Use It

Information Architects
Here is a great example of a flexible image. The image in this design automatically resizes after certain “break” points, but in between those width changes, only the side margins and excess white space are altered. On smaller screens and minimized browsers, the navigation simplifies and the columns of navigation at the top fall off. At the design’s smallest version, the navigation simplifies to just a drop-down menu, perfect for saving space without sacrificing critical navigation links.

Informationarchitects1 in Responsive Web Design: What It Is and How To Use It

Informationarchitects2 in Responsive Web Design: What It Is and How To Use It

Garret Keizer
The website for Garret Keizer is fully flexible in wider browsers and on larger screens: the photo, logo and other images resize proportionally, as do the headings and block areas for text. At a few points, some pieces of text change in font size and get smaller as the screen or browser gets narrower. After a certain break point, the layout transforms into what we see in the second screenshot below, with a simple logo, introductory text and a simple vertical structure for the remaining content.

Garretkeizer1 in Responsive Web Design: What It Is and How To Use It

Garretkeizer2 in Responsive Web Design: What It Is and How To Use It

Simon Collison
With four relatively content-heavy columns, it’s easy to see how the content here could easily be squished when viewed on smaller devices. Because of the easy organized columns, though, we can also collapse them quite simply when needed, and we can stack them vertically when the space doesn’t allow for a reasonable horizontal span. When the browser is minimized or the user is on a smaller device, the columns first collapse into two and then into one. Likewise, the horizontal lines for break points also change in width, without changing the size or style of each line’s title text.

Colly1 in Responsive Web Design: What It Is and How To Use It

Colly2 in Responsive Web Design: What It Is and How To Use It

CSS Tricks
On the CSS Tricks website, like many other collapsible Web designs, the sidebars with excess content are the first to fall off when the screen or browser gets too narrow. On this particular website, the middle column or first sidebar to the left was the first to disappear; and the sidebar with the ads and website extras did the same when the browser got even narrower. Eventually, the design leaves the posts, uses less white space around the navigation and logo and moves the search bar to below the navigation. The remaining layout and design is as flexible as can be because of its simplicity.

Csstricks1 in Responsive Web Design: What It Is and How To Use It

Csstricks2 in Responsive Web Design: What It Is and How To Use It

Tee Gallery
As one can see, the main navigation here is the simple layout of t-shirt designs, spanning both vertically and horizontally across the screen. As the browser or screen gets smaller, the columns collapse and move below. This happens at each break point when the layout is stressed, but in between the break points, the images just change proportionally in size. This maintains balance in the design, while ensuring that any images (which are essential to the website) don’t get so small that they become unusable.

Teegallery1 in Responsive Web Design: What It Is and How To Use It

Teegallery2 in Responsive Web Design: What It Is and How To Use It

City Crawlers: Berlin
When varied between larger screen sizes and browser widths, this design remains flexible. It also remains flexible after a few layout pieces collapse into a more vertical orientation for small screens and narrow browsers. At first, the introductory image, logo and navigation image links resize proportionally to accommodate variations in screen and browser widths, as do the blocks of content below. The bottom columns of content eventually collapse and rearrange above or below other pieces, until (at the narrowest point) they are all stacked vertically. In the layout for the smallest screen and narrowest browser, the slideshow is left out altogether, the navigation is moved below the logo and other images are also removed.

Berlin1 in Responsive Web Design: What It Is and How To Use It

Berlin2 in Responsive Web Design: What It Is and How To Use It

Ten by Twenty
Ten by Twenty is another design that does not resort to changing layout structure at all after certain break points, but rather simplifies responsive Web design by making everything fully flexible and automatically resizing, no matter what the screen or browser width. After a while, the design does stress a bit and could benefit from some rearrangement of content. But overall, the image resizing and flexible content spaces allow for a fairly simple solution that accommodates a wide range of screen sizes.

Tenbytwenty1 in Responsive Web Design: What It Is and How To Use It

Tenbytwenty2 in Responsive Web Design: What It Is and How To Use It

Hardboiled Web Design
On wide screens and browsers, all of the content on this simply designed website is well organized into columns, sidebar and simple navigation up top. It’s a fairly standard and efficient layout. On smaller screens, the sidebar is the first to drop off, and its content is moved below the book previews and essential information. Being limited in space, this design preserves its important hierarchy. Whereas on a wider screen we’d look left to right, on a narrower screen we’d tend to look from top to bottom. Content on the right is moved below content that would appear on the left on a wider screen. Eventually, when the horizontal space is fully limited, the navigation is simplified and stacked vertically, and some repeated or inessential elements are removed.

Hardboiled1 in Responsive Web Design: What It Is and How To Use It

Hardboiled2 in Responsive Web Design: What It Is and How To Use It

Teixido
This design features a complex layout that looks inspired by a print style. When viewed on a standard wide computer screen, more portfolio pieces are featured and spanned horizontally across the page. As one moves down the page, more graphics and imagery span the space. On a smaller screen, the portfolio piece is cut down to one, and then eventually left out altogether for very small screens and narrow browsers. The visualizations below collapse into fewer columns and more rows, and again, some drop off entirely for very small screens. This design shows a creative and intelligent way to make a not-so-common layout work responsively.

Teixido1 in Responsive Web Design: What It Is and How To Use It

Teixido2 in Responsive Web Design: What It Is and How To Use It

Stephen Caver
This design has three main stages at which the design and layout collapse into a more user-friendly form, depending on how wide the screen or browser is. The main image (featuring type) is scaled proportionally via a flexible image method. Each “layout structure” is fully flexible until it reaches a breaking point, at which point the layout switches to something more usable with less horizontal space. The bottom four columns eventually collapse into two, the logo moves above the navigation, and the columns of navigation below are moved on top or below each other. At the design’s narrowest stage, the navigation is super-simplified, and some inessential content is cut out altogether.

Stephancaver1 in Responsive Web Design: What It Is and How To Use It

Stephancaver2 in Responsive Web Design: What It Is and How To Use It

Unstoppable Robot Ninja
This layout does not change at all; no content is dropped or rearranged; and the text size does not change either. Instead, this design keeps its original form, no matter what the change in horizontal and vertical space. Instead, it automatically resizes the header image and the images for the navigation. The white space, margins and padding are also flexible, giving more room as the design expands and shrinks.

Unstoppablerobotninja1 in Responsive Web Design: What It Is and How To Use It

Unstoppablerobotninja2 in Responsive Web Design: What It Is and How To Use It

Bureau
This is perhaps the simplest example of a responsive Web design in this showcase, but also one of the most versatile. The only piece in the layout that changes with the browser width is the blog post’s date, which moves above the post’s title or to the side, depending on how much horizontal space is available. Beyond this, the only thing that changes is the width of the content area and the margin space on the left and right. Everything is centered, so a sense of balance is maintained whatever the screen or browser width. Because of this design’s simplicity, switching between browser and screen widths is quick and easy.

Bureu1 in Responsive Web Design: What It Is and How To Use It

Bureu2 in Responsive Web Design: What It Is and How To Use It

CSS Wizardry
Harry Roberts shows that responsive design can also have quite humble uses. If the user has a large viewport, the website displays three columns with a navigation menu floating on the left. For users with a viewport between 481px and 800px, a narrow version is displayed: the navigation jumps to the top of the site leaving the area for the content column and the sidebar. Finally, the iPhone view displays the sidebar under the content area. Harry also wrote a detailed article about the CSS styles he added to the stylesheet in his article “Media queries, handier than you think“. A nice example of how a couple of simple CSS adjustments can improve the website’s appearance across various devices.

Css-wizardry in Responsive Web Design: What It Is and How To Use It

Css-wizardry2 in Responsive Web Design: What It Is and How To Use It

Bryan James
This last design by Bryan James shows that responsive Web design need not apply only to static HTML and CSS websites. Done in Flash, this one features a full-sized background image and is flexible up to a certain width and height. As a result of the design style, on screens that are too small, the background image gets mostly hidden and the content can become illegible and squished. Instead of just letting it be, though, a message pops up informing the user that the screen is too small to adequately view the website. It then prompts the user to switch to a bigger screen. One can discuss if the design solution is good or bad in terms of usability, but the example shows that Flash websites can respond to user’s viewport, too.

Bryanjames1 in Responsive Web Design: What It Is and How To Use It

Bryanjames2 in Responsive Web Design: What It Is and How To Use It

Conclusion

We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology. We should rather start a new era today: creating websites that are future-ready right now. Understanding how to make a design responsive to the user doesn’t require too much learning, and it can definitely be a lot less stressful and more productive than learning how to design and code properly for every single device available.

Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the coming years.

Besides saving us from frustration, responsive Web design is also best for the user. Every custom solution makes for a better user experience. With responsive Web design, we can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the vast majority of people on the trendiest gadgets around, and likewise as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway, right?

Further Resources

(al) (vf)


© Kayla Knight for Smashing Magazine, 2011. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, elastic layout, flexible layout, fluid layout, mobile design, responsive web design

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...