• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Mobile Revolution

The Mobile Revolution



Presented at SharePoint Saturday Redmond. #SPSRED

Presented at SharePoint Saturday Redmond. #SPSRED



Total Views
Views on SlideShare
Embed Views



3 Embeds 6

https://twitter.com 3
http://www.linkedin.com 2
https://www.linkedin.com 1



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.


11 of 1 previous next

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

    The Mobile Revolution The Mobile Revolution Presentation Transcript

    • SharePoint Saturday Redmond #SPSRED @darcehess
    • 1 .Back_Row{ 2 move to front 3 } The Test @darcehess
    • 1 $(“tr:last”).each(function () { 2 moveForward(); 3 }); For Coders @darcehess
    • @darcehess www.linkedin.com/in/darcehess/ http://www.youtube.com/user/DarceHess D’arce Hess Developer, Athlete and Musician PixelMill Blog: www.thebrandingbutterfly.com Website: www.pixelmill.com Email: dhess@pixelmill.com Who am I?? @darcehess
    • Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Developer of Cost effective SharePoint Templates Your SharePoint Branding Experts @darcehess
    • Have you looked up a website on your mobile device and had to pinch the screen to expand the content to reach the information you need? The Dilemma @darcehess
    • 1. Is this you? 2. Admit you have a UI/UX problem 3. Seek help 4. Have better experience 5. Win the lottery!@darcehess
    • @darcehess
    • Guess who?? @darcehess
    • @darcehess
    • Where we came from @darcehess
    • Users accessed information using a single device. Used Keyboard and a mouse to deliver user experience. @darcehess
    • Early1990s @darcehess
    • What it looked like @darcehess
    • Mid1990s @darcehess
    • What it looked like
    • Late1990s @darcehess
    • What it looked like @darcehess
    • 2000-Millenium @darcehess
    • What it looked like @darcehess
    • Early2000s @darcehess
    • What it looked like @darcehess
    • Mid2000s @darcehess
    • What it looked like @darcehess
    • Where we are headed @darcehess
    • • Allowed for individual master pages to target specific devices. • Allowed for a unique viewing experience • Required users to maintain multiple master pages in order to provide unified experience for users. • Only available in SharePoint 2013 Publishing Sites. • Can have a maximum of 10 device channels. @darcehess
    • @darcehess
    • Named by Steve Champeon in 2003. Focuses on Content first A difficult fit for SharePoint since SharePoint starts with a desktop view first. @darcehess
    • @darcehess
    •  Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Apart.  Uses fluid grids and CSS3 Media Queries to adjust layout as screen width decreases.  The fluid grid concept calls for page element sizing to be in relative units like percentages, but can also use pixels or points.  All content remains and adjusts to the screen width @darcehess
    • The fluid grid system uses percentages instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices. @darcehess
    • http://www.calguard.ca.gov/ @darcehess
    • Desktop View Tablet View Phone View
    • What it looks like
    • In Practice
    • Here are some common break points to use for your RWD sites 320 px — Mobile portrait 480 px — Mobile landscape 600 px — Small tablet 768 px — Tablet portrait 1024 px — Tablet landscape/Netbook 1280 px & greater — Desktop Break Points @darcehess
    • Media Queries @darcehess
    • @darcehess
    • Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.” Definition: @darcehess
    • Focuses more on presentation than on content. Items may selected to be hidden or not presented as screen width decreases. i.e. Banner images or columns. @darcehess
    • Desktop Tablet Mobile
    • @darcehess
    • @darcehess
    • Clean Simple Easy to read @darcehess
    • What is wrong with this picture?
    • http://www.google.com/fonts @darcehess
    • Thank you for coming to SharePoint Saturday Redmond. Please stop by and say “Hello” to all of the sponsors. See you next year! @darcehess