July 2018 – CMS update

This month we want to highlight a few places to reference the overall style, techniques and the direction we are going with the university Base template.

The university CMS organizes the pages, files, promotions and assets without a website design. These assets are then implemented through a template that is unique to each area of campus while still fitting into the Wayne State’s identity. This “style” is what controls how elements look on Web pages.

Screenshot of the base website styleguide

Where our future style live and evolves

All new sites start from a ‘base style’ that is maintained and visible at https://base.wayne.edu/.

A living style guide of all starter templates and components can be found at https://base.wayne.edu/styleguide.

When each site is created, we take a ‘snapshot’ of the ‘base’ style guide. Which means as it evolves, new styles may not be usable on your website. It is used as a guide to show where university style is going and helps us plan for the future.

The style guide for your website

Most sites created in the last two years have their own style guide that you can view via Add/Edit Pages in the CMS at /styleguide. For example: https://clas.wayne.edu/styleguide

Each unique template is defined

Using the navigation in the style guide, it’s possible to see all variations of the website with fake text (lorem ipsum).

CLAS homepage layout

A few other examples:

Some areas have code examples

Mouse clicking button to expand code area

Areas that cannot be created directly in the CMS page editor require special HTML code that is specific to each site. That code is available in the style guide by clicking the corresponding “See code” buttons.

Some sites do not have a “style guide”

Sites originally created before 2016 do not have a /styleguide directory and unfortunately there is no “living style guide” for the site. The styles at the time they were built directly into the templates. If your site falls into this category and you have questions about possible styles, please email us at web@wayne.edu and include the URL of the page/site you’re looking to expand and what you’re looking to do with it.

The multiplying effect of shaving 600kb off wayne.edu ⚡️

We’re always looking for things that have a multiplying effect.

A little bit goes a long way

Wayne.edu is just one of those places. It gets ~700,000 page views per month so changes to the homepage impact a lot of people.

Webpagetest.org results for wayne.edu

Scroll map of wayne.eduOnly 25% of people scroll

Internally and externally the homepage is used as a primary resource for the Login, Search or Top menu (in order of interaction).

Because of that, only 25% of people scroll past the initial fold.

Studies show a fast webpage gets more interaction.

The bulk of the file size (and thus perceived speed) of wayne.edu is from images. Using the existing infrastructure, we already compress each image as far as possible. Taking the homepage down from historically ~3mb to ~1.1mb.

Deferred loading of images

Using the technique that Rob implemented on Base to detect if an image is on or near the screen to trigger actually loading it, this was then transitioned to the CLAS website by Tom and wayne.edu proper by Jenny.

The result is a ~600kb reduction in initial page load on wayne.edu, from ~1.1mb to ~600kb depending on the hero image.

Animation of wayne.edu content loading

This change at scale

75% of 700,000 visits = 525,000 pageviews do not scroll
525,000 times 600kb savings = 315gb savings per month!
10.5gb savings per day.

The CLAS homepage had similar results for end users, but with fewer page views per day, the impact is not as visible.

Bandwidth costs can get expensive for our users. This change not only helps locally but globally, the impact is great without impacting the user experience.

Hiring: Full-time Frontend Web developer/UI designer

The central Marketing and Communications Office is looking for an individual who is driven to create Web user experiences that bring the university brand to life and encourage action.

We are looking for someone with solid website design and UX experience. The individual will need to have enough HTML/CSS/JS experience to develop the frontend HTML through an existing build process and tooling.

Ability to blend technical expertise with a design aesthetic that embraces the university identity guidelines and explores new creative executions incorporating the university’s brand campaign. The ability to juggle multiple projects to meet project deadlines.
Ability to work collaboratively across disciplines — design, digital execution, editorial, marketing, to come up with new solutions.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

  • Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
  • A solid grasp of modern front-end web development, such as HTML, CSS and JavaScript and their associated build components.
  • Experience using a front-end web framework such as Foundation or Bootstrap.
  • An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
  • Considerable skill in writing web applications that retrieve and update information in relational web-centric databases (using WordPress or Laravel).
  • The ability to clearly communicate to project stakeholders and process feedback internally and externally.
  • The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
  • Provide direct supervision to internal website interns and guidance to unit website content authors.
  • Ability to work with accuracy and attention to detail to meet deadlines.
  • Ability to understand and execute oral and written instructions, policies, and procedures.
  • Considerable project management skills, including the ability to provide time estimates and prepare accurate records and reports.
  • Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
  • Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
  • The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
  • Strong understanding of web technologies and related user device capabilities required to access the web.
  • Understanding of test driven development.

How to apply

Apply at jobs.wayne.edu. Posting #043169

Hiring: Full-time Web Content Administrator

The Office of Marketing and Communications is looking for a Web Content Administrator. This role is filling the spot left by Jenn Di Sano, who is moving West to Arizona with her family.

