Mobile

Featured Content

When is a mobile app appropriate?

by Joel Pattison

Building Responsive With Performance in Mind

by Jim Johnson

Making Embedded Videos and Facebook Comments Mobile-Friendly

by Lucy Hutcheson

Zero to Mobile in Three Weeks Flat

This month, I gave a presentation entitled Zero to Mobile in Three Weeks Flat at the annual HighEdWeb conference in Milwaukee, WI. This blog post is a summary of my talk describing our lightning-fast website makeover. In early February 2012, BJU rolled out what we internally called our “Re-introduction” campaign. Not a re-branding in the truest sense of the term (the name of the school didn’t change), but it was a project that re-defined who we are and what we are doing here at BJU. This brought about changes in our slogan, design/photography styles, print media, campus signage, and (obviously) the most important advertising medium for any university, our website. We began working with our talented design team on design drafts for the new website in December 2011, making sure that the site would match their (still-in-progress) revamped style guides. We also started researching responsive web design techniques with the goal of making our website mobile-friendly at least to some degree. To make a long story short, the gauntlet was thrown down by the administration in mid-January when they proposed a roll-out date of mid-February for the entire campaign (including the website) – about 5 weeks. At this point we had not yet commenced development on our nearly 1,000-page site, but were confident that we could deliver providing there were no unforeseen bumps in the road (risky assumption), that we got all content deliverables when we needed them (also risky), that we were able to focus solely on this project, and that we had the option of working overtime if necessary. To make another long story short, that deadline quickly got bumped up by two weeks, leaving us (and the designers and production/printing team) with only three weeks to have everything ready to launch. It was “do or die” time for RWD. (BTW, there was no “if” regarding overtime, only “how much…”) Fast-forward three weeks and our website was ready to go. Three veeerrry looooong 60-hour weeks. The success of our project is attributed to the power of CSS grids. We created our own CSS grid which enabled rapid content creation/overhaul and gave us a great mobile interface for 95% of our site at the same time. Our strategy for rapid mobile site deployment can be summarized in the following five points. 1. Drawing Board Attempting to convert a pre-existing fixed-width website into a fluid responsive/adaptive layout will not be unlike trying to shove a square peg through a round hole. Be aware that going this route will undoubtedly require changes to your site’s structural markup. As they say, things often have to get messier before they can get cleaner. Look at it as an opportunity to start fresh and build a foundation that is future-friendly. 2. Define Page Templates Before you jump in, define up front what your different content templates/layouts will be. For our site, we have a different layout (and therefore, a different set of markup) for our home page, our top-level pages, our degree program pages, our default content pages, etc. Know what these templates are before you start and create them one at a time. 3. Design for Responsive In the same way that you cannot expect to convert a fixed-width website into a responsive layout, you should not expect that you can take any PSD that is designed for a desktop browser and convert that in a great mobile experience. Entire books have been written about the process of designing for “mobile first” – that is, designing your mobile layouts first and then arriving at a desktop solution through progressive enhancement. Whether or not time and know-how enables you to actually design your mobile templates first, it is essential that you know how your content will be arranged and how major site elements will work on mobile before you begin the content creation phase of your project. Mobile is not an afterthought. 4. Delegate Content Creation I recommend that one person be the gatekeeper for the template markup creation. In our office, that’s me. But once the CSS grid is in place and the templates are created, the lion’s share of the work comes in actually converting your old site’s pages into the new format. This will involve a lot of copy/pasting of content and reformatting tags, etc. The great thing about a well-designed CSS grid is that the markup is simple enough that 1) almost anyone can learn how to use it and 2) it actually speeds up content creation by 38.53299% (give or take). I created each of our site’s templates one at a time and then handed them off to the two or three others in my office to handle the import of content. 5. Debug, Debug, Debug… Don’t be fooled. Just because this point comes last doesn’t imply that debugging is something you do at the end of your project once everything is done. Rather, debugging should come at and in-between each step of this process. You will need to “debug” your design with your designers. If you are the designer, you will undoubtedly need to go through many iterations to ensure a quality end-product for your mobile users. You will need to debug your content templates once they are created. Test them on as many devices as you can get your hands on. If you don’t have an actual device lab, there are probably many different devices represented in your office (we had iPads, iPhones, iPods, Androids, and Android tablets in ours). Once the content pages are created/imported, test the test pages again. Then, once the entire site is created… debug again. In our three-week timeframe, we devoted almost the last entire week to user testing, device testing, and debugging. Regardless of how tight your time frame is, there is nothing more unprofessional that launching a bug-riddled end-product. Take sufficient time to ensure quality at every step. Responsive Web Design is probably the biggest paradigm shift on the web in the last decade and therefore requires a change in how we approach what we do as web designers and developers. There is a learning curve, but nothing that is unattainable. For us, the key was a well-designed CSS grid – a rock-solid CSS framework that does all the heavy lifting for us and delivers both clean, semantic markup and a great mobile experience. To see more resources and the slides that accompanied my presentation, please visit my website.

Peter Anglea

Featured Content

Zero to Mobile in Three Weeks Flat

Higher Ed Live – Independent Schools & Social Media

A New Journey

My 2013 Birthday Wish: Random Notes of Kindness

Student Take Over! Goals for 2014

The innovator’s dilemma – Isolating the wayne.edu Web team

Crowdsourcing a photo slideshow for #wmgrad

Planetary Masses

Other Galaxies

Search form

Mobile

Featured Content

Zero to Mobile in Three Weeks Flat

Higher Ed Live – Independent Schools & Social Media

A New Journey

My 2013 Birthday Wish: Random Notes of Kindness

Student Take Over! Goals for 2014

The innovator’s dilemma – Isolating the wayne.edu Web team

Crowdsourcing a photo slideshow for #wmgrad

Planetary Masses

Other Galaxies