14th May 2013 Jordan Moore
I have a brief observation to make about the already saturated conversation of Photoshop vs designing in the browser. Flat compositions and designing with code are part of the same philosophy of web design, you just need to be mindful of how you use them.
Wireframes, assets and flat compositions are the theory in the science of web design. You can quickly draft wireframes, produce visual assets as smaller, more robust theories whereas complete flat compositions are a larger, riskier theory — an attempt at finding a theory of everything.
Code on the other hand is where the real science happens. Using our elements, we can design with what we know to be true and work with facts rather than theories. We can use this science as a way of designing with real materials instead of asking our clients to sign off on a theory of a design that we are then contractually obliged to try and recreate with science.
The theory part is still necessary — it can help inform the scientific part during the build when the theory itself is based upon evidence and scientific fact. In other words, the more you familiarise yourself with code, the better you can theorise how things work on the web and the quicker the overall design process becomes.
Just like science you will know what experiments will work and what experiments will fail. When it is necessary to conceptualise things it makes more sense to do so in short bursts and test frequently with your scientific materials — your code.
For the record, I don’t think there is a right or wrong design process. Some approaches simply take longer than others, but certain processes may be more comfortable for certain people. Your process is your process.
As the web has become a more diverse and unpredictable place I have learned that as with physics a web design theory of everything doesn’t exist yet — it may never exist. Even when we designed for the mythical fixed width web, our flat compositions didn’t really work. They were close but while elements like typography worked in theory they fell short in practice of the misleadingly optimal conditions of the boundless canvas of Photoshop. In more extreme cases we may have designed a component that looked beautiful in theory but simply couldn’t be recreated in code. It was always a misleading approach whether we designed for a fixed width or a responsive web.
There will always be a need for theories, although I feel we need to give up chasing rainbows for a unified theory of everything in web design. New design challenges will always arise where we need to produce new, smaller theories that are quicker to test and become fact. I find it works best when more elemental theories like design systems work together with the science of web design.
6th May 2013 Jordan Moore
When we design we generally do so in two dimensions — length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experience our design.
Beyond the two dimensional screen exists the third dimension (and many other theorised dimensions) — the physical space in which our designs exist beyond the canvas. Here, all sorts of physical parameters affect how a person uses our design.
Consider the user’s physical space around them — perhaps they are lying on their side on the sofa or in bed and holding a mobile device with one hand. Can the design be enjoyed when a user’s is physically restricted from using two hands? Luke Wroblewski further elaborates on this idea in his Testing One Thumb, One Eyeball article detailing the test procedure for Polar.
If people can get things done in time sensitive, limited dexterity situations, they’ll be even more efficient when we have their full attention and two-hands focused on our designs.
In a separate article Luke details the reach of one thumb with the diagram below to show the considerations for positioning navigation. This is relevant to anything you want people to reach easily, for example if you had a single purpose web app, you might want to position the primary action in the safe zone just like Instagram does with their primary action (take picture).
Image from Luke Wroblewski’s Responsive Navigation: Optimizing for Touch Across Devices article
Beyond the canvas take into account where the thumb might hover while the device is in use. Sometimes people rest their thumb along the ridge of the hardware while others hover it over a portion of the screen poised to press something. This emphasises the importance of testing with real devices. Real hardware considers space in three dimensions whereas on-screen emulators put themselves into the two dimensional canvas free from physical distractions — it’s not really representative of the physical world we live in beyond the canvas.
5th May 2013 Jordan Moore
On the 9th of February this year I changed how I published content to this blog. Instead of original content I opted to go down the route of posting links to content alongside original content. This decision was a reaction to an observation I made about my twitter feed where it seemed if an article even contained a mere mention of responsive web design, then it was “tweetworthy”.
…tweets can end up sounding like a colourless feed — cold and emotionless with little or no room for any added value – the great articles get buried in with the not-as-great articles in a sea of similar sounding noise
I thought part of the problem was that a 140 character cap restricts adding much additional value considering the link takes up a fraction of that limit, and hence links were added to the blog with the intention of adding only valuable resources. After 3 months of posting in this manner I think it’s time to be honest and reevaluate how things have gone.
- It was fun initially. It’s not any more. Link blogs are hard to do well, in fact as Shawn Blanc will tell you — it’s a full-time job. I simply can’t dedicate those resources to it, but who knows, if memberships get to a point where I can do this for a living then I’ll have a difficult decision to make.
- The time spent sourcing quality content was inhibiting my ability to generate my own original content. That’s not good. I have still posted original content since the switch, but I have also launched a membership since then with the goal of posting more original content. Links are hampering my ability to generate more original content — I have a long list of original articles and topics queued and waiting to be written.
- Speaking of members and good things queued up, I want to make Transcripts a more frequent publication. I have lots of fascinating people with stories to tell in the Transcripts interview queue and I want to free up the time to make that happen. Dumping the linking element will help me do that.
- Lastly, I quietly switched Google Analytics back on recently. My original goals for switching analytics off have changed with paid memberships. I now have a duty to ensure the content here is valuable and that the member journey works and so-on.
I’m sure you have already guessed where I’m going with this: I’m dropping links from this blog. It was fun for a while, but ultimately too demanding and it started to suck the value out of other areas. This is a change for the better for readers and a change for the better for members.
1st May 2013
This won’t just be ‘mobile’ devices and objects, or things you can move around. It’ll also be ‘fixed’ devices, too. And in both mobile or fixed, it won’t just be small consumer devices but everything — cars, houses, buildings, kiosks, toys, appliances, you name it. Or as it is commonly called, ‘the internet of things.’
27th April 2013
No details about a web browser on this revolutionary device — I’d imagine it would be something similar to Instapaper’s text-only view bringing content to the fore.
27th April 2013
I first started making notes for the mouse in ‘61. At the time, the popular device for pointing on the screen was a light pen, which had come out of the radar program during the war. It was the standard way to navigate, but I didn’t think it was quite right.
Doug Engelbart invented the mouse in 1963 and filed for a patent for the “x,y position indicator for a display system” in 1967.
26th April 2013
Coincidentally it’s a year to the day that I wrote about Building with Content Choreography. I think it’s time to revisit the article now that the syntax has settled.
26th April 2013 Jordan Moore
The craft of combining typefaces can feel like a daunting prospect. It’s easy to shy away from the adventurous cross-pollination of different typefaces and stick to families and superfamilies to achieve typographic harmony.
Thankfully Five Simple Steps’ latest addition to their helpful Pocket Guides series from Tim Brown seeks to offer reassurance and open-mindedness when it comes to making typographic decisions. Tim approaches the subject from a web designer’s perspective:
We need to think about compositions not as layouts, but as coordinated chunks of typeset elements that do specific jobs and exist in many states simultaneously shifting dynamically among those states.
The book itself is the living realisation of Tim’s own words. The methodology described within its pages is broken down into digestible chunks for quick reference and assurance. There are recurring themes of pausing, stepping back and patience. Combining typefaces is an intricate craft that is more rewarding with practice and knowledge about the faces you work with. Tim expresses the importance of absorbing the type, its purpose, its features, the relationships between spaces and rhythms at a micro and a macro level. The deeper you know about the characteristics of different typefaces and the content that the typefaces are going to represent, the easier it is to find harmony between both entities.
Here’s the bottom line: absorb the text and the author’s or client’s intentions with vigor, because it is integral to your success. If the visual decisions you make aren’t meaningfully connected to the ideas they represent, then your typeface combinations don’t matter.
It’s a purposely open-ended book, because with design there are few definitives. The skill of combining typefaces is nourished with learning from, documenting and critiquing work. A few years ago I naively believed there were certain formulas for this practice. After reading Tim’s words I am excited about looking at typography through a more meaningful lens. Combining Typefaces is valuable addition to any web designer’s desk — one that I’ll be keeping within reach.
25th April 2013
Chris Ruppel:
Before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.
Kilobytes and megabytes are the currency we work with when we build. Some elements will cost more than others to add to your design which is why it is crucial you set a performance budget early in the process — otherwise you can end up passing too much time on reevaluating your spend as a reactive process towards the end of the build rather than as a tactful iterative measure throughout the build.
Before you invest heavily in something whether it is media, web fonts or JavaScript ask yourself if the item is worth the performance expenditure.
If the value of adding the item outweighs the expenditure then use it. Keep in mind that speed is one of the biggest modifiers in regards to delivering value to the user. It’s a careful balancing act.
23rd April 2013
According to Google’s Think Insights research studies, the tired old concept of the separate “mobile” user group (someone who is leaping between trains, has limited attention because they’re on the move) is as good as dead.
Mobile search is always on, happening on the go, at home and at work. 77% of mobile searches occur at home or at work; 17% on the go
The “mobile” user has always been a justification for providing a reduced experience to mobile users — a diluted experience with dumbed down content and features based on the assumption that the user is in motion or has limited time or attention. Google’s research goes on to say:
77% of Mobile Searches are in a location (work or home) likely to have a PC available to them
I would wager that the 77% would appreciate an experience that responds to the device that is convenient to them in that moment rather than a fragmented experience depending on their choice of computer.
Older Articles →
