They are a mix of designers and engineers and run Hannon Hill CMS.
29k students. Most majors in social sciences. They are experiencing an increase in engineering due to recent chancellor addition.
The recognized problem is that lots of slices and pockets on campus leads to issues in customization.
Smartphones were a game changer for them and in 2007 caused them to re-examine the website.
Legacy systems are a huge problem in integrating web content to mobile.
iOS was their first effort at mobile and picked a vendor (Terribly Clever) to make a native mobile app.
Android and tablets led to a need to improve app or expand reach to other devices.
Rather than develop native apps app they chose to give app like experiences via browsers.
Titanium is the app they used to move the mobile framework (developed by UCLA) to many environments. The mobile framework is mostly front end via HTML and CSS.
Eventually individual departments on campus were interested in having mobile versions (Library, for example.)
His data showed that in 2009 22 screen resolutions accessed content
By 2012, 523 different screen resolutions had.
Ethan Marcotte wrote a book on responsive web design. A Book Apart, Responsive Web Design
Decorators were employed to be responsive so that any developer on campus would have tools in their “kitchen sink” to make responsive web applications.
Maps responsive? Tough. Good reason to stick with mobile framework over responsive design.
Key takeaway: Use responsive design for the default and use the mobile framework when responsive doesn’t make sense (like in the maps) but keep the UX visually consistent between the two.
The first thing to examine is to retrofit or not to retrofit? Pro? Reduces approval workflow, devs familiar with code, little or no change to UX.
cons? No mobile first design. Elements may not be down scalable. Frameworks cannot be used (HTML5, Twitter Bootstrap, Foundation3 etc…)
Create new design pros? Framework, elements faster bandwidth and speed
Cons? New design buy in and devs must learn new code.
Make sure the design works in many resolutions. Responsive vs adaptive design. Fixed width is adaptive, responsive is fluid and hits fixed break points.
There is no longer any such thing as above the fold. Just pare down your content.
In development make sure your design and development teams are sitting next to each other and have good lines of constant communication during ideation.
Trouble points? Tables are a problem, images (high res but you can optimize performance by having images be device aware and put the burden on the server side. IE8 and below…
Posted with Blogsy
2 replies on “Mobile is so 2011. Make all your campus sites & apps look great on any device.”
[…] Live Blog […]
I like the notion of paring down your content at a certain point. This would be so very helpful and offer an inexpensive solution. Perhaps valuable info would come out of it as well, researching what is most important information to your users.