I made my first baby steps into building fully responsive sites last year, when I was re-doing my site.
Before I started, I was mulling over the options of making the navigation as accessible and usable as possible for mobile users. It was the time when the technique of hiding the menu behind a line icon became more and more the go-to solution. But something irked me about this. It just didn't feel quite right. It was as if we were assuming that users knew what the icon meant and what it does. Debating the effectiveness, usability and when this technique is a good (or the best) approach is a different story for another day.
All I knew was that I wanted to take a leaf out of the book of native apps and use a solution that they were using very effectively:
Box Of Chocolates
I felt that this was one of the cleanest and most user-friendly mobile navigation solutions out there. I couldn't understand why it wasn't being shouted from the roof-tops.
That was until I dove into the subject and discovered that support for 'position: fixed' is atrocious across mobiles.
Never in my wildest dreams did I imagine that such a basic CSS feature would not be fully supported. The web is like a box of chocolates.
But before I could cry into my pillow for too long, I saw that support picked up and it was working well in newer OS. So, following the progressive enhancement approach, I was determined to implement the bottom-fixed menu for systems that could handle it. Older ones would get the default inline navigation in the header.
Detecting the OS
Since
position: fixed works well in iOS 5+ and Android 3+, I use this snippet of JavaScript below my Modernizr script, which is called in the head:
var ua = navigator.userAgent;
// iOS 5+
if( /(iPhone|iPod)/i.test(ua) ) {
if(/OS [2-4]_\d(_\d)? like Mac OS X/i.test(ua)) {
// iOS 2-4
} else if(/CPU like Mac OS X/i.test(ua)) {
// iOS 1
} else {
document.getElementsByTagName('html')[0].className += 'positionfixed';
}
}
// Android 3+
if( ua.indexOf("Android") >= 0 )
{
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if (androidversion >= 3)
{
document.getElementsByTagName('html')[0].className += 'positionfixed';
}
}
User-agent string sniffing isn't a great idea most of the time and it usually doesn't sit right with me. But for this I am willing to make an exception.
This script looks into the past and determines if an old iOS or Android version is in use. If it is not, we (currently) know that the feature is supported.
Of course, there is always the chance that iOS or Android suddenly drop support again in the future. Then I shall curse, raise my fists and cross that bridge when it comes to it.
A Little Bit of CSS
Based on the above, I use this bit of CSS to fix the menu to the bottom of the screen on devices which have a width of less than 36em:
@media only screen and (max-device-width: 36em) {
.positionfixed nav {
position: fixed;
bottom: 0;
z-index: 999;
}
}
The Result
This approach is not perfect, but nothing hardly ever is around these web parts. For now, I am happy using this to give that little bit of extra to users whose devices can handle it.