Khoa Quach will present on branding in SharePoint 2013. The session is aimed at front-end developers and SharePoint 2013 developers. It will cover differences between 2010 and 2013 like no longer needing XSLT, using web editors, and the new Design Manager. The presentation will demonstrate tools for branding like Visual Studio and SharePoint Designer. It will also review concepts like master pages, page layouts and pages. Device channels, minimal download strategies, and branding search with display templates will also be demonstrated.
This document summarizes an introductory presentation on SharePoint 2013 branding. It discusses composed looks and themes, the design manager, snippets gallery, display templates, device channels, and image renditions. It also announces a SharePoint networking event and provides information about the presenter.
The Pragmatist's Approach to SharePoint BrandingStu King
This document discusses branding and customizing the look and feel of SharePoint sites. It provides tips for taking a pragmatic approach to SharePoint branding that focuses on making compromises where necessary to work within SharePoint's limitations. Some key points include embracing tables and removing doctype declarations, putting assets in the Style Library, using divs sparingly, and overriding core styles. The design process is also discussed and modified to better suit SharePoint projects by focusing on specific page structures during planning, approval, and development. CSS and HTML techniques are presented, emphasizing organization, commenting code, and avoiding outdated practices. Layout pages can help provide structure and variations to web part pages. SharePoint 2010 is noted as being more standards compliant but still requiring
This document provides an overview of HTML5 including browser support, new elements, and features such as audio, video, and forms. It discusses how HTML5 aims to standardize error handling, accessibility, and client-side validation. Deprecated elements like <font> are still supported for backward compatibility but presentational elements should now be handled by CSS. New elements like <header>, <footer>, <nav> and <article> provide more semantic structure. The <canvas> and multimedia elements like <audio> and <video> offer new capabilities without plugins. HTML5 also introduces new form field types and validation. The document recommends using the HTML5 doctype and class names to future-proof websites while the specification is still in development.
Transform SharePoint List Forms with HTML and CSSJohn Calvert
The document discusses transforming SharePoint list forms by customizing the default New, Display, and Edit forms with HTML and CSS. It provides an agenda that includes introducing the desired situation, avoiding heavy-weight solutions, and showing sample outcomes of basic form customization. It then covers introductory topics on HTML, CSS, and how to do simple styling or create custom table and tab forms by moving fields to a new layout with JavaScript.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
Covers several approaches for user interface customization in SP2013 - using JSLink to customize a list and/or view, creating custom Display Templates for the Content Search web part, and different approaches for customizing the search hover panel.
2013 SPFest - Customizing Sites and Pages in SharePoint 2013Wes Preston
Intended as an overview for power users and developers working with SharePoint 2013 to understand new capabilities for page customizations using CSR (client side rendering) and JS Link.
This document summarizes an introductory presentation on SharePoint 2013 branding. It discusses composed looks and themes, the design manager, snippets gallery, display templates, device channels, and image renditions. It also announces a SharePoint networking event and provides information about the presenter.
The Pragmatist's Approach to SharePoint BrandingStu King
This document discusses branding and customizing the look and feel of SharePoint sites. It provides tips for taking a pragmatic approach to SharePoint branding that focuses on making compromises where necessary to work within SharePoint's limitations. Some key points include embracing tables and removing doctype declarations, putting assets in the Style Library, using divs sparingly, and overriding core styles. The design process is also discussed and modified to better suit SharePoint projects by focusing on specific page structures during planning, approval, and development. CSS and HTML techniques are presented, emphasizing organization, commenting code, and avoiding outdated practices. Layout pages can help provide structure and variations to web part pages. SharePoint 2010 is noted as being more standards compliant but still requiring
This document provides an overview of HTML5 including browser support, new elements, and features such as audio, video, and forms. It discusses how HTML5 aims to standardize error handling, accessibility, and client-side validation. Deprecated elements like <font> are still supported for backward compatibility but presentational elements should now be handled by CSS. New elements like <header>, <footer>, <nav> and <article> provide more semantic structure. The <canvas> and multimedia elements like <audio> and <video> offer new capabilities without plugins. HTML5 also introduces new form field types and validation. The document recommends using the HTML5 doctype and class names to future-proof websites while the specification is still in development.
Transform SharePoint List Forms with HTML and CSSJohn Calvert
The document discusses transforming SharePoint list forms by customizing the default New, Display, and Edit forms with HTML and CSS. It provides an agenda that includes introducing the desired situation, avoiding heavy-weight solutions, and showing sample outcomes of basic form customization. It then covers introductory topics on HTML, CSS, and how to do simple styling or create custom table and tab forms by moving fields to a new layout with JavaScript.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
Customizing the SharePoint 2013 user interface with JavaScript - Chris OBrienChris O'Brien
Covers several approaches for user interface customization in SP2013 - using JSLink to customize a list and/or view, creating custom Display Templates for the Content Search web part, and different approaches for customizing the search hover panel.
2013 SPFest - Customizing Sites and Pages in SharePoint 2013Wes Preston
Intended as an overview for power users and developers working with SharePoint 2013 to understand new capabilities for page customizations using CSR (client side rendering) and JS Link.
SEO Guide For Web Designers & FRONT-END DEVELOPERS. SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. As a web designer or frontend developer, most on-site SEO is your responsibility.
Thinknext offers IT & CS students web designing course in Chandigarh. Web Designing great carrier option for students who are passionate, creative & innovative minds, Web designing is most exciting and growing industry. Course combine desktop publishing and graphics design software with latest web technologies and software. Training includes complete web designing concepts as adobe photoshop, CorelDraw, Html, css, Dreamweaver, Java script, jquery, Bootstrap, Wamp server, etc. Training provides on live projects with latest professional skills and latest software use in industry.
It includes all basics you need to know about web designing and if you did like the content being presented in the slides you can join our club to learn more interesting things about web designing.
The course includes propelled proficient learning in Website Design idea, HTML and JavaScript, Adobe Fireworks/Photoshop, Flash for Design and Web Animation, Swish, Action Script, Adobe Premiere, Dreamweaver, Search Engine Optimization (SEO), Different kinds of Web Page Design and Assignment and Portfolio Building.
More details click here: https://cncwebworld.com/nagpur/web-design-training-institute
This document outlines the process for gathering and prioritizing web requirements from various departments within a company. Department leaders will identify key requirements and provide them to a project manager to compile. Requirements will then be prioritized using a Web Requirements Priority Index. Non-essential or out of scope requirements will also be documented for potential future projects. The end result will be a prioritized list of web requirements to guide development of a new company website.
This document discusses branding solutions in SharePoint 2013. It covers creating branding projects in Visual Studio 2012, deploying assets like themes, CSS, images and JavaScript, master pages, and composed looks. It also discusses considerations for the development environment, alternative branding techniques, and optimization techniques like additional page head controls, feature receivers, and cache busting.
In this PPT, We describe about the concept of Web Designing and also discuss about the History & Development of Web Designing. Later We defines about Some Sub Topics like Fundamentals,Types,Advantages & Applications of Web Designing that clearly describes using Pictures in creativity manner.
SharePoint 2013: Using Client-Side Rendering to color-code list cellsRandy Mullis
In SharePoint 2010, we used various approaches to project status reports including the Data View Web Part and SharePoint Designer. For SharePoint 2013, we wanted to color-code without SP Designer. This talk with show in detail how to make your lists more visually attractive and highlight values with color. The technique can be applied to status fields, financial data, or even league standings!
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
This document discusses good and bad design practices for SharePoint and Office 365 sites. It covers choosing color palettes, fonts, page layouts, and effective ways to present links and navigation. For colors, it recommends using a limited palette and pairing warm and cool tones. For fonts, it suggests choosing pairs of complementary fonts and proper sizing. Common page layouts include top zone, two-column, and three-column designs. Effective navigation uses drop-down menus, mega-menus, vertical styles and limits the number of links. The goal is to make content easily digestible and navigation simple to use.
A professional web designer faculty that offers web design courses & web designing training in Chandigarh. Our live projects training provide deep knowledge about how to work in MNC.
The document provides information about web design courses offered by Visual Media Academy located in Chandigarh, India. It details the academy's contact information, technologies covered in courses like Photoshop, CorelDraw, and WordPress. Course content includes topics like responsive design, multimedia, web fundamentals and graphics. The academy offers free live project-based training, certificate upon project completion, and claims to have experienced trainers and a track record of successful student placements.
ASO ans SEO plan for a CRM Software/Application. SEO and ASO plan for task management application software. Keyword research for search engine optimization.
This document outlines best practices for content formatting and navigation on websites. It recommends using intuitive navigation with descriptive titles and limited drop-down menus. For formatting, it suggests evenly balancing content above and below the fold, using clear calls-to-action, and consistent text formatting. For content, it provides tips for about us, mission statement, contact, and registration sections as well as using images with alt tags and frequent updates. It also discusses integrating social media icons and feeds.
The document discusses the process for building master email templates in Marketo. It defines what a master email template is and explains that it contains a large number of reusable sections (15-40) allowing for the creation of thousands of unique email layouts. The build process involves creating a wireframe blueprint, designing desktop and mobile versions, developing the HTML code, and testing across email clients. The example timeline shows key stages are discovery, design, building and testing, and going live.
This document proposes the development of a corporate website for a client. The website would include features like a blog, web pages with company information, and an optimized mobile design. It would use WordPress on a secure hosting server. The proposal outlines a two-phase process, including design, content input, optimization for search engines, and testing before handing over the completed site. The total estimated cost is KSH 23,000 with options for additional mobile responsiveness and search engine optimization.
This document provides pricing information for email template packages using ETB (Email Template Builder), Marketo Emails, and single Marketo emails. Package 1 options include creating email templates from scratch while Package 2 options involve using existing graphic designs. Pricing ranges from $3,000 to $7,000 depending on the package and tool selected. Additional customization options like extra sections or support hours can be added at additional cost.
This document discusses free form vs template form building in Demosphere. It provides an overview of creating and using templates to build common registration forms rather than building each form from scratch. Templates allow pre-made forms to be reused and customized as needed. The document also covers connecting fees and discounts to questions, conditional questions, and analyzing form responses. Templates can help standardize forms while allowing flexibility.
The document provides tips for web designers taking a web design course. It recommends using professional design software like Photoshop and Illustrator. Designers should create custom layouts that are easy to understand and use themes. Menus should be located to make navigation easy. HTML5 tags and CSS should be used. Flash animations should be avoided in favor of CSS3 and jQuery for animation. Dreamweaver is recommended for coding. Websites should be responsive across devices. PHP is powerful for managing databases and content. Links should be tested and the site well organized with cross-linking between pages. Social media integration and infographics can help with SEO and content.
The document provides information on various topics related to web development including HTML, CSS, JavaScript, PHP and other technologies. It discusses common HTML tags like <head>, <body>, <p>, <img>, <a> and how to structure an HTML document. It also covers CSS concepts like selectors, properties and values. Finally, it summarizes different form elements in HTML like <input>, <textarea>, <select>, <button> and how to collect user information and submit it using forms.
Khoa Quach presented on differences between branding in SharePoint 2010 and 2013. In SP2013, HTML markup can be copied directly into master pages using the Design Manager which allows converting HTML to ASP.NET master pages. The presentation also covered tools and libraries for branding, elements of page layouts and master pages, using display templates for search results branding, device channels for different devices, and minimal download strategies to reduce page load times in SP2013.
The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly
This document provides an overview of using Bootstrap to build a responsive SharePoint site. It discusses what Bootstrap and responsive design are, why Bootstrap is useful, how to implement Bootstrap grids and media queries in SharePoint, Bootstrap UI components, challenges of using Bootstrap in SharePoint, and examples of responsive SharePoint sites built with Bootstrap.
SEO Guide For Web Designers & FRONT-END DEVELOPERS. SEO is a technique which helps search engines find and rank your site higher than the millions of other sites in response to a search query. As a web designer or frontend developer, most on-site SEO is your responsibility.
Thinknext offers IT & CS students web designing course in Chandigarh. Web Designing great carrier option for students who are passionate, creative & innovative minds, Web designing is most exciting and growing industry. Course combine desktop publishing and graphics design software with latest web technologies and software. Training includes complete web designing concepts as adobe photoshop, CorelDraw, Html, css, Dreamweaver, Java script, jquery, Bootstrap, Wamp server, etc. Training provides on live projects with latest professional skills and latest software use in industry.
It includes all basics you need to know about web designing and if you did like the content being presented in the slides you can join our club to learn more interesting things about web designing.
The course includes propelled proficient learning in Website Design idea, HTML and JavaScript, Adobe Fireworks/Photoshop, Flash for Design and Web Animation, Swish, Action Script, Adobe Premiere, Dreamweaver, Search Engine Optimization (SEO), Different kinds of Web Page Design and Assignment and Portfolio Building.
More details click here: https://cncwebworld.com/nagpur/web-design-training-institute
This document outlines the process for gathering and prioritizing web requirements from various departments within a company. Department leaders will identify key requirements and provide them to a project manager to compile. Requirements will then be prioritized using a Web Requirements Priority Index. Non-essential or out of scope requirements will also be documented for potential future projects. The end result will be a prioritized list of web requirements to guide development of a new company website.
This document discusses branding solutions in SharePoint 2013. It covers creating branding projects in Visual Studio 2012, deploying assets like themes, CSS, images and JavaScript, master pages, and composed looks. It also discusses considerations for the development environment, alternative branding techniques, and optimization techniques like additional page head controls, feature receivers, and cache busting.
In this PPT, We describe about the concept of Web Designing and also discuss about the History & Development of Web Designing. Later We defines about Some Sub Topics like Fundamentals,Types,Advantages & Applications of Web Designing that clearly describes using Pictures in creativity manner.
SharePoint 2013: Using Client-Side Rendering to color-code list cellsRandy Mullis
In SharePoint 2010, we used various approaches to project status reports including the Data View Web Part and SharePoint Designer. For SharePoint 2013, we wanted to color-code without SP Designer. This talk with show in detail how to make your lists more visually attractive and highlight values with color. The technique can be applied to status fields, financial data, or even league standings!
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
This document discusses good and bad design practices for SharePoint and Office 365 sites. It covers choosing color palettes, fonts, page layouts, and effective ways to present links and navigation. For colors, it recommends using a limited palette and pairing warm and cool tones. For fonts, it suggests choosing pairs of complementary fonts and proper sizing. Common page layouts include top zone, two-column, and three-column designs. Effective navigation uses drop-down menus, mega-menus, vertical styles and limits the number of links. The goal is to make content easily digestible and navigation simple to use.
A professional web designer faculty that offers web design courses & web designing training in Chandigarh. Our live projects training provide deep knowledge about how to work in MNC.
The document provides information about web design courses offered by Visual Media Academy located in Chandigarh, India. It details the academy's contact information, technologies covered in courses like Photoshop, CorelDraw, and WordPress. Course content includes topics like responsive design, multimedia, web fundamentals and graphics. The academy offers free live project-based training, certificate upon project completion, and claims to have experienced trainers and a track record of successful student placements.
ASO ans SEO plan for a CRM Software/Application. SEO and ASO plan for task management application software. Keyword research for search engine optimization.
This document outlines best practices for content formatting and navigation on websites. It recommends using intuitive navigation with descriptive titles and limited drop-down menus. For formatting, it suggests evenly balancing content above and below the fold, using clear calls-to-action, and consistent text formatting. For content, it provides tips for about us, mission statement, contact, and registration sections as well as using images with alt tags and frequent updates. It also discusses integrating social media icons and feeds.
The document discusses the process for building master email templates in Marketo. It defines what a master email template is and explains that it contains a large number of reusable sections (15-40) allowing for the creation of thousands of unique email layouts. The build process involves creating a wireframe blueprint, designing desktop and mobile versions, developing the HTML code, and testing across email clients. The example timeline shows key stages are discovery, design, building and testing, and going live.
This document proposes the development of a corporate website for a client. The website would include features like a blog, web pages with company information, and an optimized mobile design. It would use WordPress on a secure hosting server. The proposal outlines a two-phase process, including design, content input, optimization for search engines, and testing before handing over the completed site. The total estimated cost is KSH 23,000 with options for additional mobile responsiveness and search engine optimization.
This document provides pricing information for email template packages using ETB (Email Template Builder), Marketo Emails, and single Marketo emails. Package 1 options include creating email templates from scratch while Package 2 options involve using existing graphic designs. Pricing ranges from $3,000 to $7,000 depending on the package and tool selected. Additional customization options like extra sections or support hours can be added at additional cost.
This document discusses free form vs template form building in Demosphere. It provides an overview of creating and using templates to build common registration forms rather than building each form from scratch. Templates allow pre-made forms to be reused and customized as needed. The document also covers connecting fees and discounts to questions, conditional questions, and analyzing form responses. Templates can help standardize forms while allowing flexibility.
The document provides tips for web designers taking a web design course. It recommends using professional design software like Photoshop and Illustrator. Designers should create custom layouts that are easy to understand and use themes. Menus should be located to make navigation easy. HTML5 tags and CSS should be used. Flash animations should be avoided in favor of CSS3 and jQuery for animation. Dreamweaver is recommended for coding. Websites should be responsive across devices. PHP is powerful for managing databases and content. Links should be tested and the site well organized with cross-linking between pages. Social media integration and infographics can help with SEO and content.
The document provides information on various topics related to web development including HTML, CSS, JavaScript, PHP and other technologies. It discusses common HTML tags like <head>, <body>, <p>, <img>, <a> and how to structure an HTML document. It also covers CSS concepts like selectors, properties and values. Finally, it summarizes different form elements in HTML like <input>, <textarea>, <select>, <button> and how to collect user information and submit it using forms.
Khoa Quach presented on differences between branding in SharePoint 2010 and 2013. In SP2013, HTML markup can be copied directly into master pages using the Design Manager which allows converting HTML to ASP.NET master pages. The presentation also covered tools and libraries for branding, elements of page layouts and master pages, using display templates for search results branding, device channels for different devices, and minimal download strategies to reduce page load times in SP2013.
The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly
This document provides an overview of using Bootstrap to build a responsive SharePoint site. It discusses what Bootstrap and responsive design are, why Bootstrap is useful, how to implement Bootstrap grids and media queries in SharePoint, Bootstrap UI components, challenges of using Bootstrap in SharePoint, and examples of responsive SharePoint sites built with Bootstrap.
Session 1 branding and site development in SharePointKhoa Quach
This session will provide an overview of tools and libraries available for branding SharePoint 2013 branding solutions. We will review the new design manager, code snippets and the new display templates for content search web parts as well as fundamentals such as master pages, page layouts, publishing content types and best practices when developing front end solutions to SharePoint platform. We will also quickly introduce to popular technologies available and that concurrently work well in SharePoint 2013 such as jquery.js, bootstrap.js or spservices.js
SharePoint Branding Guidance @ SharePoint Saturday San DiegoKanwal Khipple
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Building modern intranets with share point communication sites aug 2018Asish Padhy
The Modern SharePoint Communication sites provide a responsive rich experience which makes them a great candidate for SharePoint Intranets. Along with it, the modern experience enriches the way content can be structured, tagged with metadata and curated by content owners. There are obvious limitations with the modern experience and will present few approaches to overcome these limitations. In this session, we will get a quick overview of Communication sites, and various advantages and limitations of the modern experience sites. In addition, we will look at how to map the old SharePoint structures in Classic sites to New experience and options to achieve that.
[DevDay 2017] Using analytics, focusing on SEO and unability - Keys to develo...DevDay.org
Competition for customers time and money is high and growing, especially in local and regional markets. Developers need to do more than just deliver functionality and good code. They must work with others on their teams to develop sites and apps with an eye on actual user data from Analytics, SEO research, and usability. We will talk about how a developer or a team can get into such a mindset.
User Centered Design and SharePoint Publishing PortalsTom Pham
Usability and User Experience.
The User Centered Design Process (UCDP), taking designs from Abstract to Concrete.
Identifying Measures of Success.
Putting together a UX Team.
Microsoft’s Web Content Management System - SharePoint Publishing Portals.
Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts.
Leveraging CSS Frameworks for responsive web like Bootstrap.
Microsoft Share Point Branding & Customizationyeschandana
This document provides an overview of Microsoft SharePoint branding and customization. It discusses what SharePoint branding is, why it is important, and examples of real-world SharePoint branding implementations. It also outlines the typical roles and responsibilities in a SharePoint project, the tools available for branding like SharePoint Designer and Visual Studio, and the options for out-of-the-box versus developer-focused customization. Useful links are also provided for additional resources.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
SEO presentation Beginners guide advanced level SEOareeba87987
This document provides an overview of search engine optimization (SEO) techniques. It discusses on-page and off-page SEO, including keywords, titles, descriptions, links, citations, and more. Tools for auditing pages like Google Search Console and Google Analytics are also covered. The document aims to educate beginners on best practices for optimizing websites and improving organic search rankings.
Build Modern Intranet sites with SharePoint Communication sites - Asish Padhy...Asish Padhy
The Modern SharePoint Communication sites provide a responsive rich experience which makes them a great candidate for SharePoint Intranets. Along with it, the modern experience enriches the way content can be structured, tagged with metadata and curated by content owners. There are obvious limitations with the modern experience and will present few approaches to overcome these limitations. In this session, we will get a quick overview of Communication sites, and various advantages and limitations of the modern experience sites. In addition, we will look at how to map the old SharePoint structures in Classic sites to New experience and options to achieve that.
What's new in SharePoint 2013 and is it worth migrating to. This webinar was recorded and available on http://en.share-gate.com/blog for you to view.
Whether you want to learn more about SharePoint's new interface, search, WCV, this presentation helps you discover them quickly.
SEO involves optimizing webpages to rank highly in search engine results. Key tactics include using relevant keywords in titles, filenames, and content, as well as building high-quality backlinks from other websites. Both white hat techniques that follow search engine guidelines and black hat techniques like cloaking and keyword stuffing are discussed.
1. The document provides an overview of how Google Search works and guidelines for site owners to ensure their content is discoverable, indexable, and ranks well. It discusses Google's crawling, indexing, and ranking processes.
2. The document then outlines Google's Webmaster Guidelines covering site structure, titles, snippets, text, and use of technologies like Flash. It recommends testing sites using analytics and submitting sitemaps to help Google find all pages.
3. The document concludes by summarizing the discussion and providing resources for webmasters to engage with Google through its Webmaster Tools and get support on search visibility.
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
2. About me
French, SharePoint Developer and Food Lover
Khoa Quach
SharePoint Technologies MCTS,
MCPD, MCSE
Co-founded NIFTIT in Brooklyn
Specializes in SharePoint
Integration
Application Development
Branding Solution
Mobile Solution
@niftykhoa
@NIFTIT
3. Who is the session for?
Wait, Don’t leave yet!
This session will be mainly for:
Front-End Developers
SharePoint 2013 Developers
There will be some tricks and tips for:
SharePoint 2010 Developers
4. Agenda
Let’s get started!
This session will cover:
Differences between SP 2010 & SP 2013
Tools and Libraries
Basic SharePoint Branding Knowledge
Review of Design Manager
Demo & Best Practices
5. Differences
Between 2010 & 2013!
From a Branding Development Prospective:
No More Table Markup
Say Bye to XSLT
Use your favorite Web Editor
Introduce Design Manager
Client Side Improvements
Image Rendition
Minimal Download Strategies
REST
Methodology
8. A look back
Designing your web site in SharePoint 2010
HTML
Comps
CSS, JS
, etc.
Dreamweaver /
Photoshop / etc.
SharePoint Designer
9. New methodology
Designing your web site in SharePoint 2013
SharePoint
HTML
Comps
Upload
CSS,
JS,
etc.
Auto
Convert
Dreamweaver / etc.
Add
controls
Snippet
Gallery
10. Tools and Libraries
Sorry, No Hoverboard Allowed!
Here are the tools you can use to brand your site:
Visual Studio 2012/2013
SharePoint Designer 2013
Web Development Editor/Tool
And some optional libraries:
JQuery +1.7.1
Bootstrap.js
Angular.js, Backbone.JS, Ember.JS
Knockout.JS
CoffeeScript.js
11. SharePoint page model
Some basic concept
SharePoint uses templates to define and render
the pages that a site displays.
Master pages define the shared framing elements (AKA
the chrome) for all pages in your site.
Page layouts define the layout for a specific class of
pages.
Pages are created from a page layout by authors who add
content to page fields.
RENDERED PAGE
=
Master page + Page layout + page (content)
13. Elements of the master page
Let’s see if we get it right!
Site Icon
Search Bar
Global
Navigation
Footer
14. Elements of the page layout and page
Let’s see if we get it right!
Image Slider
Content Search
WebPart
Content
from
Content
Type
15. Design Manager
Under the hood!
Access/Upload to assets and pages
Convert HTML to ASP.NET master page
Snippet Gallery
Design Packages
Device Channels
Display templates (No more XSLT)
16. Access network map
As requested for NYCSDUG 2014
This should be straight forward for on-prems but
here are possible solution for online.
Internet Explorer Configuration Answer
(click here)
The “WebDav” Fix
(http://sharepoint.stackexchange.com/questions/7
1991/office-365-sharepoint-access-denied-errorwhen-mapping-webdav)
HotFix for IE10/Win7
(http://support.microsoft.com/kb/2846960)
The “Keep me signed in” option
(http://support.microsoft.com/kb/2616712)
17. Snippet gallery
Sorry, No Hoverboard Allowed!
Site Icon
Global Navigation
Search Box
Site Title
Edit Mode
Trim Security
Device Channel Panel
Media and Content
OOB Web Parts
Custom ASP.Net Markup
18.
19. Recap for the master page
If it was too fast!
Analyze your design and define SP page model
elements to be used
For 2013:
Simply copy and paste your HTML markup into the
master page but analyze
Segregate the master page elements from the page
layout(s)
Stick to one methodology: HTML or SP
20. Branding search components
Search-driven web parts and display templates
Display templates control which managed properties
appear in the search results of a search-driven Web
Part and the styling and behavior of those search
results.
Control display templates: control the layout of
search results and any elements common to all
results such as paging, sorting, and other links
Item display templates: which control how each
search result is displayed and repeated for each
result
21. Device Channels
Search-driven web parts and display templates
For content negotiations
Use to differentiate master page
Target different content with device channel
panels
Good to inform older browsers users to update or
be aware
22. Minimal download strategy
Search-driven web parts and display templates
New feature in SP 2013
Reduce Page Load time
Only send the difference when users navigate to
new page
23. Branding search components
Search-driven web parts and display templates
Display templates control which managed properties
appear in the search results of a search-driven Web
Part and the styling and behavior of those search
results.
Control display templates: control the layout of
search results and any elements common to all
results such as paging, sorting, and other links
Item display templates: which control how each
search result is displayed and repeated for each
result
Resources:http://msdn.microsoft.com/en-us/library/jj163942.aspxNo more tables:- Huge markups improvementsDesign Package:A design package does not include pages, navigation settings, or the term store.Design Manager:- Helps you create branding with HTML, CSS and JSavailable in publishing sites in both SharePoint Server 2013 and Office 365Client Site:rendering controls such as image renditionsMinimal Download strategiesRESTIn terms of authoring, SP 2013 introduces some great feaures:Cross site publishing utilizes the search service application and index. I will provide demo on authoring capabilities at a later date.Managed navigation. This is a very cool features tool. Not only it allows you to have “pretty” URLs but you will be able to work with one page design concept that dynamically loads content. In other words, one page to manage and develop from a front end prospective.Content Search Web Part. Although not available throughout the platform and versions of SP2013, this is a key components of the new SP version that will be demo in session 2.
Most of enterprise looking to develop branding solution will start with the Out of the Box (OOB) branding solution provided by MS SP. This is not necessarily due to a lack of branding solution development knowledge but a lack of priority. In fact, most new implementation will focus on the architecture, topology, business intelligence development, search configuration or any other pillars that makes SharePoint a great products… but will always leave branding as secondary priority. And no, just changing the logo to your company logo does not create a branding solution Although you have the option to create a theme, this will not answer all the business requirements.This is an excellent blog on how to customize the SP2013 composed look step by step by Benjamin Niaulinhttp://en.share-gate.com/blog/create-sharepoint2013-theme-using-color-palette-tool
Most of enterprise looking to develop branding solution will start with the Out of the Box (OOB) branding solution provided by MS SP. This is not necessarily due to a lack of branding solution development knowledge but a lack of priority. In fact, most new implementation will focus on the architecture, topology, business intelligence development, search configuration or any other pillars that makes SharePoint a great products… but will always leave branding as secondary priority. And no, just changing the logo to your company logo does not create a branding solution Although you have the option to create a theme, this will not answer all the business requirements.This is an excellent blog on how to customize the SP2013 theme step by step by Benjamin Niaulinhttp://en.share-gate.com/blog/create-sharepoint2013-theme-using-color-palette-tool
FromEthan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide.Developing SharePoint branding solution for 2010 was tedious. You had the distinction between the front end developer that will take the comps and prepare the HTML, CSS, JS elements and the SharePoint developer that will analyze and review the elements developed and translate it to a SharePoint page model “language”.
FromEthan Gur-esh and Alyssa Levitz’s SP Tech Conf 2012 slide.Now, you can have the front end developer develop the most of the branding solution with very little knowledge of SharePoint. They are trying to:Get Branding SharePoint sites gets easier and more familiar for Web Designers Branding SharePoint intranet to look more like internet sitesFor Web Designers:Convert HTML into SharePoint master page but not page layoutIn previous versions of SharePoint, branding a site required specific technical expertise about things like what content placeholders are required on a master page, or how a master page implements certain classes of styles. SharePoint 2013 introduces Design Manager—a new interface and central hub for managing all aspects of branding your SharePoint site. You can find the Design Manager in the top-level site for your site collection. It is a part of the Publishing Portal site collection template in SharePoint 2013.
Tools NotesSPD 2013 is freeWeb Development Tool such as NotePad++, Sublime Text 2, DreamweaverLibraries:Spservices is more powerful in the context of SharePoint 2010 and deprecated in 2013. Specifically for branding solutions where developers have no central administration access (and search service application), non publishing server sites or sandbox solution.Bootstrap.js is a very commonly used library in the WWW but not in SharePoint. Challenges comes from the fact that most of the default components (navigation, web parts ….) are not mobile friendlyAs we are leaning forward client side coding (This is available via the CSOM and JSOM on the development for SharePoint 2013…) it is important to elaborate proper strategies developing JS solutions. One of the solution is to use the Angular.js platform. It allows to structure very efficiently JS code as a MVC model and can be a very powerful assets for the display templates.Alternative to Angular are Ember.JS, Backbone.JS, Knockout.JSRead here the differences between the platform: http://www.100percentjs.com/backbone-or-angular-or-ember-here-is-my-choice-and-why/Read here a comparison between Angular VS Knockout: http://blog.nebithi.com/knockoutjs-vs-angularjs/
The structure of a SharePoint page includes three main elements. This is important to know when starting branding solution for SharePoint
First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
First steps is to review the composition file that will be provided by your design/creative team. You will have to identify the parts of the composition that fits each SharePoint page model elements.
Secondly, you will have to define what would be the page layout that you will use, the content type associated with and the different component that you will be adding to the page
Access/Upload assets:Direct accessHere are some links to resolve the Access Mapping Network IssueHere are the steps for all platform:http://msdn.microsoft.com/en-us/library/office/jj733519.aspxResolve issue:http://tommdaly.wordpress.com/2012/11/07/sharepoint-2013-design-manager-unable-to-map-network-drive-while-working-on-the-server/About Converting:- After you convert your HTML files, you can use your HTML editor to continue to refine your design, preview your files, and save them. Every time you save the HTML versions of the master page or page layout files, SharePoint 2013 automatically updates the associated SharePoint master page and page layouts to reflect your changes. - With Design Manager, you only have to edit the HTML files—while you can continue to write custom master pages and page layouts using your ASP.NET and SharePoint development skills, Design Manager enables you to design great sites without SharePoint developer expertise.If you prefer, SharePoint 2013 also includes HTML versions of several master pages and page layouts that you can use as starter templates. If you want to start from these files, create a copy of the HTML file (the associated ASP.NET file will be taken care of for you), and then edit the HTML file as you normally would. You can also start from just a basic template by using the master page from minimal template option, which automatically creates the associated .master file.Design Manager enables a step-by-step approach for creating design assets that you can use to brand sites. Upload design assets—images, HTML, CSS, and so on—and then create your master pages and page layouts. You can preview how your design looks either in a client-side code editor or on the server as you are designing it. Snippets:add custom SharePoint components and ribbon elements by using the Design Manager UI. HTML snippets that can be used by any web design tool—it renders HTML and ignores ASP.NET and SharePoint markup (while SharePoint renders only ASP.NET and SharePoint markup and ignores HTML).
This was a bit painful for me when I try to connect to my demo environment on O365 so hopefully it help someone.
All the following items are available for the master page snippet gallery.Note: same principle apply for page layout snippet gallery but you have access to your content type fields.
This is a new feature available to create powerful branding solution. In 2010, you had to create CQWP and then modify XLST files to enhance the branding solution. However, 2013 changes this. We will review in session 2.
Good tool: www.useragentstring.comYou can have up to 10 Device Channels defined in your Site Collection and per Device Channel you can specify up to 150 Device Inclusion Rules. Those are hard limits enforced by the code.The Publishing Output Cache which is a part of the Publishing infrastructure in SharePoint 2013 has built-in support for Device Channel so you don’t have to worry of much performance impact when working with Device Channelshttp://www.mavention.nl/blog/device-channels-sharepoint-2013
Image rendition is very cool. It allows you to set predefined scale for images and use them to define what type and part of the images you will display at different resolution.I ran into an issue “he blob cache is not enabled in this web application. Image renditions will not be generated until the blob cache is enabled. For information on turning on the blob cache, please review the product documentation.” that was easily solve with this article:http://sureshpydi.blogspot.com/2013/05/sharepoint-2013-blob-cache-is-not.html
Resource here: msdn.microsoft.com/en-us/library/dn456544.aspxThe basic mechanics of MDS are pretty simple. The main components of MDS are two engines, one in the server and another in the client, that work together to calculate the changes and render the pages in the browser when the user navigates from page to page in the site. In other words, we only use one page and content is loaded according to the context.