The document discusses responsive web design for SharePoint sites, noting that responsive design uses fluid grids and CSS media queries to adjust layout as the screen width decreases, allowing all content to remain visible and adapt to different devices. It provides an overview of common responsive design breakpoints and the differences between responsive and adaptive designs, with responsive focusing on content and adaptive on presentation that can hide or not present elements based on screen width.

2. D’arce Hess
Developer, Athlete and Musician
PixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: dhess@pixelmill.com
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess

3. Developing SharePoint
SharePoint Branding and UI
solutions since Specialists
2004
Developer of Your
Cost effective SharePoint
SharePoint Branding
Templates Experts

4. 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?

5. Steps to Mobile Recovery
1. Is this you?
2. Admit you have a UI/UX
problem
3. Seek help
4. Have better experience

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

11. • Allowed for individual • Required users to maintain
masterpages to target multiple masterpages in order
specific devices. to provide unified experience
• Allowed for a unique viewing for users.
experience
• Only available in SharePoint
2013 Publishing Sites.
• Can have a maximum of 10
device channels.

14. Named by Steve Champeon in
2003.
Focuses on Content first
Not a good fit for SharePoint
since SharePoint starts with
a desktop view first.

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

17. The fluid grid system uses percents
instead of pixels for column widths
ensuring proper proportions for key screen
resolutions and devices.

18. Desktop View
Phone View
Tablet View

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

24. Adaptive – “Serving or
Able to adapt, like
the coloring of a
chameleon.”

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

26. Desktop Tablet Mobile