The Mobile Revolution
-
Upload
darce-hess -
Category
Technology
-
view
619 -
download
2
description
Transcript of The Mobile Revolution
@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]
Developing SharePoint solutions
since 2004
SharePoint Branding and UI Specialists
Developer of Cost effective
SharePoint Templates
Your SharePoint Branding 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
Users accessed information using a single device.
Used Keyboard and a mouse to deliver user experience.
• 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.
Named by Steve Champeon in 2003.
Focuses on Content first
Not a good fit for SharePoint since SharePoint starts with a desktop view first.
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
Tablet View
Phone View
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
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