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 Musicia...
Developing
SharePoint
solutions since
2004
SharePoint
Branding and UI
Specialists
Developer of
Cost effective
SharePoint
T...
Have you looked up a
website on your mobile
device and had to pinch the
screen to expand the
content to reach the
informat...
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 use...
@darcehess
Named by Steve Champeon in
2003.
Focuses on Content first
A difficult fit for SharePoint
since SharePoint starts with a
de...
@darcehess
 Ethan Marcotte coined the term responsive web design (RWD) in a May 2010
article in A List Apart.
 Uses fluid grids and...
The fluid grid system uses percentages
instead of pixels for column widths
ensuring proper proportions for key screen
reso...
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 — Sm...
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. ...
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 y...
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
Upcoming SlideShare
Loading in...5
×

The Mobile Revolution

443

Published on

Presented at SharePoint Saturday Redmond. #SPSRED

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
443
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

The Mobile Revolution

  1. 1. SharePoint Saturday Redmond #SPSRED @darcehess
  2. 2. 1 .Back_Row{ 2 move to front 3 } The Test @darcehess
  3. 3. 1 $(“tr:last”).each(function () { 2 moveForward(); 3 }); For Coders @darcehess
  4. 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. 5. Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Developer of Cost effective SharePoint Templates Your SharePoint Branding Experts @darcehess
  6. 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. 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. 8. @darcehess
  9. 9. Guess who?? @darcehess
  10. 10. @darcehess
  11. 11. Where we came from @darcehess
  12. 12. Users accessed information using a single device. Used Keyboard and a mouse to deliver user experience. @darcehess
  13. 13. Early1990s @darcehess
  14. 14. What it looked like @darcehess
  15. 15. Mid1990s @darcehess
  16. 16. What it looked like
  17. 17. Late1990s @darcehess
  18. 18. What it looked like @darcehess
  19. 19. 2000-Millenium @darcehess
  20. 20. What it looked like @darcehess
  21. 21. Early2000s @darcehess
  22. 22. What it looked like @darcehess
  23. 23. Mid2000s @darcehess
  24. 24. What it looked like @darcehess
  25. 25. Where we are headed @darcehess
  26. 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. 27. @darcehess
  28. 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. 29. @darcehess
  30. 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. 31. The fluid grid system uses percentages instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices. @darcehess
  32. 32. http://www.calguard.ca.gov/ @darcehess
  33. 33. Desktop View Tablet View Phone View
  34. 34. What it looks like
  35. 35. In Practice
  36. 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. 37. Media Queries @darcehess
  38. 38. @darcehess
  39. 39. Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.” Definition: @darcehess
  40. 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. 41. Desktop Tablet Mobile
  42. 42. @darcehess
  43. 43. @darcehess
  44. 44. Clean Simple Easy to read @darcehess
  45. 45. What is wrong with this picture?
  46. 46. http://www.google.com/fonts @darcehess
  47. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×