Since everybody is getting new smartphones except me, I need to add high-resolution images to the sites I design – but until now, I couldn’t see what they looked like on a high-resolution device without borrowing somebody’s phone. We use media queries to serve larger images to retina devices, and zooming my browser won’t trigger these media queries.
But there is a way to simulate a retina display on a Firefox browser.
- Go to “about:config”
- Find “layout.css.devPixelsPerPx
- Change it to your desired ratio (1 for normal, 2 for retina, etc.)
When I run these tests, the pages get so big it’s hard to use Firefox for anything else, but I can quickly tell which images will work on retina (the crisp ones) and which images need to be swapped out (the blurry ones).
I learned another retina solution from Monty Dickerson: use larger images that have half the quality (Photoshop 50) but four times the pixels (100 x 100 instead of 50 x 50). It’s counter-intuitive, but they aren’t much heavier than traditionally-sized images, yet look much better, even on normal monitors.
(This article also posted on GoMobile!)
Over the next year our group plans to rebuild both the university main web site and the mobile web site. One of the discussions that came up was whether to detect the user’s device on both sites and route mobile devices hitting www.tamu.edu to the mobile site and desktop users hitting m.tamu.edu to the full site. Based on the behavior that I have seen on many university sites this is a discussion that takes place throughout higher ed. Many get it wrong. The answer, of course, is an emphatic NO!
For the philosophic reasoning, let me first go back to what I consider the central truism of our job. Visitors come to our sites for a reason, which is to find a particular bit of information. People no longer “browse” sites, following links from one to another to see what is there, like we did back in the early days of the internet. They want to find out something, and it is our job to help them find it quickly and easily. Any interruption or delay in this process represents a bad user experience, and we know from dozens of studies that dissatisfied users will leave and not come back.
Redirects are a perfect example of such an interruption. We as developers have been trapped by the proverbial box. We see that users come to the site from a particular device so we cleverly think that we should “make it easier for them” by redirecting them to where they “really” wanted to go. But is our assumption of where they want to go valid? Probably not. Most university mobile sites are not simply the mobile version of the full site. They are instead designed to feature content that is useful mainly to people on campus who are themselves on-the-go. Two years ago that would have described what most people with a mobile device would be looking for. Today, though, the majority are causal users who expect to be able to see all of the content of the sites they are visiting…which is to say the responsive view of the full site. Redirecting mobile devices from the full site to the mobile site, then, is today more likely to give them the wrong information than helping them find what they were looking for.
Our team discussion went further than this, with one side advocating redirecting devices to the mobile site even if the full site is responsive. The problem with this method is that it fails to see the paradigm shift that has taken place in the last couple of years. It argues that if you use a mobile device you should get the mobile site (i.e. the site designed for on-the-go users) and that if you really wanted the full site you can link back to it. That is a dangerous assumption because it not only fails to take into account the intent of the user but actually mis-identifies their intent and points them to the wrong location.
From a pragmatic standpoint we should avoid redirects because their time is simply over. Responsive design has answered the question of how content should best be served to a mobile device. Two or three years ago it might have been understandable to redirect a mobile device to a mobile site since the full site probably was not mobile friendly. Today there is no excuse for the full version not to be responsive. That, then, should be what people on mobile devices are allowed to see.
What about the case of redirecting desktop users? When many mobile sites today detect a desktop user they redirect them to a special landing page telling about how the site was built, what features are included, and (maybe) a link to actually view the site content. Why? When we visit a site we want to read its contents, not learn about the framework that created it. We don’t build special pages on our full sites telling how we built it, and mobile sites shouldn’t be any different. If somebody visits a mobile website from a desktop browser, send them straight to the site content.
A quick glance at our mobile site’s analytics shows that many on-campus staff regularly use the mobile site in their day-to-day jobs from their office desktops. They have very similar needs to on-the-go users and prefer going to the mobile web site to get all of that information in one place rather than going to a dozen different full sites to get it all. In this way we get them the information they were looking for quickly and easily. If we had instigated a redirect on the site they probably would have turned away on their first visit, never came back, and therefore never gained the benefit of using the mobile site.
In summation… leave the user’s choice of where they are going up to them. When we as developers start assuming that we know better than the user what they themselves are looking for we are generally going to be wrong, and in turn create a bad user experience and a frustrated user.
The Go Mobile website has been improved to help Texas A&M University meet mobile web demands.
- New Resource Center blog for learning mobile web best practices
- Mobile-ready web templates that are university brand compliant
The Resource Center blog (http://gomobile.tamu.edu/resource-center) allows users to comment and engage with authors about their posts. Authors are members of the university’s Mobile Team, which is tasked with guiding the campus strategy to maximize mobile’s potential (http://gomobile.tamu.edu/about).
The responsive web design templates are available at the Go Mobile Resource Center by selecting the Downloads icon. Responsive websites automatically rearrange content based on the visitor’s screen size, allowing one website to work on smartphones, tablets, and laptop and desktop computers.
To help remove barriers to engaging key audiences and become a higher education leader in mobile implementation, the team’s focus is facilitating mobile-friendly websites for colleges and academic departments. View the Go Mobile progress report for this objective at http://gomobile.tamu.edu/texas-am-mobile-strategy#tab_tab4.
The Mobile Team will be scheduling new outreach and training events. Join the GOMOBILE-L Listserv to receive updates (http://gomobile.tamu.edu/join-the-listserv).
Send questions or comments to Allison Oslund (email@example.com), Texas A&M Information Technology assistant director and Mobile Team leader.
PRESENTATION FEBRUARY 28
On February 28 at 3:30 in GSC 101A, join the Texas A&M Mobile Team for a presentation on implementing a mobile-friendly website. This follow up to January’s Go Mobile presentation will provide more in-depth technical information for web developers and designers. Buster Neece, Division of Student Affairs, will be the presenter. A panel of Mobile Technical Team members will be available to answer questions on going mobile.
I am happy to let you know that the TAMUmobile phone apps have been updated to fix a long-standing bug in the Courses section. The iOS version is online in the Apple Store now; the Android version has been submitted and should be available soon.
This update is part of a general maintenance project that is aimed at improving the app’s performance by fixing the way in which content is delivered to the app. Right now many pieces of the app (and the mobile web site for that matter) are broken or potentially showing incorrect information because the data that we receive is out of date, incorrect, and/or unreadable. We are therefore working with all of the content providers to fix this situation so that we are publishing the latest and most reliable information possible.
Marketing & Communications has launched a new version of both our iPhone and Andriod phone apps. They are available from the Apple Store and Google Play respectively. The iPhone app features the latest additions to Blackboard’s lineup of apps. The biggest addition is their new Augmented Reality. This app will let you point your phone at a location on campus and receive information about that location. Right now the amount of information available is somewhat limited, but we plan to flesh that out this fall by merging this view with our upcoming campus virtual tour. Also in the release will be a link to the mobile version of Howdy, an expansion of the directory to also include colleges and departments, and updated courses information.
The Android app is a complete remake of the original app. Rather than simply being a wrapper around the university’s mobile website, it will be a true native application programmed directly for the phone. It will include all of the standard features of the iPhone distribution, but unfortunately without autmented reality. We will be including that feature as soon as the vendor ports it onto the Android platform.
These releases will be a prelude to a complete overhaul of the mobile website. We intend to begin that project in mid-Fall. The current site was among the first university mobile web sites in the country, and it is starting to show its age. We will look at refreshing both the display and the content behind it. We will share more about the process as we begin working on the project.
Many of us from around campus had the opportunity to drive over to Austin this week and attend An Event Apart. This was a conference I had always wanted to attend but never had the budget for. I can only say “Thank You!” to the event organizers who brought it in-state for us because it was a wonderful experience. There are few other opportunities to listen to and learn from so many of the people who shape our career field. Anybody, whether developer or designer, who didn’t get a chance to go should consider it next time they come to town.
The one common thread that found its way into almost all of the individual presentations was the emergence of responsive web design and the possibility that it might revolutionize the way we think about the design-development process. Much of this argument is actually over a decade old, being espoused in April, 2000 in John Allsopp’s A Dao of Web Design (which was itself referenced several times by different speakers.)
We have improved on many of the elements pointed out in this manifesto, but we still ultimately have not gotten beyond designing for the web as if it were just an extension of the print world. We drew a box to correspond to monitor size, and proceeded to dump stuff into it. As technology advanced and we got better monitors with higher resolution we just drew a bigger box and dumped more stuff into it. The introduction of the iPhone, with its smaller screen, had the potential to spark this revolution, but we largely reverted to form, drew a smaller box this time, and put (less) stuff in it…or worse, pulled out some of the stuff we were displaying in our bigger screens.
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.”
The proliferation of devices is pushing us toward a more mature understanding of the web medium — one that embraces rather than bemoans the loss of pixel by pixel control. The web’s flexibility of display is a feature, not a bug. We can’t know the capabilities of the device(s) that our users will viewing our content with, so we must ultimately give up the idea of creating site designs that are based on the capabilities or limitations of specific devices. We need to (like we have already separated layout from code using CSS) separate design from layout, and instead let the content determine how the information gets displayed on any device.
The various presentations each expressed some element of the overall argument. Some focused on typography, others on CSS, and others on the design process. New tools were presented (styletil.es showed up 3 or 4 that I can remember, perhaps more) that help us transition to a device-agnostic design process. I can’t say that I agreed with everything that the each of speakers said, but the overall experience has definitely been a stimulus to think harder about how we do things here in the office.
Wednesday was a full day responsive design workshop. I didn’t attend, but am anxiously waiting to hear back from some of those who did to see how it turned out.
Anyone who did attend and would like to add your own insights, please take a few moments and leave a comment and share with the rest of the community.
Quick announcement for anybody who is not on any of the mailing lists that received our general announcement…
The Mobile Strategy Team has been meeting for about the last six months to nail down some recommendations, resources, and best practices for producing mobile web sites. As part of this process we created the
gomobile.tamu.edu web site, which is now live. It provides a central resource of recommendations and best practices to help you overcome the challenges of delivering a mobile-friendly online presence.
- Anyone considering the development of a mobile version of your site should take a look at the site and read through the recommendations.
- Anyone not considering the development of a mobile version of your site should take a look at the site and see why you should be.
The Mobile Strategy Team, with representation from across campus, spoke at a recent IT Forum. To view the presentation, visit: http://itforum.tamu.edu/IT_Forum_Archive/June_6__2012.php
A few weeks ago I was in a meeting where we were discussing how to make websites viewable on mobile devices. Since we had already started incorporating responsive design into the last few sites that we have released I mentioned those as examples. After listening to the list, one of my colleagues asked if the university emergency site had been done as well. I had to admit that it was not, and after looking at it on my phone I also had to concede that it was not terribly mobile-friendly either.
While incorporating mobile views into our sites is an ongoing process — we are adding it to new site designs, not retrofitting old sites to it for the sake of being responsive — that really isn’t a good excuse when talking about the emergency site. By its very nature that is one site that should be easily viewable on any device.
I therefore asked Rebecca to look over the page code and add the appropriate style sheet changes to make it mobile friendly. This was a great first project for her, as it let her start with a small project, learn the concepts of responsive design, and see it through to fruition quickly. We didn’t completely rewrite the page in order to include the “mobile first” concept, but the site code was simple enough that overwriting the default in order to create the mobile view wasn’t a big deal.
So I am pleased to announce both that Rebecca has completed her first project and is becoming an important member of our team, and that the university emergency site is now mobile friendly.
I think everybody in our industry pretty much knows the speed at which smart phones and tablet devices are being adopted by the public, and even becoming users’ first choice of how to browse the web. We have seen waves of new technology before, but the speed at which these devices are being adopted is something we have never seen before. By nature, higher ed is slow to react, and this is no exception. Many of us realize that something needs to be done to meet this new demand, but the decentralized nature of campus web development has left us without a uniform strategy. Marcomm, along with TAMU IT, the library, and a few others across campus, are working to change that.
When discussing mobile web delivery, there are three basic areas that need to be covered — native web apps, mobile web sites, and traditional web sites made mobily accessible.
We’re all familiar with native apps. We go to the Apple Store or Andriod Market and download them all the time. Whether it is games like Angry Birds or an information suite like TAMUMobile, these are self-contained programs written specifically for each device platform.
Apple has done an outstanding marketing job and made these things a ubiquitous part of everyday life. Everyone now assumes “there’s an app for that” and that in order to be hip, cool, and sexy you have to provide your mobile information on an app. When talking to departments across campus we see this ingrained response quite often…the first (and often only) thing they want to talk about is app development.
When looking at a campus mobile strategy, though, we need to step back a bit and look at how each piece fits into the overall offering. So, who really needs a native app, and when do they need one? To be honest, most organizations on campus probably don’t need one. The expense of building and maintaining separate apps doesn’t make sense for most departments. More importantly, though, most campus units just don’t have content that belongs in an app. Apps should be limited to application content rather than flat text-based content, and ideally should be something that requires the processing power or other capabilities of the device hardware itself (camera, GPS, etc.) While exceptions certainly exist, most of this type of content will be of wide enough use that it would be better to include within the university level TAMUMobile app suite.
Mobile websites are those which are specifically build for a mobile audience. These people have different content needs from those visiting normal websites. You must therefore not just design for a device that has different capabilities, you must design for a completely different user. The mobile user has different needs and expectations from a desktop user, give them the content they need. The user IS mobile, not just HOLDING one.
The legitimate case for a mobile website is probably far easier to make than for a native application. These websites might be web applications themselves, but will not rely on special hardware needs of the device. They will instead be features of content that users who are on-the-go are looking for. They are a perfect alternative, then, to a phone app when it comes to providing basic information through text content. It would be targeted information, though, and would probably be more focused and contain less that would your full web site.
Because of the nature of these websites, they will tend to be high profile and central to the business of the university. In order to maintain a common branding effort to all of these sites, a central mobile team is looking at providing a mobile framework that will work cross-platform and allow you wrap the content from your choice of development tools with a common university mobile style. Details will be released to the campus community once the process gets a little further along.
Making your Website Mobile
Making your website mobile is not the same thing as making a mobile website. While a mobile website features audience-specific text and organization, the mobile view of your traditional website focuses instead on simply making your full content easily viewable on a mobile device. Mobile websites are audience driven, mobile views are device driven. We do this through reactive, or adaptive design.
It many ways it would have perhaps been better to start with this topic because it is the one section that everyone really should implement. Given the proliferation of mobile devices, it is now becoming imperative that your content is viewable on them. We would not any longer dream of making a website that couldn’t be viewed on a Mac or on a particular browser. We should now think of mobile devices as being in that same category. We really should not be producing new websites that are not viewable and easily usable on mobile devices.
This development is relatively simple now, whether through the use of simple CSS media selectors or full blown frameworks like Foundation. A Google search will produce more articles and documentation than I can review. At Marcomm we have begun adopting this philosophy for all of our own websites, starting with the main university site. We are still experimenting with the techniques we want to use, but we are fully committed to the process.
I understand that many of us on campus want to jump on the mobile bandwagon, and all of us should be involved to some extent. It makes sense, though, to add mobile as an element of your overall web strategy rather than trying to shoe-horn your content into the mobile arena. If none of your web content is mobily accessible, the first thing you should do is start looking at how you can redesign your current website to include mobile friendly views. This works better when the design is incorporated from the ground up, but old sites can be retrofitted with the proper use of media queries in your style sheets. Also look and see if you have content that should be presented on a separate mobile website. Again, this should only be done when you are trying to reach a particular audience with is also mobile, but it is a great way of connecting your users quickly to the content that they need. Finally, if your content is something of campus-wide interest or which requires the use of device hardware, consider a native phone app. Marcomm, TAMU IT, and others across campus are moving together in this direction. Look for more information from each of us in the upcoming weeks.