responsive web design for the visual designer

RESPONSIVE WEB DESIGNFOR THE VISUAL DESIGNER BY ERICA COSTA OF

THE BRANDON AGENCY

WHAT IS A RESPONSIVE WEBSITE?

A responsive website responds to its environment.

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

- Jeffrey Veen

There is no longer a standard screen size.

It’s one site for every device.

WHO IS USING RESPONSIVE WEB DESIGN RIGHT NOW?

barackobama.com

sony.com

bostonglobe.com

WHAT DOES ALL THIS MEAN FOR US (THE DESIGNERS)?

We have to create beautiful websites that anticipate users’ needs beyond the desktop.

Far beyond the desktop.

This is where responsive web design steps in.

SO, HOW DO WE APPROACH THE ACTUAL DESIGN?

No more picking an arbitrary size in photoshop, mocking-up a design, and handing it over to developers.

We need a new design process.

Get content

Hand over design to the developer

Fix problems and find the breakpoint

Research, sketch, brainstorm

Chat with the developer

Designing for the smallest resolution

Tweak the design for this new size

Sit with the developer and test

Repeat until you’ve reached the largest size

8

6

7

2

4

3

1

5

This process requires us and the developer to work together right from the very beginning.

We can’t work separately anymore.

WHAT DO YOU DO NOW?

Find and utilize resources on the web.

Just be willing to adapt and learn.

RESOURCES

AdaptiveAdaptive design is based on top of fixed-width designs. Instead of having one fixed-width design, there are multiple fixed-width designs for a single page. Normally these designs are split up based on the width of the browser, so there can be one fixed-width design for mobile, another for iPad, and another for a computer. Although they’re “multiple designs,” they’re generally based on the same thing, just rearranged to better suit a larger (or smaller) screen. In effect, the website adapts to the size of the visitor’s screen/browser by automatically selecting a different fixed-width design to use.

BreakpointA breakpoint is the width at which a given design starts to look broken and, therefore, at which point a new design should be applied.

Fixed-widthThis is a traditional web page. With fixed-width sites, it doesn’t matter what size screen or browser a visitor has, the site is always the same size (in pixels) as the design in our Photoshop file. If the screen isn’t big enough to fit the design in, the visitor has to scroll sideways. If the screen is huge, the designhas empty space around it.

FluidInstead of an element being a known and fixed size, it can stretch to fill any available space. But, only horizontally (this is a stretch, not a scale). Whole pages can be made of fluid elements, meaning the whole site becomes fluid.The layout doesn’t change..

Mobile firstIs a way of managing the design and build process. The idea is to start by considering the simplest possible version (usually the mobile version, hence the name) and work up through larger and more complex designs only once a smaller one is complete. The advantage in terms of design is an emphasis on core content and design elements (typography and colors, then layout, etc). From a technical perspective, this is quite essential; from a design perspective, it’s less so.

ResponsiveCombines Adaptive and Fluid techniques. In a responsive project, there are a series of designs, each of which is fluid - stretching up to a given point before switching to a different design or layout

TERMS TO KNOW

abookapart.com

blog.responsivenews.co.uk

webdesign.tutsplus.com

smashingmagazine.com

designer-daily.com

speckyboy.com

1stwebdesigner.com

madebysplendid.com

sitepoint.com

netmagazine.com

thinkvitamin.com

tripwiremagazine.com

abookapart.com

blog.responsivenews.co.uk

webdesign.tutsplus.com

smashingmagazine.com

designer-daily.com

speckyboy.com

1stwebdesigner.com

madebysplendid.com

sitepoint.com

netmagazine.com

thinkvitamin.com

tripwiremagazine.com

USEFUL SITES

mattwilcox.net

trentwalton.com

johnpolacek.github.com

www.netmagazine.com

elliotjaystocks.com

1stwebdesigner.com

dennischeatham.com

stephanierieger.com

adactio.com

splashnology.com

designshack.net

designyoutrust.com

CREDITS