Your SlideShare is downloading. ×
Responsive Web Design for the Visual Designer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design for the Visual Designer

329
views

Published on

A quick overview of Responsive Web Design for the Visual Designer.

A quick overview of Responsive Web Design for the Visual Designer.


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
329
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. RESPONSIVEWEB DESIGNFOR THE VISUAL DESIGNER BY ERICA COSTA OF THE BRANDON AGENCY
  • 2. WHAT IS ARESPONSIVEWEBSITE?
  • 3. A responsive websiteresponds to its environment.
  • 4. “Day by day, the number of devices, platforms,and browsers that need to work with your site grows.Responsive web design represents a fundamental shiftin how we’ll build websites for the decade to come.”- Jeffrey Veen
  • 5. There is no longer astandard screen size.
  • 6. It’s one site forevery device.
  • 7. WHO IS USING RESPONSIVEWEB DESIGN RIGHT NOW?
  • 8. barackobama.com
  • 9. sony.com
  • 10. bostonglobe.com
  • 11. WHAT DOES ALLTHIS MEAN FOR US(THE DESIGNERS)?
  • 12. We have to create beautiful websites thatanticipate users’ needs beyond the desktop.
  • 13. Far beyond the desktop.
  • 14. This is where responsiveweb design steps in.
  • 15. SO, HOW DO WE APPROACHTHE ACTUAL DESIGN?
  • 16. No more picking an arbitrarysize in photoshop, mocking-up a design,and handing it over to developers.
  • 17. We need a newdesign process.
  • 18. 1 Get content Tweak the Chat with 8 design for 2 the developer this new size Fix problems Repeat until Research,7 and find the you’ve reached 3 sketch, breakpoint the largest size brainstorm Sit with Designing for 6 the developer 4 the smallest and test Hand over resolution 5 design to the developer
  • 19. This process requires us andthe developer to work togetherright from the very beginning.
  • 20. We can’t workseparately anymore.
  • 21. WHAT DO YOU DO NOW?
  • 22. Find and utilize resources on the web.
  • 23. Just be willing toadapt and learn.
  • 24. RESOURCES
  • 25. TERMS TO KNOWAdaptive FluidAdaptive design is based on top of fixed-width designs. Instead of having one Instead of an element being a known and fixed size, it can stretch to fill anyfixed-width design, there are multiple fixed-width designs for a single page. available space. But, only horizontally (this is a stretch, not a scale). WholeNormally these designs are split up based on the width of the browser, so there pages can be made of fluid elements, meaning the whole site becomes fluid.can be one fixed-width design for mobile, another for iPad, and another for a The layout doesn’t change.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 Mobile first Is a way of managing the design and build process. The idea is to start byselecting a different fixed-width design to use. considering the simplest possible version (usually the mobile version, hence the name) and work up through larger and more complex designs only once aBreakpoint smaller one is complete. The advantage in terms of design is an emphasis onA breakpoint is the width at which a given design starts to look broken and, core content and design elements (typography and colors, then layout, etc).therefore, at which point a new design should be applied. From a technical perspective, this is quite essential; from a design perspective, it’s less so.Fixed-width ResponsiveThis is a traditional web page. With fixed-width sites, it doesn’t matter what Combines Adaptive and Fluid techniques. In a responsive project, there are asize screen or browser a visitor has, the site is always the same size (in pixels) series of designs, each of which is fluid - stretching up to a given point beforeas the design in our Photoshop file. If the screen isn’t big enough to fit the switching to a different design or layoutdesign in, the visitor has to scroll sideways. If the screen is huge, the designhas empty space around it.
  • 26. USEFUL SITESabookapart.com 1stwebdesigner.comblog.responsivenews.co.uk madebysplendid.comwebdesign.tutsplus.com sitepoint.comsmashingmagazine.com netmagazine.comdesigner-daily.com thinkvitamin.comspeckyboy.com tripwiremagazine.com
  • 27. CREDITSmattwilcox.net dennischeatham.comtrentwalton.com stephanierieger.comjohnpolacek.github.com adactio.comwww.netmagazine.com splashnology.comelliotjaystocks.com designshack.net1stwebdesigner.com designyoutrust.com

×