This role is central to the digital communications for the university. It is a cross between crafting the information architecture for most all public facing university sites, to overseeing the official social media presence for the university, to being an influential force in what is posted to the university homepage.

The ideal candidate will be able to blend writing, training, user experience and social interaction into a role that has a large impact on the university and the world.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

Serve as primary resource for units university-wide regarding the content and appearance of unit Web pages. Administer and provide training in content management tools, control access, review sites for adherence and conformity to editorial and design standards and resolve related problems.

Develop and edit central university website and pages. Identify, select and condense news and events for inclusion on the homepage, prepare communications designed to effectively position the University, and ensure the delivery of key University messages.

Serve as liaison with IT personnel campus-wide to identify and resolve Web page related problems. Work with clients, designers and vendors to ensure established standards and expectations are met.

Develop and implement mechanisms and processes designed to evaluate the effectiveness of university electronic communications. Provide analysis of collected data and submit reports and recommendations as requested.

Maintain and support the university’s social media presence with a cross-functional team of writers, designers and content strategists

Collaborate with writers, editors, social media coordinators, video producers and photographers both in University Communications and in communications units across campus.

Provide support to the schools, colleges and central marketing department on social media strategy and campaigns.

Use metrics to determine the most effective channels to deliver content to audiences, measure their behavior and attitudes in response to that content and make recommendations based on the results

Oversee the day-to-day project management of large website projects by tracking progress, ensuring timely delivery and keeping the project within scope.

How to apply

Apply at jobs.wayne.edu. Posting #043246

Hiring: Full-time Frontend Web developer/UI designer

The Central Marketing and Communications Office is looking for an individual who is driven to create Web user experiences that bring the university brand to life and encourage action.

We are looking for someone with solid website design and UX experience. The individual will need to have enough HTML/CSS/JS experience to develop the frontend HTML through an existing build process and tooling.

Ability to blend technical expertise with a design aesthetic that embraces the university identity guidelines and explores new creative executions incorporating the university’s brand campaign. The ability to juggle multiple projects to meet project deadlines.
Ability to work collaboratively across disciplines — design, digital execution, editorial, marketing, to come up with new solutions.

Background

The Web Communications team is located in the central university Marketing Office. We are set up like an internal agency and work with most areas of campus to create and maintain their public web presence.

We are a cross-functional team consisting of Web Content Administrators, Designers, Frontend Developers, Backend Developers and Multimedia support.

The mission of the central Marketing Office is to raise the stature of the university.

Primary responsibilities

  • Experience collaborating throughout the entire project cycle, from research, strategy, information architecture, visual design, front-end development and maintenance.
  • A solid grasp of modern front-end web development, such as HTML, CSS and JavaScript and their associated build components.
  • Experience using a front-end web framework such as Foundation or Bootstrap.
  • An understanding of back-end web development environments, including HTTP, web servers, load balancers, the interpretation layer, databases and associated web frameworks.
  • Considerable skill in writing web applications that retrieve and update information in relational web-centric databases (using WordPress or Laravel).
  • The ability to clearly communicate to project stakeholders and process feedback internally and externally.
  • The ability to troubleshoot website layout and web application performance issues and resolve issues independently or direct issues to the responsible party.
  • Provide direct supervision to internal website interns and guidance to unit website content authors.
  • Ability to work with accuracy and attention to detail to meet deadlines.
  • Ability to understand and execute oral and written instructions, policies, and procedures.
  • Considerable project management skills, including the ability to provide time estimates and prepare accurate records and reports.
  • Proficiency in the use of web applications programming languages, tools, and/or methodologies for developing integrated web applications typically acquired through formal education or equivalent experience in web application development.
  • Demonstrated ability in analyzing customer requirements and developing basic information systems solutions typically acquired through one to two years of directly related experience in web application development and support.
  • The ability to translate functional requirements into cross-browser WCAG 2.0 compliant websites.
  • Strong understanding of web technologies and related user device capabilities required to access the web.
  • Understanding of test driven development.

How to apply

Apply at jobs.wayne.edu. Posting #043169

Hiring: Student Web Intake position

The Web Assistant will report to the Web Content Administrator and will be the ‘front line’ contact for incoming Web requests through email and phone calls.

This person will take the initial request, respond and gather any additional information, complete the request (if small) or elevate it to a staff member when additional assistance is needed or is a larger request.

The position does require some existing knowledge of how the web works, basic HTML and familiarity with web-based content management systems.

The ideal candidate will have:

  • Good written and phone abilities
  • A basic understanding of HTML
  • A basic understanding of web usability
  • Comfortable editing pages in a web-based content management system
  • Experience resizing and optimizing images for the web
  • The ability to detect patterns of requests to create training material and document common responses to frequently asked questions
  • The ability to follow verbal and written directions with an eye for attention to detail

