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

The Mobile Revolution

on

  • 484 views

Presented at SharePoint Saturday Redmond. #SPSRED

Presented at SharePoint Saturday Redmond. #SPSRED

Statistics

Views

Total Views
484
Views on SlideShare
478
Embed Views
6

Actions

Likes
1
Downloads
5
Comments
1

3 Embeds 6

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

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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