Remote Debugging Safari on iOS

Remote debugging finally comes built into Mac OS and iOS 6. All you need is Safari 6 (which is, as the windows version of Safari was discontinued silently, only available on Mac OS) and the afore mentioned iOS 6.

If not done so already you have to turn on the Developer menu in the safari settings.

On the device, go to ‘Settings’ – ‘Safari’ – ‘Advanced’ and turn on ‘Web Inspector’ (which was translated to ‘Webinformationen’ in german).

Once you connect your device thru USB it shows up with it’s name in the Developer menu and you can start debugging sites opened in Safari or chrome-less web apps. This also works with pages opened in the simulator and will make tools like iWebInspector obsolete. However, as it only works on iOS, there is still a gap when it comes to debugging on android devices which, so there is still a place for Adobe Shadow out there.

Update: The ink’s not yet dry on this post as Adobe discontinued Shadow and replaced it with Edge Inspect, which is part of the Creative Cloud and therefore no longer free.

#smashingconf 2012

This is a somewhat different review for the first Smashing Conference. Actually it’s more about my learnings. If you prefer real reviews check out this article by t3n (german) or Brad Frost’s liveblogs on the talks (english). He has done a tremendous job.
For even more reviews and slides check out the lanyard page for Smashing Conference.

Our workflow and our tools are broken

My workflow hasn’t changed much over the last decade. Sure, I made the transition from Windows to Mac OS and I fought at the front when we moved away from table-based layouts. But the way I design (I’m not a designer, but that’s a different story) and build websites is still pretty much the same. And it doesn’t make a real difference on which OS you use Photoshop or if you write <div> or <table> in your favorite editor.

However, this time it’s not just switching tables for divs and font-Tags for inline-styles.

This time, we have to reinvent our workflow from scratch. For as long as the web exists we were used to work for an audience that has a desktop computer. This is definitely over.

Gridsystems

I know, I’m late to the party. But I’ve never been into gridsystems like 960.gs. And every time I see a template that uses one I know why. There are so many classes in the markup that are only there for presentational reasons I’d like to punch someone in the face. I like my markup clean and uncluttered.

But attending Andy Clarks great workshop on responsive webdesign made me rethink this. However, I will not take 960.gs and say ‘Hooray!’. No, I will build my own grid that fits every project best and gridsetapp.com will come in handy. As Andy’s very own page proofs a grid has not to be present in the markup. Andy likes his markup clean and uncluttered, too (Don’t believe me? Buy his book).

RWD

Not designing with a responsive approach in 2012 is like using table-based layouts in 2005. This might sound obvious. Or harsh, especially to those of you who are doing crap as in the screenshot above.

But let’s face the reality:
As you might know I sell cuckoo clocks (and some other stuff) for a living. Most of our customers are everything but tech-savvy.

These numbers reflect the first eight month on three of our stores (both english and german). The cuckoo clocks lead the bunch with 16% mobile usage! And non of our stores is responsive by any means!

Honestly, I should have checked these numbers earlier. Our latest project will launch in a few days and it will not be responsive. Well, lesson learned.

Getting responsive

Designing for a responsive web is however way more than throwing in some media queries to target different viewports. We have to rethink the whole process, we have to talk about typography, color and texture first and layout last. Focus on the mood, as Andy Clarke pointed out. Style guides, as shown by Stephen Hay, can help us to achive this.

But there is even more to responsiveness than that. We have to focus even more on performance (check out my articles in german on this topic). The user is willing to wait five seconds for your website to load and most users expect it to load even faster than on the desktop. They are probably on the go and want the information fast. Performance is invisible and you can’t mock that up in Photoshop.

And they want the thing, as Brad Frost named it. In an e-commerce context this means they don’t want product reviews, similar products and what the last guy, who bought it, ate yesterday. They want the product, the price and the description. Period. You can point him to the other information and then load the stuff conditional if the user really wants to know more about that Falafel.

To wrap this up: In RWD, you have to use your brain first and Photoshop second.

This means a lot of work ahead, especially when I look at the OXID shop system and how it currently handles things (but that’s an other story, too). But we build the world of tomorrow. This is an exiting journey and it’s great to be part of it.