More about the position:

This is a part-time position, requiring 15-20 hours a week in the Marketing and Communications office.

The volume of requests varies per day, the average is 30-40 with most taking only a few minutes to complete.

The Web Assistant’s role in a request:

A request will come into the system and depending on the detail of the request:

You may need to follow up by email or by phone with additional questions

Once all information is available:

  • Determine which page(s) need editing.
  • Determine how these pages get edited (there may be multiple systems involved), which may require asking some questions internally about the page setup.
  • Ensure the primary contact is looped in on all changes.
  • Facilitate necessary changes (May take a few minutes to a few hours)
  • Gathering follow up questions/answers
  • After completion, follow up to let the requestor know the change has been completed.
  • While completing requests it will also be required to document common responses for consistency and to speed up future requests. It will also be required to work closely with the Web Communications team.

How to apply

If this sounds like you, email your resume and a cover letter to web@wayne.edu with the subject “Interested in the Web Assistant position”.

Global Accessibility Awareness Day 2017, Detroit

Thursday, May 18, 2017

6:30 PM to 8:30 PM

Bamboo Detroit

1420 Washington Blvd, Suite 301, Detroit, MI
$5.00 /per person

Event description

Back for the fourth year, Global Accessibility Awareness Day Detroit is a day to gather together to learn about digital accessibility and how to make the web more accessible for everyone. Events will be held around the world to raise awareness about web accessibility.

This year’s event is jointly hosted by Refresh Detroit and Ladies That UX Detroit.

Who is this event for?

If you’re working on the web, creating, developing, or designing websites or content for others to use, this event is for you! Or if you want to learn how we can work together to make the web accessible to everyone, we’d love for you to attend.

For our event, we’ve invited two local experts to talk about the importance of planning for accessibility in your design project and how to use an automated accessibility testing tool.

Agenda

6:30pm to 7:00pm: Welcome, food, refreshments, and networking
7:00pm to 7:10pm: Introductions
7:10pm to 8:20pm: Presentations
8:20pm to 8:30pm: Announcements and thanks to sponsor
8:30pm: Time to leave

Presentations

Design Before Code: Thinking About Accessibility from the Ground Up 
Caitlin Geier, UX Designer at Deque Systems

Think about accessibility when designing: don’t wait till it’s coded!  Caitlin will offer accessibility tips for designers so that time will be saved in development.

Introduction to aXE
Matt Isner, JavaScript Developer at Deque Systems

Learn how to check the accessibility of your web projects with aXe, a free Chrome extension and open source JavaScript accessibility testing engine.

Speakers

Caitlin Geier

 

As a UX designer, Caitlin’s work with accessible design flourished once she began working for Deque. She is passionate about understanding the users she’s designing for.

Caitlin continually strives to incorporate accessibility elements into her work in order to ensure that all users can benefit from inclusive design.

Matt Isner

 

Matt specializes in teaching development teams to plan, test, and code for accessibility and has helped orchestrate large remediation efforts of complex enterprise applications.

He is intrigued by the idea of the computer system as an expression of human neurobiology, and champions the notion that accessible web content is better understood by both humans and computers.

Sponsor

Deque Systems is a leading provider of web and mobile accessibility software and services. Our mission is digital equality, and the Deque team consists of leaders and innovators in accessibility and testing tools development.

We strive to provide practical accessibility solutions that reflect real-world development environments, and we work with a broad range of clients to not only fix their inaccessible content but to integrate accessibility into their existing design and development processes through the use of automation and training. Not sure about your site’s accessibility? Check it with aXe.

When less is more, A/B test insights

Last year we re-focused on the admissions area of wayne.edu to reduce the depth of the site (from five to two levels deep) and bring more resources to the front page. As a result the landing page highlights the six most popular audiences and their navigation items.

Each audience has its own landing page, with the same navigation and unique elements which speak to that audience. We found these audience landing pages were being visited less frequently than before the redesign.

Our theory

Initially, we thought users were clicking on a link below their audience heading and getting directly to their needed page. We decided to test this theory using a tool called Hotjar to record where users clicked on the page.

Admissions homepage clickmap

Although each audience listed their entire menu below the headings, the top three items were by far the most popular.

Revised hypothesis

We decided to test if removing the least popular items made it more clear to users that they could visit an audience landing page. If this is the case, are they more likely to visit these pages by clicking the audience heading or ellipse at the bottom of the link list?

“A” variant of the page

Admissions A variant

“B” variant of the page

Admissions B variant

Winner: Shorter list of links with the ellipses

After running the experiment for two weeks, Google found a statistically significant winning version.

Admissions experiment results

Headers or last item ellipse?

Admissions header vs. Ellipse

Of the clicks to the audience landing pages, the headers yielded ~2.5% of the clicks while the ellipses yield ~1%.

