c# web api pdf : Bookmarks in pdf files control software system web page html asp.net console Best-Practices-for-Designing-Responsive-SharePoint-Site-0514-11-part710

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.
Bookmarks in pdf files - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
adding bookmarks to pdf document; add bookmark pdf file
Bookmarks in pdf files - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
create bookmarks pdf; edit pdf bookmarks
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
C# PDF File Split Library: Split, seperate PDF into multiple files
C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines. This is an C# example of splitting a PDF to two new PDF files.
pdf bookmark; excel hyperlink to pdf bookmark
VB.NET PDF File Split Library: Split, seperate PDF into multiple
VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines This is an VB.NET example of splitting a PDF to two new PDF files.
pdf bookmark editor; create pdf bookmarks
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
C# PDF File Compress Library: Compress reduce PDF size in C#.net
method, TIFF files compression and decompression method and Image files compression and size, images size reducing can help to reduce PDF file size Bookmarks.
how to create bookmarks in pdf file; bookmarks pdf documents
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
converter toolkit SDK, preserves all the original anchors, links, bookmarks and font How to Use C#.NET Demo Code to Convert PDF Document to HTML5 Files in C#
how to bookmark a pdf in reader; how to add bookmark in pdf
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 - Description of All PDF Processing Control Feastures
View,Convert,Edit,Process,Protect,SignPDF Files. in HTML5; Outstanding rendering of PDF documents; Full Outlines, bookmarks, & thumbnail display; Integrated text
creating bookmarks in pdf files; acrobat split pdf bookmark
.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
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.
XDoc.Excel for .NET, Comprehensive .NET Excel Imaging Features
navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Convert Excel to PDF; Convert Excel to HTML5; Combine and merge multiple Excel files; Append Excel
excel print to pdf with bookmarks; copy bookmarks from one pdf to another
XDoc.Word for .NET, Advanced .NET Word Processing Features
page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Convert Word to PDF; Convert Word to HTML5; combine, and append multiple Word files into one
export pdf bookmarks to excel; bookmarks pdf reader
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.
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
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.  
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.
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