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

Redesign: Division of Development & Alumni Affairs websites

Last week we launched the redesigned Division of Development & Alumni Affairs websites. These sites allowed us to accomplish some firsts that we’ve been working toward for some time.

The overall goal of the redesigns was to bring both into a similar look, feel and functionality. Previously, both websites were managed separately, in different content management systems and servers. They were not able to share content and the Alumni website didn’t utilize university resources. We set out to change all that and more.

Division of Development

giving-old-home giving-new-home

Over time the needs for the Development website had changed and we needed to refocus the homepage and the content within the site. The first thing that we changed from the old (left) to the new (right) was the centerpiece focus. We brought the stories that were buried and put them up top, front and center. These stories are what change the heart and mind of alumni and donors. The homepage highlights a handful of stories but we built a full donor stories archive where all will be available long term.

We then pulled the news and events up, but also created a clear left column for calls to action. This simple homepage gives the visitor an overview of what is going on while at the same not being overwhelming.

Alumni

alumni-old-homealumni-new-home

The Alumni website is actually two websites, the front facing homepage and a separate members-only community. The focus of our project was to reconstruct the front-facing site while giving a small facelift to the community. Keeping with the same overall feel of the Development website we kept the homepage simple. Alumni engagement events are highlights in the main centerpiece area, three main calls to action are highlighted in the middle and below a list of news, events and longer standing promotions.

The largest change though to the Alumni website was the information architecture. Between the time we started the project and finished, the university changed from a dues-based alumni model to a free one. This change had us and the Alumni staff re-thinking the purpose of every page on the site. It resulted in far fewer pages but the ones that remain are very focused.

Mobile and other firsts

giving-new-mobilegiving-new-child

I made an announcement a few months ago about only launching responsive websites from here on out and we are committed to that. This site started far before that announcement and was the first start we tailored to mobile from the ground up. The wireframes, designs and everything for this website started and continued in the browser environment instead of isolated in Photoshop. The end result is a very usable site on mobile, tablet and desktop, and we learned a lot along the way.

The first thing we tackled is how to handle multiple tier navigation without overwhelming or underwhelming the user. I’ve talked a lot in the past about how 60 percent or more of site visitors enter on an interior page and how to design the best experience around that. Those visitors need to orient themselves quickly with where they are on the site and where they can go from there. We wanted to keep the same approach we take with desktop websites, allow the user to get a sense of where they are at a glance and identify the local navigation quickly. We came up with a simple solution: on a small screen show the breadcrumbs of where a user is on the site, show the most local menu expanded up top, and give the visitor a “Menu” button to expand the full top menu. See an example, above, of the small screen (left) vs. full desktop version of the same page (right).

In addition to the mobile-first responsive design, these two websites are the first to feature a new global Wayne State University header that is also responsive. I will probably do a full post on it once it’s officially released. We are still working through a few specific browser quirks. But overall we were able to reduce the HTML, CSS, and image footprint of it by about 60 percent of the previous header. It only includes a single image, utilizes the same icon font that is used on the pages themselves and is fully responsive.

Lessons learned

Because our redesign projects typically span 9-12 months from initial meeting to launch, that leaves a lot to happen in the Web world. This website is no exception, over that span of time the CSS framework we used, Foundation, for the wireframes and the resulting design, updated from version 3 to 4 and changed completely (for the better) the way it handles HTML and CSS. By the time that happened we couldn’t go back and redo everything. The biggest lesson we learned from this was we have to be nimble when it comes to locking ourselves into a single framework.

ie8-usage-giving

The biggest lesson we learned though was about browser support. Most all of the newest Web technologies are supported fully only in the newest browsers. This isn’t a problem for most (95 percent+) of our external website visitors. But the world of higher education is filled with large enterprise systems that our campus relies on every day. Unfortunately those systems are slow to update and support those most recent browsers and thus there are a larger portion of computers on campus running older versions of browsers (read Internet Explorer 8). Recently a rash of Web technologies have begun to drop IE8 support, the Development and Alumni websites were not immune to that speed bump. So we had to put in an uncomfortable amount of small bug fixes and ended up relying on respond.js to bandaid the situation until we see IE8 visitors drop off enough. I’m hoping to have an official announcement soon about what are browser support will be long term.