Insights

The takeaway from this experiment is it’s possible to go too far while reducing the depth of a website. Having everything accessible from the homepage may be good if you’re familiar with all the options, but it can be overwhelming for unfamiliar users.

Keeping a website as flat as possible while reducing the number of choices to entice users along yields the most interactions. It allows for the addition of refined and contextual content to reinforce a user’s decisions along each page of their journey.

Hiring: Student Web Assistant

The student web assistant will report to the Web Content Administrator and will be the ‘front line’ contact for School of Medicine web requests through email and phone calls.

This person will take the initial request, respond and gather any additional information, complete the request (if small) or elevate it to a staff member when additional assistance is needed or is a larger request.

The position does require some existing knowledge of how the web works, basic HTML and familiarity with web-based content management systems.

The ideal candidate will have:

  • Good written and phone abilities, who is a freshman or sophomore
  • A basic understanding of HTML
  • A basic understanding of web usability
  • Comfortability editing pages in a web-based content management system
  • Experience resizing and optimizing images for the web
  • The ability to detect patterns of requests to create training material and document common responses to frequently asked questions
  • The ability to follow verbal and written directions with an eye for attention to detail

More about the position:

This is a paid position, requiring 15-20 hours a week in the School of Medicine Web Services office.

The volume of requests varies per day, but the average is 20-30 with most taking only a few minutes to complete.

The web assistants role in a request:

A requests comes into the system and depending on the detail of the request:

  • You may need to follow up in email or by phone with additional questions

Once all information is available:

  • Determine which page(s) need editing.
  • Determine how these pages get edited (there may be multiple systems involved), which may require asking some questions internally about the page setup.
  • Ensure the primary contact is looped in on all changes.
  • Facilitate the necessary changes are made (May take a few minutes to a few hours)
    • Including gathering follow up questions/answers
  • After completion, follow up to let the requestor know the change has been completed.

While completing requests it will also be required to document common responses for consistency and to speed up future requests. It will also be required to work closely with the two other School of Medicine Web staff members and the extended Web Communications team. The Web team uses the same servers, tools and already have an extensive library of frequently asked questions and answers.

How to apply

If this sounds like you, email your resume and a cover letter to web@wayne.edu with the subject “Interested in the Student Web Assistant position”.

Hiring: Full Time Senior Web Graphic Designer

We’re looking to fill an existing position for a full-time Web Designer to join our innovative team.

About Web Communications

We handle every aspect of a website project, from the needs analysis, user research, architecture, design, content migration/editing, programming, post-launch analysis and A/B testing. To accomplish this we work like a mini agency within the university.

This position is integral to crafting and ensuring the university identity is integrated into every piece of communication we put out. In addition to full websites, our team is responsible for the digital signage around campus (currently 77 signs and growing), the official social media presence and a number of HTML templates. This position touches all digital mediums and our work is constantly evolving with multiple opportunities for growth, you will see your work published and interacted with on a daily basis.

About Wayne State

Wayne State offers a competitive benefits package that includes, health, dental, paid leave and more. In addition to great benefits, working for Wayne State’s Marketing and Communications team brings you right into the heart of midtown. We are conveniently located at Cass and Palmer and in walking distance of the DIA, the Detroit Historical Museum and some of the top restaurants in the Detroit. In mid-2017, you’ll be steps away from a Q-Rail station that will take you to the newly developed The District Detroit.

Senior Graphic Designer

  • Solid understanding of working with-and designing for-web applications.
  • An understanding of responsive Web design and designing for mobile first.
  • Excellent visual design skills with sensitivity to user-system interaction .
  • Experience working on large-scale higher education websites and/or creating and maintaining corporate design patterns.
  • BS/MS in Human-Computer Interaction, Interaction Design, or a Visual Arts subject; strong technical understanding a plus.
  • Minimum of 4+ years’ experience designing web-based products for a consumer-oriented website.
  • Ability to act as a leader in communicating conceptual ideas and design rationales, all within a user-centered design process.
  • Able to work and communicate effectively in a cross-functional product development team, and present ideas and designs effectively.
  • Self-motivated to prioritize and manage workload, and meet critical project milestones and deadlines.
  • Proficiency in HTML, CSS, and JavaScript for rapid prototyping.
  • An understanding of the benefits, limitations and customization of a CSS framework (Foundation, Bootstrap, etc).
  • Up-to-date with the latest Web trends, techniques, and technologies.
  • Experience working in an Agile/Scrum development process.
  • Maintain an overall university brand across various mediums including digital signage.

How to apply

All applications must go through the university jobs website, please do not contact me directly. We encourage you to submit links to live websites, portfolios and to submit a cover letter that explains . why you feel you’re right for the position.

Senior Graphic Designer, posting #042093