Skip to content

Wayne State University

Aim Higher

Oct 3 / Nick DeNardis

Refresh Detroit – Frontend Web tooling – Build steps, managing assets, logistics and consistency. – Oct. 15, 2014

RSVP

When: Wednesday, Oct. 15, 2014 at 6:30 p.m.

Building a single website is tough in itself but building and maintaining hundreds of sites results in exponential maintenance. Luckily there are frontend tools to help. You’re probably already familiar with a few of them and may use them on a handful of projects. We’ll explore how to use frontend tools to make life easier regardless if you’re working on a single or hundreds of sites.

Focusing on the end resulting HTML, CSS and Javascript brings a whole set of new and evolving tools. This discussion will focus on optimizing workflows with Node.js, NPM, Yeoman, Bower, SASS, Gulp, etc. If this is your first time being exposed to these tools we will walk through why and how to use them. If you’re familiar with some or all, we’ll work together to hone and build upon your skills.

Speaker

Nick DeNardis is Director of Digital Communications at Wayne State University, where he leads the strategy, execution, and implementation of most all public facing digital communications for the university. His team is responsible for websites, social media, and digital signage around campus. They also are responsible for creation and maintenance of several university-wide tools including a content management system, events calendar, RSVP system, HTML email creator, form creator, and short URL system. Nick has 10 years of experience optimizing university websites for a forward moving user experience. He is a nationally recognized speaker, blogger and scientist in discovering and analyzing Web behavior.

Venue and Parking

Grand Circus is located in the Broderick Tower, and you enter from the Woodward-facing doors.

Once inside, go to the end of the hall, and take the elevator to the fourth floor.

Parking is available at the Detroit Opera House parking garage, located on Broadway. Parking is $10 (unless there’s a special event). There’s also limited street parking on Woodward.

The Detroit Opera House parking garage is a short walk up Broadway and around the corner from the Grand Circus space. Here’s parking information from the Broderick Tower website (PDF).

Jul 30 / Nick DeNardis

[Video] Web Workshop: Intro. to Google Analytics

Last week I presented a workshop on Google Analytics. Since many schools/colleges/departments use the tool to track Web visitors, I thought it would be a good opportunity to get them in a room to explain the features/power of the system.

The workshop covered the following topics:

  • Setting it up on a site/multiple sites
  • Account/Property/View management
  • Intelligence Events
  • Real time
  • Audience overview/behavior
  • Technology/browser/mobile
  • Acquisition/referrers/search/campaigns/social
  • Behavior/visitor flow/site speed
  • Events/tracking/formy
  • Goals

Since a handful of people could not make the workshop, I recorded it. The audio is not ideal, but it will do.

Next workshop:

The August workshop will be on social media content strategy. The date/time is still being determined, but it will be posted here when it is confirmed.

Jun 16 / Nick DeNardis

Why we retrospective

The best tool a team can have is the ability to analyze and adapt. The last few weeks I have been talking a lot about Agile agile practices. I intentionally use the lowercase “A” because I am not advocating for any specific methodology but instead to use the Agile Manifesto at its core and use team “agility” to find the best practices for your team.

This process starts with the ‘retrospective‘, which is adopted from the ‘Scrum‘ methodology but is used to look back at a period of time, usually one or two weeks, and introduce a feedback loop for the team to discuss and improve. This is the foundation to critically analyze processes and goals.

This is the basis for a talk I have adapted twice, with more iterations coming in the next few months. Retrospectives are just one topic in the talk but it’s the foundation for the rest. The higher education specific version is below.

Highedweb Michigan presentation

When a team has an existing process, it can be uncomfortable for some people to change, especially if something isn’t going ‘horribly wrong’ and thus is less apparent. But we all have room for improvement as long as we are willing to try.

All team buy-in

Everyone must be willing to try ideas for some time before dismissing them. If the entire team isn’t on board, the reflection and process planning won’t result in the best possible solution. The team shouldn’t dismiss even the most out of the box ideas unless they try them for some time, one or more weeks. If the change totally fails, no one likes it or it doesn’t produce the desired results, that will come out in the next retrospective and everyone will agree to go back or adapt what was tried.