View the sites: http://giving.wayne.edu/ and http://alumni.wayne.edu/

We’re Hiring: Full Time 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 with Shaun’s recent leave we are in need. Our department started seven 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.

The job

We take the Web seriously. The position at hand is responsible for a third of all the code that gets published to the public Web server. This ranges from core back-end API functionality to front-end HTML, Javascript and accessibility. 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 now 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
  • PHP Simpl Framework
  • jQuery
  • Load balanced dev/prod environments
  • 450+ websites using centralized tools
  • SVN

Official duties

  • Translate functional requirements into Web applications
  • Centralize and maintain existing code bases
  • Prepare test plans for Web Applications
  • Design database schemas and develop database scripts in SQL
  • Serve as primary resource for units university-wide regarding the code and appearance of unit Web pages. Administer and provide training in content management tools, control access, review sites for adherence and conformity to code and design standards and resolve related problems.
  • 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.

Qualifications

  • HTML + CSS: Mastery of responsive cross browser CSS and HTML. Extra points for RESS.
  • JavaScript: Proven understanding of Javascript fundamentals, plus experience working with AJAX
  • PHP + MySQL: Experience building data-driven web applications using PHP and MySQL. Solid understanding of relational databases required.
  • Experience working with Web Services and associated languages: REST, XML, JSON, etc.
  • Good knowledge of web standards and trends
  • Ability to learn and thirst for knowledge
  • Test/Behavior Driven Development experience is a definite plus
  • Graduation from an accredited college or university or an equivalent combination of education and/or experience. Major concentration in computer science preferred.
  • Excellent writing, editing and communication skills.
  • Ability to establish and maintain effective working relationships with units university wide.

How to Apply

Please do not send resumes directly to me. Apply at jobs.wayne.edu. Posting #039042

Help bring a two-day responsive Web design workshop to Detroit!

Build Responsively

Responsive Web Design

“Responsive design” is a subset of a larger concept which is called “Adaptive design”. When talking about responsive we refer to the layout only (Ethan Marcotte, fluid grids, flexible images & media queries). (source)

What is @brworkshop?

Build responsively is a moving workshop that focuses on Responsive Web Design. The talks start with the basics and go on to the advanced. A wrap up of the Cincinnati is online with the presenter slides if you’re interested.

This is a great opportunity to show the impact of the Web community in Detroit. Our city is going up against Pittsburgh, Chicago, Nashville, and others. Take just one minute to show your love and support for Detroit and RWD.

All it takes is a click and a tweet.


Future of Web Design – Responsive Web Design

I just recently went to Future of Web Design (FOWD)  in New York City for an amazing web conference. Besides the amazing speakers, friendly atmosphere and cool city life, the conference had a reoccurring theme: Responsive Web Design.

Now “Responsive Web Design” is by no means a new concept, but it has speedily becoming a web design standard.

Here are the basic premises behind the idea to achieve Responsive Web Design:

  • Design must be flexible to the users behavior and environment
  • Use flexible grids and layouts
  • Use flexible images that will adjust to each view
  • Use smart CSS media queries to adjust to the users resolution size
  • Just one URL, no more, m.mobilesite.com


Food Sense Example

Responsive Web Design - Foodsense

This is a great example of Responsive Web Design – http://foodsense.is/.
To see this in action open the link on a desktop browser and slowly drag the browser window size smaller. You will see the layout elements adjust on the page to the new width.

Other great of examples of Responsive Web Design:
http://thinkvitamin.com/
http://bostonglobe.com
http://earthhour.fr/

As web design and development evolves into the future, with multiple devices such as smaller laptops, tablets and smartphones, Responsive Web Design seems to be the best solution for the moment.  We can no longer just design for a couple of devices, we must accept that the amount of devices and resolutions are going up dramatically. I will leave you with one of my favorite quotes from the conference:

“If its not responsive design, its not web design” – Andy Clarke


Good Resources on this topic:
http://www.abookapart.com/products/responsive-web-design
http://www.alistapart.com/articles/responsive-web-design/