So you are building a responsive design, checking it with your browser, your tablet and phone, everything looks great, then someone shows you the site on their device and elements look jacked up. This happened to me recently with the nav bar specifically on a client site. I had it looking gorgeous on all my devices, and all the clients devices, then saw it on a Galaxy S3, and the nav bar was wrapping the buttons to a second line, leaving one ugly orphaned button, CRAP.
So, a quick search for web based device emulators turned up a kick ass find: The Responsinator
It's a simple premise, enter the url of your site, and see how it looks on MULTIPLE devices on a single page.
- iPhone 3+4 portrait 320 x 480
- iPhone 3+4 landscape 480 x 320
- iPhone 5 portrait 320 x 568
- iPhone 5 landscape 568 x 320
- Crappy Android portrait 240 x 320 (love this description)
- Crappy Android landscape 320 x 240
- Android (Samsung Galaxy) portrait 380 by 685 (equivalent desktop resolution)
- Android (Samsung Galaxy) landscape 685 by 380 (equivalent desktop resolution)
- iPad portrait 768 x 1024
- iPad landscape 1024 x 768
- Kindle portrait 600 x 1024
- Kindle landscape 1024 x 600
Are they missing some devices? Sure, but they've got the most utilized devices, so it's extremely useful.
I am now using The Responsinator for developing all my responsive themes, maybe it will help you too!
If you have any favorite device emulators, or techniques to share please leave it in the comments.
Saw this great article today on sprinklr about how to ensure the images you populate your social profiles with can be optimized to look their best, and hence your profile will look it's best.
Essentially it's a cheat sheet for the major social media platforms so you have less thinking to do and can get your profiles prettified without too much effort, take a look:
Click here to view the whole article.
Mary Meeker has a new State of the Internet slideshow she presented at Stanford on Dec 3rd. It's a great top down overview the trends in user adoption, device adoption and industry disruption. If you are in the startup space, this could be a great read to get you up to speed going into 2013.
From the article:
This update to Meeker's deck has new data, and new slides covering digital payments, education, and healthcare.
Read more: http://www.businessinsider.com/mary-meeker-2012-internet-trends-year-end-update-2012-12?op=1#ixzz2E697RiWe
After a year of pleasant website building for everyone else, I'm finally taking some time to sort this site out. Sorry for the look, it will get better
I'm redesigning the site for a couple reasons: 1. it's been a year or two 2. the old design needed a plugin to look ok on mobile devices. The new design (which you are looking at) is a work in progress, and I made the decision to do the work publicly. Why? Well, being a designer, it can be very hard to take time from projects to work on your own site, so, many designers hem and haw and never get it done. If I develop live, I have an extra motivation to get it done quickly
The new design is based on the Skeleton Theme Framework, which is a free, CSS based, responsive theme. If you click the Home link above, you will see the homepage I am designing now, which features a slider that is also fully responsive.
So, apologies for anything that doesn't look quite right, or text that makes no sense, the site will be right soon. If you are interested in where this design will go, check back now and then, I'll probably post more about the choices I make, and the features I implement.