@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/