I recently came off my first project where I got to fully implement a responsive design for a desktop to mobile website. I’ve done several in the past where we would do certain things for portrait and landscape or tablet to mobile design. I feel desktop to mobile was defiantly more challenging. The project was a huge success and there was excellent work by all teams, but there were several few “gotcha” moments that almost happened. These weren’t due to lack of attention to detail, but more along the lines of new discoveries. I’m going to outline some things that we executed that helped out greatly and a few other things that caused some headaches.
Keep the layout simple
Look at your site content before you begin to implement a responsive design. Can you present all of your content in one column and it still be relevant? You may want to look into a full mobile implementation if you can’t do this.
The Boston Globe is a great example of appropriate use of a responsive design.
Be careful with date pickers
Ever try to use the jQuery UI date picker on a mobile phone? It’s not fun. You can set the input type of your text box to “date” so that a mobile phone will open the native date picker. However, some desktop browsers support date inputs and we didn’t want double date pickers. I found an article on how to handle HTML5 and the jQuery UI date picker here.
Avoid CSS Clear Fixes
Yeah, I’m guilty of this like crazy. It’s a quick fix, but can be really killer when you need to restructure how the elements align on the front end. Instead of using a clear fix, you can apply an “overflow” with a value of “auto” or “hidden” to the parent wrapper to get the same effect. This is the best article I’ve found explaining CSS floats
Watch your device dimensions
For the longest time phone screen dimensions were 320 by 480. The iPhone 5 and Galaxy S3 have been released and their screen sizes are a little bit different. The iPhone 5 has a size of 320 by 568 and the Galaxy S3 is 360 by 640. Yes, I know their specs say different, but this is if we set their pixel density to 1 instead of 1.5+ (retina). The old methods aren’t reliable anymore. We must remain flexible in the mobile world. I’d recommend portrait going to 479px and landscape going to 767px. This IS stepping on smaller tablet’s toes. The Kindle Fire would pickup our mobile landscape mode. So figure out what will suite your needs best. This is a good example article with some media query snippets to use as a starting point. You will need to tweak for more modern devices, but the logic remains the same.
Keep the background repeatable
See the above note. Fancy background images can be problematic when you try to stretch a background to fit all phone dimensions and look crisp. I recommend solid colors, gradients or an image that repeats horizontally well.
Avoid using img tags
I hope you found this post useful for your next responsive design project. Thanks for reading.