westga.edu
Website Revolution 2015
Ewa Hallman | UCM Web Services | 2015
2013
2010
Ewa Hallman | UCM Web Services | 2015
2006
2016
?
?
Ewa Hallman | UCM Web Services | 2015
Web Design
In-House Design
Content Management System
Ewa Hallman | UCM Web Services | 2015
What works and
what does not ?
- code
- user experience
- visual look & feel & cohesiveness
Ewa Hallman | UCM Web Services | 2015
Why code Matters?
- User Experience
- SEO
- Extensibility
Improve
Upgrade Doctype to HTML5 from XHTML 1.0 Strict.
Use HTML5 segmentation with 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 pages to decrease loading time by storing pages temporarily on the user’s device.
Avoid Frames and iFrames because their content is not readable by search engines.
Specify meta viewport to indicate how the website should be displayed on mobile devices. This will allow pages to fit on
smaller devices.
Combine CSS files when possible to 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 file to optimize loading time and put it at the end of your document before </body> tag
when possible.
Improve legibility of JavaScript with modules. Use a task runner to automate repetitive tasks.
Consider utilizing responsive design framework to 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 enabled to 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
User Experience
Ewa Hallman | UCM Web Services | 2015
Improve
Implement responsive design to 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 sitemap containing 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
Visual Look & Feel
& Cohesiveness
Ewa Hallman | UCM Web Services | 2015
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 site by 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 intelligently to provide simple, elegant and intuitive
experience.
•
The new design needs to be comprehensive to 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
What still works?
Ewa Hallman | UCM Web Services | 2015
What are best practices for
successful content migration
?
(during Information Architecture Revolution)
Ewa Hallman | UCM Web Services | 2015
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
Ewa Hallman | UCM Web Services | 2015
Ewa Hallman | UCM Web Services | 2015
Content Migration
Break into types
Decide what to cut
Decide what automated
Technical Effort
% Automated
% Manually Moved
% Manually QA’d
Editorial Effort
Ewa Hallman | UCM Web Services | 2015
% New Content
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
Roles & Responsibilities
UCM Web Services Team
•
Develops integrated web strategy (marketing, design,
ITS & ITS Web Team
•
content, information architecture, SEO)
CMS hosting, configuration and template
implementation
•
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
modules, feeds, scripts, site search) and integrates
•
Manages and supports CMS community
with back end systems.
•
Owns the website feature request process
•
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,
Provides technical support for templates, CMS
configuration, authentication, dynamic modules and
Ewa Hallman | UCM Web Services | 2015