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

#SP24 : How-to go Mobile on SharePoint

+Todd Baginski  in #SP24S017 presented ways to go mobile on SP2013:

3 mobile views: 

• Classic (SP2010, still available in SP2013). Classic doesn’t support HTML 5
• Contemporary (SP2013). works with HTML5 supported devices . Needs to enable Mobile browser view feature for Contemporary
• PC View (“Pinch and Zoom”).

Contemporary is not extensible

Side note: Contemporary view useful to show documents, but no use in the publishing site (and it is not enabled by default). Project server web access doesn't work in contemporary view.

Tip: OTB BI in Excel reporting working well on Mobile:

SharePoint 2013 has 2 main features toward Responsive Design:

Image renditions, Design Manager device channels

Resources:

Todd Baginski' blog: Optimizing Content Authoring with Image Renditions and Device Channels

Todd's web conference: Creating Internet facing web sites with SharePoint on-premises or in the cloud

Third party product: Mobile SharePoint apps without coding

#SP24 : Mobile Strategy by Joel Oleson. Go responsive!

+Joel Oleson in #SP24S112 talked about Mobile strategy and design. Go mobile, social and cloud!
82% online population engages in social networking,
50% on enterprise customers are "on the road" to cloud.

People spend more time on mobile apps (89%) than on mobile web (11%)

Most Weekday Tablet usage is between 8PM and 9PM
Few slide to illustrate the point:

 The leading sales in the smartphone market is Android

And here is a reality check in SharePoint 2013
 92% companies don't support Mobile Access to SharePoint
In SharePoint 2013 you have a contemporary view for HTML5 aware devices. Joel insists that we need to more than contemporary view.

Side note: Project Server web access doesn't support contemporary view. Publishing sites are not suitable for this type of view. The contemporary view main intend is to show the folders and files, not a publishing pages and business process applications.


O365 mobile apps:

Joel' key takeaways and considerations:

• SP 2013 Native Mobile browsing has improved for all mobile platform;
• New SP Mobile Apps can make accessing social +people+document easier
• Consider 3d party mobile apps to fill gaps like Offline Sync, Search, Security and Mobile Device App mgmt
• Plan for Mobile Intranets: Seriously consider Industry Best Practices of Responsive Web design

Resoures:
http://responsivesharepoint.codeplex.com/

#SP24 : SPOnline public site branding issues

@gusfrases presented #SP24S067 Office 365 Public Websites The Good The Bad 

the Ugly #SP24 Online conference. The ugliest part was the most attractive one.

In that part he showed the challenges and issues around branding of a SPOnline public facing site.

Here are the most prominent challenges and issues:

Mobile

No customizable device channels

Anonymous users issues

• Can't use search refiners
• No REST API (What Every Developer Needs to Know About SharePoint Apps, CSOM, and Anonymous Publishing Sites)

Workaround:

Sandbox solution

JSlink (and yes, you can do a multiple JSLinks ListView Web Part issues with JSLink and Display Templates – A solution?)

• No cache

Not a real workaround for cache issue:

 CDN for jQuery
 Client -side options for caching
 Lazy load;
 Content optimization

>> Takeaway>> NO for a Search-driven application on SPOnline public anonymous sites

Site management issue

No UI for Site columns, content types, search schema and creation of the subsite

Some default site templates are not available

Workaround:

Some features are accessible through direct links, some via SPD.

User Code Service not reliable in O365

Instead of Sandbox solution, consider JSLink when possible

>>Takeaway>> Why and why not to use SPonline for public facing sites?

*Search = OOTB Search

Resources:

Variation of the slide deck on Public Site on SPOnline limitations by @gusfraser 

Blog by Gus Frases
SPOnline Public Site with search which is possible built by Gus Frases