Monday, May 19, 2014

@SPC_ORG Go mobile with responsive design by @kyleschaeffer

1. Why Mobile
30% audience are on mobile already for a general content

2. What is responsive design
Future-friendly approach to handle different screen resolution.
The inventor of the term - Ethan Marcotte

3. How does it work?
HTML+CSS+JavaScript
Flexibility & Adaptation

  • Stop using fixed width, use %;
  • CSS Media query
@media screen and (max-width:800px) {} - basically, a rule when to use this CSS in {}


"Mobile first" is better since the client won't need to download extra artifacts

4. How SharePoint do it?
 this is a tricky question. It takes more effort.
We don't have full control on SP OTB html and css.

Much easier if you start with your own master page.

  • Disable "Mobile browser view"
  • Activate SP server publishing
(team site don't have master pages, you have to activate the publishing feature, and you need to create a new page for layouts)
Use only Publishing template!

When you create a mobile portal - keep only: publishing site template, custom master page and layouts

  • Create responsive templates:
    • Master pages
    • Page layouts
    • Item styles
    • Display templates (2013)
  • Create responsive content
ListView is still a problem to make it responsible
A kind of workaround: Put a div wrapper.

Resources:
http://spblueprint.codeplex.com/  - a blank blunt template for Sp2013 OTTB Responsive
http://responsivesharepoint.codeplex.com/