g Is it right for you? SharePoint Saturday St. Louis 1/11/2014 #SPSSTL p Responsive Design & SharePoint
Jun 20, 2015
gIs it right for you?
SharePoint Saturday St. Louis 1/11/2014 #SPSSTL
pResponsive Design & SharePoint
1 .Back_Row{2 move to front3 }
The Test
@darcehess
1 $(“tr:last”).each(function () {2 moveForward();3 });
For Coders
@darcehess
@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]
Who am I?
Please send feedback
Mobile App:
http://spsaturday.azurewebsites.net/SPSSTL
Session EvaluationsSchedule and evaluate each session you attend via our mobile app that can be used across devices at http://spsaturday.cloudapp.net
You will be able to evaluate a session 25 minutes before the scheduled end timeEvaluations are stored anonymously and your feedback is appreciatedThe app will be the only method available to submit session evaluations for the event and we hope you find it intuitive and convenient
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?
The Dilemma
@darcehess
1. Is this you?
2. Admit you have a UI/UX problem
3. Seek help
4. Have better experience
5. Win the lottery!@darcehess
Mobile Users Anonymous
Why Consider Mobile?
Users accessed information using a single device.
Used Keyboard and a mouse to deliver user experience.
Hard to bring with you on an airplane!
@darcehess
• 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
Device Channels
Progressive Enhancement
Named by Steve Champeon in 2003.
Focuses on Content first
A difficult fit for SharePoint since SharePoint starts with a desktop view first.
@darcehess
Responsive Design
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
The fluid grid system uses percentages instead of pixels for column widths ensuring proper proportions for key screen resolutions and devices.
@darcehess
Fluid Grids
Desktop View
Tablet View
Phone View
http://www.calguard.ca.gov/
Demo
What it looks like
In Practice
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
Break Points
@darcehess
Media Queries
@darcehess
Adaptive Design
Adaptive – “Serving or Able to adapt, like the coloring of a chameleon.”
Definition:
@darcehess
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
Desktop
Tablet Mobile
Dealing with legacy browsers
IE8:• CSS3 – not supported
automatically. • Solution:
http://modernizr.com/• Respond.js does not work
fully.• System Masterpages• Last-child selector is not
supported.
Where can I start?
www.codeplex.com/responsivesharepoint
Choose one:1)Question?
2)I am completely lost….help?
3)Would like more information.
Housekeeping
•Follow SharePoint Saturday St. Louis on Twitter @spsstlouis and hashtag #spsstl•Play “Sponsor Bingo” to register for your chance to win
one of the many great giveaways at the end of the day•Schedule and evaluate each session you attend via our
mobile app that can be used across devices at http://spsaturday.cloudapp.net
Silver
Thanks to Our Sponsors!
Gold Silver
Raffle