Refresh Road Trip: Keep The Mobile Web Quick & Better Design with Reusable HTML & CSS – July 25, 2013

RSVPWhen: Thursday, July 25, 2013 at 6:30 PM

Where: The Qube 635 Woodward Ave., Detroit, MI

Cost: Free

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/.

RSVP

Dining menu now available everywhere

Besides studying, a favorite activity of college students is eating and our students are no exception. The Housing department approached us a few months ago because they were opening a new dining facility on campus and wanted to promote it.

Gold ‘n’ Greens

The new facility, which was scheduled to open on the first day of Fall semester 2012, had a menu that catered to vegetarian, vegan, kosher and gluten-free diets. The only problem was it didn’t have a name yet. So, as we often do, we looked to our students. We put a poll on Facebook with a few suggestions but left it open for write-in entries. By far, “Gold ‘n’ Greens was the clear winner.

Now that it had a name we had to get the word out about the new facility. After some informal interviews with students it became clear that there was a misconception about campus dining.

  • Perception was that campus dining facilities were only open to students in the resident halls.
  • Didn’t know it was a flat fee all-you-can-eat.
  • Didn’t know there were different breakfast, lunch, and dinner menus.
  • Didn’t know non-residents could purchase a meal plan
  • Didn’t know what was on the menu, so they opted for more familiar eateries.

Didn’t know what was on the menu

The last misconception was by far the most noted, students said they would rather go to McDonald’s, where they knew what there were going to be able to eat than to take a chance on a dining facility. We dug deeper into this and found it was true, the dining facility menus were only listed in two spots. On a static digital sign inside one of the resident halls and as a PDF on the food vendor’s website.

We set out to change this and give this crucial information to anyone who wanted it. We started with creating a database of food items, dates and specials. We worked with Housing and our food vendor to populate the database with as much information as possible: attributes about each dish, nutritional info, food restrictions and a photo if available.

Because we wanted this information as open as possible we exposed it via our API. Now anyone who wants access to the information can integrate it into their site/app/email/etc. Since we are a huge fan of  eating our own dog food, we use that same API to populate student areas around campus.

On the Housing website

Of course we had to get the information out of PDF format and allow students to see the menu from day-to-day, and not just a “schedule” of what is available. The above screenshot is from the Housing & Residential Life website. It allows a student to pick their facility and see the entire menu for the day.

On campus digital signage

Students may not be at a desk, but instead walking through campus between classes or sitting in a study area. We utilized the digital signage around campus to promote the facilities and their menus. The screenshot above gives a clear overview of what is available at one of the dining facilities right now.

On our mobile website/app

Lastly, students who may not be near a sign or computer can now log on to m.wayne.edu or our mobile app and get a concise list of the dining facilities and their menus. This option at the moment is the least fancy but gets right to the point and displays the menu items to the student as quickly as possible. It will also be the first to be expanded with supplemental information in the near future.

Open data

Because we are committed to making any information available that could potentially help students and the university as a whole, our data is your data. If you’re interested in getting API access, currently available by request only, to use this information on your website/app, just let us know.

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.


Flipboard app for iPhone = Social Media Swiss Army knife

FlipboardFirst, I want to say that I’ve have been using the Flipboard app for the iPad for some time now and love it. I was anticipating Flipboard coming to the iPhone and was very excited when it launched in early December of 2011. I have been using it exclusively for a month and must say it meets all my expectations of an “all in one” social media feeder.

Some of the social media apps and online tools it integrates with are: Facebook, Twitter, Flickr, Instagram, Google Reader (RSS), LinkedIn and Tumblr.  It’s very intuitive to use with your thumb, flipping through all my connected accounts, with easy export options to share any article your perusing, to your own social accounts.

The nice thing Flipboard does is bring a visual aspect to your social media channels. For instance on Twitter, it not only brings in the tweet, but the image, webpage or video that it is associated with so you can visually scan what the tweet is about.  I also love that it brings in my google reader feed or any blog exclusively, with a quick search.

What Flipboard isn’t for: This isn’t a business tool for someone that has 10 twitter accounts and wants to do mass sending, scheduling and searching for keywords. Although you can tweet, post to Facebook, Tumblr and LinkedIn from within Flipboard, which is a nice feature for the personal user like me.

If you haven’t downloaded it on your IOS device yet, I highly recommend you do so. It’s a timesaver, beautifully made and its free! Check it out: http://flipboard.com/

Mobile device usage

