We’ve seen how you can add custom touch icons for iPhone/iPad use (if you need more information have a look at Mathias Bynens excellent article on this topic) but did you know that you can add custom start-up images (aka splash screens)? Well you can and it’s very easy, just prepare your images (for various resolutions, retina displays etc, that’s the tough part) and use the below markup to include them. A very easy way to polish your web app and impress your mobile/tablet visitors.
Well you’ve just finished your glorious responsive web design, using all the latest trends and best practices, like mobile first, HTML5 semantics, progressive enhancement and many more. You’ve also tested it to various desktop, tablet and mobile browsers and indeed it looks great, but you’re absolutely sure that something is missing, and you are right…
Am I missing something here?
Well it is very possible that you are. You might need to implement/adjust a couple of things to achieve perfection before you start working on your new masterpiece. But let’s start at the beginning. We all know that we need to apply 3 main principles in order to take web design to the next level and make it Responsive Web Design (RWD). These principles are the fluid grid, media queries and flexible media. But why take it to the next level anyway? Why make it responsive?
Because, according to wikipedia, you want with a single web site to provide an optimal viewing experience across a wide range of devices, from desktop computer monitors to mobile phones.
But you’ve already done that and you’ve done it right. That’s the exact point were most people stop and start working on their new masterpiece and that’s where you’ll continue and stand out from the crowd. Most believe that their jobs done, when visually everything looks great. But what about the rest of it? Below I’m sure you’ll find out some valuable tips in order to really polish your responsive web design, and I’m not talking about the visual part.
Adapt to touch devices (fingers !== mouse pointer)
Well the first and easiest addition you can make is to ensure that the User Interface (UI) is working properly on touch devices, and when I say working, I mean working superbly. Are the navigation and call to action links large enough to be pressed or do they need more padding? What about the drop-down menus, are they usable or do they feel and behave very strangely on touch devices? Do the form elements have the appropriate input types in order to bring the appropriate virtual keyboard on the devices? I expect you hate it as much as I do it when forms elements don’t display the correct keyboard layout. What about your image sliders/carousels, tabs and accordions, do they respond to touch events? What about the tooltips and all the other mouse over effects you have? They aren’t so useful in the “touch” world right? (basically there is no mouse-over in the “touch” world). What about modals? Are they useful enough just like on the desktop version or do they just make the experience worse?
As you can see many traditional weapons of our web design arsenal don’t really work (some of them don’t work at all) on touch devices out of the box. But don’t worry, if your web site is well structured and built, it won’t be so hard to tackle all these new challenges. In most cases all you need is some HTML5 attributes, like the new input types and attributes, some basic CSS rules and most of the above issues are history! But since you’ve already started, don’t stop here. Try to fully adapt to this new “touch” world.
You can‘t get there from here
As you’ve already noticed, these touch libraries and a bit of your magic will resolve most of your remaining problems, and tackle the touch interactions on image sliders/carousels, tabs and accordions etc. These small details are reletevly easy to implement, but believe me, they make a huge difference! Remember to make everything more “finger” friendly and try to avoid UI functionality that doesn’t really work on touch devices and you’ll be just fine. In any case, check and recheck your responsive web site to as many devices you can and try to tackle every piece of functionality that doesn’t seems smooth enough. When your done, there is more…
Don’t stop there
So you’ve fixed all the above issues and you’ve provided touch alternative events to all your mouse events. You’ve even implemented your responsive navigation pattern of choice. I’m sure you’re already proud of that, but since you’ve started, don’t stop there… Touch devices such as cell phones can do more than simply rendering. They can call a phone number or even send sms!
See the Pen Call or text from a mobile device using very simple markup by John Tsevdos (@tsevdos) on CodePen
They can even capture images or video using plain HTML forms! The below code will work on most mobile/tablet browsers on Windows Mobile, iOS and Android devices. Why not take advantage of it.
Always pair responsive design with a feature detection and adaptation strategy
A huge mistake I’m running into over and over again online, is that an average site is not rewarding modern browser users and in most cases it actually punishes them! How? The answer is simple and reasonable in some cases, old browser support. The good news is that you can still use most of these technologies by providing reasonable fall-backs for older browsers, you don’t have a good excuse not to do it. With libraries like modernizr you can very easily reward the modern browser (aka mobile browsers) users, whilst at the same time providing reasonable fall-back functionality for older browsers. There is nothing wrong with that, after all you can’t build the next big thing if you don’t “stand on the shoulders of giants” (Isaac Newton knew it). So next time you want to use an image grandient think twice before serving an image in all browsers just for compatibility purposes. Be nice to modern browsers and help them use that bandwidth for more elegant purposes. Client-side feature detection is here to stay and we must adapt to develop sites that way if we really want to take the web forward.
Speaking of rewards, why not take advantage of the latest cool client-side storage solutions like IndexedDB, Web SQL or Local Storage. The majority of modern browsers support the above standards, but have you actually used one? Well, just start using them! Brian’s LeRoux lawnchair is a brilliant project for using client-side storage that provides excellent fall-back support for everyone!
Finally, use the HTML5 geolocation API. It’s super easy to use it, you can easily provide fallback support and is extremely convenient on touch devices (where form submission sucks).
As you might have discovered here, a “ready” responsive web design is sometimes not as ready as we expected. Hundreds of times I’ve encounter responsive web designs that looked great on my phone or tablet, but they didn’t behave/perform so well. They didn’t feel so mobile… Hopefully this post can be a great reminder next time you’re about to hand over a responsive web design. After all, you don’t want to destroy your visitors’ high expectations, right? In most cases the polishing is easy to implement and fortunately there are many tools out there that can help us in this task. Remember, aesthetics are good, but sometimes helping a phone/tablet user to fill a form (aka converting) or complete a admin task is more important… It’s as simple and as hard as that.
The above article was based on the latest presentation I gave (with the same title). You can find the slides below.
At my latest presentation (at upNorth web conferce in Greece), people were impressed with some very trivial markup that can add many points to your mobile site (and not only) with minimum effort. With the below very easy to implement markup you can make your site interact with the device in order to make phone calls and/or send sms (I only tested it with iPhone but I believe its working on other devices as well)!
See the Pen Call or text from a mobile device using very simple markup by John Tsevdos (@tsevdos) on CodePen
The above enhancements, together with a custom iOS home screen icon/image, are probably the easiest markup implementations that give to your mobile site/app many more extra points! If you’ve tested the above example with other devices (android, windows, blackberry, etc.) please confirm that it’s working (just leave a comment)…
One of the things I really hate when I surf from a tablet/phone browser (usually my iPad/iPhone) is filling in forms. I know, the lack of a physical keyboard sucks big time, but it’s not just that. Most web developers out there don’t give the appropriate attention when they develop web forms, and the combination of both these things can literally destroy the good will of a user who’s trying to fill in the form. The use of some very basic attributes can change the above situation dramatically. You don’t believe me? Well have a look…
One of the most important and easy fixes is to provide the correct keyboard layout. Well that’s super easy, just use the appropriate HTML5 input type. You’ll make many tablet/mobile users happier!
Autocorrect and AutoCapitalize
OK, let’s admit it, autocorrect is a cool feature when writing an e-mail, but it’s probably the worst one when you try to write your username (and iOS is correcting it over and over again). The exact same issue is caused with the autocapitalization. Well, nothing to worry about. Just use the below attributes to turn on and off the features from the elements you want. Now you’re in control of things 😉
Please try not to be lazy when you build forms, you might save a tablet/phone user’s time and sanity!
The above markup works fine on Android devices as well (and probably on Windows Phones), although I only test them on iOS iPhone/iPad devices…
If you already have an iPhone, iPad or any other iOS-based device, you have definitely seen the strange bookmarking Safari option “Add to home screen“. The specific option creates an application like bookmark to your iOS screen for quicker browsing.
Clever idea and it works great, but if the site you’ve just bookmarked doesn’t have a custom iOS icon, iOS adds a poor quality screenshot of the site for icon! But don’t worry the solutions to this problem are super easy.
Just create a 57 x 57 pixels PNG (for iPhone, or 114 x 114 for iPhone 4 or 72 x 72 for iPad) with your custom icon, name it apple-touch-icon.png and put it into the root directory of your site. That’s it! You don’t even have to worry about the rounded corners of the PNG image, since iOS is clever enough to add them for you! The final URL of your icon must be something like http://www.yoursite.com/apple-touch-icon.png. If you want to supprt all iOS devices a 114 x 114 will do the job, although iPhone classic and iPad will scale it down.
Now if you don’t have access to the root directory of the site (no way!), or simply you don’t want to mess things up there, you have an alternative. Just put it wherever you like (maybe into the images/icons folder), and point to it with the below markup:
<link rel="apple-touch-icon" href="/images/mycustomiphoneicon.png" />Check out this Pen!
The above code must be placed in the
head section of our document and it must have a
link relation (
rel) with the value “apple-touch-icon“, that’s the only two requirements. As you noticed we can name our PNG file as we want. Finally, yes we can use absolute paths as well, or even load our icon from other domains!
<link rel="apple-touch-icon" href="http://www.othersite.com/images/mycustomiphoneicon.png" />Check out this Pen!