Watch out here comes my mobility speech…
I recently wrote this for a customer. Since I need to do these 2-3 times a month I thought I’d put it here. Also thought I’d share in case anyone has input, thinks I’m wrong, or whatever.
There are three approaches to having a site that works well on mobile devices.
- Create a totally separate mobile site similar to http://m.rei.com or http://m.cnn.com. When users go to your site the site detects if it’s a mobile devise and directs them accordingly. These are good if you have a pretty big site with lots of info that you think is too complex for mobile users to use or you have an extremely high percentage of mobile users. It also allows you to present special info to mobile users. For example you could assume that a large percent of mobile users are looking for directions to something so you can be sure that directions info is more prominent. This is a costly option since it’s really a totally separate site with totally separate code. One update to your main site doesn’t mean the mobile updates.
- Create a responsive site similar to what we did on http://www.voyager-industries.com/ or http://www.omscmn.com/ (we didn’t design this just implemented a responsive design). You can see it if you make grab the corner of your browser window and start to make it smaller. At some point the whole layout changes. This option gives you a mobile site of sorts and uses the same files as the normals site. This means if you make an update to your main site it also updates the mobile site. In general the reasons for creating these are similar to the option above. You have the opportunity to prioritize information that you think a mobile user would most want and the info can be presented a little cleaner on mobile devices. To implement this option is slightly cheaper than the first option but not by a ton. The big gain is in the ease of maintenance.
- Just make your site work on mobile devices. Here you just display your full site on mobile devices and make sure it renders properly. By far the cheapest option as no customizations really need to happen. This is what Great has. It’s not a bad way to go. In fact modern phones are more than capable of handling a full screen website. With my phone I typically hit the button that takes me away from the mobile site to the full version.
Again there are reasons to go mobile (option 1 and 2).
- if you want to present special info to mobile users
- If for some reason you have an extremely high percentage of mobile usage. Some would argue that mobile device usage is going up in general and they’d probably be right.
- If you feel your site is complex for a mobile user to successfully navigate it
- It does have a certain cool factor if that helps your org seem more techy or modern.
Let me know if you want some estimates for Option 1 or 2. FYI, I’d suggest option 2 if you want to go mobile with the site.
Burlington Associates
http://burlingtonassociates.com/
So apparently if you deal with a subject like community land trusts you need the website to keep your attention. These guys wanted a fun, out-of-the-box type of solution that involved horizontal scrolling mixed in with this lithograph art style one of the partners is interested in. Oh and they wanted it to be c5’d and reasonably mobile capable.
While it wasn’t built to be mobile first (I could see some sort of optimization down the road maybe), some things needed to be addressed for touch. For one, they wanted scrolling div/iframe type areas on the main home page spread. I tried a whole mess of things and ended up with this DW Scroll Plugin (http://www.dyn-web.com/code/scroll/). I only have the one license, but I think it may be worth getting the developer license for it. It is nicer to customize I think than jsscroll and actually works pretty well in both screen and touch environments.
It does all sorts of jQuery resizing, sidescrolling, hashchange, cycle, fancybox, embedded pdf zaniness too. HTML5 Boilerplate, CSS3 Trannies, Google webfonts, and probably some other things I’m missing. Kind of a weird, but kind of cool site.
Voyager Industries
Site design by Josh, built by Darin.
Features:
- Concrete5
- HTML5 Boilerplate
- CSS3
- Responsive Layout using Media Queries
- News Section using Concrete5’s Composer
- Google Webfonts
Tablet-Only jQuery using Media Queries
The following is how to run javascript that should only be run on tablets. The idea is that you have a div with a width and height of 0. When you are on a tablet, the media query will set the width to 1px. jQuery will then detect the width of the div and do its thing.
To your html add
<div id="device-detect"></div>
Add to your CSS
#device-detect{
height:0;
width:0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1280px){
#device-detect{
width:1px;
}
}
To your scripts add inside $(document).ready(function() {
if($('#device-detect').css('width') == '1px'){
//tablet-only functions here
};
If anyone knows an alternative or better way, let me know.
—
I used this on Palmer Printing to deliver different js to tablets. Below is the full javascript including how I targeted only phones.
if (document.documentElement.clientWidth > 767) { //scripts for tablets and desktops
$(document).ready(function() {
$('#nav-main .nav').superfish({
animation: {
opacity: 'show',
height: 'show'
},
autoArrows: false
});
$('#nav-sup .nav').superfish({
animation: {
opacity: 'show'
},
autoArrows: false
});
//detect if this is a tablet. In the css is a media query that only tablets will recognize, it will set the width of a div to 1px
if($('#device-detect').css('width') == '1px'){
//creates duplicate top level link and adds it to the dropdown
$('#nav-main ul.nav > li > a').each(function(){
var newLink = '<li>' + $(this).clone().wrap("<div />").parent().html() + '</li>';
$(this).next('ul').prepend(newLink);
$(this).attr('href', 'javascript: void(0)');
});
};
});
} else {
//scripts for phones (width under 768px)
$(document).ready(function() {
//disable flash intro on phones (yes I know android can do it, but it breaks the homepage)
$('.home #flash').css('display','none');
//show html homepage
$('.home #non-flash').css({'height':'auto','overflow':'auto'});
//close all dropdowns
$('ul.nav ul').css('display','none').parent('li').addClass('closed');
//creates duplicate top level link and adds it to the dropdown
$('#nav-main ul.nav > li > a').each(function(){
var newLink = '<li>' + $(this).clone().wrap("<div />").parent().html() + '</li>';
$(this).next('ul').prepend(newLink);
$(this).attr('href', 'javascript: void(0)');
});
//controls the toggling of the dropdowns
$('ul.nav > li.closed > a').live('click', function(){
$('ul.nav ul').slideUp('slow').parent('li').removeClass('open').addClass('closed');
$(this).next('ul').slideDown(300).parent('li').removeClass('closed').addClass('open');
return false;
});
$('ul.nav > li.open > a').live('click', function(){
$(this).next('ul').slideUp(300).parent('li').removeClass('open').addClass('closed');
return false;
});
});
};
Mobile Device Detection with jQuery
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
//do something
}
});
Recent Comments