responsive web design for the visual designer
DESCRIPTION
A quick overview of Responsive Web Design for the Visual Designer.TRANSCRIPT
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?
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