• Save
Intro To Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Intro To Responsive Web Design

on

  • 551 views

DevBridge Group presents an Intro to Responsive Web Design (RWD). Responsive Web Design addresses the growing need to cater online content to a variety of devices through a single website: from ...

DevBridge Group presents an Intro to Responsive Web Design (RWD). Responsive Web Design addresses the growing need to cater online content to a variety of devices through a single website: from tablets, to smartphones, to desktops. The class will cover industry insights and trends, creative workflow for designing responsive websites, and a technology workshop explaining media queries and advantages of RWD.

Statistics

Views

Total Views
551
Views on SlideShare
446
Embed Views
105

Actions

Likes
2
Downloads
0
Comments
0

1 Embed 105

http://www.devbridge.com 105

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Intro To Responsive Web Design Intro To Responsive Web Design Presentation Transcript

    • RESPONSIVE WEB DESIGNDevBridge Group Presents:DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
    • RESPONSIVE WEB DESIGNDevBridge Group Presents:DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
    • WHAT’S HAPPENING IN US MARKET?
    • Shi! in how we are accessing the internet.
    • THE MOBILE INVASION
    • Earth population Active mobile connections(phones, tablets, readers, etc.)7 BILLION 6 BILLION
    • Market Saturation37% of the US populationare smartphone owners.
    • In 201558% of the US populationwill be smartphone ownersin 2015.
    • Web Traffic23% of web traffic was frommobile devices
    • What about the tablet?0100,000200,000300,000400,000500,0002012 2013 2014 2017PC (Desk-Based and Notebook) Tablet
    • This mass invasion of Smartphonesand Tablets changes the way weview the web.
    • WHAT DOES THIS MEAN FOR OURFRIEND THE WEBSITE
    • Clumsy & Awkward
    • Old Context
    • New Contexts
    • 25% own tablet50% own smartphoneFrom laptop ownersDistribution
    • Smartphone vs. Tablet017.53552.570Books Movies TV Shows News Social Networking Downloaded MusicTablet Smartphone
    • THE SOLUTION
    • A website that is designed to livebeyond the device, context, ortechnology that they were originallyintended for.
    • Your Options
    • Your OptionsChoose Wisely
    • NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDPlatform IndependenceDevice Hardware Integration
    • NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDPer platform (iOS, Android, Windows RT)
    • NATIVEAPPSHYBRIDAPPSWEBAPPSSEMINATIVEMOBILESITESRWDOne solution for all platforms
    • Choose the solution that best suits theneeds of the user.
    • They all want a great experience.
    • WHY GO RESPONSIVE?
    • “This is Google’s recommendedconfiguration.“
    • Easy To ManageSingle Publishing Platform1
    • Future FriendlyAdapts to all web enabled devices2
    • User & Content FocusedDevice specific elements become secondary3
    • Great For CommerceAn increase in mobile transactions4
    • Increase in Page VisitsDecrease in bounce rates5
    • ESTIMATING AND BUDGETING FORRESPONSIVE WEB DESIGN
    • Value vs. CostTwo vs. Multiple Breakpoints
    • A dedicated mobile site will havemaintenance redundancy and,therefore, reoccurring costs.
    • Maintenance on a responsive sitedecreases over time.
    • How do you budget for aresponsive project?
    • Set aside time to educate both theclient and the team.1
    • Set aside time to educate both theclient and the team.1Built in time for process changes2
    • Set aside time to educate both theclient and the team.1Built in time for process changes2More Testing and QA Time3
    • ADAPTING TO ARESPONSIVE WORKFLOW
    • WHY WE CANNOT USE OUR USUALCREATIVE PROCESS
    • No Longer One Size Fits All
    • New Things To Consider
    • New Things To Consider
    • CHANGE IN WORKFLOW
    • Piece by Piece
    • CONTENTFIRSTWIREFRAMESSKETCH LAYOUTSOur Puzzle Pieces
    • CONTENT & MOBILE FIRST
    • “Content precedes design. Designin the absence of content is notdesign, it’s decoration.“JEFFREY ZELDMANHAPPY COG
    • Lorem Ipsum is not content.Having actual content will help you create moreaccurate designs.
    • Why Mobile First?
    • Core Message &Functionality1
    • Core Message &Functionality1Focused Designers2
    • Core Message &Functionality1Focused Designers2Early Detection ofUsability Issues3
    • Progressive Enhancement
    • Simplify rather than Reduce
    • “Mobile must never be adumbed-down, limitedexperience.“STEVEN HOOBERO’REILLY
    • SKETCHING & WIREFRAMES
    • UI Stencils
    • The key for mapping content in differentcontexts in which it will appear.Content Reference Wireframes
    • 1.1 Logo1.2 Navigation2.1 Info Panel2.2 Info Panel2.3 Info Panel2.4 Info Panel3.1 Code3.2 Savings Info4.1 Main Article4.2 Secondary Article4.3 Secondary Article5.0 Stories6.0 Subscribe7.0 Footer1.12.13.14.14.25777666554.34.14.24.34.14.24.33.23.1 3.2 3.13.22.2 2.3 2.4 2.12.22.32.42.12.22.32.41.2 1.1 1.2 1.1 1.2
    • PATTERNS & LAYOUTS
    • Mostly Fluid1 1 12 2 233333
    • Mostly Fluid
    • Mostly Fluid
    • Column Drop1 1 12 2 23433 44
    • Column Drop
    • Column Drop
    • Layout Shi"er1 1 12 22333444444
    • Layout Shifter
    • Layout Shifter
    • Tiny Tweaks1 1 12 2 2
    • Tiny Tweaks
    • Tiny Tweaks
    • TECHNICALINTRODUCTION
    • VIEWPORT
    • What is it?
    • The viewport is the part of the webpage thatthe user can currently see. The scroll bars movethe viewport to show other parts of the page.What is it?
    • How to use it and its properties?
    • Used to set Viewport width, height, andinitial scale on mobile devices.Lives in the <head></head> portion of the HTML
    • MEDIA QUERIES
    • What is a “Media Query”?
    • What is a “Media Query”?“Media Type” (screen, print, all, TV, etc.)“Media Condition” (width, height, device-width,device-height, orientation, aspect-ratio, etc.)
    • By combining a media type and acondition you can specify how the webcontent will appear on a particulardevice. (Phone, Tablet, TV, etc.)
    • video demo
    • Most media conditions accept optional“min-” or “max-” prefixes to express“greater or equal to” or “smaller orequal to” constrains.
    • RESPONSIVE MEDIA
    • What is it?
    • How do you make “responsive media”?
    • How do you make “responsive media”?
    • What about mymonthly 3GBData Plan?!Data plans are expensiveand no one likes having topay overage fees.
    • Small file sizes make everyone happy! :)
    • Serving up different size and qualityvideo is already easy.
    • What about images?
    • What about images?There is no single solution...yet
    • Proposed SolutionW3C Working Dra!: February 26th, 2013
    • HI-RES OR “RETINA” DISPLAYS
    • Device Pixel Densities
    • Proposed SolutionW3C Working Dra!: February 26th, 2013
    • That is the future.
    • That is the future.What about today?
    • Credit: github.com/scottjehl/picturefill
    • Testing & PreviewResponsivePX.comScreenQueri.esQuirkTools.comResonsinator.com
    • TEAM WORK & COMMUNICATION
    • THANKYOU!DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com
    • THANKYOU!DEVBRIDGE.COMKristin DuhaimeVlad Shapochnikovkristin@devbridge.comvlad.shapochnikov@devbridge.com