Presented at SharePoint Saturday Redmond. #SPSRED

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

11. @darcehess

12. Where we came from
@darcehess

13. Users accessed
information using a
single device.
Used Keyboard and a
mouse to deliver user
experience.
@darcehess

14. Early1990s
@darcehess

15. What it looked like
@darcehess

16. Mid1990s
@darcehess

17. What it looked like

18. Late1990s
@darcehess

19. What it looked like
@darcehess

20. 2000-Millenium
@darcehess

21. What it looked like
@darcehess

22. Early2000s
@darcehess

23. What it looked like
@darcehess

24. Mid2000s
@darcehess

25. What it looked like
@darcehess

26. Where we are headed
@darcehess

27. • 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

28. @darcehess

29. Named by Steve Champeon in
2003.
Focuses on Content first
A difficult fit for SharePoint
since SharePoint starts with a
desktop view first.
@darcehess

30. @darcehess

31.  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

32. The fluid grid system uses percentages
instead of pixels for column widths
ensuring proper proportions for key screen
resolutions and devices.
@darcehess

33. http://www.calguard.ca.gov/
@darcehess

34. Desktop View
Tablet View
Phone View

35. What it looks like

36. In Practice

37. 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

38. Media Queries
@darcehess

39. @darcehess

40. Adaptive – “Serving
or Able to adapt,
like the coloring of
a chameleon.”
Definition:
@darcehess

41. 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

42. Desktop Tablet Mobile

43. @darcehess

44. @darcehess

45. Clean
Simple
Easy to read
@darcehess

46. What is wrong with this picture?

48. http://www.google.com/fonts
@darcehess

50. Thank you for coming to
SharePoint Saturday Redmond.
Please stop by and say “Hello”
to all of the sponsors.
See you next year!
@darcehess