Designing for Responsive? You need this!

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.

Screen Shot 2012-12-22 at 12.28.27 PM

Devices include:

  • 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.

Posted in Uncategorized | Leave a comment

Managing Social Profiles? Optimize your images!

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:

Screen Shot 2012-12-18 at 10.42.50 AM

Click here to view the whole article.

Posted in Uncategorized | Leave a comment

state of internet 2012

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

Posted in Uncategorized | Leave a comment

updates coming soon

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 ;)

Posted in Uncategorized | Leave a comment

TKHamilton is under construction – enjoy the work :)

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.

 

Posted in Uncategorized | Tagged , , , | Leave a comment