60
Design Strategy: To create a user-centric web site, we must draw on the organization's vision, goals, and objectives
to create a design strategy. For external websites, business goals (such as increasing revenue, containing costs, and
increasing market share) and critical success factors (such as conversion rates, satisfaction, and branding strategy)
also play an important role in defining the overall design strategy. Similarly for internal websites, business goals
(such as increasing productivity or employee satisfaction) and critical success factors (such as enabling seamless
internal collaboration, speed, and accuracy) play an important role. To achieve these goals, we should ask the users
of the website about their goals and tasks, current challenges they face, and their expectations and needs. In
addition, the business stakeholders' views on the intended future state of the application, as well as the worst-case
and best-case scenarios, should be taken into account.
Usability Assessment: In the case of existing applications, we should undertake a usability assessment process
wherein we analyze user requirements and try to identify the gaps between the new requirements and the existing
functionalities. If required, usability testing techniques should also employed on a case-to-case basis.
User Segmentation and Persona Development: Here, we should focus on understanding who the actual users
are, their characteristics and interests, their work environment and task profiles, experience level, cultural variance,
and so on. This information is then used to develop user-specific personas, such as the three described in Figure 5.
Task Flow Analysis: This activity focuses on determining the key user tasks and scenarios based on the type of
users. Different methods such as card sorting and primary noun architecture are employed to identify the
taxonomy and labels of the system.
11
Figure 5: Examples of user personas
Manager
Employee
Administrator
Name
Michael Smith
Shannon Huffman
James Cartel
Age
32
29
26
Location
USA
USA
USA
Personality
Michael is very straightforward.
He thinks clearly, loves playing
with numbers, and does not talk
much.
Shannon is friendly, talkative,
and likes having coffee at her
desk.
James stays up-to-date with
technology and gadgets, and has the
latest phone. He is very talkative and
likes to dress casually.
Work Habits
Michael prefers to work on his
laptop/desktop and likes to play
around numbers.
Shannon prefers to work on
her desktop and likes tools
that perform fast and provide
information as quickly as
possible
James knows the IT systems of his
company in and out. He likes coding
and is quick to find a solution to a
problem.
37
12
Information Architecture (IA) and Interaction Design: This is the process of logically grouping content in a
purposeful and service-oriented way, so that the content is intuitive and easily accessible. Menu structure and page
templates can be used for this purpose.
Information Architecture enables all the individual task flows in the user interface. It helps you organize all the tasks
and information into groups and levels, increases efficiency by facilitating the location of items, and helps you
present content in an easy-to-understand fashion.
Information Architecture and Interaction Design help in assigning navigational schemes at each level. This becomes
a vital input for the visualization of the system through site structures, wireframes, and visual designs. The
wireframes depict the placement of user interface elements on a page. The site structure defines how the users
arrive at a page and where they will go after completing the task.
Once the Information Architecture is frozen, the next step is to design the sitemaps and the global navigation
system. Global navigation provides users with the ability to navigate to the most important areas with ease. In our
2
example of ABC Inc., we have designed the navigation based on the following four focal points of usability and
three governing principles (see Figure 6).
Focal Points:
n
Navigation – Can users easily find desired information or functionality?
n
Content – Do users get what they want?
n
Presentation – Can users easily understand the content?
n
Interaction – Can the users act on the interface intuitively?
Usability Principles:
n
Allow users to intuitively navigate from one web page to another.
n
Make it easy for users to understand how menu items are related to each other.
n
Ensure that the navigation elements help users land on the pages they actually intended to land on and
understand the relationship between the menu items and the pages.
Figure 6: Global navigation design for the ABC Inc. website
2
Human Factors International, The Business of UX Metrics: How to measure and manage the user experience (July 30, 2007), accessed April 15, 2014,
http://www.humanfactors.com/downloads/documents/Business-of-UX-Metrics.pdf
15
13
Wireframe and Visual Design: This activity focuses on the visual representation of the Information Architecture and
Interaction Design patterns. It illustrates key features, content, and typical navigation in a visual format. A wireframe
is the basic skeleton of visual representation and is used by developers and project managers to validate
requirements with the end-users. Usually, it is easier to incorporate changes during the wireframe stage, after which
visual mock-ups are created to showcase the look and feel of the site.
Using the information that we have gathered so far, we can now proceed with the wireframe creation for ABC Inc. Let
us take a look at the overall site template that will be used for the base SharePoint 2013 master page. This includes
global site elements such as header, global navigation bar, main content area, and footer. Figure 7 depicts a core
page structure and Figure 8 shows a home page wireframe.
Once the wireframe is reviewed and signed off by end users and business stakeholders, the next step is to create
visual mock-ups, keeping in mind the organization's branding and style guides for the look and feel of the web
pages. Figure 9 shows the visual design for ABC Inc.'s home page.
Figure 7: Core page structure
Figure 8: Home page wireframe
13
14
Now that the visual design is in place, we can develop the web pages in subsequent sections.
Creating a Responsive SharePoint Site
SharePoint 2013 has been enriched with new technologies, including client-side APIs, using standards such as REST
and JSON, JavaScript, CSS, and HTML5. It also introduces the concepts of HTML master pages and HTML page
layouts.
In order to create a responsive SharePoint site we need to adhere to the following sequence of steps:
1. C reate an HTML prototype of the application.
2. Create an HTML master page using any design tool.
3. Build the SharePoint master page out of the HTML master page.
4. Make the master page responsive using any popular responsive framework.
5. Test and fix any problems.
Figure 9: Home page visual design
.NET PDF SDK | Read & Processing PDF files Simple to convert PDF files to raster images (color or Able to convert PDF documents into other formats extraction of text, hyperlinks, bookmarks and metadata;
how to bookmark a pdf file; bookmark template pdf
34
15
Let's assume that the HTML prototype of ABC Inc.'s Synapse site is already built using HTML, CSS, JavaScript, and
images. We will briefly discuss the process of transforming an HTML prototype to a SharePoint 2013 HTML master
page.
4.1. Building a SharePoint Master Page
Most companies prefer custom branding for their websites rather than using the default template. SharePoint 2013
allows designers to build custom master pages or a template with a uniform look for the whole site, with a header, a
footer, and other elements.
We recommend converting the HTML home page into a SharePoint master page using a common design tool such as
Adobe Dreamweaver. The Web Distributed Authoring and Versioning (WebDAV) protocol of SharePoint 2013 makes it
possible to use tools such as Microsoft Expression Web, Adobe Dreamweaver, and Microsoft Visual Studio, in addition
to Share Point Designer 2013, to connect to and manipulate site files. Using SharePoint Design Manager, designers
can also create and edit HTML master pages and deploy supporting images and other elements.
To convert an HTML page to a SharePoint master page, we need to first map the master page gallery to a local drive
and upload the entire prototype folder along with all associated files. Using the Designer Manager Interface, we can
convert the HTML home page to an HTML Master page. After fixing common warnings and performing a general
clean-up we can make style sheet adjustments and add code snippets which enable customization of the HTML
master page with SharePoint and ASP.NET controls and components. Out-of-the-box snippets such as Site Logo, Sign
In, Breadcrumb, Top Navigation, Vertical Navigation, and Search Box can easily be added to the master page at this
point.
Once the new master page meets the design standards and requirements, and all conversion errors are fixed, it can
be published and set as the default master page to be used by other site collections.
4.2. Making the Master Page Responsive
Now that the SharePoint Master page is ready, let us look at how we can make it responsive. In our example, ABC Inc.
expects its intranet site to be available through any device at any time. That means we have to capitalize on
responsive web design principles which will need a one-time branding effort but can then be adapted to any
viewport.
Let us now discuss how we can leverage a responsive framework in the following sections.
4.2.1.R esponsive Frameworks
Some pre-built and well-supported responsive frameworks that are helpful in working with SharePoint 2013 are:
Foundation
Foundation is a 12 column responsive grid framework with rapid prototyping capabilities and a flexible grid system
that can be nested further. This framework can be used to approach web design for smaller devices first and then
progressively upgrade those to bigger displays or vice versa.
34
16
Skeleton
The Skeleton framework consists of a small collection of CSS and JavaScript files, and comes with a responsive grid
layout and standard media queries for device-specific designs. Designs can be made for scaled down browser
windows, mobile phones and tablets in landscape and portrait views. Also designers can convert Adobe Photoshop
templates (.psd extension) to mock-up web pages.
Twitter Bootstrap
Bootstrap is one of the most popular responsive frameworks with a 12-grid responsive layout. It comes with 13
custom jQuery plug-ins such as carousels and modal windows which is useful during the UI design process.
Responsive SharePoint Codeplex Solution
The Codeplex solution is created as a collaborative effort of a group of contributors and works on both SharePoint
2013 and 2010 versions. It is built on the Twitter Bootstrap and Foundation frameworks and is compatible with
SharePoint 2013 Designer Manager, SharePoint Server 2013, SharePoint Foundation 2013, and the Office 365
platform.
From the performance aspect, it supports the Minimal Download Strategy (MDS) of SharePoint 2013. Since it uses the
Sandbox Windows SharePoint (WSP) solution-based approach, it can be used by site collection administrators/ site
owners as well.
SP BluePrint
SP BluePrint is a light-weight framework with a responsive master page template for customizing and branding a
SharePoint 2013 site collection. It has minified versions of SharePoint CSS files to address performance payloads of
core Share Point 2013 CSS files, JQuery Pattern Library (Navigation/Tabs/Slideshows) for Web Part Zones, and an out-
of-the-box master page for MySites.
In addition to CSS frameworks, we can also make use of JavaScript frameworks. jQuery and Modernizr are two
popular JavaScript frameworks used extensively by web developers to create responsive sites.
4.2.2.U nderstanding and Leveraging the Grid System
Today, using tables for layout design is considered an obsolete idea. There are rendering issues with designs using
HTML tables across different browsers, and challenges in scaling down for mobile devices as well. A grid-based
design system is a better approach.
To transform a fixed width HTML master page into a responsive one, the first thing to do is to identify a suitable
Responsive framework and include its files into our solution. Then we have to adapt the design of each container by
leveraging the grid system.
In a grid-based design system, the entire layout is divided into one or more containers. Each container can have one
or many rows and each row can again contain one or more columns. We can also include a container inside a column
— which means that that column can have its own set of rows and columns.
34
17
In our example, let us select Bootstrap as the primary CSS framework as it offers more features, documentation and
community support than other frameworks.
Bootstrap has a fixed-width grid system and each row container can hold up to 12 columns resulting in a total width
of 940 pixels. Each column's width is 60 pixels, amounting to 720 pixels, and there are 10 pixels of padding on either
side of each column, adding up to 11*20=220 pixels of padding, totaling up to 940 pixels.
Although the fixed container is 940 pixels wide, we can include Bootstrap responsive features to vary the grid width
in a range from 724 to 1170 pixels. For viewports less than 767 pixels wide, the columns stack vertically and become
fluid to fill up the entire width of the viewport.
Figure 9 shows the sample code and layout of a Bootstrap grid that has two rows, where the first row has one column
span of 12 column width, and the second row has two spans of 5 and 7 column width respectively.
In our example of ABC Inc site's master page, the grid layout can consist of the following (see Figure 10):
Header: This contains the company logo, search field, stock ticker, notification bell, welcome user, help, sitemap and
main navigation. It has one row with two columns of 8 span and 4 span width.
Main Content: This will vary based on the layout of the current page. For the home page, the layout can be one row
with three columns of 3, 6, and 3 span width. Each column can again be split into rows and columns.
Footer: This contains the quick links, important numbers, Terms of Use, privacy policy, and social media integration
points. The footer can have two rows with two columns of 6 span width each.
<div class=”container'>
<div class=”row”>
<div class=”span12”>
Row 1 – Column 1
</div>
</div>
<div class=”row”>
<div class=”span5”>
Row 2 – Column 1
</div>
<div class=”span7”>
Row 2 – Column 2
</div>
</div>
</div>
Figure 10: Sample code and basic grid layout
22
18
Figure 10: Grid layout for ABC Inc. home page
Once the layout is defined, the corresponding HTML and CSS code are to be developed.
4.2.3. Making it Responsive
To make the page responsive, the Viewport meta tag has to be set correctly. A viewport is the visible part of the
screen or monitor on which we view a site. In case of web browsers, the viewport is the visible portion of the entire
document. If the document is larger than the viewport, the user can shift the viewport around by scrolling. In the
case of mobile devices, the viewport is the screen width.
Using the new CSS3 meta tag 'viewport', we can set the rendered site width to the viewport's native width with the
'zoom at 100% initial-scale' to 1 as shown in the sample code below:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
The browser will adjust the site width to the viewport width of the device (on which the page is loaded) due to the
presence of the 'viewport' meta tag while the initial-scale option will enable the browser to proportionately zoom the
page to best display the web site for that device's screen size.
Bootstrap also includes targeted media queries, which support displays ranging from smaller smartphones to large
displays, even up-to more than 1200 pixels. Each media query has the ability to change the size of the columns to
resize the layout to more appropriate viewports, thereby making the page responsive.³
Once the Bootstrap framework and basic grid layout has been applied to the master page, there might be a few
layout issues, such as misplaced elements, menu items, images, and icons, which should be fixed.
3
For more details on how to convert a HTML page into a Responsive SharePoint Master page, read ’Pro SharePoint 2013 Branding and Responsive
Web Development’ by Eric Overfield, Rita Zhang, Oscar Medina, and Kanwal Khipple, published by Apress Publications.
32
19
4.3. Fixing Common Issues
A few common issues that arise after conversion of the master template are discussed below.
Rotating Images Transition Issue
Sometimes, for jQuery-based rotating images and banners, issues arise with the transition from one image/banner to
another if image height and width scale beyond the container space, leading to fit issues. The problem can be solved
by fixing the image dimensions to that of container height and width. Using the containing class of the slider, we can
specify a height for only images within our sliders.
Example code: .theme-nivo-abcInc .nivoSlider img { height: 100% ! important; }
Misplaced Elements
Some elements must be set at a fixed position on the screen. For instance, in our example, the Search Box and
Notification Bell controls are placed at the bottom right corner of the main banner area. However, during conversion
through Bootstrap, these elements can sometimes disappear from their positions. To avoid this, the container of the
element must be set to relative.
Example code: Header > .container-fluid { position: relative; }
Broken Viewport Layouts
Sometimes, merely using the Bootstrap framework does not always ensure that all elements of our website scale the
way we want. Custom media queries and device channels are useful in such cases. We can use viewport breakpoints
to scale particular elements and change their positioning, or use Device Channels to detect the end user's device at
run time and render the page that is optimal for the device. The viewport breakpoints must be set under 979 pixels
for tablets, under 767 pixels for small tablets, and under 479 pixels for smart phones.
The new SharePoint 2013 feature called 'device channel' helps map devices and browsers to the appropriate
templates, master pages, layout, and panels. Using the device channel feature, device inclusion rules can be defined
and added to user agent substrings for device-specific optimal rendering for the devices included in the rule.
4.4. Some Best Practices to Make a Responsive SharePoint site
A few best practices that should be followed to make a responsive SharePoint site are discussed here.
1. Create a base site prototype using a standard HTML editor and then use a responsive framework like Twitter
Bootstrap to convert the prototype into a responsive one.
2. Wherever possible, use the grid system to save time instead of creating your own grid systems.
3. Replace pixels with percentages in the layout design.
4. Scale images with max-width:100%. For sharper images, use the popular JavaScript file imgsizer.js.
5. Enable the Blob Cache in web.config file during SharePoint configuration for better image handling.
18
20
6. Use CSS3 and Media Queries extensively for styling output (to match the width of the display in the device and
then apply the styles to present the content in the available space).
7. Avoid table-based layout design and browser-based HTML, JavaScript, and font tags.
8. If required, use YepNope.js and Modernizr JavaScript library to detect HTML5 and CSS3 features in the user's
browser.
9. Create device channels based on matching User Agent.
10. Create a set of image renditions that each image will automatically follow.
Conclusion
Making a design responsive is relatively easy, less cumbersome, and more productive than developing code for every
device available. With RWD, we can create custom solutions for a diverse set of users on a wide range of devices.
With platforms such as SharePoint 2013 and new features such as device channels, responsive frameworks, and the
increasing adoption of jQuery and media queries, creating responsive websites has become much easier than before.
However, RWD techniques are not the final answer to the challenges presented by the dynamic mobile landscape.
While it is a concept, which, if implemented correctly, can improve the user experience significantly, it is not a
universal solution for all users, devices and platforms.
Only by keeping pace with the evolving technology and continuously researching new devices and screen
resolutions, can companies aspire to provide consistently rich user experiences.
Documents you may be interested
Documents you may be interested