Inspired by Mike Nolan’s post over on the Edge Hill University Web Services blog I decided to give everyone an insight into the mobile device usage for wayne.edu.

Mobile devices for the past month

Now this is just for wayne.edu and not all the sub sites under it so the numbers are deceiving. Also, this is for the last 30 days, May 15-June 14, 2010. In addition, these numbers are a little low because less students are on campus for the summer semester. But this may give us better insight into how our site is being accessed from off campus.

As you can see the iPhone has most of the mobile traffic with Android trailing close behind. If you combine the iPhone and iPod usage it accounts for over 53 percent of all mobile web traffic. That’s a lot and for that fact alone it is where we are focusing our mobile web initiatives.

Mobile access trends for the past eight months

(view more detailed trends)

Mobile access is growing fast and it doesn’t look like it will stop. We don’t want to just make sure our web content is accessible from these devices but we also want to deliver our content in context. For example, if you are viewing this blog from a mobile device the formatting is completely changed to enhance your reading and navigation experience.

Over the next few months we will be posting more about our mobile initiatives for wayne.edu and other areas of the Wayne State web.

Disclaimer: The graphs and data are straight from Google Analyics they don’t include any of our external mobile tracking.

Tweaks to the global header and footer

Yesterday we made some changes to the global header. The header looks almost identical, all the changes were under the hood. I have been meaning to make these changes for some time now. Luckily I used this week’s independent study time to get it accomplished. More about that later.

From an on screen perspective the header is now 5px shorter and 960px wide (our new standard) instead of 900. The code was simplified to reduce space and be more descriptive. Last but not least it now works fully in all A-grade browsers and IE all the way back to 5.5. I have also outlined a few other benefits below.

Better Print Support

At some point the print style for the global header just simply disappeared. Not sure what happened but it was just gone. This newest update fixes that. The print header is now black and white with our wordmark and Aim Higher fully readable on top of each page. The top tab doesn’t print and the bottom border is where it is suppose to be.

The only thing that changed in the footer was the removal of the copyright policy link and no longer underlining Wayne State University.

Better Mobile Support

Something completely left out of the old header was support for mobile or “handheld” style rendering. It doesn’t do any mobile detection just yet but any device that does pick up the handheld style will now get a header like the one on the right above.

Using Opera’s small screen rendering you can see a simulation of how it looks on a mobile device. The old header (left) doesn’t accomodate for the small width and forces the user to scroll left/right. The new version (right) linearizes the page, makes the skip links visible and the tab links are now visible by scrolling down.

Fewer HTTP Requests

We reduced the number of HTTP requests that it takes to build the header from 10 to just 5. We did this by creating a sprite of all the images that make up the header. We did have to add two new “real” images though for the wordmark and aim higher to print in black and white. Having fewer HTTP requests will allow the header to load faster on devices with higher latency and makes rendering quite a bit faster. Yahoo has a great explanation about the importance of fewer HTTP requests. As you can see from the graphs above although we increased the file size size overall (just a little) the total rendering time was reduced by almost half.

More technical graphs with the comparison: old header | new header

Using a Sprite

Above is the sprite we used to create the header. A List Apart has a great article explaining sprites. This single image is used to create all the background and styled images that make up the header. It just needs to load and position it in the right spot and the browser does the rest of the work.

Skip to Navigation and Content

Recently testing our site with a screen reader we found our skip links were not functioning correctly. WebAIM had a great article about making the skip links available to people using keyboard navigation so we decided to give it a shot. Above you will see what any of our sites look like if you press the “Tab” key to navigate your way through the page. The “Skip to Navigation” link will come up first, then the “Skip to Content” will show. Basically when the links have :focus they become visible, otherwise they are hidden.

Legacy Code

We tried to support as many legacy situations as possible and fix any issues before hand. But unfortunately we came up with two situations after the fact that we could not account for. The first was users who replicated the main header code but hotlinked to our style sheet. These sites will see an odd shaped header till they update their code. The second is customized headers, some sites used our original code but with overrides in their local css to change the header style. These sites will all be broken till the individual site administrators update their code, there is nothing we can do about custom overrides.

Using the New Header/Footer

If we don’t handle your web site and you want to use the new header/footer you can right away. The code and instrcutions can be found at: http://wcs.wayne.edu/style/

Additional Issues

If you happen to see a site that is looking funky with the new header please take a screen shot and send it to wcs@wayne.edu and we’ll look into it.