User Interface Tips and Tricks for the Power User - Penelope Coventry
36
User Interface Tips and Tricks for the Power User Penelope Coventry
-
Upload
sharepoint-and-project-conference-adriatics -
Category
Technology
-
view
303 -
download
0
description
Often information workers are asked to make their SharePoint site look pretty. This session will look at what a power user should and should not do to enhance the User Interface of sites. It will include explanations of page types, master pages and Page Layouts as well as what is responsive web design. Then using no-code, Penny will amend the look and feel of page, including composed looks, adding buttons to the Ribbon and the List Item Menu. This is not a developer session and will cover both SharePoint in Office 365, and on-premises installations of SharePoint 2013.
Transcript of User Interface Tips and Tricks for the Power User - Penelope Coventry
User Interface Tips and Tricks for the
Power User
Penelope Coventry
Speaker Bio
bull Microsoft MVP SharePoint Server (8 years)
bull MCSE SharePoint 2013
bull AuthorCo-author of 10+ SharePoint Books
bull Worked with SharePoint since 2001
bull Based in UK work in Europe amp US
bull Independent Consultant
bull Trainer
Agenda
Agenda
What does it take to make a site look pretty
bull Hot Topic
bull More than adding a pretty header to your site and making it another color
bull About site AND content design
bull Spend the time and plan a site taxonomy
bull Personas
bull Wire Diagrams
bull Mockups
bull Devices
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Speaker Bio
bull Microsoft MVP SharePoint Server (8 years)
bull MCSE SharePoint 2013
bull AuthorCo-author of 10+ SharePoint Books
bull Worked with SharePoint since 2001
bull Based in UK work in Europe amp US
bull Independent Consultant
bull Trainer
Agenda
Agenda
What does it take to make a site look pretty
bull Hot Topic
bull More than adding a pretty header to your site and making it another color
bull About site AND content design
bull Spend the time and plan a site taxonomy
bull Personas
bull Wire Diagrams
bull Mockups
bull Devices
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Agenda
What does it take to make a site look pretty
bull Hot Topic
bull More than adding a pretty header to your site and making it another color
bull About site AND content design
bull Spend the time and plan a site taxonomy
bull Personas
bull Wire Diagrams
bull Mockups
bull Devices
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
What does it take to make a site look pretty
bull Hot Topic
bull More than adding a pretty header to your site and making it another color
bull About site AND content design
bull Spend the time and plan a site taxonomy
bull Personas
bull Wire Diagrams
bull Mockups
bull Devices
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
What does it take to make a site look pretty
bull Hot Topic
bull More than adding a pretty header to your site and making it another color
bull About site AND content design
bull Spend the time and plan a site taxonomy
bull Personas
bull Wire Diagrams
bull Mockups
bull Devices
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Consider the Users Involved
bull Who
bull Visit your site
bull Content Editors
bull Site Administrators
bull Sponsor
bull Will sign off design
bull Where is the content coming from
bull Whorsquos going to Implement Design
bull Need to be Familiar with SharePoint BEFORE they Implement a Design
bull Knowledge of modem design methods
bull HTML5 JavaScript CSS3
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Approaches
bull Full Effort
bull Master Pages
bull Page Layouts
bull Device Channels
bull Display Templates
bull Medium
bull Designer Manager (Publishing Sites)
bull CSS JavaScript HTML
bull Low
bull Page Editing
bull Composed Looks
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Two Types of Sites
bull Publishing Sites
bull Shop Fronts
bull Many Consumers of Information ndash 10000s(ViewersReaders)
bull Small number of ContributorsAuthors
bull Contains Publishing pages and Web Part Pages
bull Publishing Infrastructure Feature enabled at Site Collection level
bull Publishing Feature enabled at site level
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Type Types of Sites (Cont)
bull Non-Publishing Sites
bull Collaboration Sites
bull Small number of usersall of which areContributorsAuthors
bull Contains only Web Part Pages
bull Typically seen onIntranetExtranet Web Sites
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Master Page and Page Rendering
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Two Types of Content Pages
bull Publishing Pages
bull Web Content Management
bull Versioning
bull Approval
bull Based on a Page Layout
bull Field Controls
bull Web Parts Zones
bull Stored in the Pages Document Library
bull Non Publishing Pages
bull Wiki Pages
bull Web Part Pages
bull Web Part Zones
bull Changes visible immediately
bull No Approval
bull Site Pages Document Library
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Other PagesFiles
bull Master Pages
bull All SharePoint Content Pages are associated with one Master Page
bull Can be changed post Site Creation
bull Provides a constant Look-Feel across a number of pages
bull Page Layouts
bull Used on Publishing Sites
bull Templates that Control Content Design
bull Display Templates
bull Composed Looks
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
User Experience Changes
in SharePoint 2013 from 2010bull Redesign
bull Clean and Simple
bull Ribbon still there ndash Not automatically visible
bull Components
bull Moved
bull Removed
bull Drag amp Drop
bull Supports HTML
bull Data View
bull Quick Edit
bull no ActiveX
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Infrastructure Changes Speed Up Rendering
bull Web Server Caching ndash Distributed Cache
bull New Search Engine
bull Minimal Download Strategy - MDS
bull New Theme Engine
bull Improved Support for Mobile Devices
bull Use of HTML5
bull Increased Web Browser Support
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Master Page Inheritance
RootSite
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Browser Branding Options
bull Navigation
bull Composed Looks Themes
bull Designer Manager
bull Master Pages
bull Web Parts
bull Content By Search Web Part (CSWP)
bull Content Query Web Part (CQWP)
bull Adding client side code
bull Content Editor Web Part (CEWP)
bull Form Web Part
bull Script Web Part
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Changing the look
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Site Layouts
Seattle
bull Top Navigation above the Site Title
bull Left Navigation Present
Oslo
bull Top Navigation below the Site Title
bull No Left Navigation
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Other UI Componentsbull Custom Actions
bull Ribbon Buttons
bull List Item Menu Options
bull Search bull Promoted Links
bull Display Templates
bull Altering using Client Side Codebull Web Parts
bull Edit HTML Source
bull JSLink
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
BROWSER OPTIONSNAVIGATION
COMPOSED LOOKS
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Office 365 Plans
bull Small Business Plan (P Plan)
bull lt25 employees
bull One site collection
bull One Public web site
bull Automatically created
bull Enterprise Plans (E Plans)
bull Multiple site collections
bull Publishing feature can be activated
bull One Public web site
bull automatically created
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Office 365 Public Sites
bull Site Settings options focused on Public sites
bull New ldquoSiterdquo Ribbon menu
bull Simple way to add custom CSS
bull Only one generic mobile Device Channel
bull Editable Header amp Footer Elements
bull Persist across pages
bull Ability to make the site Online or Offline
bull No Content Query Web Part or Content Search Web Part
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
What is Responsive Design (RWD)
bull Design and Development should respond to the userrsquos behavior and environment based on screen size platform and orientation
bull Consists of
bull Mix of Flexible Grids and Layouts
bull Flexible Images and Media
bull CSS and Media Queries
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
What is Adaptive Web Design
bull Similar to Responsive with One Major Difference
bull Adaptive focuses on identifying breakpoints and focusing content delivery differently for each predefined size
bull breakpoints are used to specify when a site layout will change when the browser window reaches certain dimensions
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
EXAMPLE RWD amp ADAPTIVE WEB SITESWWWBOSTONGLOBECOM
ONLINESHOESCOM
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Tip
bull Load smallmobile images first
bull Replace with larger images designed for broadbanddesktop experience
bull Its like coding for the lowest common denominator
bull A small screen and a slow internet connection
bull Then scale up
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Agenda
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
Learn Morebull Books
bull People to follow
bull Conference Sessionsbull Channel 9
bull SP24
bull Podshows
bull JSLink Resourcesbull httpscodemsdnmicrosoftcomofficeClient-side-rendering-JS-2ed3538a
bull httpwwwidubbscomblog2012js-link-for-sharepoint-2013-web-partsa-quick-functional-primer
bull httpwwwbingcomsearchq=22js+link22+SharePoint+2013
bull httpwwwwonderlauracomListsPostsPostaspxID=228
bull SharePoint 2013 and SharePoint Online solution packsbull httpwwwmicrosoftcomen-usdownloaddetailsaspxid=42030
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
questions
WWWSHAREPOINTDESIGNERSTEPBYSTEPCOMBLOG
PJCOV
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
thank you
SHAREPOINT AND PROJECT CONFERENCE ADRIATICS
ZAGREB 10152014 - 10162014
