Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Responsive Design

on

  • 602 views

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and ...

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Esign has already a lot of experience in making websites in responsive design. One of our projects was the responsive website for Google and IAB-Belgium for their IAB ThinkMobile event.

You can always contact us at hello@esign.eu

Esign - Get ahead on the web
www.esign.eu

Statistics

Views

Total Views
602
Views on SlideShare
602
Embed Views
0

Actions

Likes
3
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Responsive Design Presentation Transcript

  • RESPONSIVE DESIGNPROBLEM WITH THE TITLE?
  • WEB USERSTypes of screens increasing • Different dimensions • Different resolutions (retina)More input controls • Mouse + keyboard • Touch • Controllers (Playstation, Wii)
  • OPTIMIZE!Mobiel web != web liteHow? • Mobile website(s…) • Responsive design (single website)
  • MOBILE WEBSITEUsually via detection + different URL: m.esign.eu, m.phone, m.tablet,…Caveat • When to redirect? • Example: a mobile user shares on Facebook • Does a desktop user sees the mobile version? • Example: a desktop user shares on Facebook • Is the desktop version of that page available on the (simplified) mobile version • Don’t redirect to home! • Maintenance!!!
  • RESPONSIVE DESIGNWhat? • Layout responds to environmentHow? • Fluid grids • Flexible images • Media queriesCaveat • Architectural + content (writing style) changes not easy • Overhead in terms of data • Restrictions on design • Simply resizing images is not always adequate.
  • FLUID GRIDSDimensions are relative to the container (=context)In CSS, ems: target ÷ context = result
  • FLEXIBLE IMAGES• Scale (min / max)• Crop (background)• Use different images, eg header banners (portret vs landscape)
  • MEDIA QUERIESWhat? • CSS for specific screen dimensions (pixels) and/or resolution (dpi) • Change layout (more / less columns) • Change look and feel (touch buttons, legible text) • Hide or show contentHow? • @media screen and (max-device-width: 480px) {}
  • RESPONSIVE ORMOBILE WEBSITES?• Target audience? • Mobile = better UX • Responsive = easier to maintain + SEO• ROI? • Converting existing website (responsive) • Creating new mobile website
  • GUIDELINES MOBILE• simpler navigation• more focused content (phone, location,…)• lists or rows instead of multiple columns
  • RESOURCESGuidelineshttp://www.howtogomo.com/en-gb/d/why-get-mo/#mobile-best-practicesExampleshttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://artequalswork.com/Navigationhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/