Start with your current process

Don’t change a thing in the beginning, just talk. You may find that a two,three hour argument discussion may take place the first few retro’s. This is good, it may not feel like it’s producing anything productive, but these feelings, ideas and issues need a vehicle to get addressed and out of the way before real improvement can happen. You’ll find that other members of the team may be very passionate about the same things you are, but you may never have noticed. Over time the retrospectives will become shorter and more productive. Hang in there.

Running a retrospective

First rule: No technology during the retrospective, everyone take out their phone and place it in the middle of the table. This may get people squirming at first but giving all team members the equal respect of your attention makes a world of difference.

Next, there needs to be a facilitator, this can be someone on the team or someone external. Their role is to keep everyone on track and to record the discussion points.

Then, go around the room and have each person answer the following questions:

  • What went well?
  • What didn’t go so well?
  • What have I learned?
  • What still puzzles me?

Our team also adds the question, “How stressed were you on a scale of 1-10?” We make it a point to focus the changes for the next iteration on reducing the number for the most stressed person.

Discussion

After everyone goes around and the team has heard how the last week or two went, only then can an effective discussion happen about what should stay the same and can be improved. As a group, although it shouldn’t be limited to an unanimous vote, everyone should agree (or be willing to try) what to change over the next week or two (depending on how often retrospectives are done).

The facilitator has the job of moving the discussion along and ensuring comments are moving in a productive direction. Discussions that get out of hand for a few minutes are fine, but make sure it doesn’t diverge into complaining about a person or process that the team doesn’t have the ability to improve.

Change just one thing

Like any iterative process, it is important to change just one thing at a time, or at least one thing per area. Depending on the size of the team and who/what they interact with, more than one change can happen, just make sure it isn’t too much to keep track of. But document the changes and determine when it should be revisited.

Iterate, rinse, and repeat

At the end of the day being happy working on meaningful work that makes an impact is the ultimate goal. If you’re not moving in the direction, bring it up in your next retrospective.

Jun 9 / Nick DeNardis

We’re Hiring: Full Time Front-End Web Developer

We are hiring! The Web Communications office is looking for an in house Web Developer. It’s not often we put a call out for new staff but we are filling a much needed void in our team. Our department started eleven years ago with little staff and resources, we have since grown to a staff of eleven and take on new responsibilities every day. Almost everyone in the department started as a student and worked their way up (myself included). It’s not often we get the opportunity to hire from the outside, we’re looking for a talented individual to help level up the Web.

Group Work

The job

We are looking for someone with front-end development experience producing responsive and standards compliant HTML5 + CSS2/3 websites. Have experience with Javascript without the reliance on a specific library like jQuery. Proficient in using the latest front-end build tools such as Yeoman, Sass, GIT, Zurb Foundation, Gulp, Vagrant, etc. An understanding of PHP, MySQL and other back end programming languages isn’t required but is preferred.

With three developers the projects are distributed evenly so everyone has the opportunity to work on something new. We are a collaborative environment and this position has the opportunity to affect the direction of all future Web projects. If you have read our blog in the past you will know we push out a lot of sites, about one per week. All sites are created from the ground up, completely by hand, and completely responsively. The Web is a craft and we make sure we build all the tools needed to do it as streamlined as possible. This position has the opportunity to build and maintain these tools that impact the entire institution, not to mention work with an amazing team.

Primary Web property responsibilities

Environment

  • LAMP
  • Zurb Foundation
  • Sass
  • Yeoman
  • Gulp/Grunt
  • GIT
  • Vagrant

Official duties

  • 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.
  • A solid grasp 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.
  • 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 Web site interns and guidance to unit Web site 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 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 Web applications.
  • Strong understanding of Web technologies and related user device capabilities required to access the Web.
  • Strong understanding of test driven development.

