the mobile revolution
DESCRIPTION
The Mobile RevolutionTRANSCRIPT
![Page 1: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/1.jpg)
![Page 2: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/2.jpg)
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess
D’arce HessDeveloper, Athlete and MusicianPixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: [email protected]
![Page 3: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/3.jpg)
Developing SharePoint solutions
since 2004
SharePoint Branding and UI Specialists
Developer of Cost effective
SharePoint Templates
Your SharePoint Branding Experts
![Page 4: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/4.jpg)
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?
![Page 5: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/5.jpg)
Steps to Mobile Recovery
1. Is this you?
2. Admit you have a UI/UX problem
3. Seek help
4. Have better experience
![Page 6: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/6.jpg)
![Page 7: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/7.jpg)
![Page 8: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/8.jpg)
![Page 9: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/9.jpg)
![Page 10: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/10.jpg)
Users accessed information using a single device.
Used Keyboard and a mouse to deliver user experience.
![Page 11: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/11.jpg)
• Allowed for individual masterpages to target specific devices.
• Allowed for a unique viewing experience
• Required users to maintain multiple masterpages in order to provide unified experience for users.
• Only available in SharePoint 2013 Publishing Sites.
• Can have a maximum of 10 device channels.
![Page 12: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/12.jpg)
![Page 13: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/13.jpg)
![Page 14: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/14.jpg)
Named by Steve Champeon in 2003.
Focuses on Content first
Not a good fit for SharePoint since SharePoint starts with a desktop view first.
![Page 15: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/15.jpg)
![Page 16: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/16.jpg)
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
![Page 17: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/17.jpg)
The fluid grid system uses percents instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices.
![Page 18: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/18.jpg)
Desktop View
Tablet View
Phone View
![Page 19: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/19.jpg)
![Page 20: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/20.jpg)
![Page 21: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/21.jpg)
Here are some common break points to use for your RWD sites
320 px — Mobile portrait480 px — Mobile landscape600 px — Small tablet768 px — Tablet portrait1024 px — Tablet landscape/Netbook1280 px & greater — Desktop
![Page 22: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/22.jpg)
![Page 23: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/23.jpg)
![Page 24: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/24.jpg)
Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.”
![Page 25: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/25.jpg)
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.
![Page 26: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/26.jpg)
Desktop
Tablet Mobile
![Page 27: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/27.jpg)
![Page 28: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/28.jpg)
![Page 29: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/29.jpg)
![Page 30: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/30.jpg)
![Page 31: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/31.jpg)
![Page 32: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/32.jpg)
![Page 33: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/33.jpg)
![Page 34: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/34.jpg)
![Page 35: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/35.jpg)
![Page 36: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/36.jpg)
![Page 37: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/37.jpg)
![Page 38: The Mobile Revolution](https://reader034.vdocument.in/reader034/viewer/2022052410/555d2a0fd8b42ac4258b5add/html5/thumbnails/38.jpg)