SlideShare a Scribd company logo

The Mobile Revolution

•Download as PPTX, PDF•
•
D'arce Hess
D'arce Hess

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.

1 of 38
The Mobile Revolution
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
Developing SharePoint SharePoint Branding and UI solutions since Specialists 2004 Developer of Your Cost effective SharePoint SharePoint Branding Templates Experts
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?
Steps to Mobile Recovery 1. Is this you? 2. Admit you have a UI/UX problem 3. Seek help 4. Have better experience
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
Users accessed information using a single device. Used Keyboard and a mouse to deliver user experience.
• 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.
The Mobile Revolution
The Mobile Revolution
Named by Steve Champeon in 2003. Focuses on Content first Not a good fit for SharePoint since SharePoint starts with a desktop view first.
The Mobile Revolution
 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
The fluid grid system uses percents instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices.
Desktop View Phone View Tablet View
The Mobile Revolution
The Mobile Revolution
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
The Mobile Revolution
The Mobile Revolution
Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.”
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.
Desktop Tablet Mobile
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution
The Mobile Revolution

More Related Content

The Mobile Revolution

  • 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