We used Foundation when we first started exploring responsive design in 2012 for these reasons:

The grid was easy to use and understand

Fast scaffolding for wireframes

Included many Javascript packages out of the box that we found useful (accordion, offcanvas, sticky header)

Ongoing support of bug fixes and new major versions

The framework didn’t have an opinionated style like Bootstrap

Why did we move away from Foundation?

The biggest drive for us to switch to a different framework was how hard it was for us to upgrade from even minor versions of the framework. It’s not a knock on Foundation as we consider it a wonderful framework. The custom CSS/JS we wrote on top of everything played a large role in making the upgrade a difficult task. The slightest changes to their default CSS or javascript components made it extremely time-consuming for us to realign base to accommodate for those changes. A related issue is the cascading part of CSS. While it’s extremely useful, it’s also a large hindrance to the maintenance of a project long term. Adam Wathan wrote a really good blog post explaining this very issue.

What did we move to?

Tailwind CSS. The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.

What it allowed us to change

Once we switched over to Tailwind CSS it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:

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.

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.

In previous years we had three full stack developers who were responsible for the entire programming of a site from the database data binding to the performance and accessibility of the user experience. It became pretty clear last year that doing everything was spreading them thin and we weren’t able to accomplish the fine grain optimization we were used to. So we decided to split the developers into front-end and full stack roles. The full stack developers still had knowledge of the front-end but their primary focus was university tools and optimizing the data in and out of our API. The front-end roles can spend their time optimizing every pixel that the end user interacts with.

Welcome Jenny Ingles

After months of searching we have found Jenny Ingles, our new front-end developer. Jenny comes to us from St. Louis and has extensive background working with HTML, SASS, Javascript, and Illustration. She has brought a fresh eye to how we structure our code, approach problems, and testing. Since she has started to get involved with projects our code has not been more semantic, page weight has decreased, and the user experience is the quickest yet.

It has taken me a few months to make this announcement on our blog and in the meantime you have probably been browsing her work and not even realizing it. Recently she worked on the front-end of the following projects:

Pivotal Moments

For her first project, a website that was already architected and designed, she was thrown in with a pretty PSD and told to make it work. Not only did she break it down technically but also worked very closely with the client at every step to educate on expectations, opportunities that the Web as a medium brings, and responsive implications. What came out of all that was an implementation that was not only within budget but also looks and performs beautifully. Browse around the Pivotal Moments website and see for yourself.

College of Fine, Performing and Communications Arts

Jenny got her feet wet with our workflow, process, and structure using our YeomanFoundation 5 site generator (not public yet). With this she was able to add some new features to the site. The homepage of the College of Fine, Performing and Communications Arts features some uniquely positioned areas with semantic HTML, parallax scrolling and CSS 3.

The Baroudeur

In the same line with the CFPCA website, Jenny built upon her knowledge to not only include parallax scrolling but also responsive background video. Although the background video didn’t make it into the first launch of the website, we hope to find a video in the future that meets everyone’s needs.

Student Service Center wait times

In addition to full scale website builds, Jenny also has been working on the little big details that make the user experience a little more enjoyable. For the Student Service Center she added visual elements to highlight the important information at a glance. In addition, the tabbed view for hours brings the relevant information into initial view and secondary information a click away without scrolling or a refresh. Below that, the frequently asked questions are now within an accordion so they are easy to scan and quick to jump between. An improvement that didn’t revolutionize the page, but made a useful page more of a joy to use.

Art & Art History (upcoming)

Although it isn’t live yet (hopefully soon and I will update this post when it does launch): the Art & Art History department website. Another soup to nuts website that Jenny was involved with that really shows off the attention to detail. This site was build on our Yeoman site generator (which means it is a standard starting point for all future sites) and lazy loads hidden images/content, changes design naturally at different breakpoints, and utilizes icon fonts as much as possible. It also features something I have yet to talk about, progressive enhanced page loading with YouTube’s SPF JS. This is something we have been playing around with for a bit and this site shows off how we have nicely adapted it to our Web experience. We can’t wait to show you the final website, which should be available shortly at http://art.wayne.edu/.

Just a few short weeks

This is just a snapshot of what we’ve done in the last few weeks. We don’t believe we’d be where we’re at without Jenny. Let’s give her a warm welcome! We can’t wait to see what she’s able to accomplish in the next few months.

Speed by Design – Keep The Mobile Web Quick

As attention spans are heading towards zero and more and more of the population is constantly on-the-go, optimizing your mobile websites to load quickly and efficiently can make an enormous difference in visitor engagement, and most importantly, your bottom-line. Designing for performance should be a top-priority in keeping your visitors happy and allowing them do what they need to do quickly.

You’ll learn a few techniques on how to keep your mobile websites lean and loading quickly, how page speed is actually a component of good UX, how to test and benchmark under various network conditions, and how slow loading times can turn away visitors and potential paying customers.

About Jon Buda

Jon Buda is web developer who loves to design, or a designer who loves to code – depending on the day. He enjoys solving problems holistically, thinking about back-end, front-end, and design all as equally important parts in crafting great experiences. He helps to organize Refresh Chicago and is currently working with Table XI.

Front End Legos – Better Design with Reusable HTML & CSS

There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code with others should be a joyful experience, not absolute terror.

In this session, Shay will cover some best practices and performance tips for writing the highest quality HTML and CSS possible, and how it benefits your design. Writing code is the easy part, finding a modular practice and structure that works well across the board is the hard part. Shay will outline HTML and CSS conventions that can be applied to your everyday practice today.

About Shay Howe

As a designer and front end developer, Shay Howe has a passion for solving problems while building creative and intuitive applications. Shay specializes in product design and interface development, specialties in which he regularly writes and speaks about. Additionally, Shay helps co-organize Chicago Camps, Refresh Chicago, and UX Happy Hour. You can catch up with him on Twitter as @shayhowe or on his website at http://shayhowe.com/.

C&IT recently launched a new dashboard for applicants to check their admission status. It allows them to see at a glance what they applied for, the items they completed and what they still have outstanding. I will post more about the actual dashboard later.

This morning I was presented with their default login page to bring into the Wayne State look and feel. I have included the before (left) and after (right) screenshots below.

Key Changes

WSU header and footer were added to maintain consistency with the rest of the sites.

Colors were changed to match WSU colors

Layout completely changed to emphasize the login form

Expanded instructions were all moved to the right with image indicators

Page now validates and is ADA compliant

Overall the goal of the page is to get the student logged in and on their way as quickly as possible. Having clear visual cues and help instructions are key to making the page successful. I also added the phone number so they could talk to someone right away if they have questions.

Archives

Archives

The opinions expressed in this blog are solely those of the individuals posting them and do not necessarily represent the views of Wayne State University, its administration, faculty, staff or students. The University is not responsible for the accuracy of blog content and accepts no liability for such material.