Thoughts on Design

Links on Testing and Tooling from Edge Conference

I just watched the panel on Testing and Tools for front-end web development, from the 2013 Edge Conference, and there’s some really juicy links in there to sink your teeth into. Here are most of them, though I may have missed a few.

• csste.st
  From the site itself “This site collects the current techniques and tools available for CSS testing to provide both a simple starting point and a general reference for future development.”
• Fighting Layout Bugs
  This one looks like a pretty good tool for testing layout issues (such as text butting up against elements, all automagically.
• Travis CI
  Paraphrased from the about page: “Travis CI is a hosted continuous integration service for the open source community. It is integrated with GitHub and offers first class support for [all the languages!!]”
• Telemetry
  Automated performance testing for the client-side aspects of your project. Won’t verify “correctness”, but rather provide performance benchmarks and assessments. It requires a checkout of the hefty Chromium code base (about 5gb, but might be worth it for your needs).
• Endure
  A nifty toolkit for automated endurance testing - basically, this tool will help you analyse how well your app or site holds up over repeated use.
• Remote Preview
  Wow how the heck did I miss this? A wicked-sweet tool for previewing websites (local or hosted) on a huge array of devices. browsers, OSes. Definitely a worthy addition to your utility belt.
• Mixture.io Currently in preview and development, but looks like a pretty good collection of front-end development tools. Paul talks about the cross-device testing capabilities in his intro, but there seems to be much more to Mixture than that. I’ll be keeping an eye on this one!
• DeviceAnywhere Test remotely on real devices, simulates touch events and gestures, and looks like a good suite for cross-device testing. They appear to offer a free plan alongside their premium packages.
• Google Tracing Framework It’s kind of a tease to be linking or mentioning this because it’s not available for public consumption yet, but since it was in the presentation it’s going in this list. It appears to be a pretty comprehensive set of testing tools to track performance, regressions, and other stuff. Another one I’ll be keeping an eye on.
• Aaand then of course, there’s the Chrome Dev Tools (awww yisssss!). I have to link to this section of the video, because Paul shows some pretty sweet stuff here.

PhantomCSS
Uses PhantomJS, ImageDiff.js and ImageMagick (which David talks about using in the BBC testing and integration process). Along the same lines, Needle appears to provide similar functionality, testing screenshots of your site against a set of known “good” screenshots.

Simon Stewart (creator of Selenium) talks about a few testing tools such as Selenium WebDriver API, which is now in the process of being standardised, as well as iOS and device solutions, Appium from SauceLabs, and Francois Reynaud’s iOS Driver. These tools can help you automate the testing of your your site, testing functionality as a user might use it.

From a package management perspective, Paul points to a few tools that we can use to keep our packages up to date. The now-defunct Ender.js gets a mention, and gives way to perhaps more robust solutions such as Twitter’s Bower, a nifty boilerplate/package-management-combo called Volo.js, and of course there’s always npm which you can mash together with Browserify for a client-side package management solution.

And finally, when you need to test out varying network conditions, there are a couple of tools you can employ. The first is Charles Proxy, which can simulate a bunch of different network conditions (packet loss, throttled bandwidth, etc)., and there is the Network Link Conditioner for Xcode in Apple OSX (Lion or greater). This can be found in System Preferences. If anyone has a decent docs link or write-up on this, I’d love to put it up.

Of course, if there’s anything I missed, or you have a link to add to this, gimme a shout on twitter or some other place.

Inappropriate Burgers

ingredients

• 250gm beef mince
• 250gm pork mince
• 125gm bacon, finely diced
• 1/2 cup celery, finely diced
• 1/2 cup breadcrumbs
• 1 tbsp ground fennel
• 1/2 tbsp ground cumin
• 1 tsp ground nutmeg
• 1 tbsp maple syrup
• 1 tbsp Worcestershire sauce
• 1 tbsp bourbon
• freshly ground salt and pepper

Method

Add the ingredients to your fanciest bowl, in order of the number of times mentioned in literary classics.

Insert hands into the mixture and use them to act out the opening scene of Hamlet. Make sure you really capture the mystery and urgency, as it will help the meat to develop depth and character.

Form into rissoles, each roughly the size of an unreasonable-sized handful of a stranger’s beer nuts.

Group the rissoles into awkward couples*, and leave. Your house. Return only when their conversations have turned to cat memes for the third time.

Turn on your grill/BBQ and blues music to full volume. If your neighbours and smoke detector aren’t complaining, apply more effort.

Place the burgers on the hot things arrogant-side-down, and cook until the top side seems jealous of the bottom side. Flip.

Pour 1 shot of bourbon for every burger-pair, and spill between them (or over them, if you’re cooking over open flame) “accidentally”, apologising insincerely.

the burgers are done when you start reminiscing about the last episode of The Wire.

* If there is an uneven number of rissoles, take the most sociable one with you and tell it your most amazing stories.

What I’m learning about responsive design (pt. 1)

1. Let the computers do the lifting. Preprocessors make this stuff much easier - they’re pretty much essential. SASS, LESS, Stylus, doesn’t matter too much, just pick your flavour and create some tasty designs! Mixins, variables and extends (if you use SASS) let you think about the design rather than the ugly maths behind it. I’ll be putting up my set of mixins and functions soon, but in the meantime check out Compass for SASS.
2. Sweat the small stuff. Think of your design in terms of atoms of content (product thumbnail, product title, action button), rather than blocks of content (product). This makes it easier to identify and handle which pieces of content are necessary at each context, at a really granular level.
3. Play it LOOSE. The fewer grouping containers you have (eg. div.wrapper) the easier it will be to restyle and reflow your content. Ideally, you will only group content that logically belongs together (eg. RRP, Sale Price, Discount are all logically related)
4. Where is my hoverboard? When you use a touch device, your basic instinct is to explore through touch; hovering usually isn’t an option. This doesn’t mean DO NOT USE HOVER EVER, it just means use it appropriately. Use  Modernizr to detect touch-capable devices, add a class to your body or html element (I use .no-touch), and only create hover functionality on that class. When you DO use hover, make sure that you have a no-hover alternative.
5. Content markup order matters. Your users probably care more about content and navigation (sometimes in that order) than they do about your Facebook page, so let them download the good stuff first, and use CSS to position it later. display: table-header-group or table-footer-group can come in really handy when you want to shift something from where it is to the top or bottom (respectively) of their container.

What I’m quickly finding is that designing responsively rewards habits and best practices that, really, we should have been implementing all along. It’s all about thinking of the user in context (their environment, their intent), and tailoring your design to that. 

The right work environment

This morning I read a tweet linking to an article, interestingly titled Is Remote Work Bad for Introverts?. The article was written as a response to this article, about the benefits of remote work. The tweet caught my interest as I consider myself to be an introvert, and because I have recently started working from home on a regular basis. This touches on a few things I’ve been thinking about recently, so I thought it was a good time to put those thoughts to pixel.

[Edit] TL;DR - Not everybody needs constant human interaction. Working remotely is more productive in my experience. It makes me better at making social connections.

I work for an e-commerce company that operates out of an office in inner-city Melbourne. The people are friendly and accommodating, there’s a coffee machine that I can use for free, and the internet connection is relatively quick (except at lunch time) and reliable. If I’m up for a short walk, there is more than a handful of good cafes and lunch spots from which to sample, and a supermarket for the days I want a cheap lunch. Sometimes the kitchen is a bit of a mess, but that’s not too big of a deal.

The real issue is noise: it’s a two-fold problem (literal noise vs figurative noise), and it’s one that I think is actually inherent to sharing an office space with other people.

Our small business consists of the IT team, our office is also shared by our various teams: Customer Service, Product Merchandising, Finance, and our (slightly loud-voiced) Management team. Additionally, we share the office space with another small online business with similar facilities (and a slightly-louder manager with a penchant for loud-speaker :P). With phones ringing non-stop and conversations all around, it can sometimes be a bit difficult to concentrate.

Aside from the actual noise, there’s also the standard mental noise that comes with working in a shared workspace - I feel this is more insiduous, as I can’t just throw on a pair of headphones to stop it. For one thing, there’s the constant stream of email - our business’s main method of communication, delegation and meeting management. Every email notification I receive is a bump in my concentration.

More than this, I’ve found that by just being in the office, I’m more likely to receive trivial tasks than if I work remotely - via email, but also face-to-face which is more problematic. When I’m approached for a conversation about a task - regardless of importance or urgency - I have to stop what I’m doing, listen to the problem description, assess urgency/importance, then find a way to appease my workmate or stakeholder. This causes a huge gap in my concentration on the task at hand, and can sometimes take a long time to recover from.

And then there is my pet hate - when email and face-to-face distractions combine to form the ugly baby that is the “let’s discuss this” email, immediately followed by a face-to-face. These usually come from the busiest people in the office, so I understand the brevity and lack of detail, but they often force me to not only stop work on the current task, but completely switch mindsets to active research and interview mode - where I am leading a discussion in order to get as much information as possible about a task. Once this happens, it’s almost guaranteed that the task I left will remain untouched for the next hour or so.

Working remotely allows me to avoid a lot of the noise and distractions when necessary. I can either take my work to a local cafe, a coworking space, or the comfort of my own home, and Get.Shit.Done. Emails still come through, but because I’m not in view of my peers, I’m not expected to read it immediately. In fact, I can revert to a more productive model of email monitoring - check it when I start work, check it every two hours, and switch it off in between. Less distraction, more time for work. Win.

It also means that my colleagues can’t rely on the face-to-face to give me critical information, so if the task isn’t important they wait until I’m in the office next, or take the time to write a constructive, informative email. Fewer emails + more information in each = value of my interpersonal communication goes up tremendously. Win.

But what about when I have a question for one of my colleagues? Well that’s the beauty of the remote set-up, and of the Internet in general. Through instant messaging applications and email, I’m able to stay in constant communication without causing major distractions. But when I’m away from the office, I tend to put more thought and consideration into my emails or IMs, because I know that they will often be read out of context, sometimes hours after being sent, and sometimes when I’m not at my keyboard to explain further. A corollary is that it’s easier to do a lot of research and find the answers myself than it is to write an informative email, so as much as possible, I’ll try to answer my own questions. I get to practice my research skills + I don’t get in the way of my colleagues’ important work = Everyone wins.

I understand that humans need social interaction, and that remote working can make it easier to retreat into an antisocial cocoon. I don’t presume, however, that everybody needs exactly 37.85 hours of human interaction with their colleagues. Some people function better as introverts, or as short-burst extroverts (Is that a thing? Maybe. I think so). By working remotely the onus of social connection sits squarely on my shoulders, and I’m forced to seek it out when I need it. No doubt, there are times when being stuck in my home with nobody else around, working for hours on end, can get a bit draining and lonely. When that happens, I get on my bike and go to the office, a co-working space, or the local caffeine dealer.

The benefits: I get better at creating social connections. I get more work done. I get to work longer (yes this is a benefit, and I don’t feel guilty for staying late at the office). I get to work my own hours without feeling slack. The drawbacks: I don’t answer emails immediately… But even then, there’s always the simple phone call.

On blogging

Man this blogging stuff is hard.

I’ve had a blogging system set up and parked in my domain, giving me the stink-eye, for a few years now and while I have managed to jot down a cup full of ideas and ramblings in its time, I’ve found it very hard to maintain. Sometimes the problem is a lack of content - but what do I write about? - sometimes content overflow - should I blog this or folio that? But most often, I find it’s the sheer pace of the content - ack twitter, stop throwing information at me! - and I suppose there’s also the urge to tinker.

Actually, the urge to hack and tinker has probably been my biggest challenge. In my profession I design, build and maintain web systems, and I get as much pleasure from getting into the guts of a site as I do from nailing some kickass typography or colours; as much as I do from painting awesome user experiences; as much as I do from crafting beautiful user interfaces. It’s very difficult to not try and fix something that you see is broken, and being a bit of a perfectionist means I’m always noticing my mistakes.

Or maybe the challenge to keep up with the cyber-joneses (Jetsons?) is what gets me. Guys, full disclosure: I think I’m addicted to the Internet. Seriously, there’s a million information coming at me every second, telling me every angle about how I should only use semicolons after 6pm on Tuesdays, which shade of burnt umber to paint my Bootstrap buttons, why I should use BeltBuckle instead, and why all of these decisions will actually help my SEO to achieve my boss’s Key Metrics in Terraflimps per quokka.

When you combine the two, I have found that it makes a pretty good recipe for writers’ block. I mean all that information just makes me notice areas of improvement I could hack on and tinker with a bit more, and eventually my to-do list becomes longer than an actual blog post.

I’m really interested in the idea of the “design of things”, or how things work. One idea that has been making a stir in my brain has been that of focus and design in products - and I think it could also cure my blogging hiccups. The theory goes that while minimal and simple is awesome, a focused product is likely to be better Some would say that you should focus on the user’s interactive experience, others say the content should drive the design, so focus on the content. Yes, some people still think that you’re worth diddly-bupkis if you aren’t #1 on Ask Jeeves’s home-inbox-thingywhatsit. Probably.

I am partial to the idea that it depends. Even down to where you should concert your efforts, it depends on your product. An eCommerce site could focus on user experience or user behaviour; a crisps company on delivering a brand; a newspaper on the quality of content (this still happens somewhere, right?). It’s not so easy to narrow down a sweet spot among my passions.

The awesome news is that I’m from the Internet, so I dont have to agonise on this all alone - I can blog while I’m figuring out what to blog about - Insert meme.

[edit: Turns out that 2am is when the typos attack?]