I was recently sitting with a friend and we were discussing technology and its impact on people. I think we agreed that technology can often (unhelpfully) get a bad rap for causing untold woes in our modern world. We also agreed it’s not technology that’s necessarily the cause of these said problems. When you think about it, it’s not any particular technology’s 'fault' for being created in the first place. It was something a human decided to create and then release into the world.
This lead to an observation and that is: rather than us just creating new technologies – (just because we can) – shouldn’t we also be asking the “why” question more often? Why do we think a technology should be created? What do we think the human impact will be? Is that impact worth it in the short, medium and long term? Maybe, just because a particular technology can be created (however technically brilliant it may turn out to be), it doesn’t necessarily mean it should be created.
Silicon Valley’s biggest failing is not poor marketing of its products, or follow-through on promises, but, rather, the distinct lack of empathy for those whose lives are disturbed by its technological wizardry.
A week later I came across an article by Airbnb, “Sketching Interfaces: Generating code from low fidelity wireframes”. I have to say I thought it sounded very clever indeed and in many ways it makes obvious sense. I mean, who wouldn't want to optimise the website/product development process. There are many benefits for sure. But, if I'm completely honest, it also filled me with a measure of dread.
Now I confess I can’t really be neutral about this because I’m one of those that may well be affected by this technological development. Writing code for websites is currently the means by which I earn a living and I'm not that keen on the idea of it possibly becoming redundant.
Please don’t misunderstand me. It’s not that I don’t want things to change, progress and evolve. I accept that it's a normal, healthy and exciting part of being human. However, I can't help thinking that there’s a lot more at stake if we merely get wrapped up in creating new technologies just because we can. Could it be that we're becoming overly accustomed to – (if not addicted to) – the ego trip of patting ourselves on the back about our latest and greatest inventions, albeit at the unfortunate expense of losing touch with real people. Could there be a point where we (humans) may possibly lose the essence of what/who we are – even in the midst of our technological wizardry.
The Airbnb article reminded me of something Om Malik wrote about 18 months ago, “Silicon Valley Has An Empathy Vacuum”. I still think it’s a worthwhile read. If just to remind ourselves that there are (and always will be) real people, real blood and skin in amongst it all.
Here's hoping that we who have the wonderful ability to create these technological marvels don't forget this.
Well it's done. It's live. Analog Implant Laboratory's new website has been released to the world of the web.
I never get tired of the moment I put a website live. It still gives me such a buzz. That moment, when, what you've poured your time, emotional energy and expertise into, is finally ready (gulp!) to be shown to the 'world'. Well, not the whole world – but I think you know what I mean. It's both a scarily vulnerable moment and an exciting one all at the same time. No doubt almost anyone working in a creative capacity can relate with that feeling.
This particular project has turned out to be one of the enjoyable ones. A lot of this had to do with Analog Implant Laboratory's open-handed and open-hearted involvement in the whole design and development process. I appreciated it immensely. I’m conscious that not every project has or necessarily ends up being a pleasant one, so I’m grateful for the ones that are.
Anyway, enough of the gushy ramble. Here's the techie stuff for those that are interested…
It’s built using a custom HTML5, CSS3, SASS, PHP, JavaScript, jQuery and Grunt config framework. I used Git for version control and Bitbucket Pipelines for the CI & CD build and deployment. Possibly overkill for a brochure/informational website but I enjoyed the process nonetheless. It was a fun change from doing the manual FTP thing. It also gave me a chance to learn something new.
I approached the design and development with 'Mobile First' in mind and built it responsively – (small screen upwards) – to work on as many screens and devices as possible. It's progressively enhanced and makes substantial use of WCAG. Obviously it goes without saying, I wasn’t able to test the website on all device types and screen sizes but I tried my best to ensure it’s built in a device-agnostic manner. Hopefully this means it’ll work for as many users as possible… for those that visit Analog Implant Laboratory’s website anyhow.
Unfortunately, all too often, I hear people say that a progressive web app must be a single page app. And I am not so sure. You might not need a single page app. A single page app can end up being a lot of work and slower. There’s a lot of cargo-culting around single page apps.
Cell networks are basically kryptonite to the protocols and assumptions that the web was built on.
I thought I'd have a go at creating a simple responsive grid. You're welcome to have a look at it on CodePen.
Now I know there are many many grids out there - (and no doubt many that are far more advanced and robust than my offering). Nonetheless I thought it would be fun.
This is my attempt at creating a responsive grid option using :nth-child() selectors rather than classes daisy-chained in the HTML. It's a grid option for those that need a very simple responsive grid that isn't filling their markup with loads of classes. Fill your boots!
So building a website is a breeze, right? Erm… probably worth thinking that through again. Certainly if you what to take seriously the challenge of building for the plethora of devices users may access it on.
Scott Jehl has presented a talk at a number of conferences on “Delivering Responsibly”. He has now very kindly provided the transcript and slides from the last time he gave the presentation, at Fronteers Conference in Amsterdam, October 2015.
If you want to deliver, to use his words, "…fast, resilient, accessible sites", he covers some of the challenges we face in doing this – and some practices and upcoming standards that we can use to make sites usable on any device as soon as possible.
As web designers and developers, we all have our own specialties and responsibilities, but broadly speaking, collectively, we might say it is our job to deliver sites that respond to our users’ needs.
Image sourced from Demac Media
Rather than it being confused with the synthetic pixel-based rendition of a hamburger, why don't we leave the humble hamburger alone to be the yummy-scrummy-juicy-running-down-the-side-of-your-mouth-and-hands experience it is. Oh alright, I'm being a little silly but I too am not overly convinced about its use these days – particularly when it's used as a one-size-fits-all navigation solution. Luke Wroblewski has written a thought-provoking article recently entitled “Obvious Always Wins”. He starts his article by saying…
It's tempting to rely on menu controls in order to simplify mobile interface designs – especially on small screens. But hiding critical parts of an application behind these kinds of menus could negatively impact usage.
Instead of the usual for or against arguments with regards to the ol' hamburger icon – (both have valid points to make by the way) – Brad Frost revisits the Priority+ Navigation Pattern. He reminds us that it's essential to find the balance between accessibility and unobtrusiveness when it comes to navigation. This navigation pattern exposes the most important links and tucks the remaining items behind some form of “more” link. I also like what he says with regards to "navigation is branding". Navigation being critical to your brand presence on the web. If used well, at a glance, it can give a user a snapshot of what you're about and what you offer.
While sweeping the navigation under an icon frees up space, it also removes a crucial opportunity for branding. Navigation doesn't just provide wayfinding for users, but also communicates to users what features and services the experience provides. For a company like Squarespace whose brand name doesn't exactly convey what they do, exposed primary navigation can help potential customers better understand the services they provide.
Websites like The Guardian have done a pretty good job at implementing this type of navigation pattern as well. I reckon it’s certainly worth some serious thought and consideration.
The most important thing anyone can do on a web project is find its nucleus. The core, that central piece of content around which everything orbits. Finding that reveals how all of the content fits together.
How often have you just sat in front of your computer screen and merrily clicked and scrolled away – but if you were really honest you have no idea why? How many times couldn't you resist the urge to reach out and pick up that shiny 'smart' device and start tapping and sliding away? To those around you it may even seem you're doing something really important. What, with your screen-illuminated focussed look - who would doubt it would be anything but important. Heck, you've convinced yourself. Oh wait! No! You're only aimlessly scrolling through reams of useless tweets or responding to someone's Facebook post on what they fed their cat this morning. And why did I start reading the news when it's past midnight!?
Time. Gone. Forever.
Well, there's no reason you and I can't take control of how we use our time. Maybe we can become more deliberate. More purposeful. More outward looking. Possibly find some way to bless someone. Take time to consider what's important in our lives and any adjustments that could be made. There's a friend I've been meaning to reconnect with again. Maybe that would be time better spent, for me, today.
I guess I'm like many front-end designer and developery types. I have an almost love/hate relationship with new webby tools. Intrigued, yet often feel intimidated by them – in this case Grunt. So I put it off until I thought I was ready to take a deep breath and give it a go. After substantial procastination I finally took the plunge thanks to a fab article by Chris Coyier on the 24 ways website.
What can I say – I'm sold. I can't believe I waited this long. I encourage you too to roll up the ol' sleeves (if you haven't already done so) and give it a go.
Trent Walton published an article in March this year (2014) entitled "Device-Agnostic", that is definitely worth reading again – (if not for the first time). I think it deals with a much needed mental adjustment we could seriously consider and work through when designing and developing websites.
Responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop", either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web.
A good discussion about small screen navigation and the challenges it poses. Ben Callahan chats about our current approach and offers some good perspective.
Basecamp designer Jonas Downey wrote an article in May called It's OK not to use tools. I found it a wonderful sanity check in a Web Dev world that has an increasingly insane fixation with what the very best tools are. I too have been a casualty of this.
It was really refreshing reading about someone who decided to take the simplest route possible. After all, if we don't need to, why are we allowing ourselves to take the more complex route.
Ideas want to be ugly.
There's a superb article by Brad Frost on HTML wireframes. As he rightly states, "designing for a multitude of screen sizes, environments, and variables is hard work, so getting into the browser as quickly as possible gives us an opportunity to design and develop more realistic solutions".
This is a good reminder for a perfectionist designer/developer like myself. One of my recurring mistakes is trying to polish something up too early – rather than just getting the wheels turning and then little by little working on the finer details.
At its root, perfectionism isn’t really about a deep love of being meticulous. It's about fear. Fear of making a mistake. Fear of disappointing others. Fear of failure. Fear of success.
I was beginning to think my days in the web designery & developery industry were numbered. I was feeling completely overwhelmed. You see, I'm one of those that has the propensity to lose perspective if I don't regularly take a step back and look at the bigger picture. I'm a very detailed person with a fairly substantial dose of perfectionism chucked in. This, for all its pros, can prove to be a double-edged sword as well if I'm not careful.
That's why it was a moment of sanity for me when I read Andrew Clarke's article – “It's 2014. Web Design Isn't Dead” – which was a follow-on from Jeffrey Zeldman's article. They're both worth a read if you're anything like me and need a little perspective.
Sometimes I think I should have had my head read…
…before I decided to embark on this responsive web design (RWD) journey. It has been and remains a roller-coaster ride – with no end in sight. I have found it both exciting & frustrating – (in equal measure at times) – and then the “I’m completely overwhelmed” moments! That's not a moan by the way, it's just me saying I had no clue what I was getting myself into when I first thought I'd give it a go.
It began for me around August 2010 when I read Ethan Marcotte’s article on “Responsive Web Design” on the A List Apart website. It coincided with, the company I work for, kicking off a piece of work that would eventually lead to us doing a major overhaul of the front-end UI. Overhauls like this don’t come round very often so Ethan’s article got me thinking…what if we approached the UI rework with responsive in mind.
Something to note: Retro-fitting responsive into an existing site code base – and certainly a large one – should really be avoided if you can. Believe me. It’s tricky.
The rise of mobile has been the “canary in the coal mine”. Kinda saying, “your content could end up anywhere. Anywhere!”. With that in mind, (and not wanting to divert too far off the topic), dare I say that the “Mobile First” strapline could possibly end up being a red-herring when looking towards the future – a future we have no idea how it will turn out. Now please don’t get me wrong. Luke Wroblewski’s “Mobile First” message has been pivotal – essential to helping us focus on the right things. We owe him a debt of gratitude for that. What I am saying is I believe content still needs to be foremost in our minds – not mobile-first, responsive design, adaptive design, progressive design or any other technique that may emerge – but rather reusable and flexible chunks of content that can go anywhere. I think RWD has really helped us focus in this regard. It’s helped us remain as device-agnostic as possible when pulling our content strategy together.
I think it’s important to say that I have no regrets about embarking on this journey. For all its challenges – highs and lows – if given the chance to consider this approach again, I would have still gone for it.
Image sourced from 