Qualifications

  • Have worked with creating templates for a content management system.
  • Have experience with device and browser testing.
  • Working knowledge in Photoshop.
  • Enable and execute A/B tests to measure different design approaches.
  • Can code HTML Email templates with understanding of limitations, and standard practices.
  • An eye for detail and great communication skills, for example, multi-tasking in a dynamic, fast-paced environment.
  • Effectively communicate with Project Managers, Designs, Clients and other Developers.
  • Have an unquenchable thirst for knowledge and professional growth.
  • Create tools and resources to communicate with our rapidly expanding developer community.
  • Stay current with trends and best practices.

How to Apply

Please do not send resumes directly to me. Apply at jobs.wayne.edu. Posting #040365
Apr 1 / Jennifer Di Sano

Wayne State loves bacon

It’s April Fool’s Day, 2014, the one day of the year where you can’t believe everything you see on the Internet.

The Wayne State Web team hasn’t done anything fun for April Fool’s Day in the last few years and we have a new homepage, so we *had* to do something.

One day while we were out walking on campus, taking a quick break from sitting in front of our computers all day, we started talking about an internet phenomenon re: hiding bacon.

That’s when the idea hit: we could hide Kevin Bacon on our website! After all, there are six degrees of Kevin Bacon, right? If he *is* everywhere he should also be at Wayne State.

One of our graphic designers, Dan Greco, found some stock images of the famous actor and worked them into two of the main photos we have on the homepage. We loved the results and had him work up a few more for April Fool’s Day.

The goal was to be subtle but funny. We think it worked.

 

Mar 6 / Nick DeNardis

Student Center Renovation website: 24 hours from sketch to production

Student Center Website  Recently we were given the task of putting together a website for the Student Center Renovation Project. We knew it was coming but we didn’t have much to go on until the details were approved. On a Thursday we got word everything was approved and set up a conference call to talk requirements, content and images.

Outlining the requirements

After an hour discussion with the client we determined that we had to mirror the messaging/feel of a banner being placed outside on the actual Student Center building. We also determined an initial set of menu items that included: The Project, Visions, Highlights, FAQ and Contact. We had no idea what was going into each of these areas but the task to finalize the content was on the client, so we had to work with Lorem Ipsum.

Sketching exercise

SketchesEveryone in the conference call was then involved in an initial individual sketch exercise. Everyone got 5-10 minutes to sketch one or more ‘wireframe’ layouts of how they perceived the site should be organized. This was a great first step to get designers and non-designers collaborating. Even though everyone was in the same meeting, heard the same questions, responses and decisions from the client, everyone came up with different interpretations of the client’s and project’s needs.

Student Center WireframeOnce the time was up, everyone presented their wireframes and explained why they chose to place elements where they did and how they saw the website working. We talked pro’s and con’s as a group.  In this case everyone agreed all the content could fit on a single long page so we decided to go right to a single wireframe. This time we used a whiteboard so we could draw, move and erase as we worked down the page.

Divide and concur

Once the wireframe was decided upon we split up the tasks to parallelize the work. The tasks broken down:

  • Base CMS and Foundation structure setup
  • Photoshop polished elements
  • Frontend interaction polish
  • Gathering and preparing the assets

Foundation WireframeI started getting the logistics of the base site setup in our CMS, the folder structure on the server and the wireframe mapped out. Once that was in place Tom was able to start working on each section in isolation to get the interaction working so the site functioned with placeholder content. In the meantime, Dan started polishing the design in Photoshop. And lastly, Rolaine worked on gathering, formatting and cutting the images that would be used on the site. We are now about five hours in and things are starting to take shape.

Content creation

While we divided up our work  for the Web, the client and editorial were going back and forth on finalizing and approving the content. This usually starts with Word documents but as soon as the a piece is 80 percent finalized we transition it into its final location in the CMS. This is so it can be edited in the native editor and as we are refreshing the frontend assets we can see real content and how it meshes with the finalizing design.

Putting it all together

