Technology

Rss

Putting our home page on a diet, RESS-style

Our homepage (and our entire website) has been responsive since February 2012 (read more about that here). In addition, we've cranked out a small handful of mini-sites and affiliated websites using RWD practices. For us, the next logical step was to implement RESS (Responsive + Server Side). Inspired by some ideas we gleaned from the 2012 HighEdWeb conference, I set about to trim some of the fat out of our website with particular attention given to the home page. Here’s a rundown of the improvements. User-agent detection We are now using the ua-parser PHP library to check incoming devices. For now, the only thing that we’re interested in is whether the device is a mobile phone or not. Tablets and desktops are getting the same experience for the most part, and we’ve singled out smart phones for a few bandwidth-saving modifications. Adaptive Banners This modification applies to all devices 760px wide and below. Rather than deliver the same 960×365 banner image (100-150KB) to all devices, the page will deliver either a 760px-wide copy or a 480px-wide copy for devices whose resolutions fall under those breakpoints. At the smallest size, the banners are now 30Kb apiece – about 100Kb lighter! Multiply that by 5 or 6 banner images which occupy our home page at any given time and that’s some serious savings. Only the most recent news and media We also cut out a few calls and several more Kbs by only showing the two most recent news entries and the two most recent photo galleries/videos. We aren’t likely to add more than one or two items in either category in any given week, so there is no fear of items rapidly dropping off the home page. Much more spring (fall?) cleaning Cut out extraneous markup that’s not needed for mobile devices. Combined and minified javascript files and removed ones we didn’t need/weren’t using any more Video/Photo thumbnails that were previously generated as PNGs (still not sure why) are now JPEGs. Key PNGs were compressed with tinypng.org. Affiliate site banners at the bottom of the home page replaced with text links for mobile devices. Not exactly a bandwidth-saving modification, but the source order of the home page was re-arranged to allow news, events, and media to be at the top, pushing our slogan (“Why Choose BJU”) column to the bottom. It’s an important part of our messaging, but it doesn’t deserve placement that high on the page for mobile devices. The Final Weigh-in Before these modifications, our homepage weighed an embarrassing 1.9MB (approx 65-70 requests) with little difference between desktop and mobile devices. Implementing these changes has resulted in faster load times, less bandwidth, and fewer requests on both mobile devices and desktops. Here’s how our website stacks up now (currently with 6 rotating banners) Mobile devices: 560KB, 44 requests - over 3x smaller! Desktops: 1.38MB, 61 requests
6/19/2013

Oh, Behave!

After each presentation, I take a little bit of time to look at the tweets that have come across during my talk. I want to see what resonates with people, what they have questions and concerns about. I think it helps with future presentations. Sorting thro
6/16/2013

Community Relations at the University of Virginia

Hi Everyone, As I mentioned I’m not going to be posting on here as often as I’d like to but I’d like to provide a bit of an update. I’m currently working as a Community Relations Intern in the Office of University Communications at
More posts on Technology »