Fisssion

The Responsive Web Design Superpack

Julian — Sun, 04 Dec 2011 20:45:03 +0000

Let’s take a look at responsive web design, some related challenges—but most importantly, how you can easily get started and integrate it into your arsenal.

. . .

When you’re working on your own personal projects, there’s an intoxicating freedom surrounding your methodology; you benefit from creative exploration and the freedom to fail. Your clients however, benefit from what you have streamlined and can guarantee.

As any new web designer quickly discovers, it’s mandatory that you have a reliable workflow when tackling client projects—what you discover shortly after, especially if work is going well, is that it can be hard to break out of the tried and true.

The Responsive Challenge

Responsive web design (coined by Ethan Marcotte) focuses on building a website that arranges its content to fit the user’s screen size, primarily to accommodate the growing user base of mobile browsing*. The concept is rather straight forward, but there are a few challenges:

More Design — Responsive web design adds another dimension to your design; you need to consider how the layout will shift, what elements will require style changes and even the HTML structure in some cases (eg. mobile UX trends favor navigation at the bottom.)
The Grid — The industry has primarily settled on various grids optimized for a screen resolution of 1024 x 768. Making the shift to a responsive grid in itself could pose tremendous changes to your workflow.
Platform Limitations — Some elements/functionality (eg. large pictures, complex forms, banner rotators, etc.) may be less effective on smaller screensizes and/or inconsiderate of mobile bandwidth limitations; creating a consistent experience across platforms may mean sacrificing certain elements/functionality.
Browser Support / QA — Not all browsers support CSS media queries (the heart of responsive web design,) and even for those that do, additional testing is required as each page has numerous states in which they might suffer from display bugs or other inconsistencies.

