1 / 19

westga Website Revolution 2015

Learn the best practices for improving user experience and visual cohesiveness on your website. Implement responsive design, optimize page weight, and adhere to accessibility guidelines for a successful content migration.

danak
Download Presentation

westga Website Revolution 2015

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. westga.edu • Website Revolution 2015 • Ewa Hallman | UCM Web Services | 2015

  2. 2010 • 2013 • 2006 • Ewa Hallman | UCM Web Services | 2015

  3. 2016 • ? • ? • Ewa Hallman | UCM Web Services | 2015

  4. Ewa Hallman | UCM Web Services | 2015

  5. What works and what does not ? • - code • - user experience • - visual look & feel &cohesiveness • Ewa Hallman | UCM Web Services | 2015

  6. Why code Matters? • - User Experience • - SEO • - Extensibility

  7. Improve • Upgrade Doctype to HTML5from XHTML 1.0 Strict. • Use HTML5 segmentationwith header, nav, footer tags. • Fix validation errors.An HTML document must be valid to be fully compatible and readable by browsers and robots. • Consider caching pagesto decrease loading time by storing pages temporarily on the user’s device. • Avoid Frames and iFramesbecause their content is not readable by search engines. • Specify meta viewportto indicate how the website should be displayed on mobile devices. This will allow pages to fit on smaller devices. • Combine CSS files when possibleto lower the number of HTTP requests. • Utilize CSS preprocessors, such as SASS to supercharge CSS and make them more organized, easier to maintain. • Include Javascript in a separate fileto optimize loading time and put it at the end of your document before </body> tag when possible. • Improve legibility of JavaScriptwith modules. Use a task runner to automate repetitive tasks. • Consider utilizing responsive design frameworkto minimize the need for maintenance and testing. Maintain • Page weight (HTML alone) does not to go over 50k.This criterion is taken into consideration by the search engines in their ranking algorithms. • Compression is enabledto diminish the amount of data to be downloaded. • Page does not contain any heavy images.All images on the website should be optimized. • Ewa Hallman | UCM Web Services | 2015

  8. User Experience • Ewa Hallman | UCM Web Services | 2015

  9. Improve • Implement responsive designto improve user experience on mobile devices. • Use legible font sizes, the text on the page should render in a way it is easy for all visitors to read. • Size tap targets appropriately. Link and buttons must be big enough for user to easily tap on touchscreen. • Provide fixed points or anchors which would guide users (who scan, don’t read) through the content of the page. • Highlight key expressions of the page with <strong> <u> and <em> tags. • Use the <H tags properly to organize the structure of the page in relation to their order of importance. • Provide consistent and intuitive navigation. The webpage contains 241 links. Too many links in a page diminishes the importance of each one of them. • Provide a sitemapcontaining an ordered organization of the linking structure of your site. • Adhere to accessibility guidelines. Ensure that foreground and background colors have enough contrast (ratio 4.5 or more for text). All images should have alternative text attribute specified to adhere to accessibility guidelines. • Provide relevant and high-quality content.Make use of effective writing. Maintain • The above-the-fold content is properly prioritized. • The content of the page fits within the viewport. • The search feature is well designed. • Printing style sheet has been defined. • Ewa Hallman | UCM Web Services | 2015

  10. Visual Look & Feel • & Cohesiveness • Ewa Hallman | UCM Web Services | 2015

  11. Improve • Adhere to established visual identity guidelines. • Represent the newly refreshed brand look and feel. • Each page design should look like it belongs in the same siteby featuring a consistent color scheme, fonts, graphical elements, navigation, layout and other elements of design. • The site should be easy to navigate, with useful information and resources located in consistent formatting across the site. • The new design should give users maximum impact as soon as they land on the site with use of images and media. • The new design should incorporate new web trends, such as parallax effect, innovative scrolling, story booking, flat design, un-boxed layouts, tiles, navigation widgets, mashup interfaces. • The new web trends should be incorporated intelligentlyto provide simple, elegant and intuitive experience. • The new design needs to be comprehensiveto address all current and future web presence needs. It should be possible and fairly easy to introduce new layout features without hindering cohesiveness. • Ewa Hallman | UCM Web Services | 2015

  12. What still works? • Ewa Hallman | UCM Web Services | 2015

  13. What are best practices for successful content migration ? • (during Information Architecture Revolution) • Ewa Hallman | UCM Web Services | 2015

  14. Migration Process Define vision, goals and requirements Content Inventory and ROT analysis Develop content strategy Develop metadata strategy Get stakeholder engagement Define governance structure Schedule planning, phasing, piloting, testing and training Migration should no longer be atomic. • Ewa Hallman | UCM Web Services | 2015

  15. Ewa Hallman | UCM Web Services | 2015

  16. Ewa Hallman | UCM Web Services | 2015

  17. Content Migration • Technical Effort • Break into types • Decide what to cut • Decide what automated • Editorial Effort • % Automated • % Manually Moved • % New Content • % Manually QA’d • Ewa Hallman | UCM Web Services | 2015

  18. Staffing • Web Services Director • Web Specialist Senior • Web Specialist Intermediate • Temporary Migration Staff (6 for 5 months) • Timeline • Install CMS: August, 2015 • Complete Site Design: January, 2016 • Implement Design: February 2016 • Migrate Content: February 2016 - July, 2016 • Ewa Hallman | UCM Web Services | 2015

  19. Roles & Responsibilities • ITS & ITS Web Team • CMS hosting, configuration and template implementation • Monitors template quality and develops coding standards for template expansion • Identifies content types and content relationships to help vendor configure tools for automatic migration • Aids in metadata definition and develops innovative tools to support metadata • Develops and supports dynamic content (widgets, modules, feeds, scripts, site search) and integrates with back end systems. • Provides technical support for templates, CMS configuration, authentication, dynamic modules and web applications UCM Web Services Team • Develops integrated web strategy (marketing, design, content, information architecture, SEO) • Develops web guidelines and policies • Manages stakeholder expectations • Maintains stakeholder engagement • Sets metrics and interprets analytics data • SEO • Performs ROT analysis • Creates content (online video, podcasts, articles, posts) • Monitors website quality and manages online reputation • Manages and supports CMS community • Owns the website feature request process • Ewa Hallman | UCM Web Services | 2015

More Related