Student Center 80 percent doneEight hours in and the elements are starting to come together. The template is now more refined, final content is pulling from the CMS and being updated in real time so we could see and test it within the final site. Assets were polished to ensure pixel-perfect definition and the non-interactive HTML started to get some javascript life.

Adding the interaction layer

Every site we create works for the lowest common denominator browser, basically Google scraping the pages looking for content, links and assets. We then use progressive enhancement to add the style layer of CSS that most users see and browse with. After those foundations are in place we add interaction with javascript. For this project specifically we use Foundation’s ‘top bar’ for the main navigation combined with the ‘fixed’ positioning to allow it to follow the user down the page. We also utilize Foundation’s Magellan to create a ‘smooth’ scrolling effect for the user down the page to the desired content. Add in some alpha transparency on the menu as the user scrolls and it results in what feels like a must more polished experience than just a bunch of static pages that someone has to click through. Lastly, the FAQ’s expand only when needed and the renderings of the floor plans open in lightboxes so users don’t have to leave the page to view them. In order to add the interaction layer efficiently it’s important that everyone can work independently without colliding with anyone else’s work.

The final product

23 hours later the site was ready to be deployed to production. It was tested in all modern browsers and devices, the content was edited several times. The images have been proposed, refined and optimized per device. The open graph, twitter card and other meta data are added. We send the client the signoff and as soon as they are good we run the deploy…

grunt deploy:production

Final Student Center websites

And we’re live! http://studentcenter.wayne.edu/new/

Feb 19 / Nick DeNardis

Redesign: Academic Senate Website

academic-senate-oldacademic-senate-new

We recently launched a redesign of the Academic Senate website.

The previous site was a framed website and managed by hand. Since the site isn’t overly complex that workflow was efficient for a long time. There were a few barriers to that approach, though, and the Academic Senate came to us for help with a solution.

What we came up with is a fully responsive website managed through the university’s central CMS and automatically pulls in data from across campus. A few key features of the new site include:

Built on Foundation 5

As we evolve our responsive approach we have settled on Zurb’s Foundation framework. It is light weight, flexible and allows us to extend it where needed without having it feel like a “Bootstrap” site.

Membership lists using CMS profiles

A big part of the Academic Senate website is broken down into committees and related information. Since the membership of these committees changes over time, and people can be on multiple committees, managing this information can be cumbersome. We transitioned each member into the “profiles” area of the CMS where they can be associated with multiple committees if needed and the information can be managed by the people themselves or by the Academic Senate staff with just a Web browser. They can be updated once and published across the site.

Profile images and content pulling from existing sites

Almost all Academic Senate members already have existing profiles on their school/college/department websites. We didn’t want to duplicate this information so we pull their existing profile information to reduce redundancy. When the member updates their profile, it will automatically update on the Academic Senate website.

Under the hood

A few things you won’t notice is we are standardizing our build process with new sites. We have a Yeoman site generator that we use as a base for each project. Next, we’re using Grunt (soon to use Gulp) as our “build” step to check and compile all assets into their appropriate folders. This not only reduces the initial project build time but also separates source files from their rendered machine optimized results. On that same spirit we have begun to deploy sites in a standard way to speed up the process and reduce the possibility for mistakes.

View the new Academic Senate website at: http://academicsenate.wayne.edu/

Dec 31 / Nick DeNardis

2013 – Web Year in Review

It’s been a long year and we thought it would be good to look back at what we accomplished. We’re a small team, only ten of us full time (including myself), and a few part timers, to maintain 550+ institutional websites. Over the past five years we have used this blog as a platform, when time permits, to give some insight into our work, workload and processes. We have been quiet the last few months and in those months we have experienced the most change to our team, process and the work we produce.

I thought it would be good for myself, and you (of course), to take a look back at the last year to reflect on what we have done and how we have changed. This year we launched 25 sites. That’s one every other week. I have highlighted a collection of the most public sites:

University homepage

Homepage

