Alliace ad Techology uit White Paper Best Practices for Desigig a Resposive SharePoit Site
About the Author Muktikata Sedha Muktikata Sedha is a Solutio Architect with more tha 13 years of experiece at Tata Cosultacy Services (TCS). He has developed solutios o a diverse set of techology platforms i the areas of fiacial services, isurace, maufacturig, ad retail. He has led TCS' Web 2.0 ad User Experiece Cetre of Excellece (CoE) ad is a Certified Usability Aalyst (CUA) from Huma Factors Iteratioal. Curretly, he is a Solutio Architect for the Microsoft SharePoit platform ad a User Experiece cosultat workig for the Alliace ad Techology uit of TCS.
Cosumers ow sped much more time o core digital media platforms (desktop computers, smartphoes ad tablets) tha they did just a few years ago. The scree resolutio across these devices rages from 320 pixels (iphoe) to 2560 pixels (large moitor) or eve higher. No loger are traditioal eterprise web applicatios accessed oly through desktops. The growig umbers of Ge Y users i the workplace are icreasigly demadig that these applicatios be available o mobile platforms, alog with corporate iteret ad itraet portal access. Web desigers face the difficult task of force-fittig their desigs ito a wide variety of devices ad scree resolutios. Withi this growig ad diversified user-ad-deviceecosystem, it is ofte a challege for desigers to create desigs caterig to differet types of users ad devices. Rather tha havig discoected desigs for each kid of delivery chael, is there a way to devise a sigle desig that provides a optimal viewig experiece, irrespective of the media o which it is delivered? Resposive Web Desig (RWD) is the aswer to this problem. With RWD, we ca create custom solutios for a wide rage of users o a equally wide rage of devices. May resposive frameworks have bee developed ad are i use. This paper shows how RWD ca solve the device-desig coudrum ad discusses the desig approach for creatig a itraet portal, usig the Microsoft SharePoit 2013 platform ad a popular resposive framework amed Bootstrap.
Abbreviatios Abbreviatio/ Acroym Expasio CoE Cetre of Excellece CUA Certified Usability Aalyst TCS Tata Cosultacy Services API Applicatio Programmig Iterface AWD Adaptive Web Desig CSS Cascadig Style Sheet DOM2HTML Documet Object Model Level 2 HTML HTML Hyper Text Markup Laguage JSON JavaScript Object Notatio RESS Resposive Desig with Server side compoets REST Represetatioal State Trasfer RWD Resposive Web Desig UCD User Cetered Desig UX User Experiece XHTML Extesible Hyper Text Markup Laguage XML Extesible Markup Laguage
Cotets INTRODUCTION 1.1. Possible Solutios for Multi-chael Web Desig RESPONSIVE WEB DESIGN 6 7 7 2.1. Core Igrediets of RWD 8 2.2. Tools for RWD 9 DESIGNING A RESPONSIVE WEB SITE 9 3.1. The Busiess Case 10 3.2. The Desig Approach 10 CREATING A RESPONSIVE SHAREPOINT SITE 14 4.1. Buildig a SharePoit Master Page 15 4.2. Makig the Master Page Resposive 15 4.2.1. Resposive Frameworks 15 4.2.2. Uderstadig ad Leveragig the Grid System 16 4.2.3. Makig it Resposive 18 4.3. Fixig Commo Issues 19 4.4. Some Best Practices to Make a Resposive SharePoit site 19 CONCLUSION 20
Itroductio Statistics o iteret usage patters reveal a very iterestig pheomeo more tha 50 percet of smartphoe users throughout the world use the iteret through their mobile devices to get relevat iformatio quickly, especially whe they are away from their computers1. Aroud 40 percet of users browse the iteret while travellig. Ay busiess providig services through iteret-based chaels should ot miss out o this growig user base ad should avail of all possible delivery chaels to provide iformatio ad services to its customers.statistics provided by comscore's Media Metrix show that i April 2013, a multiplatform majority was achieved across the US digital populatio. By Jue 2013, 49 percet of digital cosumers were egaged o desktop computers ad 51 percet o either tablets or smartphoes (Figure 1). Accordig to comscore: The percetage of users accessig digital media oly from a PC is decreasig. While the desktop computer is ot goig away aytime soo, treds like these clearly illustrate that marketers ad publishers must begi to put the multi-platform cosumer first ad chage their orietatio from the PC-cetric cosumer view that has domiated their digital strategy for the better part of two decades. 100% 90% 80% 70% 48% 49% 52% 52% 54% 54% 6% 6% 6% 6% 42% 40% 40% Ju 2013 Jul 2013 60% 50% 6% 6% 40% 30% 20% 46% 45% 42% Feb 2013 Mar 2013 Apr 2013 10% 0% Multi-Platform May 2013 Mobile Oly Desktop Oly Figure1 : U.S. Multi-Platform Audiece by Segmet Source: comscore Media Metrix Multi-Platform U.S. (Feb July 2013) 12% Desktop Oly 49% Smartphoe Tablet 39% Figure 2: Share of the U.S. Time Spet o Digital Media by Platform Mobile media usage ow accouts for half of Source: comscore Media Metrix Multi-Platform Total Desktop (Jue 2013) all time spet o digital media ad is a revelatio of how quickly the habits of cosumers ca evolve. Mobile is ow a sigificat elemet i all relevat digital media markets, icludig cotet search, video streamig, olie advertisig, commerce ad day-to-day operatios. 1 comscore, Marketig to the Multi-Platform Majority, October 17, 2013, accessed Jauary 20, 2014, http://www.comscore.com/isights/blog/marketig_to_the_multiplatform_majority 6
Curret Challeges i Web ad UX Desig As Ge Y eters the workforce ad the eed for remote coectivity grows, orgaizatios are deployig their web applicatios ad itraet ad iteret portals o mobile chaels. Hece, desigers ca o loger assume that their sites will be viewed oly o a desktop moitor with a average scree resolutio. However, give the iumerable umber of devices, players, operatig systems, scree dimesios, ad cotexts to desig for, User Experiece (UX) desigers face the challegig task of deliverig a optimal viewig experiece across these devices. 1.1.Possible Solutios for Multi-chael Web Desig To address this challege, there are two recommeded strategies for UX desigers: Resposive Web Desig (RWD) Adaptive Web Desig (AWD or mobile websites) Resposive Web Desig (RWD) is a approach i which a site is desiged to provide a optimal viewig experiece across a wide rage of devices, from desktop computer moitors to mobile phoes. RWD has bee widely adopted by orgaizatios across the globe, but it is ot the oly solutio for desigig websites that must work across various media. Adaptive Web Desig (AWD), for istace, is a approach for device-specific desig. I other words, it comprises specific desigs suited for specific media, such as mobile devices, desktops, laptops ad so o. The choice to adopt RWD or AWD will deped o the busiess situatio. This paper provides iformatio o how to create ad make a itraet site work for all chaels by employig the RWD techique; specifically, usig Microsoft SharePoit 2013 as the developmet ad deploymet platform. Resposive Web Desig The Resposive Web Desig (RWD) approach is adopted to provide a optimal viewig experiece, which icludes easy readig ad avigatio with miimum resizig, paig, or scrollig. I other words, it is a approach that eables desig ad developmet to respod to the user's behavior ad eviromet, based o scree size, platform, ad orietatio. Figure 3 shows how the same website appears o differet devices ad scree resolutios. 7
Figure 3: Resposive display (the same site across differet screes) RWD comprises flexible grids, layouts ad images, ad makes itelliget use of Cascadig Style Sheet (CSS) media queries to adjust scree resolutio ad automatically resize images. The itetio is to build a site that is resolutioad device-idepedet. 2.1.Core Igrediets of RWD The resposiveess of a desig is govered by the followig three fudametal factors: Fluid Grid, Flexible Media ad Media Queries. Fluid Grid Grid systems are used by desigers to alig ad orgaize elemets i a visually pleasig maer o a page layout. The grid system uses a combiatio of margis, rows ad colums. While early desigs had pixel-based layouts usig fixed grids with the 960 pixel system, later layouts were desiged to be more adaptive by usig differet pixel sizes for differet scree sizes. The curret practice is to create percetage-based desigs which are kow as fluid desigs. Flexible Media Typically, whe addig a media file to a web page, its width ad height are set usig absolute measuremets (usually i pixels). However, this fixes the image size, makig it completely iflexible ad either too small or too 8
large for differet resolutios. To solve this challege, flexible media image, video, ad audio files that ca grow ad shrik to fit withi a flexible grid colum are used. The typical code for makig media flexible is as follows: img, embed, object, video { max-width: 100% } Media Queries Media queries, a feature added i CSS3, modifies the presetatio of cotet to suit a specific rage of output devices without eedig to chage the cotet itself. Oe ca make a existig website both mobile ad tablet compliat with very little chage. 2.2.Tools for RWD The mai tools for RWD are HTML5, CSS3, ad JavaScript, ad jquery. HTML5 is the most recet versio of Hyper Text Markup Laguage (HTML), with features that provide device idepedece ad better error hadlig, ad reduce the eed for exteral plug-is (such as Flash). HTML5 icludes the features of HTML4, XHTML1, ad DOM2HTML. It is a developmet framework with CSS3 ad JavaScript, alog with a umber of ew elemets, attributes, 2D ad 3D graphics, video, audio elemets, local storage, ad local SQL database support. CSS3 is the latest versio of the Cascadig Style Sheet (CSS) stadard ad is completely backwards-compatible with earlier versios. New CSS3 features such as orietatio (portrait versus ladscape), device-width, mi-devicewidth, border-radius, opacity, box-shadow, ad text-shadow, help create beautiful web pages which improve the user experiece. JavaScript ad jquery: A JavaScript amed css3-mediaqueries.js ca help i cases where browser versios ad devices do ot support CSS3 media queries. This pre-built JavaScript library allows older browsers (IE 5+, Firefox 1+, Safari 2) to support CSS3 media queries. A copy of the file ca be dowloaded from http://code.google.com/p/css3mediaqueries-js/. Desigig a Resposive Website I this sectio we outlie the process of desigig a orgaizatio's itraet site usig the SharePoit 2013 Web Cotet Maagemet (WCM) platform. However, the process is ot limited to itraet sites aloe, ad ca be used to desig exteral websites ad extraet sites as well. We will describe this process by applyig a user-cetered desig method for a fictitious compay called ABC Ic. usig a specific busiess case. For easy referece, we will ame the applicatio 'Syapse'. 9
3.1. The Busiess Case ABC Ic. requires a ew itraet site o the SharePoit 2013 platform. The existig itraet has may problems ad employees are ot usig it to the fullest extet possible. The ew itraet desig should eable users to: Kow who the 'go to' experts are i the busiess Keep up with the latest updates withi the orgaizatio Share iformatio about best practices with fellow employees Esure that essetial documets are updated Access importat policies while o the road (for employees i the field) Act o pedig requests roud the clock Access the site through ay device 3.2.The Desig Approach May techiques have bee developed over the years to desig a website. Our preferred method is the User Cetered Desig (UCD) methodology which focuses o creatig a user experiece based o user iput rather tha forcig a chage i user behavior whe usig the product. The UCD methodology icorporates user cocers ad advocacy right from the begiig of the desig process, ad esures that the eeds of the users are foremost i ay desig decisio, so that the site becomes relevat ad valuable to them. The User Cetered Desig approach (see Figure 4) is described below: Figure 4: Key User Cetered Desig activities 10
Desig Strategy: To create a user-cetric web site, we must draw o the orgaizatio's visio, goals, ad objectives to create a desig strategy. For exteral websites, busiess goals (such as icreasig reveue, cotaiig costs, ad icreasig market share) ad critical success factors (such as coversio rates, satisfactio, ad bradig strategy) also play a importat role i defiig the overall desig strategy. Similarly for iteral websites, busiess goals (such as icreasig productivity or employee satisfactio) ad critical success factors (such as eablig seamless iteral collaboratio, speed, ad accuracy) play a importat role. To achieve these goals, we should ask the users of the website about their goals ad tasks, curret challeges they face, ad their expectatios ad eeds. I additio, the busiess stakeholders' views o the iteded future state of the applicatio, as well as the worst-case ad best-case scearios, should be take ito accout. Usability Assessmet: I the case of existig applicatios, we should udertake a usability assessmet process wherei we aalyze user requiremets ad try to idetify the gaps betwee the ew requiremets ad the existig fuctioalities. If required, usability testig techiques should also employed o a case-to-case basis. User Segmetatio ad Persoa Developmet: Here, we should focus o uderstadig who the actual users are, their characteristics ad iterests, their work eviromet ad task profiles, experiece level, cultural variace, ad so o. This iformatio is the used to develop user-specific persoas, such as the three described i Figure 5. Task Flow Aalysis: This activity focuses o determiig the key user tasks ad scearios based o the type of users. Differet methods such as card sortig ad primary ou architecture are employed to idetify the taxoomy ad labels of the system. Name Age Locatio Maager Employee Admiistrator Michael Smith Shao Huffma James Cartel 32 29 26 USA USA USA Persoality Michael is very straightforward. Shao is friedly, talkative, He thiks clearly, loves playig ad likes havig coffee at her with umbers, ad does ot talk desk. much. James stays up-to-date with techology ad gadgets, ad has the latest phoe. He is very talkative ad likes to dress casually. Work Habits Michael prefers to work o his Shao prefers to work o laptop/desktop ad likes to play her desktop ad likes tools aroud umbers. that perform fast ad provide iformatio as quickly as possible James kows the IT systems of his compay i ad out. He likes codig ad is quick to fid a solutio to a problem. Figure 5: Examples of user persoas 11
Iformatio Architecture (IA) ad Iteractio Desig: This is the process of logically groupig cotet i a purposeful ad service-orieted way, so that the cotet is ituitive ad easily accessible. Meu structure ad page templates ca be used for this purpose. Iformatio Architecture eables all the idividual task flows i the user iterface. It helps you orgaize all the tasks ad iformatio ito groups ad levels, icreases efficiecy by facilitatig the locatio of items, ad helps you preset cotet i a easy-to-uderstad fashio. Iformatio Architecture ad Iteractio Desig help i assigig avigatioal schemes at each level. This becomes a vital iput for the visualizatio of the system through site structures, wireframes, ad visual desigs. The wireframes depict the placemet of user iterface elemets o a page. The site structure defies how the users arrive at a page ad where they will go after completig the task. Oce the Iformatio Architecture is froze, the ext step is to desig the sitemaps ad the global avigatio system. Global avigatio provides users with the ability to avigate to the most importat areas with ease. I our 2 example of ABC Ic., we have desiged the avigatio based o the followig four focal poits of usability ad three goverig priciples (see Figure 6). Focal Poits: Navigatio Ca users easily fid desired iformatio or fuctioality? Cotet Do users get what they wat? Presetatio Ca users easily uderstad the cotet? Iteractio Ca the users act o the iterface ituitively? Usability Priciples: Allow users to ituitively avigate from oe web page to aother. Make it easy for users to uderstad how meu items are related to each other. Esure that the avigatio elemets help users lad o the pages they actually iteded to lad o ad uderstad the relatioship betwee the meu items ad the pages. Figure 6: Global avigatio desig for the ABC Ic. website 2 Huma Factors Iteratioal, The Busiess of UX Metrics: How to measure ad maage the user experiece (July 30, 2007), accessed April 15, 2014, http://www.humafactors.com/dowloads/documets/busiess-of-ux-metrics.pdf 12
Wireframe ad Visual Desig: This activity focuses o the visual represetatio of the Iformatio Architecture ad Iteractio Desig patters. It illustrates key features, cotet, ad typical avigatio i a visual format. A wireframe is the basic skeleto of visual represetatio ad is used by developers ad project maagers to validate requiremets with the ed-users. Usually, it is easier to icorporate chages durig the wireframe stage, after which visual mock-ups are created to showcase the look ad feel of the site. Usig the iformatio that we have gathered so far, we ca ow proceed with the wireframe creatio for ABC Ic. Let us take a look at the overall site template that will be used for the base SharePoit 2013 master page. This icludes global site elemets such as header, global avigatio bar, mai cotet area, ad footer. Figure 7 depicts a core page structure ad Figure 8 shows a home page wireframe. Figure 7: Core page structure Figure 8: Home page wireframe Oce the wireframe is reviewed ad siged off by ed users ad busiess stakeholders, the ext step is to create visual mock-ups, keepig i mid the orgaizatio's bradig ad style guides for the look ad feel of the web pages. Figure 9 shows the visual desig for ABC Ic.'s home page. 13
Figure 9: Home page visual desig Now that the visual desig is i place, we ca develop the web pages i subsequet sectios. Creatig a Resposive SharePoit Site SharePoit 2013 has bee eriched with ew techologies, icludig cliet-side APIs, usig stadards such as REST ad JSON, JavaScript, CSS, ad HTML5. It also itroduces the cocepts of HTML master pages ad HTML page layouts. I order to create a resposive SharePoit site we eed to adhere to the followig sequece of steps: 1. Create a HTML prototype of the applicatio. 2. Create a HTML master page usig ay desig tool. 3. Build the SharePoit master page out of the HTML master page. 4. Make the master page resposive usig ay popular resposive framework. 5. Test ad fix ay problems. 14
Let's assume that the HTML prototype of ABC Ic.'s Syapse site is already built usig HTML, CSS, JavaScript, ad images. We will briefly discuss the process of trasformig a HTML prototype to a SharePoit 2013 HTML master page. 4.1.Buildig a SharePoit Master Page Most compaies prefer custom bradig for their websites rather tha usig the default template. SharePoit 2013 allows desigers to build custom master pages or a template with a uiform look for the whole site, with a header, a footer, ad other elemets. We recommed covertig the HTML home page ito a SharePoit master page usig a commo desig tool such as Adobe Dreamweaver. The Web Distributed Authorig ad Versioig (WebDAV) protocol of SharePoit 2013 makes it possible to use tools such as Microsoft Expressio Web, Adobe Dreamweaver, ad Microsoft Visual Studio, i additio to Share Poit Desiger 2013, to coect to ad maipulate site files. Usig SharePoit Desig Maager, desigers ca also create ad edit HTML master pages ad deploy supportig images ad other elemets. To covert a HTML page to a SharePoit master page, we eed to first map the master page gallery to a local drive ad upload the etire prototype folder alog with all associated files. Usig the Desiger Maager Iterface, we ca covert the HTML home page to a HTML Master page. After fixig commo warigs ad performig a geeral clea-up we ca make style sheet adjustmets ad add code sippets which eable customizatio of the HTML master page with SharePoit ad ASP.NET cotrols ad compoets. Out-of-the-box sippets such as Site Logo, Sig I, Breadcrumb, Top Navigatio, Vertical Navigatio, ad Search Box ca easily be added to the master page at this poit. Oce the ew master page meets the desig stadards ad requiremets, ad all coversio errors are fixed, it ca be published ad set as the default master page to be used by other site collectios. 4.2.Makig the Master Page Resposive Now that the SharePoit Master page is ready, let us look at how we ca make it resposive. I our example, ABC Ic. expects its itraet site to be available through ay device at ay time. That meas we have to capitalize o resposive web desig priciples which will eed a oe-time bradig effort but ca the be adapted to ay viewport. Let us ow discuss how we ca leverage a resposive framework i the followig sectios. 4.2.1.Resposive Frameworks Some pre-built ad well-supported resposive frameworks that are helpful i workig with SharePoit 2013 are: Foudatio Foudatio is a 12 colum resposive grid framework with rapid prototypig capabilities ad a flexible grid system that ca be ested further. This framework ca be used to approach web desig for smaller devices first ad the progressively upgrade those to bigger displays or vice versa. 15
Skeleto The Skeleto framework cosists of a small collectio of CSS ad JavaScript files, ad comes with a resposive grid layout ad stadard media queries for device-specific desigs. Desigs ca be made for scaled dow browser widows, mobile phoes ad tablets i ladscape ad portrait views. Also desigers ca covert Adobe Photoshop templates (.psd extesio) to mock-up web pages. Twitter Bootstrap Bootstrap is oe of the most popular resposive frameworks with a 12-grid resposive layout. It comes with 13 custom jquery plug-is such as carousels ad modal widows which is useful durig the UI desig process. Resposive SharePoit Codeplex Solutio The Codeplex solutio is created as a collaborative effort of a group of cotributors ad works o both SharePoit 2013 ad 2010 versios. It is built o the Twitter Bootstrap ad Foudatio frameworks ad is compatible with SharePoit 2013 Desiger Maager, SharePoit Server 2013, SharePoit Foudatio 2013, ad the Office 365 platform. From the performace aspect, it supports the Miimal Dowload Strategy (MDS) of SharePoit 2013. Sice it uses the Sadbox Widows SharePoit (WSP) solutio-based approach, it ca be used by site collectio admiistrators/ site owers as well. SP BluePrit SP BluePrit is a light-weight framework with a resposive master page template for customizig ad bradig a SharePoit 2013 site collectio. It has miified versios of SharePoit CSS files to address performace payloads of core Share Poit 2013 CSS files, JQuery Patter Library (Navigatio/Tabs/Slideshows) for Web Part Zoes, ad a outof-the-box master page for MySites. I additio to CSS frameworks, we ca also make use of JavaScript frameworks. jquery ad Moderizr are two popular JavaScript frameworks used extesively by web developers to create resposive sites. 4.2.2.Uderstadig ad Leveragig the Grid System Today, usig tables for layout desig is cosidered a obsolete idea. There are rederig issues with desigs usig HTML tables across differet browsers, ad challeges i scalig dow for mobile devices as well. A grid-based desig system is a better approach. To trasform a fixed width HTML master page ito a resposive oe, the first thig to do is to idetify a suitable Resposive framework ad iclude its files ito our solutio. The we have to adapt the desig of each cotaier by leveragig the grid system. I a grid-based desig system, the etire layout is divided ito oe or more cotaiers. Each cotaier ca have oe or may rows ad each row ca agai cotai oe or more colums. We ca also iclude a cotaier iside a colum which meas that that colum ca have its ow set of rows ad colums. 16
I our example, let us select Bootstrap as the primary CSS framework as it offers more features, documetatio ad commuity support tha other frameworks. Bootstrap has a fixed-width grid system ad each row cotaier ca hold up to 12 colums resultig i a total width of 940 pixels. Each colum's width is 60 pixels, amoutig to 720 pixels, ad there are 10 pixels of paddig o either side of each colum, addig up to 11*20=220 pixels of paddig, totalig up to 940 pixels. Although the fixed cotaier is 940 pixels wide, we ca iclude Bootstrap resposive features to vary the grid width i a rage from 724 to 1170 pixels. For viewports less tha 767 pixels wide, the colums stack vertically ad become fluid to fill up the etire width of the viewport. Figure 9 shows the sample code ad layout of a Bootstrap grid that has two rows, where the first row has oe colum spa of 12 colum width, ad the secod row has two spas of 5 ad 7 colum width respectively. <div class= cotaier'> <div class= row > <div class= spa12 > Row 1 Colum 1 </div> </div> <div class= row > <div class= spa5 > Row 2 Colum 1 </div> <div class= spa7 > Row 2 Colum 2 </div> </div> </div> Figure 10: Sample code ad basic grid layout I our example of ABC Ic site's master page, the grid layout ca cosist of the followig (see Figure 10): Header: This cotais the compay logo, search field, stock ticker, otificatio bell, welcome user, help, sitemap ad mai avigatio. It has oe row with two colums of 8 spa ad 4 spa width. Mai Cotet: This will vary based o the layout of the curret page. For the home page, the layout ca be oe row with three colums of 3, 6, ad 3 spa width. Each colum ca agai be split ito rows ad colums. Footer: This cotais the quick liks, importat umbers, Terms of Use, privacy policy, ad social media itegratio poits. The footer ca have two rows with two colums of 6 spa width each. 17
Figure 10: Grid layout for ABC Ic. home page Oce the layout is defied, the correspodig HTML ad CSS code are to be developed. 4.2.3. Makig it Resposive To make the page resposive, the Viewport meta tag has to be set correctly. A viewport is the visible part of the scree or moitor o which we view a site. I case of web browsers, the viewport is the visible portio of the etire documet. If the documet is larger tha the viewport, the user ca shift the viewport aroud by scrollig. I the case of mobile devices, the viewport is the scree width. Usig the ew CSS3 meta tag 'viewport', we ca set the redered site width to the viewport's ative width with the 'zoom at 100% iitial-scale' to 1 as show i the sample code below: <meta ame= viewport cotet= width=device-width, iitial-scale=1.0 /> The browser will adjust the site width to the viewport width of the device (o which the page is loaded) due to the presece of the 'viewport' meta tag while the iitial-scale optio will eable the browser to proportioately zoom the page to best display the web site for that device's scree size. Bootstrap also icludes targeted media queries, which support displays ragig from smaller smartphoes to large displays, eve up-to more tha 1200 pixels. Each media query has the ability to chage the size of the colums to resize the layout to more appropriate viewports, thereby makig the page resposive.³ Oce the Bootstrap framework ad basic grid layout has bee applied to the master page, there might be a few layout issues, such as misplaced elemets, meu items, images, ad icos, which should be fixed. 3 For more details o how to covert a HTML page ito a Resposive SharePoit Master page, read Pro SharePoit 2013 Bradig ad Resposive Web Developmet by Eric Overfield, Rita Zhag, Oscar Media, ad Kawal Khipple, published by Apress Publicatios. 18
4.3. Fixig Commo Issues A few commo issues that arise after coversio of the master template are discussed below. Rotatig Images Trasitio Issue Sometimes, for jquery-based rotatig images ad baers, issues arise with the trasitio from oe image/baer to aother if image height ad width scale beyod the cotaier space, leadig to fit issues. The problem ca be solved by fixig the image dimesios to that of cotaier height ad width. Usig the cotaiig class of the slider, we ca specify a height for oly images withi our sliders. Example code:.theme-ivo-abcic.ivoslider img { height: 100%! importat; } Misplaced Elemets Some elemets must be set at a fixed positio o the scree. For istace, i our example, the Search Box ad Notificatio Bell cotrols are placed at the bottom right corer of the mai baer area. However, durig coversio through Bootstrap, these elemets ca sometimes disappear from their positios. To avoid this, the cotaier of the elemet must be set to relative. Example code: Header >.cotaier-fluid { positio: relative; } Broke Viewport Layouts Sometimes, merely usig the Bootstrap framework does ot always esure that all elemets of our website scale the way we wat. Custom media queries ad device chaels are useful i such cases. We ca use viewport breakpoits to scale particular elemets ad chage their positioig, or use Device Chaels to detect the ed user's device at ru time ad reder the page that is optimal for the device. The viewport breakpoits must be set uder 979 pixels for tablets, uder 767 pixels for small tablets, ad uder 479 pixels for smart phoes. The ew SharePoit 2013 feature called 'device chael' helps map devices ad browsers to the appropriate templates, master pages, layout, ad paels. Usig the device chael feature, device iclusio rules ca be defied ad added to user aget substrigs for device-specific optimal rederig for the devices icluded i the rule. 4.4.Some Best Practices to Make a Resposive SharePoit site A few best practices that should be followed to make a resposive SharePoit site are discussed here. 1. Create a base site prototype usig a stadard HTML editor ad the use a resposive framework like Twitter Bootstrap to covert the prototype ito a resposive oe. 2. Wherever possible, use the grid system to save time istead of creatig your ow grid systems. 3. Replace pixels with percetages i the layout desig. 4. Scale images with max-width:100%. For sharper images, use the popular JavaScript file imgsizer.js. 5. Eable the Blob Cache i web.cofig file durig SharePoit cofiguratio for better image hadlig. 19
6. Use CSS3 ad Media Queries extesively for stylig output (to match the width of the display i the device ad the apply the styles to preset the cotet i the available space). 7. Avoid table-based layout desig ad browser-based HTML, JavaScript, ad fot tags. 8. If required, use YepNope.js ad Moderizr JavaScript library to detect HTML5 ad CSS3 features i the user's browser. 9. Create device chaels based o matchig User Aget. 10. Create a set of image reditios that each image will automatically follow. Coclusio Makig a desig resposive is relatively easy, less cumbersome, ad more productive tha developig code for every device available. With RWD, we ca create custom solutios for a diverse set of users o a wide rage of devices. With platforms such as SharePoit 2013 ad ew features such as device chaels, resposive frameworks, ad the icreasig adoptio of jquery ad media queries, creatig resposive websites has become much easier tha before. However, RWD techiques are ot the fial aswer to the challeges preseted by the dyamic mobile ladscape. While it is a cocept, which, if implemeted correctly, ca improve the user experiece sigificatly, it is ot a uiversal solutio for all users, devices ad platforms. Oly by keepig pace with the evolvig techology ad cotiuously researchig ew devices ad scree resolutios, ca compaies aspire to provide cosistetly rich user experieces. 20
Cotact To kow more about us, cotact atu.marketig@tcs.com Subscribe to TCS White Papers TCS.com RSS: http://www.tcs.com/rss_feeds/pages/feed.aspx?f=w Feedburer: http://feeds2.feedburer.com/tcswhitepapers About Tata Cosultacy Services (TCS) Tata Cosultacy Services is a IT services, cosultig ad busiess solutios orgaizatio that delivers real results to global busiess, esurig a level of certaity o other firm ca match. TCS offers a cosultig-led, itegrated portfolio of IT ad IT-eabled ifrastructure, egieerig ad assurace services. This is delivered through its uique Global Network Delivery ModelTM, recogized as the bechmark of excellece i software developmet. A part of the Tata Group, Idia s largest idustrial coglomerate, TCS has a global footprit ad is listed o the Natioal Stock Exchage ad Bombay Stock Exchage i Idia. IT Services Busiess Solutios Cosultig All cotet / iformatio preset here is the exclusive property of Tata Cosultacy Services Limited (TCS). The cotet / iformatio cotaied here is correct at the time of publishig. No material from here may be copied, modified, reproduced, republished, uploaded, trasmitted, posted or distributed i ay form without prior writte permissio from TCS. Uauthorized use of the cotet / iformatio appearig here may violate copyright, trademark ad other applicable laws, ad could result i crimial or civil pealties. Copyright 2014 Tata Cosultacy Services Limited TCS Desig Services I M I 05 I 14 For more iformatio, visit us at www.tcs.com