Category Archives: Industry

“Mobile” and “desktop” are just buckets

Naga IT Services
Filed under: Industry, Responsive

Even though most sites are moving away from the traditional silos of a mobile site and desktop site, towards one responsive site serving all devices, we’re still using a lot of legacy terminology, and I’m wondering if that can’t help but affect the way we think about the whole process.

We can keep using mobile and desktop as handy verbal shortcuts for small screens and large screens, but we need to be careful about thinking of them as fixed, solid, specifications. If we want to keep using these terms, we need to think of mobile and desktop as names of buckets, of general classifications for a range of devices.

Mobile

Mobile can mean anything from a Nokia 5310 XpressMusic up to the latest Samsung Galaxy S5. The Nokia has a 240 x 320 pixels screen that’s 2.1 inches, whereas the S5 has a touchscreen with 1080 x 1920 pixels at 5.1 inches.

Mobile: an old Nokia phone and a new Samsung phone.

Desktop

Desktop can be anything from an old desktop machine in an internet cafe running Windows XP and IE6, up to the latest iMac. The old internet cafe machine probably has a 14 inch CRT monitor, precariously balanced on a wobbly desk, whereas the iMac is 27 inches and probably sitting on a big, fancy, desk.

Desktop: an old machine and a new iMac.

Continuum

Each of these devices, and all the ones between and around them, sit on a continuum. Screen size is just one of the dimensions that change the experience of using a device, but it’s the one we can understand most easily and show most obviously.

Other dimensions are CSS support, JavaScript support, input methods (touch and / or keyboard), hardware quality (how fast is the processor, how much memory does it have, and so on), age and quality of hardware. (There’s a whole other line of discussion around how Photoshop comps and mock-ups can only give us a point on one of these dimensions, but that’s for later.)

Different names for different things

I like to use t-shirt sizes when naming my breakpoints for a responsive site: S, M, L, XL. These are broad enough to cover wide sections of the continuum, and don’t use words that already have strong associations with existing tech. That means it’s good for developers and clients to stop them falling back in to old habits of putting things into silos.

Axure prototypes and Photoshop documents have their place, but we tend to do only two, at the far ends of the screen size continuum, and call them mobile and desktop. These deliverables are signposts for us to fill in the rest of the continuum. I think we need to move away from that, though. We need to steer ourselves and clients towards keeping in mind the whole continuum when we’re designing and developing. That’s why I prefer saying small screen and large screen rather than mobile and desktop.

Rape Crisis Hackathon

Naga IT Services
Filed under: Industry, Projects, Workshops

Some Front-end developers coding

Last Saturday, a handful of people from the Cape Town Front-end Developer meetup group got together to hack on the WordPress-based site for local NGO Rape Crisis Cape Town Trust. We ran into some pretty major stumbling blocks, and we didn’t get nearly as much done as we hoped. We did learn a lot, though, and we’re hoping do another hackathon soon to really get some improvements to the site done.

What went well

We set up a git repository and hosted it on GitHub. This let us take advantage of the team workflow features like Pull Requests that are really helpful when a group of people are working on different feature of the same code base.

A list of the GitHub issues

After some fiddling with sticky notes and felt tip pens, in true developer style, we started using GitHub issues to track the things we wanted to do. This worked well, and let us pick up tasks that fit our mix of skills.

The format of the hackathon felt right: one day, lots of coffee, pizza for lunch, and a mix of developers. We’ll probably repeat that format for the next one.

What didn’t go so well

We didn’t do any preparation work before the hackathon. Our goal, broadly speaking, was to take the site’s existing Theme and make improvements and adjustments to it to bring it more inline with the Mobile First Responsive principles that we strive for in our code. When we started digging into the code of the current WordPress Theme, Headway, it started to become clear that that would be difficult to do, especially in the one day that we had.

Nope packages installing

Headway is designed to be used by people who don’t want to see the code: it offers a drag and drop, visual editor, approach to building the site. Being developers, that was the opposite of what we wanted!

