1 / 48

C oncept to Production

Branding 101:. :. g. C oncept to Production. SharePoint Saturday Houston, TX #SPSHOU April 13, 2013. The Test. 1 . Back_Row { 2 move to front 3 }. For Coders. 1 $ ( “ tr:last ” ).each( function () { moveForward (); });. Welcome to SharePoint Saturday Houston.

manchu
Download Presentation

C oncept to Production

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Branding 101: • : g Concept to Production SharePoint Saturday Houston, TX #SPSHOU April 13, 2013

  2. The Test 1 .Back_Row{ 2 move to front 3 }

  3. For Coders 1 $(“tr:last”).each(function() { moveForward(); });

  4. Welcome to SharePoint Saturday Houston Thank you for being a part of the 4th Annual SharePoint Saturday for the greater Houston area! Please turn off all electronic devices or set them to vibrate. If you must take a phone call, please do so in the hall so as not to disturb others. Thanks to our Title Sponsor:

  5. Information • Speaker presentation slides will be available at bit.ly/GoSPSHOU within a week • The Houston SharePoint User Group will be having it’s next meeting Wednesday April 17th. Please join us at www.h-spug.org

  6. Please Leave Feedback During Q&A If you leave session feedback and provide contact information in the survey, you will be qualified for a book, ebook or DVD giveaway. Scan the QR Code to the right or go to bit.ly/spshou72 5.71"

  7. About me D’arce Hess Developer, Athlete and Musician PixelMill Blog: www.thebrandingbutterfly.com Website: www.pixelmill.com Email: dhess@pixelmill.com @darcehess www.linkedin.com/in/darcehess/ http://www.youtube.com/user/DarceHess

  8. PixelMill Developing SharePoint solutions since 2004 SharePoint Branding and UI Specialists Your SharePoint Branding Experts Developer of Cost effective SharePoint Templates

  9. Once upon a time p Theowner of your company recently met with a consultant who showed him several examples of what your SharePoint site CAN be. Your boss has now charged you with recreating the same “Wow” factor in your company’sSharePoint site.

  10. Web page title http://www.Ferrari.com

  11. Where do you begin? g • y

  12. j Project Planning g • The Path to Success requires: • Have a Project Manager • Has vision of needs and goals of project. • Make sure goals can be measured. • Site Map Architecture • What subsites and pages will you have? • Content Architecture • What shows up in each part of the site map? i.e. the Home page • Wireframe (Can be adjusted) • Mockup (NOT the same as a wireframe) • Build it • Test it in every browser possible

  13. Site Map Example p p

  14. Wireframes Created to get an idea of where general items will be placed for the mockup of the design. They can be adjusted later. NOT FINAL Balsamiq Just in Mind Visio Photoshop

  15. Responsive Design g p p

  16. Desktop View Tablet View Mobile View

  17. Which is best for you? y Responsive Design: Uses CSS3 media queries and proportion-based grids. All elements continue to be shown as screen width changes. Adaptive Design: Uses CSS3 media queries to hide elements as screen width lessens. Progressive Enhancement: Design for the mobile view first, then add elements as the screen increases in width.

  18. Did you know? y

  19. RWD Considerations Audience Positives Negatives Resources • Mobile Users • Desktop Users • One Masterpage that adapts to all devices. • Uses Fluid Grids • Uses HTML5/CSS3 Media Queries • Limited Overhead • Bandwidth • Wide Lists and Site Settings pages are not mobile friendly • Responsive Web Design by Ethan Marcottehttp://bit.ly/bcKwQS • Responsive Framework at CodePlexhttp://responsivesharepoint.codeplex.com • Configure SharePoint Server 2010 for Mobile Device Accesshttp://bit.ly/cg6Yo

  20. p Mockup Use Photoshop to create a layered .PSD of what your site will look like finished

  21. The Journey J y

  22. Site Templates p • Not all SharePoint sites use the same branding • Team Sites • Publishing Sites • My Sites • Search Site

  23. SharePoint 2013 Team Site Team Sites Publishing not available on these sites Uses Wiki layout Not as customizable SharePoint 2010 Team Site

  24. MySites Uses the Wiki layout SharePoint 2010 SharePoint 2013

  25. Themes & Composed Looks p Recommended way to brand Foundation and non-publishing sites SharePoint 2010 SharePoint 2013 • Needed to be created using MS PowerPoint. • Needed to import and link through CSS sheet into a Masterpage. • Used for MySites and Team Sites • Name: the name of your composed look; • Master page: the master page that you want to use; • Theme URL: the URL to your color palette; • Image URL: the URL to your background image; • Font Scheme URL: the URL to your font scheme; • Display Order: this will be used to arrange your composed looks ordering.

  26. SharePoint 2010

  27. Posed l SharePoint 2013 Themes available out of the box Composed look

  28. The Building Blocks g Your SharePoint Site Master Pages Page Layouts Javascript & jQuery CSS Web Parts

  29. Master Pages g

  30. What do they do? What do they do? y Contains Content PlaceHolders to tell SharePoint where to load features. i.e. Navigation Contains the references to CSS and JS, JQuery files. Defaults visitors to IE8 even if using IE9 Used to standardize branding over multiple sites

  31. Masterpage without Page Layout content

  32. Page Layouts g y

  33. What do they do? y Only available in SharePoint Server, not Foundation Create custom layouts to add columns and position content Can be used as templates for more than one page Loads after the Master Page

  34. Page Layout in Edit Mode with Empty Web Part Zones Page Layout once Image Viewer and Content Editor Web Parts have been added and saved

  35. CSS (Cascading Style Sheets) g y

  36. What does it do? Gives ability to create Responsive Design through Media Queries Referenced in one page vs. inline. Add colors and design to HTML structure Uses “ID” and “Class” to target specific areas for design

  37. Javascript & jQuery y J p J Q

  38. What do they do? y Used to create custom drop down navigation Allows for Slideshows and custom web parts Hides Quick Launch Navigation when needed Adds functionality to forms

  39. Navigation in SharePoint 2010 Navigation in SharePoint 2013

  40. Web Parts

  41. What they do y Placed in page layouts to add functionality Makes it easier for users to add images, video and media to sites and pages Used to create custom list views with SharePoint Designer Can create custom views for search results

  42. Web Part Categories and Web Part Zones Menu used to edit a Web Part. i.e. “Content Editor” Web Part

  43. Demo

  44. Additional Resources • CSS: • Heather Solomon’s Chart • Home Page CSS Reference by Benjamin Niaulin • Branding Series for Beginners by Benjamin Niaulin • 20 Useful Resources for Learning about CSS3 • Frameworks: • Responsive SharePoint • Starter Master Pages: • Jumpstart Branding for SharePoint 2010 • Starter Masterpages for SharePoint – Randy Drisgill • Responsive V5 Masterpage for SharePoint 2010 – Kyle Schaeffer

  45. Thank you y

  46. Thanks to all our Sponsors!

More Related