Your SlideShare is downloading. ×
The Mobile Revolution
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

The Mobile Revolution

393
views

Published on

Presented at SharePoint Saturday Redmond. #SPSRED

Presented at SharePoint Saturday Redmond. #SPSRED

Published in: Technology, Design

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
393
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
1
Likes
1
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. SharePoint Saturday Redmond #SPSRED @darcehess
  • 2. 1 .Back_Row{ 2 move to front 3 } The Test @darcehess
  • 3. 1 $(“tr:last”).each(function () { 2 moveForward(); 3 }); For Coders @darcehess
  • 4. @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
  • 5. Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Developer of Cost effective SharePoint Templates Your SharePoint Branding Experts @darcehess
  • 6. 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
  • 7. 1. Is this you? 2. Admit you have a UI/UX problem 3. Seek help 4. Have better experience 5. Win the lottery!@darcehess
  • 8. @darcehess
  • 9. Guess who?? @darcehess
  • 10. @darcehess
  • 11. Where we came from @darcehess
  • 12. Users accessed information using a single device. Used Keyboard and a mouse to deliver user experience. @darcehess
  • 13. Early1990s @darcehess
  • 14. What it looked like @darcehess
  • 15. Mid1990s @darcehess
  • 16. What it looked like
  • 17. Late1990s @darcehess
  • 18. What it looked like @darcehess
  • 19. 2000-Millenium @darcehess
  • 20. What it looked like @darcehess
  • 21. Early2000s @darcehess
  • 22. What it looked like @darcehess
  • 23. Mid2000s @darcehess
  • 24. What it looked like @darcehess
  • 25. Where we are headed @darcehess
  • 26. • 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
  • 27. @darcehess
  • 28. Named by Steve Champeon in 2003. Focuses on Content first A difficult fit for SharePoint since SharePoint starts with a desktop view first. @darcehess
  • 29. @darcehess
  • 30.  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
  • 31. The fluid grid system uses percentages instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices. @darcehess
  • 32. http://www.calguard.ca.gov/ @darcehess
  • 33. Desktop View Tablet View Phone View
  • 34. What it looks like
  • 35. In Practice
  • 36. 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
  • 37. Media Queries @darcehess
  • 38. @darcehess
  • 39. Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.” Definition: @darcehess
  • 40. 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
  • 41. Desktop Tablet Mobile
  • 42. @darcehess
  • 43. @darcehess
  • 44. Clean Simple Easy to read @darcehess
  • 45. What is wrong with this picture?
  • 46. http://www.google.com/fonts @darcehess
  • 47. Thank you for coming to SharePoint Saturday Redmond. Please stop by and say “Hello” to all of the sponsors. See you next year! @darcehess

×