Guru’s next release, slated for beta in early October, marks the start of a new beginning for the company – responsive design. I would be lying if I said I wasn’t nervous to be working on the marketing material for the release that plays up the to-be responsive-ness. While the simple HTML mock-ups, which pull in no data, may look beautiful across multiple devices, how this will evolve from backend development into testing and go-live is still a mystery to me. Our small team has planned out the user experience of breakpoints, responsive images and even dealt with the most important part, speed, to prepare for the release. I decided to take it upon myself to focus on how to transition our design team’s beautifully designed HTML mockups into a beautiful responsive design on the live site.

Test on Devices

I had my first official conversation about the plan to test across multiple devices at work last month. With responsive being a new addition to our process, it’s important there is a plan of attack on device testing. I started poking around asking questions to people on the team. My first conversation left me a bit defeated. One sentence, in particular, stood out:

…there are these plugins for Chrome which can change browser size to the device specific values.

Ahhh! No, please, no! Testing on a Chrome plugin that will resize your desktop browser is not an okay substitute for testing a large scale responsive website. Keep those tools handy for the beginning of the project when you are trying to mess around with breakpoints and set up a foundation and design. Under no circumstance will a resize tool work in place of using actual devices. Sure, we aren’t going to be able to test on every device out there. However, testing on some of the actual devices most commonly used will allow you to see some of the things that resizing that browser window of yours won’t show… things like elements skipping and jumping around on the screen.

iOS Devices

Inspecting elements on iPad and iPhone is extremely easy. I hope this inspires you designers out there to get your designs looking good on all kinds of devices. In order to do this, you’ll need your iPad or iPhone device (obvi), an Apple computer (sorry PC users) with Safari and the USB cord that connects your device to your computer. Let’s dig in.

  1. First, go to Settings > Safari and check ‘Enable Web Inspector’, shown below: iPad Web Inspector
  2. Open up Safari on your device and go to the page you want to inspect. I am going to our homepage.
  3. Plug your ipad/iphone into your computer and open up Safari on your desktop.
  4. Go to Develop > Your iPad/iPhone Device > the tab you want to inspect. Inspect Element iPad
  5. Inspect away! It’s that easy.

Android Devices

As per usual, things aren’t quite as easy when you aren’t on an Apple. Never fear, they are still simple, we just need to install the ADB Chrome extension on our development machine. My research shows this method is only good for Chrome 28 and above. If you don’t have an up to date browser, you may require more steps. We’ll need our Android device, Apple computer, Chrome 28+ on the dev computer with the ADB Chrome extension installed and a USB cord. From my research, inspect element only works on Chrome 28 and above without some more difficult steps. Here goes…

  1. Once you have installed the ADB Chrome extension, connect your device to your beautiful Apple machine with a USB cable.
  2. You will most likely get a message asking if you want to allow USB debugging. Check ‘Always allow’ to avoid annoying repeated messages and then click Okay.
  3. On your Android device, launch Chrome. Open Settings > Developer Tools (under Advanced) > Check ‘Enable USB Web debugging’. Chrome Inspect Element
  4. In Chrome on our shiny Apple, you will see a little Android icon on the right of the url bar. Click it and check start ABD. When you aren’t using this to test, you can turn it off.
  5. Once this is on and your device is plugged in, click the icon which will be lit up to green with a 1 next to it for your plugged in device. Select ‘View Inspection Targets’. This will bring up a new tab with a list of your open tabs. Next to the tab you want to work with. Click ‘Inspect’ and your Developer Tools window will open.

That’s it. Happy inspecting! 🙂