1. #SPSSD @sanspug San Diego 2014 SharePoint Saturday San Diego November 15, 2014 UCSD Extension SharePoint Saturday San Diego November 15, 2014 UCSD Extension RESPONSIVE DESIGN FOR SHAREPOINT 2013 Matt Fishman Lead Architect / Managing Partner Klarinet Solutions, LLC

2. #SPSSD @sanspug San Diego 2014 Logistics  Bathrooms: near elevators  Community Room: Sponsors, Lunch, Breaks and Raffle!  WiFi (free, thanks to UCSD Extension!) To connect as a guest: 1. Select the UCSD-GUEST wireless network. 2. Open your browser and bring up a website. 3. Follow the displayed instructions to accept the Terms of Use. 4. Click Guest Login. 5. Turn your wireless service off and then on again when asked. 6. You will be connected to the requested website within two minutes.

3. #SPSSD @sanspug San Diego 2014 A little bit about me  Matt Fishman  Lead Architect and Managing Partner for Klarinet Solutions  MCPD and MCITP SharePoint Development and Administration  Specializes in Custom Solution Development and SharePoint Branding Implementations  E-mail mfishman@klarinetsolutions.commfishman@klarinetsolutions.com  Twitter @fttam

4. #SPSSD @sanspug San Diego 2014 Klarinet Solutions Klarinet Solutions is a woman-owned business and a Microsoft Partner based in San Diego that focuses solely on SharePoint solutions. Our mission is to make our clients successful and highly profitable through simple, innovative and efficient SharePoint Solutions. Please feel free to stop by our booth after the session to speak with one of our consultants.

5. #SPSSD @sanspug San Diego 2014 A few notes before we begin  I would consider this a 200 level session  We will be looking at some code  I will provide this presentation and code samples later today.  I will not discuss design philosophies or the design process in general.  I will (if all goes well) deploy a basic responsive design to SharePoint online.

6. #SPSSD @sanspug San Diego 2014 What is Responsive Responsive web design (RWD) is an approach aimed at crafting web sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling across devices from mobile phones to tablets to the desktop.

7. #SPSSD @sanspug San Diego 2014 Principles of RWD  Responsive / Flexible Grid - The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels.  Flexible Images and Media - Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.  CSS and Media Queries - Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser and orientation.

8. #SPSSD @sanspug San Diego 2014 Responsive Grid

9. #SPSSD @sanspug San Diego 2014 Flexible Media  Flexible Media is sized in relative units, such as percentage based  SharePoint 2013 Image Renditions  Example: img { max-width: 100%; height: auto !important; }

10. #SPSSD @sanspug San Diego 2014 Media Queries  CSS Media queries allow us to target styles based on a number of device properties, such as screen width, orientation, and so on.  Allows us to set break points based on the width and orientation of the device.  Example: @media only screen and (max-width:768px) { #navbar { float: none; width: 400px; }

11. #SPSSD @sanspug San Diego 2014 How do we put these concepts together? You can build everything yourself OR Use a framework

12. #SPSSD @sanspug San Diego 2014 Bootstrap  Developed internally at Twitter  Released under Open Source license in August of 2010.  Bootstrap is a collection of tools for creating websites and web application. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface elements as well as JavaScript extensions.

13. #SPSSD @sanspug San Diego 2014 Responsive SharePoint  http://responsivesharepoint.codeplex.com/ http://responsivesharepoint.codeplex.com/  Launched in early 2013, updated in August 2014  Includes a set of responsive master pages and page layouts for both SharePoint 2010 and 2013  Eric Overfield (PixelMill) is the coordinator of the project

14. #SPSSD @sanspug San Diego 2014 Demo Time

15. #SPSSD @sanspug San Diego 2014 Questions?

16. #SPSSD @sanspug San Diego 2014 Links  Bootstrap Bootstrap  Start Bootstrap Start Bootstrap  Responsive SharePoint (Codeplex) Responsive SharePoint (Codeplex)  Pro SharePoint 2013 Branding and Responsive Web Development (Book) Pro SharePoint 2013 Branding and Responsive Web Development (Book)  Klarinet Solutions Klarinet Solutions

17. #SPSSD @sanspug San Diego 2014 Post Event : SharePint Location: La Jolla Brewing Company Address: 7536 Fay Ave, La Jolla, CA 92037 Phone: 858-246-6759 Immediately following event closing & prize drawings Map and Directions on SPS Events Schedule Google Map & directions: http://ow.ly/E164Lhttp://ow.ly/E164L

18. #SPSSD @sanspug San Diego 2014 SharePoint Saturday San Diego November 15, 2014 UCSD Extension SharePoint Saturday San Diego November 15, 2014 UCSD Extension PLEASE THANK OUR SPONSORS! Please fill out your session evaluation! http://ntx.lv/lwGlKl1 (case sensitive) http://ntx.lv/lwGlKl1