Guru’s next release, slated for beta in early Octo­ber, marks the start of a new begin­ning for the com­pany — respon­sive design. I would be lying if I said I wasn’t ner­vous to be work­ing on the mar­ket­ing mate­r­ial for the release that plays up the to-be responsive-ness. While the sim­ple HTML mock-ups, which pull in no data, may look beau­ti­ful across mul­ti­ple devices, how this will evolve from back­end devel­op­ment into test­ing and go-live is still a mys­tery to me. Our small team has planned out the user expe­ri­ence of break­points, respon­sive images and even dealt with the most impor­tant part, speed, to pre­pare for the release. I decided to take it upon myself to focus on how to tran­si­tion our design team’s beau­ti­fully designed HTML mock­ups into a beau­ti­ful respon­sive design on the live site.

Test on Devices

I had my first offi­cial con­ver­sa­tion about the plan to test across mul­ti­ple devices at work last month. With respon­sive being a new addi­tion to our process, it’s impor­tant there is a plan of attack on device test­ing. I started pok­ing around ask­ing ques­tions to peo­ple on the team. My first con­ver­sa­tion left me a bit defeated. One sen­tence, in par­tic­u­lar, stood out:

…there are these plu­g­ins for Chrome which can change browser size to the device spe­cific values.

Ahhh! No, please, no! Test­ing on a Chrome plu­gin that will resize your desk­top browser is not an okay sub­sti­tute for test­ing a large scale respon­sive web­site. Keep those tools handy for the begin­ning of the project when you are try­ing to mess around with break­points and set up a foun­da­tion and design. Under no cir­cum­stance 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. How­ever, test­ing on some of the actual devices most com­monly used will allow you to see some of the things that resiz­ing that browser win­dow of yours won’t show… things like ele­ments skip­ping and jump­ing around on the screen.

iOS Devices

Inspect­ing ele­ments on iPad and iPhone is extremely easy. I hope this inspires you design­ers out there to get your designs look­ing good on all kinds of devices. In order to do this, you’ll need your iPad or iPhone device (obvi), an Apple com­puter (sorry PC users) with Safari and the USB cord that con­nects your device to your com­puter. Let’s dig in.

  1. First, go to Set­tings > Safari and check ‘Enable Web Inspec­tor’, 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 com­puter 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 sim­ple, we just need to install the ADB Chrome exten­sion on our devel­op­ment 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 com­puter, Chrome 28+ on the dev com­puter with the ADB Chrome exten­sion installed and a USB cord. From my research, inspect ele­ment only works on Chrome 28 and above with­out some more dif­fi­cult steps. Here goes…

  1. Once you have installed the ADB Chrome exten­sion, con­nect your device to your beau­ti­ful Apple machine with a USB cable.
  2. You will most likely get a mes­sage ask­ing if you want to allow USB debug­ging. Check ‘Always allow’ to avoid annoy­ing repeated mes­sages and then click Okay.
  3. On your Android device, launch Chrome. Open Set­tings > Devel­oper Tools (under Advanced) > Check ‘Enable USB Web debugging’. Chrome Inspect Element
  4. In Chrome on our shiny Apple, you will see a lit­tle 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 Inspec­tion Tar­gets’. 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 Devel­oper Tools win­dow will open.

That’s it. Happy inspecting! 🙂