Sharepoint 2013 : SharePoint Designer and Branding - SharePoint 2013 User Interface

I shall assume at this point that you are familiar with SharePoint 2013’s user interface (at least a little).

I mentioned that Microsoft has adopted a new “Metro” design for its applications and operating systems, and SharePoint 2013 joins the fold with this new look to the user interface. Because the code name “Metro” is no longer used (due to legal conflict), we now refer to the new design branding, or theme, as “Windows 8.” However, before moving on from this history lesson, I shall mention that the code name had significance. The metro branding emulates the look and feel of signage in typical metropolitan transport facilities, with greater emphasis on text than graphics, to provide clear and concise instruction to users. Those familiar with Windows 8, Xbox 360, and the new Windows Phone can appreciate the simplicity of the new Windows 8 design.

Because the new Windows 8 branding is less graphic intensive and geared more to simplicity with text, the coding behind the design is less complex. Designers can easily integrate the design of custom functionality with minimal use of Cascading Style Sheet (CSS) elements and HTML. This is not to say that the user interface loses capability. Much of SharePoint 2013 continues to use AJAX and JQuery to achieve direct user feedback without multiple page refresh cycles that plagued users of SharePoint 2007 and earlier. Spend some time in SharePoint 2013 and you will get used to the “Working” message appearing in the top right of the page, indicating that SharePoint is processing a request without page post-back and that the user interface will reflect update shortly.

SharePoint 2010 introduced the ribbon interface, also present in the other Office applications, which provided greater navigation around the vast functions available in SharePoint. The ribbon provides functional context by showing icons for only those functions pertinent to the current user context. For example, if editing the settings for web applications, the ribbon displays icons for those functions relevant to web application settings. SharePoint 2013 does not disappoint—the new branding includes updates to the ribbon, so the icons fit in with the Windows 8 style and provide users with snappy navigation. Figure 2 shows a view of the new SharePoint 2013 ribbon.

The ribbon is not the only area that has a fresh new face. The Site Contents area (shown in Figure 3) now displays lists and libraries with tiles. SharePoint 2013 refers to lists and libraries as “apps,” hence the main icon to “add an app” rather than a link to create a new list or library. No need to fear: lists and libraries work the same as they always have (for the most part). Microsoft now considers everything an app in SharePoint to fit in with the App Development Model, which is the new way of developing portable applications that work in SharePoint and other Office applications.

Notice how the tiles, shown in Figure 3, provide a very simple graphic and monotone coloring. This is provides a crisp look to icons and tiles in the user interface without confusing the user—exactly like the signs displayed in the Washington, DC, Metro Transit System, most major airports, and the subway system in New York City. I wonder where Microsoft got its inspiration!

You might be wondering what happened to the Site Actions menu . SharePoint 2013 did away with the Site Actions menu and replaced it with the gear icon in the top right. Figure 4 shows a cluster of icons in the top right of every SharePoint site (except custom branded sites and publishing sites in anonymous user mode). Clicking the gear icon is akin to clicking the Site Actions menu in SharePoint 2010—it is here that you can get access to the site settings, site contents view, and some owner and administrative functions.

The Newsfeed, SkyDrive, and Sites links navigate you to these areas within SharePoint. If you have My Sites and user profiles enabled, these links are your access to personal content. Typically, users like to access their personal content most, which is why these links reside in this cluster as pervasive links with the site. In similar fashion, you can access details about your profile by clicking your name, which shows a drop-down to access your user profile, customize the page, or sign out of SharePoint.

The Share icon is the new approach to granting permissions to the site. If you have permissions to grant others access to the site, the Share icon displays a dialog box (Figure 5) to invite other users to the site. Sharing versus granting permissions aligns with what you see in social networking sites. You do not grant users access to your Facebook page, but you do share information on the page with others.

The box icon on the far right bottom of the cluster (Figure 4) is an interesting feature of the design. Clicking this icon tells SharePoint to focus the page on content by hiding the site icon and header information. After clicking this icon, notice in Figure 6 that the ribbon and pervasive links remain intact, because you still need this information on the page to navigate and access important personal content.

Aesthetics are not the only changes in the new SharePoint 2013 user interface. The design brings some functional enhancements too. One of the more significant changes is the ability to drag and drop files into document libraries. Open your browser, navigate to the document library, and then try dragging a file from your disk to the browser. You should see a drag area appear where you can drop the file, which the browser then uploads to SharePoint. Wait… I can hear the Safari, Firefox, and Chrome users screaming from here, “I bet it’s only supported in Internet Explorer.” The good news is that drag and drop to document libraries works on the latest version of Safari, Firefox, Chrome, and Internet Explorer. Curiously, Internet Explorer 8 and 9 also support drag and drop, but only if you install Office 2013.

The new SharePoint 2013 branding brings many, many, new enhancements. If you are interested in a SharePoint 2013 deep dive, I recommend reading Pro SharePoint 2013 Branding and Responsive Web Development, by Eric Overfield, Rita Zhang, Oscar Medina, and Kanwal Khipple (Apress, 2013). Before moving on to discussing branding SharePoint 2013 with the new Design Manager, I shall quickly demonstrate the new preview capabilities in the SharePoint document libraries. If SharePoint recognizes an image file type uploaded to a document library, hovering over the document library entry in the browser shows a brief preview (Figure 7).