After a lot of discussion, we decided that the best course of action would be to build a new Theme from scratch, including a solid workflow using the JavaScript task runner Grunt, and a Front-end Style Guide. We decided this was out of scope for the day, but that it would make a great project for the next one. We decided to see what we could do to the existing Theme during the rest of the day.

What we’d do differently next time

We spent a fair amount of time figuring out what we wanted to do, and how we were going to do it. Our biggest failure was that we spent a large amount of time poking at the Theme confirming that we couldn’t do what we wanted to.

We could have avoided this time sink by having a few of us doing a bit of prep work in advance. We’ll try and do this for the next one: it would make sense for us to set up an issue list and tasks to be done before the workshop so that we could concentrate on the doing rather than just the planning.

The Emerging Global Web presentation by Yiibu

Naga IT Services
Filed under: Industry, Reading

One of the things that Yiibu are very good at it is making presentations about important things: mobile first, progressive enhancement, and all that good stuff. Their latest, The Emerging Global Web, has some excellent and eye-opening information about Asia in particular.

The bits that I found particularly good had something in common: they’re all useful as refutations of “lower income people (usually on featurephones) don’t spend money using the web.” Yiibu’s presentations shows how people in China and Thailand are using a combination of Instagram, Facebook, WhatsApp, and WeChat to run their business. Not only that, but their business is a combination of an informal physical shop and an online shop. This combination is particularly good for rural businesses who can’t or won’t have a physical, heavy, bricks-and-mortar shop.

The presentation also provides a good reminder that we should be building for the future. A particular example they use is China, and its middle class that is growing very fast. This is already an important market, and will become more so as time goes on.

Last but not least: it looks like all the QR codes in the world have run away to China!

Check out the presentation on SlideShare for the full story and stats.

(Responsive) Web Design

Naga IT Services
Filed under: Industry, Responsive

There’s lots of discussion around the intertubes at the moment around Responsive: what it is and how we define it. Over the past few days, more of the heavyweights of the web development and design industry have chimed in. Here’s a quick round-up of who said what.

One viewpoint is that Responsive Web Design is really just good web design or web design done right. Back in July 2011, Andy Hume wrote about being Responsive by default, and how the principles and ideas are behind it are core to what we do as a web developers. A few months before that, Andy Clarke was saying similar things:

Web design is responsive design, Responsive Web Design is web design, done right.

(Specific) Responsive Web Design

In his post “Evolving Responsive Web Design”, Blue Beanie man Jeffrey Zeldman talks about how, although the Responsive Web Design is good web design (and vice versa), Responsive as a thing in itself is important. He insightfully points out that the reason RWD has caught on is because of the specific definition that Ethan Marcotte set up:

If Ethan hadn’t included three simple executional requirements as part of his definition, the concept might have quickly fallen by the wayside.

Mark Boulton brings that around to the business side of things, reminding us that it matters what clients think, and they’re beginning to know about the term responsive, and ask for it:

You see, responsive design is a useful term and one that will stick around for a while whilst we’re going through this change. How else do we describe it, otherwise? Web design? I don’t think so. No board member is going to get behind that; it’s not new enough.

(Device-agnostic) Responsive Web Design

Trent Walton’s article, Device Agnostic, rounds the discussion off nicely, and is well worth a read. He talks about the number of variables and unknowns that we have to take into account (screen resolution, input method, browser capability, connection speed):

With such a wide range of possibilities, the sensible thing to do is to zero in on the harshest conditions (or toughest things to deliver) and build from there.

He talks about Hostile Browsers: how a user’s choice of browser can sometimes be acting against design and modern web technologies. He also talks about flux. See Frank Chimero’s beautiful essay What Screens Want for more about that.

Trent also offers a timely reminder that it’s not all about the new and shiny:

As web designers, it is our role to consider (and plan for) maximum reach and access, even when final results might seem underwhelming or less immersive.