This year we took on an ambitious redesign project, take six months to reimagine and reconstruct wayne.edu from the ground up. We put a small team together dedicated to this single project and on December 16th they brought us what you see today. I’ll be writing more about the project in 2014 but we now have a website and platform to build the future upon.

Online Directory

directory
With the launch of the new homepage also came a completely online campus directory. Previously the directory was a print document and static Web pages. We worked with C&IT to integrate the data right into the main campus map and then into a completely new “WSU Directory” frontend.

Office of Military and Veterans Academic Excellence

military

Military and Veterans Academic Excellence was a redesign project to bring their website in line with the new capabilities of the office.

Wayne Law

law-school

A complete overhaul of the Law School website and most of its digital communication properties. The new website is people focused and takes advantage of everything Wayne Law is doing.

Merrill Palmer Skillman Institute

mpsi

A few small visual tweaks turned into an almost complete overhaul of the MPSI website. The goal is to use the visual design to build coherence to the Institute of Gerontology.

School of Library and Information Science

slis

Another school where we completely reimagined their online identity. The School of Library and Information Science is much more than just teaching librarians to work in physical libraries. We took that inspiration and designed a website that was information focused and different than any other website we have produced in the past.

10,000 Small Businesses – Detroit

10ksbdetroit

A non-university branded website built to support the Goldman Sachs 10,000 Small Businesses program.

Office of Economic Development

economicdevelopment

A new website for an office that did not have a Web presence previously. There is a lot happening in Midtown Detroit and the greater downtown Detroit area. This site highlights how Wayne State University is a driving force in the surrounding area.

Office of International Programs

oip

The OIP is an umbrella department that oversees various international programs.

Educational Outreach

educationaloutreach

As the university’s presence outside of main campus evolves so does our Web presence. Previously we had separate websites for each extension center, with this redesign we changed that. We brought all areas outside of main campus into a single website.

Institute of Environmental Health Sciences

iehs

A reconstruction of an institute’s online presence. The new site is completely different than the previous and now more appropriately aligns to the institute’s goals.

Office of the President

president

This year the university welcomed a new President, and with any new leadership comes a new website. It was a great time to take a step back and analyze the goals and needs of a presidential website. We started from the ground up and created a website that President M. Roy Wilson can build upon as he shapes the university.

Office of Career Services

careerservices

The Career Services website is a project we took on this year. The new site is now responsive and gets straight to the point, connecting employers with students.

Division of Development

giving

A complete redesign from the previous site to focus on events, news and a responsive design.

Alumni

alumni

We also redesigned the Alumni site from a third party CMS to integrate with the rest of the university systems. The goal was to have the same feel as the Giving website but make sure it still maintained its own identity.

Office of Continuing Education – School of Social Work

socialwork-continuing

We were tasked at redesigning the Social Work Continuing Education website from Joomla into our native CMS.

Faculty Orientation

faculty-oritentation

Each year the University welcomes new faculty, we built a website to get them oriented with the University and Detroit.

Digital Signage

signage

In addition to websites our team also launched a few new digital signage templates around campus. The four highlighted above show the range of things we accomplish with the signs.

The College of Nursing uses their signs during the first week of classes to highlight which rooms their classes are in. The Recreation and Fitness Center uses theirs to highlight current and upcoming fitness classes. We created some full screen quotes by our president, M. Roy Wilson, to rotate through each sign. And finally our Welcome Center has a student sign in system, in partnership with the university’s CRM team, we hooked the sign to the data from that system and now display the waiting queue and wait times for students.

HTML Emails

html-emails

Throughout the year we have expanded our HTML email templates and capabilities. We introduced the ability to have multiple editable areas within a single email. There is no way to display the hundreds of emails we impacted this year but here is a subset:

40 Payment RSVP’s

Total RSVP’s integrated, tested and launched. That’s one for every other week of the year.

6 Live Streaming Events

From commencement ceremonies to guest lectures, we promote, stream events live, and moderate the chat during the event.

664.60 Website Maintenance Hours, 13,410.18 Total Hours Tracked

