Transcription
Client Name:Evaluation ExamplePROJECT EVALUATIONCLIENT: Name Inc.PROJECT: Website EvaluationJOB N0: AAA 14060A website evaluation is a valuable document that helps companiesunderstand the current status of their website and more importantly,the critical steps necessary to improve it. Once you have performeda website evaluation, you will have professional recommendationson how to organize your content, integrate marketing strategies andimplement appropriate technologies. The website evaluation willalso detail the specific steps needed to technically incorporate theserecommendations.
BenefitsELPMAXWe believe performing a website evaluation beforebeginning the building process, eliminates risk for bothparties and provides a detailed plan of what can beexpected once the building process is initiated.ResearchERecommendationsCONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCScopeEstimate TimelineDate Client Name2
ResearchPerformanceELPMAXThe first step is the research or discovery phase. In thisphase we dive deep into your existing site in an effort tounderstand your company and content as well as possible.This also helps us gain a helpful perspective of what youdo.EUsabilityCONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCSubstance FormStrategy PromotionDate Client Name3
ResearchPerformanceThe first criteria for evaluating your website has to do with the performance, orfunctionality of your website. We perform speed tests and load time. We alsocheck the code and information architecture. We want to see if your data isstreamlined for maximum efficiency and future growth.ELPHTMLþþSpecify a character setSpecifying a character set in the HTTP response headers of yourHTML documents allows the browser to begin parsing HTMLand executing scripts immediately.MAX meta http-equiv “content-type” content “text/html;charset utf-8” E Minify HTMLCompress your HTML file to remove comments, whitespacebetween tags, and unnecessary closing tags (such as /li ) toreduce the overall HTML file size and speed up the parsing andexecution of a webpage. Enable gzip compressionCompress HTML files with gzip to reduce asset count and filesize.þþPre-fetch assetsPre-fetching means fetching and downloading assets beforethey’re requested by the user. head link rel “prefetch” href “signup.html” /head CSSþþCombine CSS FilesCombine, or “concatenate,” CSS files together to decrease thenumber of requests and round trips the browser has to make,which subsequently decreases the page load time. link type “text/css” rel “stylesheet” href “all.css” Minify CSSCompress, or “minify,” CSS files for best practices such asremoving all whitespace and semicolons for the las property ofCONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCa CSS declaration, which reduces overall file size and decreasespage load times.þþPut CSS in the head Moving inline style blocks and link elements from thedocument body to the document head improves renderingperformance. head link type “text/css” rel “stylesheet” href “all.css” /head Load CSS before JavaScriptLoad external CSS files first, before external and inlineJavaScript in the head . JavaScript files are generally largerthan CSS files, which delays browser execution and thedownload of other assets. link type “text/css” rel “stylesheet” href “style.css” script type “text/javascript” src “track.js” /script þþRemove unused CSSRemoving or deferring style rules that are not used by adocument avoid downloads unnecessary bytes and allow thebrowser to start rendering sooner.þþUse efficient CSS selectorsAvoid using a universal key selector (*) and the use ofdescendant selectors. Use class and ID selectors over tagselectors and remove redundant qualifiers. Always be as specificwith your CSS as possible. Enable gzip compressionCompress CSS files with gzip to reduce asset count and file size.þþAvoid CSS @importUsing CSS @import in an external stylesheet can add additionaldelays during the loading of a web page.þþAvoid CSS expressionsCSS expressions slows down browser execution. Use standardCSS properties or JavaScript to improve rendering for IE users.Date Client Name4
ResearchJavaScriptþþCombine JavaScript FilesJust like CSS, combine or “concatenate” JavaScript filestogether to decrease the number of requests and round trips thebrowser has to make, which subsequently decreases the pageload time. script type “text/javascript” src “combined.js” /script Minify JavaScriptCompress, or “minify,” your JavaScript files to eliminateunnecessary line breaks, extra spaces, and indentation, whichreduces the overall size of the JavaScript files and increase pageload time. Optimize ImagesPhotoshop’s Save for Web tool isn’t perfect. Further optimizationcan reduce images up to 70%.þþSpecify image dimensionsSpecify image dimensions in the HTML or CSS. This preventsany reflows the browser has to make by determining imagedimensions on the fly. img src “myimage.jpg” height “225” width “150” ELPþþLoad 3rd-party Assets AsynchronouslyLoad 3rd-party assets asynchronously so they do not blockimportant resources from loading. These assets are typicallysocial share widgets (Facebook, Twitter, etc.) and analyticstracking (Google Analytics, etc.)MAXEThis technique also allows for faster parallelization of assetdownloads.þþLoad JavaScript after CSSLoad your external and inline JavaScript files after CSS in the head . JavaScript files are generally larger than CSS files,which delays browser execution and the download of otherassets. link type “text/css” rel “stylesheet” href “style.css” script type “text/javascript” src “track.js” /script þþServe scaled imagesWhen precise dimensions are known, resize and save an imageto those exact dimensions to decrease file size. Also, use scaledimages for responsive web design to serve the smallest filespossible.þþUse optimized SVG imagesSVGs are XML files, making it possible to reduce their sizewithout altering their quality.þþUse Icon fontsAn icon font allows you to load all every vector graphics in asingle file. It’s like a sprite for SVGs.URLsþþDefer JavaScript loadingDefer loading JavaScript not executed onload to reduce theinitial download size, allow other resources to be downloaded inparallel, and speed up execution and rendering time.þþAvoid bad requestsRemove any broken links, missing images, or other assetrequests that result in 404 errors. Failing to do so creates a(higher) number of requests for non-existent assets that slowsdown the loading of the page.þþDefer Javascript parsingDefer the parsing of JavaScript until it absolutely needs to beexecuted, which will improve the browser execution and pageload time.þþUse domain sharing for parallel processingServe resources from two different hostnames to increaseparallel processing, which facilitates more simultaneousdownloads than the browser would previously allow. Enable gzip compressionCompress CSS files with gzip to reduce asset count and file size. img src “hostname1.example.com” img src “hostname2.example.com” þþAvoid document.writeUsing document.write() to fetch external resources, especiallyearly in the document, can significantly increase the time it takesto display a web page.þþMinimize redirectsMinimizing HTTP redirects from one URL to another cuts outadditional RTTs and wait time for users.ImagesþþServe assets from a single URLServe all assets and files from a single URL to eliminate any extraoverhead with duplicated downloads and extra round trips by thebrowser. Combine images using CSS spritesUse CSS sprites to combine many image files into one. Thisreduces the number of image requests and overall page size.þþServe static content form a cookie-less domainServe static resources from a cookie-less domain to reduce thetotal size of requests made for a page.document.write(‘ script src “second.js” \/script ’);CONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCDate Client Name5
ResearchþþMinimize DNS lookupsReducing the number of unique hostnames from which resourcesare served cuts down on the number of DNS resolutions that thebrowser has to make, and therefore, RTT delays.CachingþþUse a Content Delivery Network (CDN)Leverage a CDN to cache static assets in data centers aroundthe world and deliver a website faster.þþUse browser cachingSet an expiry date or a maximum age in the HTTP headersfor static resources to direct the browser to load previouslydownloaded resources from the local disk rather than over thenetwork.þþMake redirects cacheableCache redirects by a user’s browser when possible to decreasepage load times for repeat visitors.þþUse proxy cachingEnable public caching in the HTTP headers for static assets toallow the browser to download resources from a nearby proxyserver rather than from a remote origin server.ELPPerformance SummaryMAXEOverall, performance is good. There are minor changes required for optimization and w3ccompliance. Correctly optimizing images, enabling compression and minifying code willimprove performance. Serious issues involve lack of mobile optimization and maintainingduplicate code. A content management system would be helpful.Score: 75% (28/37)CONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCDate Client Name6
ResearchUsabilityUsability deals largely with user experience (UX) design. UX design can beconsidered the point where form and function meet.HomepageELP First impressionThe homepage creates a positive first impression and supportsconversion. Clear call for actionUsers know what to do next and why it benefits them. Theyunderstand the value proposition and purpose of the site.MAXEþþLoginLogged in user’s name is displayed on the site. e.g. “Hello,Charles”, not “Hello, Sir”. Important updatesMajor changes to the site are announced on the homepage. Forexample changes in delivery policy or website downtimes.þþContactCompany location and contact information is easily accessiblefrom the homepage. There is a privacy policy, in case the sitegathers information about users.þþVisualsImages and videos are relevant and meaningful. No unrelatedstock photos of models. There are high-quality screenshots,videos or photos of the products and services. Audio or videodoesn’t start automatically, unless user expects it.þþURL redirectionSite URL works with or without www. For example “www.userium.com” and “userium.com”. Check e.g. Redirect one URLto another.NavigationþþImportant linksImportant links aren’t placed in moving features, for exampleauto-rotating carousels and accordions.þþSortingAlphabetical A-Z sorting is avoided. It is used only whenCONFIDENTIAL The proposals and approaches contained herein are the intellectual property of Agency, LLCthere are no better alternatives, such as grouping items intodescriptive, related groups. LocationUsers know where they are on the site. For example with the useof breadcrumbs. Also, there is a site map on large sites.þþConsistencyNavigation is consistent on every page. Links are descriptive.There are no “click here” links.þþSite descriptionThere is a site description in the window title, which is easilyunderstandable as a bookmark.þþURLSite’s URL is memorable.Links CTAsImportant commands are displayed as buttons, not links. Forexample “Buy” or “Pay” is a button, not a link. Links don’t open anew browser tab or window, unless it is e.g. a .pdf file.þþRecognizable linksLinks are easily recognizable. They look clickable. Items thataren’t links don’t look clickable, for example underlining text isavoided. ColorVisited links color is different than unvisited.þþBroken linksThere are no broken links. Check with e.g. W3 Link Checker.LayoutþþHierarchyImportant content is displayed first. Site is responsiveWorks with different screen sizes.Date Client Name7
ResearchþþRelated informationRelated information is grouped together clearly.þþPopupsThere are a minimum amount of pop-up windows.þþConsistencyPage layouts are consistent across the whole website. WhitespacePages aren’t cluttered. There is enough white space to supportscanning.þþUnderstandableContent is written with common language that users easilyunderstand. Check with e.g.: www.read-able.com/þþContactContact and company information is clearly displayed. Clickingthe contact link doesn’t automatically open a mail application.þþUsefulContent is useful and up-to-date, providing answers to themost common questions asked by users. There are no longinstructions or “welcome to our website” text.ELPFormsþþSimplicityOnly absolutely necessary questions are asked in forms.MAX Long dropdown menus are avoidedInstead users can input text, which is validated on the backend.Also, long dropdown menus are error prone to users scrollingwith the mouse.E Content is scannableThere are short paragraphs, descriptive headings, lists andimages. Visual content is used when appropriate, instead of largeamounts of text.þþInputting dataInputting data is flexible, e.g. with phone numbers and creditcard numbers.AccessibilityþþAlt attributesAlt attributes are provided for non-text elements, such as imagesand maps. Captions and transcriptions are used for audio andvideo.þþColorColor alone is not used to convey information.þþLabelsFields are labeled with common terms, e.g. Name, Address(supports autofill).þþCSSContent is readable without a style sheet. Check e.g: onForm submission is confirmed on e.g. a confirmation page.þþAccessible navigationSite can be navigated with a keyboard, without using a mouse.Browser’s keyboard shortcuts aren’t overridden.þþValidationError messages are shown next to the input field, not just on topof the page.ContentþþSelectableLinks, buttons and checkboxes are easily clickable, for ex
PROJECT: Website Evaluation JOB N0: AAA 14060 Client Name: Evaluation Example A website evaluation is a valuable document that helps companies understand the current status of their website and more importantly, the critical steps necessary to improve it. Once you have performed a website evaluation, you will have professional recommendations on how to organize your content, integrate .
