CTS – Your Technology Partner

The Power of HTML5 and CSS3 in SharePoint 2013

Written by Craig Butler on February 1, 2013

twitter_trace

By Trace Armstrong

SharePoint 2013 has brought many changes in how developers build & implement branding packages. The biggest changes are the abilities to implement HTML5 and CSS3 and the Design Manager. Using these development tools, SharePoint Branders can build dynamic, unique designs for their environment.

HTML5 contains new features such as:

1) The <video> and <audio> elements for media playback in the browser’s default player
2) Support for local storage (ability to use web applications or read content offline)
3) New content-specific elements, like <article>, <footer>, <header>, <nav>, and <section>. These tags allow for better SEO content indexing, organization, and standardization for all designs.
Perhaps more importantly, HTML5 lets developers target the largest number of devices with the least amount of development effort. Whether the device is a widescreen desktop monitor or a smartphone, HTML5 is a universal language for all of them.

In addition to HTML5, CSS3 opens up even more branding options.

CSS3 options include:

1) The @font-face property enables font file references to render in a live environment.
2) Border-radius enables the ability to make rounded corners on boxes and other objects.
3) Box shadow generates a shadow on elements that is customizable to developer preferences.
4) Dynamic widths and proportional sizing for multiple screen sizes.

CSS3 option four is especially important because it gives developers the ability to use responsive web design. Responsive web design utilizes several components to help developers build designs that have dynamic widths and will re-size proportionally based on the screen resolution or size of the device accessing the site.

Responsive web design is a flexible grid that creates a layout that expands with the page. This flexible grid is designed in terms of proportions; that way when a window is resized, all of the elements in the layout will resize their widths in relation to one another. It does this using CSS3 Media Queries that adapt the rendering of webpages based on conditions such as screen resolution.

An important aspect of responsive web design to remember is not giving anything a fixed pixel size; this includes images and other media.

Examples of Responsive Web Design in SharePoint 2013 are below:

1980px Wide Screen Resolution

image

1024px Wide Screen Resolution (iPad resolution)

image

640px Wide Screen Resolution (iPhone 4, iPhone 4S, iPhone 5, Android, Windows Phone)

image

SharePoint 2013 truly gives branding developers a plethora of options in designing their SharePoint environment. However, the all-important question of using responsive web design falls on these factors…

Time & Money – Are the hours and money available to build a complex grid system using CSS3 and HTML5? If not, sticking to something more out of the box is the best option.

Browser Support – Does the project require a design that will only see use on a desktop or laptop, or do you need one for tablets, mobile phones, and other various devices? Does the project require the use of more web browsers such as Chrome, Firefox, or Safari rather than Internet Explorer?

Performance – Does the project require a design that will hold up over time, or will your company/client want to change it every few years?

Content – How much content and what type of content will make up the site?

Website vs. Web Application – Does your project require a website for all devices, or a completely different web application for use on tablets and smart phones that will have different functionality?

Knowing the answers to these questions will help developers best determine how to utilize these new tools in SharePoint 2013.

Comments

comments