C oncept to Production
description
Transcript of C oncept to Production
![Page 1: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/1.jpg)
Concept to Production
SharePoint Saturday Houston, TX #SPSHOU April 13, 2013
g :Branding 101:
![Page 2: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/2.jpg)
1 .Back_Row{2 move to front3 }
The Test
![Page 3: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/3.jpg)
1 $(“tr:last”).each(function () {2 moveForward();3 });
For Coders
![Page 4: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/4.jpg)
4
Welcome to SharePoint Saturday Houston
• 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:
Thank you for being a part of the 4th Annual SharePoint Saturday
for the greater Houston area!
![Page 5: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/5.jpg)
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
![Page 6: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/6.jpg)
6
Please Leave Feedback During Q&AIf 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"
![Page 7: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/7.jpg)
D’arce HessDeveloper, Athlete and MusicianPixelMill
Blog: www.thebrandingbutterfly.com
Website: www.pixelmill.com
Email: [email protected]
About me
@darcehess
www.linkedin.com/in/darcehess/
http://www.youtube.com/user/DarceHess
![Page 8: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/8.jpg)
PixelMillDeveloping SharePoint solutions
since 2004
SharePoint Branding and UI Specialists
Developer of Cost effective
SharePoint Templates
Your SharePoint Branding Experts
![Page 9: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/9.jpg)
pThe owner 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’s SharePoint site.
Once upon a time
![Page 10: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/10.jpg)
Web page title
http://www.Ferrari.com
![Page 11: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/11.jpg)
![Page 12: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/12.jpg)
gyWhere do you begin?
![Page 13: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/13.jpg)
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 ArchitectureWhat subsites and pages will you have?
Content ArchitectureWhat 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
j gProject Planning
![Page 14: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/14.jpg)
p pSite Map Example
![Page 15: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/15.jpg)
WireframesCreated 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
![Page 16: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/16.jpg)
![Page 17: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/17.jpg)
pp gResponsive Design
![Page 18: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/18.jpg)
Desktop View Tablet View Mobile View
![Page 19: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/19.jpg)
yWhich is best for you?
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.
![Page 20: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/20.jpg)
yDid you know?
![Page 21: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/21.jpg)
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
![Page 22: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/22.jpg)
Use Photoshop to create a layered .PSD of what your site will look like finished
pMockup
![Page 23: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/23.jpg)
yJThe Journey
![Page 24: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/24.jpg)
Not all SharePoint sites use the same branding
Team Sites Publishing Sites My Sites Search Site
pSite Templates
![Page 25: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/25.jpg)
SharePoint 2013 Team Site
Team Sites
Publishing not availableon these sites
Uses Wiki layout
Not as customizableSharePoint 2010 Team Site
![Page 26: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/26.jpg)
MySites
Uses the Wiki layout
SharePoint 2010
SharePoint 2013
![Page 27: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/27.jpg)
pThemes & Composed Looks 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.
![Page 28: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/28.jpg)
SharePoint 2010
![Page 29: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/29.jpg)
Posed l
SharePoint 2013Themes available out of the box
Composed look
![Page 30: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/30.jpg)
CSS Web Parts
MasterPages
Javascript &
jQuery
PageLayouts
Your SharePoint
Site
gThe Building Blocks
![Page 31: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/31.jpg)
gMaster Pages
![Page 32: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/32.jpg)
What do they do?
Contains Content PlaceHolders to tell SharePoint where to
load features. i.e. Navigation
Defaults visitors to IE8 even if
using IE9
Used to standardize
branding over multiple sites
Contains the references to CSS and JS,
JQuery files.
yWhat do they do?
![Page 33: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/33.jpg)
Masterpage without Page Layout content
![Page 34: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/34.jpg)
g yPage Layouts
![Page 35: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/35.jpg)
Only available in SharePoint Server, not Foundation
Loads after the Master Page
Create custom layouts to add columns and position content
Can be used as templates for more than one page
yWhat do they do?
![Page 36: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/36.jpg)
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
![Page 37: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/37.jpg)
g yCSS (Cascading Style Sheets)
![Page 38: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/38.jpg)
What does it do?
Add colors and design to HTML structure
Uses “ID” and “Class” to target specific areas for design
Gives ability to create Responsive Design through Media Queries
Referenced in one page vs. inline.
![Page 39: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/39.jpg)
J Jp Q yJavascript & jQuery
![Page 40: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/40.jpg)
yWhat do they do?
Used to create custom drop down navigation
Allows for Slideshows and custom web parts
Hides Quick Launch Navigation when needed
Adds functionality to forms
![Page 41: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/41.jpg)
Navigation in SharePoint 2010
Navigation in SharePoint 2013
![Page 42: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/42.jpg)
Web Parts
![Page 43: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/43.jpg)
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
yWhat they do
![Page 44: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/44.jpg)
Web Part Categories and Web Part Zones
Menu used to edit a Web Part. i.e. “Content Editor” Web Part
![Page 45: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/45.jpg)
Demo
![Page 46: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/46.jpg)
Additional ResourcesCSS:
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
![Page 47: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/47.jpg)
yThank you
![Page 48: C oncept to Production](https://reader036.fdocuments.in/reader036/viewer/2022062521/5681696a550346895de13800/html5/thumbnails/48.jpg)
48
Thanks to all our Sponsors!