Foundation by ZURB — “An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”
(read more: http://foundation.zurb.com/)
Matt Wilcox’s Adaptive Images — “Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images.”
(read more: http://adaptive-images.com/)
Alexis Sellier’s LESSCSS — “Less extends CSS with dynamic behavior such as variables, mixins, operations and functions.”
(read more: http://lesscss.org/)
Online CSS Minifier — The Javascript based counterpart to the YUI compressor, that minifies your stylesheets (compressing upwards of 40%.)
(see online: http://tools.w3clubs.com/cssmin/)

An ordinary day

Julian — Wed, 21 Sep 2011 21:30:14 +0000

An ordinary day, adorned with dreams and progress; Fisssion is born, and proudly hosted on Knownhost. Content will shortly follow, but a custom design will take time (clients keep me busy.)

Creating A Surreal Wallpaper

Julian — Mon, 06 Jun 2011 19:59:31 +0000

Introduction

In this tutorial, we’ll be creating a photo-manipulated wallpaper using free images and brushes from around the web—download the assets for this tutorial.

I’ve already collected the photos for this project, but I wanted to touch on this for your future projects; great photo-manipulation requires great photos—don’t be afraid to spend a few hours (or dollars) to find great imagery.

With all that said, let’s take a look at our final wallpaper:

Part 1: Extracting The Ground

We’ll be coming back to detail this area, but this is a great place to start for our project. In part 1, we create our “Ground” layer by removing the sky from our photo.

Step 1

Open ‘background.jpg’ from the project assets folder, and double-click on the locked “Background” layer.
In the “New Layer” popup, name this layer “Ground” and hit OK.
In the main menu, goto “Layer > New > New Layer” (Ctrl + Shift + N) and enter “Base” as the name—hit OK.
Using the paint bucket tool, fill the “Base” layer with white.
Drag this layer underneath the “Ground” layer.

Step 2

The first thing we’ll need to do is remove the sky; there are a number of selection tools, but I prefer the pen tool for greater control.

Draw a curve just under the horizon—when you reach the trees, cut straight through (see above.)
When you reach the end, loop under the entire image, and click the first anchor to complete the curve.
Open your Paths window, right-click “Work Path” and select “Make Selection.”
In the “Make Selection” popup, enter “0.2″ pixels for the feather radius, and hit OK.
From the main menu, goto “Select > Inverse” (Ctrl + Shift + I) and hit DELETE.

Step 3

Now that we’ve removed the sky, our next step is to clean up the terrain—however, this step I felt benefited from visual demonstration.

The Video:

Part I: Extracting The Ground – Step 3 (video) from Julian Lloyd on Vimeo.

Part 2: Extracting The Castle

Now that we have an attractive “Ground” layer as a foundation, our next step is to add in our castle. This process will be very similar what we just did for the ground.

Step 1*

If you haven’t already, save our currently open document—we’ll be coming back to it shortly.
Open ‘disney_concert_hall.jpg’ from the project assets folder, and double-click on the locked “Background” layer.
In the “New Layer” popup, name this layer “Castle” and hit OK.
In the main menu, goto “Layer > New > New Layer” (Ctrl + Shift + N) and enter “Base” as the name—hit OK.
Using the paint bucket tool, fill the “Base” layer with white.
Drag this layer underneath the “Castle” layer.

*I know this can seem unnecessary, but I’ve found naming your layers (particularly as you work,) is a good habit to build.

Download the final wallpaper

2560 x 1600
1920 x 1200
1600 x 1200
1440 x 1024
1280 x 1024
1024 x 768

Purpose-Oriented Design

Julian — Sat, 04 Jun 2011 05:52:28 +0000

While the web continues to evolve, it remains a vehicle for communication; between friends, or from company to customer, structuring clear and accessible information is among virtually every project’s list of goals. It’s still common however, to find websites with ambiguous design:

Vague call to action.
Poor organization/information architecture
Confusing/mixed-purpose content
Ineffective user interfaces

The result is a horrendous user experience; a site that visitors can’t navigate comfortably not only precludes building trust, but ruptures the site’s perceived integrity. How does this happen?

The Client Trap

As a web designer, you’re responsible for more than the average client understands; information architecture, brand/identity congruence, ease of use, and user experience are likely only some of the components that influence your design choices.

“Good clients treat you like a doctor, and therefore defer to your expertise. Bad clients want to focus-group your designs.”

- Michael Kormendy

One of the fastest ways to an ambiguous design, is ingeniously depicted by Matthew Inman (theoatmeal.com) that touches on something important—client design sabotage. We all want our clients to be happy, so we try to involve them in the process by emphasizing communication, and a collaborative relationship. This of course starts off well, but after a few rounds of client revisions, often sneaks in a few suspect design elements.

The key is setting a precedent with your client, wherein they expect you to be in charge. This gives you the traction to avoid client design traps, and successfully employ design strategies such as purpose-oriented design.

Prioritizing Content Purpose

Regardless of the web service or application, when shifting your design paradigm to prioritize the content’s purpose, you’ll naturally analyze your project’s content with a new filter: relevancy—which has some interesting consequences:

The information architecture (IA) is stripped of superfluous and redundant elements, enhancing content digestion. This refinement results in a context-sensitive IA.
The shift towards a context-sensitive IA affords more intuitive navigation, which in turn boosts user confidence.
Aesthetics benefit from the organized content and intuitive navigation, which helps support your call(s) to action.

By using relevancy and purpose-oriented designs as a foundation, you create boundaries for your project; these thresholds (governed by the principal of purpose,) not only facilitate a strong protection against ambiguous design elements, but serve as a powerful tool when negotiating with clients.

In The Wild

Interestingly enough, after exploring this concept on my own, I started seeing parallels in popular websites—below are a few annotated examples:

Conclusion

The strategy clearly requires a lot of flexibility, and for freelancers, I recognize not everyone is comfortable being picky with (and potentially turning down) clients.

Avoiding Client Design Traps

Julian — Wed, 01 Jun 2011 10:58:06 +0000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum, odio ac tincidunt interdum, orci lectus tincidunt augue, a fermentum odio tortor et ante. Donec faucibus mattis ornare. Proin scelerisque tempor metus, eget euismod ante fringilla sit amet. Aenean arcu metus, commodo et luctus ac, egestas eu turpis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Cras semper placerat placerat. Duis condimentum orci id lectus sollicitudin vehicula auctor enim euismod.
Morbi sed nunc eu nunc pharetra posuere. Etiam dignissim pellentesque elit at molestie.

Ut non lectus sed lectus pretium blandit quis a tortor. Nullam metus velit, hendrerit eget fringilla nec, dapibus et mi. Mauris eu felis sem, eget varius eros. Phasellus nisi ipsum, dictum sit amet hendrerit in, adipiscing in augue. Nulla facilisi. Vestibulum sodales augue et libero iaculis vulputate. Suspendisse velit risus, gravida sit amet tempus ac, vulputate vel massa. Aliquam erat volutpat.

Maecenas pretium pretium dictum

Donec rutrum faucibus dui vel euismod. Cras ac nisi justo. Phasellus in accumsan orci. Nam pellentesque nibh et dolor condimentum hendrerit. Sed hendrerit vehicula magna. Ut lectus est, ultrices et posuere sed, mollis eget odio.

“Donec laoreet dignissim ipsum ac porta. Phasellus vel nulla eu dui suscipit mollis. Etiam et sagittis tellus. Praesent eleifend metus eget urna molestie bibendum.”

Duis accumsan, urna in venenatis hendrerit, ante justo bibendum nisl, et gravida mauris arcu sit amet nibh. Fusce sem lacus, suscipit ac iaculis id, fringilla vitae urna. Integer mi odio, rhoncus blandit tincidunt ac, tincidunt eget diam. Proin eu diam et nulla volutpat viverra. Aliquam erat volutpat. Nam dolor tortor, tempus a bibendum vitae, malesuada sed diam. Vestibulum fringilla vestibulum orci, nec dictum dolor posuere eleifend. Suspendisse lobortis urna in odio luctus a commodo lorem sodales.

Sed Diam Dui, Sagittis Ut Iaculis

Donec et justo est, et dignissim ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus felis, tincidunt ut congue nec, tristique in ligula. In hac habitasse platea dictumst. Vivamus mollis erat facilisis nisl laoreet ut venenatis dolor elementum. Mauris interdum magna sit amet eros tempus vel porttitor turpis suscipit. Curabitur commodo mauris et purus consequat bibendum. Nam ante purus, tempor a iaculis eget, bibendum quis libero. Fusce egestas augue eros. Pellentesque non nibh ut nisi suscipit lacinia ut nec nunc. Sed eu sem magna, et ullamcorper ipsum. Vivamus vitae magna ligula, in vehicula elit. Sed convallis tortor in nisl tempus facilisis. Sed vitae velit id lorem iaculis lobortis sit amet sed ligula. Proin vitae velit est. Quisque tellus sem, tincidunt sit amet ornare ut, condimentum in elit. Donec pretium porta mattis. Fusce eros justo, ullamcorper sed commodo eget, vulputate non metus.

Vestibulum nulla ligula, dignissim vel volutpat ut, volutpat eu lacus. Etiam auctor, ipsum vel gravida consectetur, mauris turpis consequat nisl, a sagittis urna elit nec velit. Etiam elementum, lacus vitae interdum ultricies, odio nunc fermentum mi, id fringilla leo mauris sit amet risus. Fusce non augue at augue elementum fermentum. Pellentesque mollis magna augue, eu luctus sapien. Curabitur eu tortor sed arcu aliquam faucibus a et erat. Integer faucibus tempus eleifend. Proin dapibus, purus eget sagittis eleifend, turpis nisi porta velit, ac vulputate erat odio id purus. Etiam et libero eget sem blandit viverra at a urna. Nullam diam est, pellentesque in adipiscing a, dignissim sit amet sapien. Vestibulum varius tristique ornare. Mauris elementum, orci nec bibendum mollis, sapien ipsum pellentesque nisl, tincidunt hendrerit turpis odio nec urna. Nulla ac ante eros. Sed tristique condimentum neque, quis imperdiet justo pharetra malesuada.

Aliquam sed iaculis libero. Proin nulla eros, cursus nec volutpat in, ornare nec sapien. Sed ultricies vehicula facilisis. Maecenas hendrerit, nisi aliquam auctor convallis, sapien odio luctus ante, quis venenatis est massa eu lectus. Etiam commodo arcu at leo semper gravida. Maecenas a mauris nibh. Quisque id metus nec mi feugiat tempor. Vivamus diam arcu, ultricies sed dignissim et, dignissim ac lacus. Morbi vestibulum interdum nisi eu accumsan. Proin mollis elit arcu. Maecenas semper placerat nunc, quis pellentesque ligula consectetur sit amet. Vestibulum aliquet ante diam, vitae convallis odio. Phasellus lectus sapien, suscipit in tempus convallis, vehicula eu nunc. Suspendisse potenti. Aenean feugiat nisi sed ligula viverra eleifend. Phasellus vel urna nulla. Proin in velit mi, quis lacinia nibh. Etiam mattis, justo placerat facilisis iaculis, urna justo commodo ligula, et commodo lacus leo at nisi. Sed iaculis sem porta augue sollicitudin quis hendrerit lacus cursus. Vivamus dolor mi, fermentum nec sagittis et, tincidunt nec felis.