hours-2

The graph above is just an overview, click for a more detailed inventory of how we spent our time this last year.

Looking to 2014

We have a few sites that didn’t make the cut this year to launch, they just weren’t ready. 2014 is going to be a big year, we are on track to relaunch at least four school/college sites and three major divisions. We will be integrating more sites into the new wayne.edu platform and focusing on data driven UX changes. We also have a few surprises up our sleeves, so stay tuned.

Dec 7 / Nick DeNardis

Web Changelog – Week of December 2, 2013

It’s been a while since I have posted site launches or updates, and I’ve missed it. The primary reason is we have been heads down working on the completely revised version of wayne.edu. This last week I was inspired by ENTP‘s weekly ‘changelog‘ post and decided to try it out a bit. Instead of posting once and a while when major things happen, I’ll post an update each week with the large and small things that have impacted the Wayne State Web.

Next.wayne.edu progress published in Today@Wayne newsletter

It’s no secret that we have been reconstructing wayne.edu from the ground up the last five months, but it has finally reached a point where we are comfortable announcing it for secondary audience feedback.

The first few months were dedicated to discovery, the team focused on mining the data we’ve been collecting over the past ten years on the current site. Then doing passive and active user testing with our primary audience (prospective and enrolling students). We then completely re-engineered our internal development processes and went to work creating a site that would resonate with that primary audience. At this point we were comfortable getting feedback from our secondary and third audiences.

The story in Today@Wayne accomplished just that, hundreds of comments, questions and insights came in this week. With one week until launch, we are prioritizing, tackling and scheduling out this feedback.

nextwayne-todaywayne

 

New WSU Header based on Foundation 5 rolling out

We made an under the hood update to our global header/footer this week. This v5 version works with Foundation 5 and can be built right into the style of a site with SASS. This reduces the number of HTTP requests and ensures the standard look across all our sites. You can see it in production on our Virtual Tour.

fd5-small

fd5-medium

fd5-large

Virtual Tour moved to a new server

Another slightly under the hood update, we moved our Virtual Tour to a new server environment and rebuilt it completely on Foundation 5 with the new global header. It looks almost identical to the old site but it is now responsive, contains 50% less HTTP requests and is 60% smaller in file size.

virtualtour

vt-stats

 

Hosting a Google+ hangout for admitted students on December 12th

Last year we hosted a live discussion about living on campus (#LifeintheD) which was very successful. Next week we’ll be hosting a Google+ Hangout for admitted students. We are calling this chat #AskaWarrior and inviting all prospective students who have been offered admission for any 2014 semesters. The plan is to have staff and students from various areas of campus to answer as many questions as possible.

#AskaWarrior Google+ Hangout

 

Student Service Center Live Chat now live

Another small but important update, we added “Live Chat” to the student service center homepage. The Student Service Center handles all requests for Admissions, Records and Registration, Financial Aid and Student Accounts Receivable. They are already advertising live chat on the undergraduate admissions homepage and as they add capacity to answer real time questions we will be introducing this live chat button across other Web properties where appropriate.

ssc-live-chat

Dec 6 / Nick DeNardis

DetCoffeeCode – Show and Tell @ Barnes and Noble – December 14, 2013

logoAs a member and leader of a handful of Detroit tech groups I can say that the community is second to none. If you’re interested in anything tech related there is surely an event every day of the week to attend.

DetCoffeeCode is one of those  groups, free to attend, and offers a great place to learn and network. Their next meeting is real close to home, right on Wayne State’s campus at Barnes and Noble.

DetCoffeeCode – Show and Tell

The afternoon will start with a networking session. Later, people will be able to show and tell their projects for 2014 to the group. If you don’t have a completed project then cool, show us what you have so far and we’ll help you out. Follow the Meetup event or @detcoffeecode for the updates!

When

Saturday, December 14, 2013
1:00 PM to 

Where

Barnes and Noble
5221 Gullen Mall
Detroit, MI 48202,