Laura Kalbag

Web3: creating problems where we need solutions

Thu, 03 Mar 2022 17:01:02 +0000

A few weeks ago I gave a talk for Smashing Meets about Web3. Find the talk description below.

You can watch the video of ‘Web3: creating problems where we need solutions’ on Smashing Magazine’s Vimeo.

Web3 is one of Silicon Valley’s latest buzzwords, hoping to become a movement. Blockchains, cryptocurrencies, the metaverse, and NFTs may paint themselves as futuristic solutions to tech and society’s problems, but who really benefits from their use? We need to confront the harms of Web3. But first, we need to understand them. In this talk, Laura will explain the technologies behind Web3, why she believes they raise serious ethical questions, and how they are not the alternative to Big Tech we need.

I would also really recommend watching Trine Falbe’s talk from the same event on ‘Selling Ethical Decisions’. Trine truly gives the most pragmatic and practical advice on ethical design.

Read the original post, ‘Web3: creating problems where we need solutions’.

Get on the Path to Accessible and Inclusive Design

Thu, 03 Mar 2022 16:56:21 +0000

In September I’ll be speaking at Design Matters in Copenhagen. Ahead of the event I was interviewed by Giorgia Lombardo about accessible and inclusive design.

Read the interview, ‘Get on the Path to Accessible and Inclusive Design with Laura Kalbag’.

Read the original post, ‘Get on the Path to Accessible and Inclusive Design’.

Winter catchup

Tue, 25 Jan 2022 09:10:50 +0000

Unsurprisingly, it’s been a busy few months since I started working with Stately. My website is in a state of neglect, so I’m here with a quick remedy. In vaguely chronological order…

Remove Trackers (on CSS Tricks).

I wrote a response to “What is one thing people can do to make their website better?” on CSS-Tricks. Of course, I chose “remove trackers.”

Sadly, Better Blocker is no more.

After years of trying to work through Apple’s App Store bureaucracy and then finding out about Apple’s latest proposals for privacy violation, we decided it was time to retire Better Blocker. If you’re looking for an alternative, we recommend 1Blocker.

I’m still horrified by tracking on the web and will keep an eye on developments, but it’s going to be better for my mental health that I’m no longer examining some of the worst of the web every month.

Speaking at Smashing Meets on 9th February.

On the 9th February 2022, I’m speaking at a Smashing Meets event on (design) ethics. My talk is “Web3 — creating problems where we need solutions.” Yep, I’m a sucker for social media blowback. But it’s a topic we need to discuss in more detail, and I’m speaking alongside the brilliant Trine Falbe, who always gives insightful talks.

Read the original post, ‘Winter catchup’.

Working with Stately

Mon, 05 Jul 2021 15:15:22 +0100

From today, in addition to my work at Small Technology Foundation, I’ll be working with Stately on developer and designer relations as a contractor.

The pandemic has made finances tighter at Small Technology Foundation as we’d usually support our work with in-person conference talks which would pay speaking fees. We were already thrifty with our income, but we’ve still got a way to go before the Small Web is financially self-sustaining.

With that in mind, I decided to look for suitable additional work that would allow us to keep Small Technology Foundation running and give Aral the space to keep doing the intensive research and development required for Small Tech.

Stately is a good match because they’re working on tools I’d want to use myself, I get to use the full range of skills and experience I’ve developed over my last twelve years in tech, and I’ll have the time to keep things at Small Technology Foundation ticking over.

It’s going to be an adventure!

Read the original post, ‘Working with Stately’.

Small Technology Foundation as a NACWG Case Study

Wed, 12 May 2021 11:01:20 +0100

Earlier this week a case study of Small Technology Foundation went up on the Scotland’s First Minister’s National Advisory Council on Women and Girls website. I was asked to share our work as part of their digital Spotlight on Women and Girls in Digital Spaces and Industries.

The audience for their site, and the case study structure, made me really think about how to communicate what we do at Small Technology Foundation. I aimed for plain English and clarity, and I think it resulted in a nice summary of our work over the last seven years. If you’re interested, you can read the case study on the NACWG website.

Small is Beautiful

Writing the case study also made me realise that I’ve not mentioned Small is Beautiful on my blog yet. Small Is Beautiful is a monthly livestream hosted by Aral and me. We usually have guests (sometimes not) to discuss their projects and work that is in, or adjacent to, Small Tech. The livestream is around an hour long, and we have an open studio where anyone watching can join to ask questions, either on or off camera. Afterwards, the livestreams are available as videos on the Small Tech website, complete with transcripts and captions.

Next week is our 10th edition, and if you’re interested in livestreaming and making videos without Big Tech, you’ll really want to join this one. We’ll have more information about it tomorrow on the Small is Beautiful page.

Read the original post, ‘Small Technology Foundation as a NACWG Case Study’.

Write-only Twitter

Mon, 29 Mar 2021 13:07:46 +0100

A couple of weeks ago, Aral asked me if I could write a user stylesheet for web browsers to make Twitter nothing but a compose box.

Jump straight to how it works

I totally get it. Twitter sucks your time and soul. But sometimes you need to use it to share what you’re working on, or promote events. Essentially, you want to use Twitter but you don’t want it to use you. The way to do this is to hide every part of Twitter’s interface that doesn’t help you compose a tweet, or otherwise likely to distract or derail you.

The power of CSS pseudo classes

As part of my work on Better’s blocking rules, I sometimes have to hide parts of the page using CSS. Hiding ads isn’t really Better’s purpose, we try to block the tracking and behavioural advertising scripts before they put anything on the page. But occasionally, sites have rolled their own obnoxious first-party targeted ad system that is inseparable from the rest of their site’s functionality. On such occasions, I roll up my sleeves, and get my pseudo CSS selectors out to set these elements to display: none. Because, of course, these sites design their HTML and CSS to avoid blockers like Better.

The problem with user stylesheets

Hiding parts of Twitter’s interface is a similar problem. Luckily, a lot of Twitter’s interface has semantic naming (amongst the gazillion nested divs and robot-generated CSS classes) for accessibility purposes, so it’s simple enough to hook into these elements for a user stylesheet. The problem with user stylesheets is that they’re a blunt instrument, aimed at making global changes across every site you visit. Really useful for making font sizes big on every site you visit, but if you use it to hide any element with the class of “timeline”, chances are you’ll break a lot of websites you visit.

A solution to target specific websites

My solution was to chain what I suspect are fairly unique element selectors in a likely unique sequence, ensuring that these rules will only apply to twitter.com, even though the stylesheet will be used on every site visited.

/* Hide the Home timeline and Explore timeline */
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Your Home Timeline"],
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Explore"] {
  display: none !important;
}

As you can tell from the selectors I’ve used, it is fragile as anything. As soon as Twitter decides to change the aria-label for its home timeline, the stylesheet will no longer effectively hide the home timeline. But, as with a lot of Better’s blocking rules, this is a balance between using a fragile rule that works against a big corporation that tends to be pretty slow in rolling out changes to its interface.

After a couple of weeks of using this stylesheet in my primary browser and not noticing any issues with other sites, I’m fairly confident in sharing this stylesheet with anyone else who might find it useful.

How the stylesheet works

I ended up creating two stylesheets, one for Aral’s way of working (write-only.css), and one for my way of working (read-some.css).

Write-only Twitter

write-only.css is a user stylesheet for the browser that hides absolutely everything except the Home feed compose box on Twitter.

write-only.css in action.

Read-some Twitter

My Twitter use varies, particularly as I sometimes use it for Better support, so I need to be able to access a bit more of Twitter’s interface.

read-some.css is a user stylesheet for the browser that hides:

Home timeline
Explore timeline
List timelines

but keeps:

Mentions
Messages
Settings etc

And let me tell you, having this stylesheet on my desktop Safari for the last couple of weeks has made a huge difference. Now I can check our @mentions without getting further distracted. Even when my muscle memory types “twitter.com” when I’m procrastinating or seeking distraction, the page loads so minimally, I take one look at it and close the tab. It no longer appears in my “Frequently Visited” sites!

read-some.css in action.

Where to find the stylesheets

You can download the Write-Only Twitter stylesheets and find out more about them on our Small Tech repository. I’ll update them when needed. There’s not instructions for every browser in there, but it shouldn’t be too hard for you to find that information if you need it. Personally I recommend Safari for everyday browsing as you can use Better Blocker to block trackers while you browse 😉

Read the original post, ‘Write-only Twitter’.

Safety at conferences

Thu, 11 Mar 2021 10:28:56 +0000

There’s a lot of discussion on UK Twitter right now about women’s safety in public spaces. And of course, I’ve been afraid to walk after dark, and sometimes even during the daytime, in most places that I’ve lived and visited. Since I was a young teenager, our friends would always make sure nobody walked home alone at night. That’s why it astonishes me to hear from cis men who don’t understand how much the rest of us fear them.

I don’t feel safe at conferences

A lot of people are wondering what they can do to change this situation. (I mean the reasonable people who aren’t blaming the victims.) And so I wanted to bring up the safety of in-person conferences, in the hope that perhaps conference organisers might take this opportunity to commit to making their events safer, and less scary, for people who justifiably fear harassment and harm from cis men.

For the last few years, I’ve had the following in my conference speaking terms:

Please arrange for someone to meet me at the airport or train station. I’m happy to take public transport, I would just appreciate some company! As a woman, it really means a lot to feel safe travelling to/from venues at night. I’ve had conferences expect me to walk alone across an unfamiliar city late at night in the dark. If the venues are close-by, or there’s someone who can help me get back safely, I’d really appreciate it.

I can count one conference that has actively taken my request seriously, or even acknowledged it.

Most conferences have parties that end late in the evening, often at venues at a distance from the event venue, and potentially further away from the accommodation they book for speakers. I can’t count the number of times I’ve walked back to my hotel from a venue in the dark, trying to map the route on my phone, hoping my mobile roaming plan will hold out for long enough in a city I’ve never been to, trying not to draw attention to myself as a small and weak person. Trying to decide whether it’s safer to travel on faster empty public transport where I could be trapped with someone, or taking longer walking where at least I could try to run away. Never wearing earphones, trying to stand tall and walk stridently as if I’m a strong woman who knows where she’s going. Often having had confrontations with aggressive men at the conferences who disagreed with my views, or thought I wasn’t sympathetic enough to their perspectives. Usually I’ll leave a party or dinner early if I know another speaker (who I feel safe with) is going back to the same accommodation, so we can travel together.

Perhaps my request isn’t strong enough, perhaps I need to chase up the organisers to ensure my requests are heard. If I’m honest, I struggle to ask for “special treatment”. As someone who is not a big name cis white guy, who chooses to speak about “challenging” topics like accessibility, inclusivity, privacy and rights, I’m all too aware of constantly walking a line where I could easily be dropped by an organiser for being difficult, or not worth the effort.

What can conferences do to improve our safety?

It would really help me, and other people who feel vulnerable in these situations, if conference organisers could help keep us safe. I’ve got a few specific ideas below. I’ve tried to focus on affordable options:

Provide speakers with maps (that don’t rely on internet connections!) and optimal travel information to help them get between your venues and their accommodation.
Meet speakers at the airport or train station, help them get to the venue or their accommodation safely.
Arrange a buddy system so that speakers don’t need to travel alone, whether that’s with other speakers, organisers or attendees. Give people an easy option to choose another buddy if necessary, and don’t question their need to do so. (Unfortunately many of us know people in the industry with whom we’d not feel comfortable alone, and do not want the repercussions of sharing their names publicly.)

At the conferences themselves

Safety at the conference itself is a whole other issue. I could write many blog posts about codes of conduct, their lack of enforcement, and the poor behaviour of both conference attendees and organisers. Maybe another time.

For non-organisers

If you’re a cis man at a conference, please be aware that you are, by default, a threat. It’s not personal, it’s statistics. And unfortunately usually based on past experience. You may well be “one of the good guys”, but if you are a stranger (and sometimes even not), there is no way for us to know that you won’t harass or harm us.

What can you do to help? Number one, for all time, pay attention to the people in the room who may feel vulnerable and step in if they are being faced with any questionable behaviour. Passive-aggressive comments can often escalate into worse situations, don’t let it get there. Make sure people know when their behaviour is unacceptable, and take care of the person who had to deal with it, especially when they might be more vulnerable alone later on.

Ask someone if they need company getting to where they need to go, and help them find a safe route, or someone who is suitable to help them, well ahead of the time they need to leave. Realise that offering to take someone back to their accommodation can be perceived as a potential threat, so prioritise finding a person who will make them feel safe over being the hero yourself.

And try to make people feel less of a burden when you help them. When you are socialised as a person from a minoritised group, you are encouraged to politely refuse help that might make a cis man go out of his way. Yes, these requests can be socially awkward, and rely on you stepping out of your comfort zone. But a little of your discomfort could afford someone the safety that might just save their life.

Read the original post, ‘Safety at conferences’.

A little site update

Wed, 10 Feb 2021 14:25:27 +0000

My site hasn’t had an update in a while. I broke the local version in the autumn last year, and told myself I needed to fix it before I posted again… a few months later and here we are!

Site.js and the starter theme

In our Small is Beautiful #2 livestream, I spoke about how I spent a lot of last year creating a Hugo starter theme for Site.js. We decided to move in a different direction with Site.js, but I’d built so much cool stuff into this new theme (please let me be pleased with myself for once!) it seemed a waste to not make use of it.

One of the key ideas behind the starter theme was to make a theme that could work for a whole website, or could be an accessible rights-respecting foundation for a site that has its own added-extras on top. Aral and I both use Hugo as the blogging system for our sites, as well as for the Small Tech website. Hugo has a pretty useful system for overriding the defaults in a theme for your own site, and I built the starter theme with customisation and flexibility in mind.

While we aren’t using Site.js itself (we’ve forked it) for our work with the Small Web, that doesn’t mean that Site.js is abandoned. Our aim is that the Small Web is an alternative to many of the Big Web platforms out there today, with a completely different infrastructure. Site.js is a tool for the web as it is today, for developing on a local server, syncing and deploying to your own server, with SSL/TLS certificates and site statistics, and no configuration required. In the future we aim to have Small Web sites that can communicate with each other, and do other useful things, but they’ll be more than we need for a simple static website. Site.js will still be useful for the good old static website, and so my starter theme should hopefully still be useful for anyone who wants to get a site up and running quickly with Site.js and Hugo.

What has changed?

I’ll explain more about how the starter theme works in a later blog post, but here’s some starter theme features I’m using for the new version of my site that you might find handy too:

responsive images with different sizes generated using Hugo and implemented with srcset.
snazzy photo gallery using Hugo to smart-crop the responsive images
dark mode (following your operating system’s preferences).
a subscribe page listing RSS feeds and explaining how to use RSS
no tracking whatsover (naturally.)

Of course any personal site update probably comes with bagloads of bugs, and if you notice any, please let me know!

Read the original post, ‘A little site update’.

January update

Thu, 07 Jan 2021 18:09:25 +0000

Ahead of the Small is Beautiful livestream this evening, I thought I’d share what I’ve been working on recently in text too.

Site.js starter theme

For the last (checks repository) nine months, I’ve been working on a Hugo starter theme for Site.js. As we were using Hugo, a static site generator, for our own sites, and Hugo was available as a binary, Aral decided it made sense to include Hugo in Site.js. The idea was that we make it as easy as possible for developers, and people with a little development experience, to get a basic blog or website up and running with Hugo and Site.js. The starter theme is my attempt to create a theme that has everything you need for an easily-maintainable website with accessible, rights-respecting defaults.

Pretty good defaults

The theme has quite a few elements of the theme that please me:

Accessible default templates making it easy to author accessible content.
Vanilla CSS for easy-to-read typography and using flexbox and grid for simple progressively-enhanced responsive layouts.
Responsive images generated using Hugo, including srcset images, and thumbnail images generated for social media.
Multiple colour scheme options, including dark modes, with accessible colour contrasts.
Favicons generated using Hugo, matching the chosen colour scheme.
A simple-as-possible (especially for Hugo!) six step process for getting a site running locally with Site.js.
Privacy page
RSS Feed

Ambition pared back

The current version of the theme is not quite production-ready, but still has a lot of useful bits and pieces if you’re a developer working with Hugo. Ambitiously, we originally aimed to have the theme fit flexibly for a photoblog, standard blog, and simple few-pages website. This led to a lot of different configuration options which I tested across a few different demo sites. Below is a couple of examples of them:

The photoblog layout, using the beautiful illustrations of Margo de Weert.

The basic blog layout, where I started writing documentation for the theme.

As with all things Small Tech, our aim is to create things that we first use ourselves. That way we very quickly realise if something isn’t working, and we’re not making assumptions about the people who use what we build.

Towards the end of 2020, we came to three realisations:

Site.js, now a mature project, worked fine with Hugo, but didn’t need Hugo when it was forked into Place.
While my sites has a photoblog section, neither of us currently have a photoblog, and so the scope of the starter theme was moving further away from our specific needs.
Having a theme that accommodated so many different requirements added too many configuration options which raised the barrier to entry for anyone trying to understand the theme.

I was divided. Do I completely ditch the starter theme, pulling what I’ve learned into the custom Hugo themes we’ve created for our other sites? Or do I rework the theme, pare back the ambition, into something we can build all our sites upon, and hopefully be more useful for other developers too?

At first I dabbled a little with the former approach. I had learned loads about Hugo in the process, it hadn’t been wasted time and effort. But then I realised that my own site sorely needed the update. The Small Tech site could do with it as well. A website is fairly easy to maintain if you’re never updating the content, or even if updating the content is your full-time job. But if you don’t have much time to update your website, or multiple websites, the maintenance has to be really easy. You should need to re-learn a content management system, add a bunch of new CSS, or write HTML in your markdown every time you want to share a new blog post.

So my 2021 starter theme strategy was born: strip out any excessive configuration, make the theme easy to use, and make it a joy to update my own website again. I’m less than a week in and it’s going well. You’ll know if my new strategy has worked when my site gets updated again!

Better Blocker

Last year, on top of all the other things, I still managed to get a few blocking rule updates out for Better Blocker. Honestly, Better Blocker doesn’t make us a load of money, and we’re running a not-for-profit organisation, so I try to be very efficient with my updates. (And close my ears to people who don’t believe an app is worth a onetime payment of €2 unless it has frequent arbitrary updates!)

Over time, the updates to the blocking rules are fairly repetitive. Not much has changed in the tracking landscape in the nearly-five years that Better Blocker has existed. Every update I find a few more prolific trackers to block, I block a couple more blocker blockers, and I tend to revisit the same German tabloid websites with the most determined anti-blocking strategies.

The absolute state of web development nowadays means I’m seeing more sites break more spectacularly in the face of tracker blocking. The tech industry seems to be increasingly indiscriminate in relying on third-party solutions for large chunks of their functionality. Did you notice how many non-Google sites fell over when Google went down at the end of last year? I see that happen a lot with tracker blocking. Logins broken, checkouts broken, even links broken. CSS and even basic HTML content blocked from loading. No progressive enhancement anywhere. Fragile websites built entirely reliantly on other people’s platforms.

Every time I get cranky about development on social media, it’s usually because I’ve been trying to fix sites that break when visited with Better Blocker. I do a lot of work because of other people’s poor development practices, the venting helps a little. Takes deep breath.

We’ve also enrolled in Apple’s new Small Business programme, which essentially means we’ll see a little bit more money from app sales in the future. It’s something, but our involvement with Apple as a platform is plagued with irritations, and not a long-term investment, so I won’t go on about it here!

Read the original post, ‘January update’.

Accessibility in 2020

Fri, 07 Aug 2020 17:28:38 +0100

A few weeks ago I recorded a short video for the NYC School’s Tech Summit and the Eastern Partnership Civil Society Hackathon about accessibility in 2020. A lot of work went into it, so I thought I may as well share it with everyone!

Read the original post, ‘Accessibility in 2020’.

CSS Naked Day 2020

Thu, 09 Apr 2020 10:05:18 +0100

Today is CSS Naked Day 2020. Inspired by Eric Meyer, I’m joining in for the first time in years, so today my website has no CSS.

What my site looked like on the 9th April 2020.

What’s the point?

The point of removing the CSS on your website is to draw attention to how the content still works in just plain HTML. It’s close to a visual equivalent to how screen readers access a website’s text content. Screen readers can’t interpret the fancy styles (mostly), but they still understand the content. You can still read the links and know heading text from body text. This is all because this website and its contents were written using semantic HTML. If you can see the page in your browser, the browser’s default styles present you with a little bit of formatting based on my HTML choices.

You should give it a try!

You don’t need to make your site naked for all the public to see. Maybe just try it in the privacy of your own home. Use it as an opportunity to find out where you’re using <div>s and <span>s where you could be using a more descriptive element. Try disabling styles in your developer tools and browsing other sites without CSS for the day. (Many of them are completely unusable! 🙃)

If you want to know more about semantic HTML, Eric Bailey published a blog post about using semantic markup just a couple of days ago, and it’s a great place to start.

Read the original post, ‘CSS Naked Day 2020’.

Smashing Podcast Episode 13: What is online privacy?

Tue, 07 Apr 2020 18:58:52 +0100

Today the Smashing Podcast came out with its 13th episode, featuring me talking to Drew McLellan about privacy.

I had a lovely time last week chatting to Drew about privacy and our responsibilities as developers and designers.

You can listen to the podcast, get the shownotes and read the full transcript on the Smashing Magazine site.

Read the original post, ‘Smashing Podcast Episode 13: What is online privacy?’.

How to read RSS in 2020

Tue, 24 Mar 2020 11:35:41 +0000

I’ve been working on a starter blog for people to use with Site.js. We want this blog to have easy-to-use, accessible and rights-respecting defaults so it’s simple to just get blogging. One of defaults is RSS feeds. But what if you’ve not come across RSS before? What are the benefits of RSS and how can you get subscribing?

What is RSS?

RSS is a way to get updates from a website without visiting the site itself. It’s particularly useful for getting the latest news from a news site, or blog posts from a blog. The updates are listed in a “feed” which is syndicated (synced) from the website to your “feed reader” of choice.

The feed is accessible from a URL that usually ends in .xml. For example, my site’s full RSS feed is available at https://laurakalbag.com/index.xml. If you follow that URL, you might just get the raw XML file, or your browser might render the RSS in a readable format for you. Nowadays it seems most browsers won’t render RSS by default, or without an extension, and you’ll need a feed reader to read RSS feeds.

A feed reader is a service or app that collects together all the feeds you’ve subscribed to, and displays them in a readable format. It makes it easy to read the updates from all your favourite RSS feeds in one location, whether that’s on the web or using a dedicated feed reader app.

An RSS feed usually contains reverse chronological list of posts each with their date, title, author and content. Sometimes the content is just an excerpt, encouraging you to read the rest of the content on the original site. I think this defeats the point of providing RSS, where a big benefit is that the reader can customise how the posts display in their feed reader to improve their reading experience.

The RSS feed for this blog, as displayed by NetNewsWire.

The benefits of RSS

Another big benefit of RSS is that you curate your own feeds. You get to choose what you subscribe to in your feed reader, and the order in which the posts show up. You might prefer to read the oldest posts first, or the newest. You might group your feeds by topic or another priority. You are not subjected to the “algorithmic feed” of Facebook, Twitter, Instagram, YouTube, where they choose the order for you. You won’t miss your friends’ posts because the algorithm decided to suppress them, and you are not forced to endure ads disguised as content (unless a feed you subscribe to includes ads inside their posts).

Also, RSS does not track you. Not by default, anyway. Sites can often see that their RSS feed is being accessed, and where from, but it is harder to embed tracking into RSS feed content compared to the original website. You should also be aware that some feed readers will use tracking, and it’s probably good to find one that does not track you. Feedbin is a good example of a feed reader that doesn’t track you, and also curbs tracking from your feeds too.

A photo post from my Photos RSS feed, as displayed by Feedbin. The content is presented very simply, and you might just prefer that to the over-the-top style of my website.

Feed readers

RSS feed readers come in a variety of forms.

Feed reader app. An app where you can subscribe to feeds using a feed’s URL. Usually will let you read posts offline once they’ve been downloaded. Often will require a syncing service to sync your feed subscriptions across multiple devices.
Feed reader service. A web service where you can subscribe to feeds using a feed’s URL. You can read posts from any web browser, and can often be used as a syncing service with other feed reader apps.
Browser extension. A browser extension which can identify a feed’s URL on any site. Sometimes the extension will also render RSS feeds. Usually it will open the feed in a feed reader app already on your device.

Some feed reader recommendations

There are a lot of feed readers out there. The recommendations below are independent and not supported by ads or tracking (at time of research!) I’ve also focused on those that are quick to set up and use, not reliant on any other software or specific technical skills.

Feedbin. (For web.) Feedbin is a feed reader service. It’s $5 USD a month (there is a free trial) and works as both a web-based feed reader and a syncing service for other feed reader apps. Feedbin is private by default.
Lire. (For macOS and iOS.) Lire is a feed reader app that has good screenreader accessibility and works with a range of feed reader services. It’s $19.99 USD on macOS and $6.99 USD on iOS, and is developed by Kunal Sood. Thanks to Jennifer Sutton for the recommendation.
NetNewsWire. (For macOS and iOS.) NetNewsWire is a free and open feed reader app that works with a range of feed reader services. It’s free (as in no monetary cost) and developed by a team of volunteers.
NewsBlur. (For web, iOS and Android.) NewsBlur is a feed reader service with apps. It’s freemium, with a limited free account or $36 USD a year. It works as both a web-based feed reader, with its own apps, and as a syncing service for other feed reader apps. Thanks to Orde Saunders for the recommendation.
BazQux. (For web.) BazQux is a feed reader service. It’s $30 USD a year (there is a free trial) and works as both a web-based feed reader and a syncing service for other feed reader apps. Thanks to Mats Staugaard for the recommendation.
Flym News Reader. (For Android.) Flym News Reader is a free and open feed reader app. It’s free (as in no monetary cost) and developed by Frédéric Julian, who takes donations for his work. Thanks to Lucas Dondo for the recommendation.
Wildcard option: Fraidycat. (Firefox and Chrome browser extension.) Fraidycat is a quirky free and open browser extension. It’s free (as in no monetary cost) and is fairly new.

Read the original post, ‘How to read RSS in 2020’.

Accessible unethical technology

Tue, 04 Feb 2020 11:24:05 +0000

I’ve written a little section on accessibility for the Ethical Design Handbook. I’m really grateful that Trine Falbe asked me, as well as including a section by Aral talking about Small Technology and our Ethical Design Manifesto from the Ind.ie days.

Writing about accessibility as part of a book on ethical design inspired my talk about “Accessible unethical technology” at Accessibility Scotland last year.

To end my section on accessibility, I tried to explain how I fit accessibility into my idea of ethical design, or rather how I think something can be accessible but not ethical. The following is what I wrote. It didn’t make the final edit of the book, but I feel it’s a vital addendum to all my work on accessibility:

Unethical technology discriminates against disabled people

In a book about ethical design, it is important to consider the ethical considerations of accessibility. Choosing to make our technology accessible is in itself an ethical decision. You are deliberately working against ableist discrimination and exclusion. But making our technology inclusive and accessible is not enough if the driving forces behind that technology is unethical.

Earlier in the book, we heard about the unethical collection of people’s data, how it is monetised and used to exploit our needs, habits and desires. Data brokers have built detailed profiles of us based upon this data, which they then share and sell to insurance companies, credit companies, and even governments.

Many disabled people already face social, medical, and governmental discrimination, even before detailed profiles of their information are used against them. It is clear how the exploitation of data about us can lead to further, more damaging and immediate harms, on top of the discrimination that already exists. Disabled people also frequently rely on technology for critical access to information and services, as well as community and support. Our reliance on technology also lessens our freedom to choose to not use it.

We not only have a responsibility to design more inclusive and accessible technology, but to consider the impact our design has outside of its immediate interface. But you’ve bought a book about Ethical Design, so you know that already! And just think, when we design ethical products with accessibility and inclusivity in mind, we can ensure our those products are available to everyone. I can’t wait to see what you make.

You can see my slides and read my talk about “Accessible unethical technology” at Accessibility Scotland last year on Notist and watch the video of the talk with captions and transcript on the Accessibility Scotland website.

You can find out more about the Ethical Design Handbook on the website, and also buy it from Smashing Magazine books.

Read the original post, ‘Accessible unethical technology’.

Presentable Live panel at New Adventures Conference

Fri, 31 Jan 2020 18:21:29 +0000

Last week I spoke at New Adventures conference in Nottingham. After the afternoon’s talks, Jeff Veen recorded a panel for his Presentable podcast with the four speakers from that afternoon. You can now listen to the podcast online (and I’m sure you can find it in your podcast apps too).

The other three speakers were Liz Jackson, Florence Okoye and Tatiana Mac and they made this panel a “career” highlight for me. Being onstage with these brilliant people all speaking so clearly and taking no bullshit was epic. (Also three of the most worthwhile speakers I’ve ever seen in both content and delivery, I cannot overstate this enough.)

I was also on Jeff’s podcast a couple of years ago. It feels like forever ago now, and it was nice to meet Jeff (however briefly) in person in Nottingham.

Read the original post, ‘Presentable Live panel at New Adventures Conference’.

I don’t track you

Fri, 17 Jan 2020 20:54:07 +0000

When you visit this website, I don’t track you.

You might’ve noticed in the footer of my site, I have a little link (to this post) that says “No tracking.” This is 100% borrowed/inspired by the footer text on Karolina Szczur’s website.

For me, “no tracking” is both a fact and a mission statement. I’m not a fan of tracking. I work on a tracker blocker, been writing about privacy for the last six years, and give whole talks about the harms of tracking on the web. Our work at Small Technology Foundation is all about advocating for and building small technology to protect personhood and democracy in the digital network age.

That means that you will not find any analytics, article limits or cookies on my site. You also won’t find any third-party scripts, content delivery networks or third-party fonts. I won’t let anyone else track you either.

My site is run with Site.js. Site.js provides some stats about visits to my site, but nothing about its visitors. I know how many requests my site has had, it’s top three most popular requests (my RSS feeds), requested but missing pages, and referrers. It’s as much as I need to keep my site running smoothly.

Read the original post, ‘I don’t track you’.

The future of Better Blocker

Mon, 13 Jan 2020 14:41:49 +0000

Aral has written a detailed blog post about the logistics of moving our app, Better Blocker, to our Irish organisation.

In brief: we have to re-publish the app under Small Technology Foundation, which means anyone who wants to get future updates to the app will have to buy it again. (Though the previous version of the app will still be able to receive updates to the blocking rules.) We will lose years of favourable reviews, high rankings in our category, and a feature on the Safari App Extensions page. It’s immensely frustrating, and we’ve been trying to find a way around it for the last few months. But we can’t. Because we have to play by Apple’s rules. Read all of Aral’s post on his blog.

Blocking rule updates

One of the features that makes Better unique is that we curate our own list of blocking rules. Our focus is on blocking trackers, and we do so based on our principles of ethical design. This means we don’t block non-tracking ads, and when people report sites that break with Better, or have trackers we’ve not blocked yet, we can update our blocking rules accordingly.

Doing this work takes time, and while Aral does most of the work on the apps, I do most of the work on the blocking rules. I investigate every tracker to work out what it’s doing (and what it might do with your personal data!), write the rules, and push the updated block list out to everyone who uses Better. We provide these updates for free, and for a one-off App Store payment, it’s a bargain.

You can read about all our blocking rule updates on the Better news page. And if you do, you’ll notice that the second half of 2019 was slow for me. I was ill a lot last year, and had to prioritise the work that was paying more of the bills. And I felt like a horrible failure to all the people who had bought the apps.

Blocking rules in 2020

But 2020 is a new year, and I’m starting it feeling the best I have in ages. Aral and I have been discussing our options with Better, given that we are also working on other, more long-term, plans to make our work sustainable. We really care about Better being the best it can be for the people who have bought the apps. With this in mind, we’re aiming for less frequent but more regular blocking rule updates. We aim to update the blocking rules every month, running more mass inspections of sites to be more efficient in blocking the most prevalent trackers.

Thank you to our supporters

Finally, thank you to the folks who discovered our work through Better and went on to support us with regulation donations. For years we’ve talked about making Better a subscription-based app, but the development work required has exceeded the potential benefits. Our patrons have effectively supported blocking rule updates for everybody else (alongside the rest of our work), and we really appreciate their generosity.

Read the original post, ‘The future of Better Blocker’.

Closing the Ind.ie forum

Mon, 13 Jan 2020 14:21:44 +0000

Over the last few days, we closed the Ind.ie forum. It had been a fun experiment for 4.5 years, but didn’t really fit our aims to create decentralised technology. We didn’t want to shun other big platforms in favour of creating our own big platform, it would defeat the point!

Looking for Better support?

We’ve tried to cover most topics in depth on Better’s Support page, for anything other Better support questions, feel free to email us at hello@small-tech.org, or send us a message on our Mastodon or Twitter accounts. (We’ve kept these accounts going for continuity.)

Anonymous support requests

What about anonymous support requests for Better? A few people have used the forum to get anonymous support because they’d rather not use their personal email or social media accounts. Some people have asked me to look into porn and fetish sites to more effectively block trackers, others have their own reasons for wanting privacy. But the forum was actually less anonymous. Signing up for the forum already requires an email address. And as the admin for a Discourse forum, I could access people’s email addresses, IP addresses, and detailed logs of their activity. I can tell you that you can trust me with your information, but I’d rather not have it in the first place. For those wanting to contact us anonymously with support requests, I’d recommend getting a temporary email address. It’s as easy as setting up a forum account anyway.

4.5 years is a long time on the web

Honestly, it’s also miraculous we didn’t close the forum sooner. Of around 4.1k posts, 24% were by me. Most often I was posting links to thought-provoking articles I’d read, which I now post here on my site on my lens. Or information about our Better blocking rule updates, which were always posted on the Better website first. Very few people used our forum for support, usually preferring to send us an email. The forum became just like another social media platform, but one that cost us 120 US dollars per month.

I’m a little bit sad

While the Ind.ie forum was intended to be a multifunctional place for temporary content, I did like the idea of fostering a community. It’s why I started sharing the articles I read, and tried to direct people there to discuss topics in more depth than we could manage on character-limited social media. But one determined person does not a community make. I developed some familiarity with a few repeat forum visitors, and we had the occasional detailed thread. But it was not the nuanced, inclusive and supportive discussion I craved. Nothing was abusive (as moderator, I’d shut things down early if I anticipated chat heading in that direction) but people tend to bring their pet topics, axes to grind, and presumptions of how much knowledge a small woman could possibly possess. Of course I’ve bleated about my desire for connection with likedminded folks before and it seems it’ll remain a frequent whinge for a while longer.

People, not brands

Along with our other work, the forum has been part of a learning process around where our output should live. When we set up Small Technology Foundation, we decided that the definition of Small Technology Foundation is the collection of both Aral and my work. And therefore we’d mostly write and share on our sites and spaces, under our own names, then bring anything relevant to Small Technology Foundation together on the Small Technology Foundation site. There was no point having five different Twitter accounts for the work of two people. In fact, it was ridiculous. We are just two people, not a startup, not a big brand. We certainly don’t need people harbouring brand-sized expectations for us. And, as I mentioned in my post introducing the Lens, we have different perspectives and voices. It’s nice for those voices to be shared in context, rather than delivered as if unified under a confused brand.

I’ll still drift around various communities looking for a comfortable home. I’m increasingly aware that community is found in people, not on a website. But those people still need the means to communicate safely and freely, so we’ll keep working on that.

Read the original post, ‘Closing the Ind.ie forum’.

It’s Time To Get Personal on 24ways

Mon, 09 Dec 2019 16:45:48 +0000

I wrote an ode to personal websites for one of my faves, 24ways. Featuring inspiring (and rights-respecting) websites from people whose work I love and respect. Also including a festive sprinkling of Site.js, which is making my development life much easier.

I love the little festive summary they wrote for me:

“Laura Kalbag discusses the gift of personal data we give to Big Tech when we share information on its platforms, and how reviving ye olde personal website can be one way to stay in control of the content we share and the data we leak. Christmas is a time for giving, but know what you’re giving to whom.”

Read It’s Time to Get Personal on 24ways.

Read the original post, ‘It’s Time To Get Personal on 24ways’.

A belated introduction to Small Technology Foundation

Thu, 03 Oct 2019 11:24:30 +0100

About a month ago, Aral and I launched Small Technology Foundation. In the frenzied rush to get the site up, and general life chaos that has overwhelmed me since, I’d not managed to write about it until now.

A new name?

It’s important to say that, while Small Technology Foundation is a new name for our organisation, it’s a continuation of the work we were doing as Ind.ie. What started as Irish restrictions preventing us from using the same name as our UK organisation, ended up being an opportunity to find a name that is more descriptive of the work we do, and more memorable. (Not to mention that Ind.ie is pronounced as “Industrial-dot-IE” by some screenreaders, which has always irritated me.)

What is small technology?

Small Technology are everyday tools for everyday people designed to increase human welfare, not corporate profits. The opposite of big tech. We’re on a mission to build tools that enable everyone of us to own and control our own place on the Internet.

What is the foundation?

Small Technology Foundation is just the two of us, Aral and me. (And Osky.) The foundation is a collection of our work. We do most of our work together, but also have our own ways of working towards Small Technology Foundation’s goals. (For example, I wrote a book and do a lot of reading which makes up my lens.)

For a long time, I resisted calling myself co-founder, as it brings up visions of startup hustlers and growth obsessives. I was much happier calling myself a designer, and pretending that one day soon I’d be spending 90% of my time designing and building websites again. But, as anyone who runs a not-for-profit organisation knows, keeping even the tiniest organisation running smoothly requires a lot of admin. And as anyone who is trying to make change in this forsaken tech community knows, it requires a lot of energy, communication, and saying the same things over and over again in the hope that someone might listen.

So while I still cherish the few hours I can dedicate to making websites, the grownup title of Co-Founder better fits the variety in my work. (And maybe men in suits will no longer dismiss me at conferences! …jk, of course they’ll still ignore me.)

Not. for. profit.

As with Ind.ie, Small Technology Foundation is a not-for-profit organisation. We’re not in this for the cash. (If you want to make money in the tech industry, you don’t challenge the status quo…) We only pay ourselves what we need to pay our bills and feed the dog.

We’ve only existed to this point with the help of a few kind supporters, but we do have a plan for long-term sustainability If you’re a person with financial means, we’d appreciate your monetary support and we have other (not monetary) ways to support us listed on our “fund us” page. If you’re glad we exist (we hear this a lot! we appreciate it!) please help us continue to exist.

Read the original post, ‘A belated introduction to Small Technology Foundation’.

Introducing Laura’s Lens

Thu, 03 Oct 2019 09:16:52 +0100

Over the last five years or so, I’ve been sharing links to insightful articles with a critical view of technology. It started as Ind.ie’s weekly roundup email, but I found writing a long summary was taking me too long every week (I’m no journalist!) So the roundups evolved into Ind.ie’s daily Radar, where I’d post daily links, quoting some of the best bits, which I’d also post to @indie on Mastodon and @indie on Twitter.

What’s mine is mine and what’s ours is his

When we started Small Technology Foundation, we decided these links needed a new home. These links have always been my view of what I think is related to our work. That is not to say that Aral disagrees with my perspective, but that both Ind.ie and Small Technology Foundation have always been a collection of mine and Aral’s work. That’s why we blog on our own sites and then share the relevant posts aggregated on the Small Technology Foundation news. Thus it also makes sense for the links I collect to live on my site.

But there’s another reason why me posting as myself is valuable. Unless we specifically say the work I do is done by me, my work is often attributed to Aral. It’s not Aral’s fault. He’s deliberate in attributing my work to me, and continually corrects people who attribute my work to him or our work to him alone. But sometimes even that is not enough. We’ve even had people assuming he co-wrote my book.

A few months ago, we gave our first talk together. We thought it would be fun, getting to give a talk that embodied our combined perspectives and unified talks we’d been giving separately. It was a lovely conference with a focus on inclusivity with a reasonable mixture of speakers and attendees from different backgrounds. But it was the starkest example of how my work, and even my presence, are erased, despite being amongst a broadly progressive community.

We shared the talk as two halves. My half of the talk was strong and, while Aral has had a longer speaking career, combined we gave a really good talk (I didn’t let him down!) However afterwards, multiple speakers referred to “Aral’s talk” in their talks. One then corrected himself, asking the audience to remind him of my name, and then continued to refer to “Aral’s talk.” People flocked to Aral to invite him to speak at their events, they stopped him later to commend him on his talk. I don’t want to be ungrateful to the people who came to speak to me afterwards, and said lovely things about our talk, but they were a kind minority to those crowding Aral. It broke my heart a little bit.

Aral and I know we’re perceived and treated differently in the world. It might have something to do with my looking younger than I am, it might be because I’m often less confident. But it’s likely because I’m a woman. While what I face is nothing compared to those battling racism and ableism in the tech community, I get dealt a fair amount of crap from that community and (not just bad tweets.) We’re not going to fix systemic problems by being clearer in attributing my work to me, in fact we may just make my work easier to ignore as women’s work in the tech community so often is (along with the work of people of colour, and that of people with visible disabilities). But we can do this one thing to stop people attributing my work to somebody else.

(I know… all this in a post about posting links. Trust me, this feels tedious to me too.)

My lens means what’s important to me

As I said, the links on my lens are from my perspective. This means often I include articles that aren’t written from a technologist’s point of view and aren’t focused on design and development. The articles are usually more about politics, society and culture, and where technology fits in. That’s why we (well, Aral) came up with the name, “Laura’s Lens.” (I’m terrible at naming things.) This is a reading list of what I’m using to inform my work at Small Technology Foundation. These are pieces that help me understand topics, connect themes together and learn how to explain key issues. I limit it to one article daily (on weekdays), and I hope you find them as valuable as I do.

Like the lens? Fund us!

Small Technology Foundation is a not-for-profit organisation. All the work I do is part of our effort to advocate for and build small technology to protect personhood and democracy in the digital network age. If you find my work at all valuable (and can afford to do so), I would really appreciate your financial support. Our Small Technology funding page has more information on how you can donate to us, become a patron, and the work that is funded by our supporters.

Read the original post, ‘Introducing Laura’s Lens’.

Why much of the internet is closed off to blind people

Mon, 30 Sep 2019 12:15:03 +0100

A few weeks ago, I chatted to James Jeffrey for a BBC article on Why much of the internet is closed off to blind people. In particular, I spoke to how easy it can be to make a website accessible, and why it should be part of our everyday practice as designers and developers.

“It’s not hard to do, it should just be part of best practice, not an additional line item, just like making sure a website loads quickly is,” says Laura Kalbag, a website designer and author of Accessibility for Everyone.

“It basically just involves HTML coding, which even a blogger can do. If it is a huge website, it might take some time, but the work itself is not complicated.”

She adds it is a myth that making a website accessible makes it ugly, there is no correlation - you can still have snazzy images and graphics.

…

“We treat disabled people as if they are different but that isn’t the case, as digital accessibility affects all of us,” says Ms Kalbag. “If nothing else, you should see it in a selfish way, as one day you will probably need this type of accessibility.”

Read the full article on the BBC website.

Read the original post, ‘Why much of the internet is closed off to blind people’.

Where I’m speaking in Summer/Autumn 2019

Wed, 07 Aug 2019 10:03:11 +0100

This summer/autumn, I’m speaking at conferences in Amsterdam, London and Edinburgh. This year I’ve had mixed experiences with speaking, so I’m being picky about future talks. So I’m looking forward to the following…

Loupe

Amsterdam, 15th August.

Next week I’ll be in Amsterdam to give an introductory talk about accessible and inclusive design at Framer’s Loupe conference.

State Of The Browser

London, 14th September.

In September, I’m reuniting with a bunch of old pals, and hoping to make new ones at London Web Standards’ State Of The Browser 2019. I last spoke at this conference in 2013, and did one of my first ever talks at one of their meetups in 2012. It’s going to be a proper party.

Accessibility Scotland

Edinburgh, 25th October.

In October, I’ll be back to Edinburgh for Accessibility Scotland. I’m really looking forward to this event, as the theme is “accessibility and ethics” (right up my street!) and so far the lineup is fabulous.

Read the original post, ‘Where I’m speaking in Summer/Autumn 2019’.

This One Weird Trick Tells Us Everything About You: In Print!

Mon, 05 Aug 2019 12:21:04 +0100

I almost forgot to share photos of the gorgeous printed Smashing Magazine! Getting all this into 2000 words was a challenge, but I’m happy with the result.

Thank you Rachel Andrew for the opportunity and Owen Gregory for the editing.

My essay in the Smashing Magazine Print edition #1…

Read the original post, ‘This One Weird Trick Tells Us Everything About You: In Print!’.

Smashing TV Livestream: Towards Ethics & Privacy By Default

Tue, 23 Jul 2019 10:25:04 +0100

Tomorrow afternoon I’ll be on a panel with the other folks who contributed to the new Smashing print magazine on Ethics and Privacy. You can watch it live on YouTube (be aware that Google is tracking you!) at 1pm GMT / 2pm Irish time / 3pm Barcelona time.

Read the original post, ‘Smashing TV Livestream: Towards Ethics & Privacy By Default’.

This One Weird Trick Tells Us Everything About You

Fri, 12 Jul 2019 15:47:49 +0100

I wrote a little essay for Smashing Print #1: Ethics & Privacy titled ‘This One Weird Trick Tells Us Everything About You.’

It covers different types of tracking and how it came to exist, as well as regulation, ethics, and why we need better business models. It was very cathartic to write, and I was grateful for the editorial input of the ever-thoughtful Owen Gregory. Also I’m well pleased to have my thoughts alongside an essay by Trine Falbe and the writing of Heather Burns, people whose work I massively admire.

You can get the magazine in print or as an ebook over on the Smashing Magazine site.

Read the original post, ‘This One Weird Trick Tells Us Everything About You’.

Great speakers from Think About conference 2019

Fri, 31 May 2019 11:54:44 +0100

Conf organisers! I wanted to shout out some brilliant speakers I saw at Think About! conference last week. These are fabulous people, accomplished speakers, writing valuable, meaningful and educational talks. You need them on your lineup.

In the order I saw them:

Linda Rising

First I saw Linda Rising. I’ve been in the wrong circles because I hadn’t heard of her work. Hers was the perfect opening keynote, priming our minds and attitudes for the rest of the conference with science, talking about the agile mindset. Blew my mind.

Linda’s website.

Eriol Fox

Next was Eriol Fox. Their insightful talk about diverse representation in design made tricky topics way less intimidating. The way they wove bad examples alongside how to do better was so enlightening. AND they’ve got a great talk proposal ready.

Eriol’s talk proposal: “Effective design for crisis & natural disaster relief in developed and developing countries”. Eriol’s website.

Aly Blenkin

Then I saw Aly Blenkin. Her talk really got into deep thinking around ethics in design, and considering the impact of our work. She showed real processes and approaches for understanding/measuring impact, giving us takeaways we can all use in our work.

Aly’s website.

Ryn Daniels

Next up was Ryn Daniels who made devops accessible to even me while still addressing the topic in depth. Their talk melded stories with examples and lessons learned, looking at both code and humans, on some very big and daunting projects.

Ryn’s website.

Eileen Wagner

I was sad to miss most of Eileen Wagner’s talk, because the tail-end that I caught got me really fired up and inspired. Looking at how to use design to improve security and privacy, I learned so much in that short time from her accessible examples.

Eileen’s website.

Vimla Appadoo

The fabulous closing keynote was Vim Appadoo. Her explanations of the connections between diversity and privilege gave me loads of “aha!” moments, which she set against a vulnerable and fascinating story of her own life and background.

Vim’s website

Legendary conference organisers

Also a massive hats-off to Chrissy Holderbaum, Jakob Holderbaum and Andreas Rosing for putting this immense lineup together. Can’t wait to see what they put together next year.

Read the original post, ‘Great speakers from Think About conference 2019’.

Like It or Not, We're Already Cyborgs interview on PCMag

Tue, 28 May 2019 16:37:26 +0100

To privacy activists Aral Balkan and Laura Kalbag, we don’t need brain implants to become cyborgs; we’re already jacked in. And we need a Universal Declaration of Cyborg Rights.

Aral and I did an interview with S.C. Stuart of PCMag ahead of our talk together for Think About! in Cologne last week.

Read ‘Like It or Not, We’re Already Cyborgs’ by S.C. Stuart.

Photo of us in our old office in Malmö, as used in the interview.

Read the original post, ‘Like It or Not, We're Already Cyborgs interview on PCMag’.

Everyday Information Architecture

Tue, 16 Apr 2019 08:30:09 +0100

When I found out that Lisa Maria Martin was writing a book about information architecture, I was really excited. Ever since I was lucky enough to have Lisa Maria edit my book, I’ve wanted to learn more from this insightful and kind person. During the writing and editing process, my book was loooong, accidentally repetitive, and the structure mostly just a bunch of text in the order it exited my brain. The other wonderful editors helped me flesh out ideas, communicate them clearly and ensured they were technically correct. Lisa Maria gave the book its final shape and structure. She took text I found unwieldy and hard to understand as a whole, and put it in an order that made sense to a reader. Needless to say, I learned a lot from her, and the opportunity to learn more, and how I could apply her kind of thinking to projects I work on every day (websites!) meant I read Everyday Information Architecture as soon as I could get my hands on it.

And this book does not disappoint.

Much like other A Book Apart books, Everyday Information Architecture took me a couple of hours to read. Within fifteen minutes, I was already reorganising our organisation’s website in my head (whilst simultaneously learning I need to steady my excitement a little, and make sure the reorganisation works for all the content…) The book works through thinking in systems, analysing existing systems, and using that analysis to better organise websites to fit the needs of the site’s visitors and the organisation’s goals. If, like me, you get a kick out of designing a system so that everything has its place, you’ll rejoice at Lisa Maria’s spreadsheets and her advice on making masses of content more maintainable. If the idea of drowning in content terrifies you, this book will throw you a life ring and help you feel more in control again. Lisa Maria’s advice is practical, flexible, and uses examples of a variety of sites making it easier to understand how to apply her processes to your own work.

Everyday Information Architecture is also a fun read underscored with a serious message about the impact categorisation can have on people and society. You don’t necessarily expect a book about web work to be enjoyable, but Lisa Maria has a warm and really funny way with words that makes the book absorbing and easy to read. And the message is clear: we can use an understanding of information architecture to make a site easier to use, more inclusive and more accessible, but we must also understand the impact of our decisions extends well beyond the pixels, code and copy.

“Information isn’t neutral; neither are the choices we make about how to present it, structure it, write it, juxtapose it, or classify it. Every design decision makes an impact; it’s just a question of whether we can stand up and own that impact.” —Lisa Maria Martin, Everyday Information Architecture

You should buy Everyday Information Architecture, it’s out today in paperback and ebook. You won’t regret it!

Read the original post, ‘Everyday Information Architecture’.

Tech is not neutral and we need to do better

Thu, 21 Mar 2019 16:34:32 +0000

The best bookmarks I saved in Week 12, 2019.

Tech is not neutral

Canary in a Coal Mine: How Tech Provides Platforms for Hate

By Tatiana Mac on A List Apart

“We, by way of our platforms, give agency and credence to these acts of violence, then pilfer profits from them. Tech is a money-making accomplice to these hate crimes.”

Article: Canary in a Coal Mine: How Tech Provides Platforms for Hate

Trading privacy for survival is another tax on the poor

By Ciara Byrne on Fast Company

“Personal data is used to deny low-income people access to resources or opportunities, but it’s also used to target them with predatory marketing for payday loans or even straight-up scams.”

Article: Trading privacy for survival is another tax on the poor

How the tragic death of Do Not Track ruined the web for everyone

By Glenn Fleishman on Fast Company

“the prospect of federal legislation brought ad players to the table. But when that legislation didn’t materialize, “the prolonged negotiations in fact proved useful to the industry to create the illusion of a voluntary self-regulatory process, seemingly preempting the need for regulation.”

Article: How the tragic death of Do Not Track ruined the web for everyone

State websites are aiding a disgraceful silent surveillance

By Karlin Lillington on the Irish Times

“Of “special concern” is that, by cross-referencing such data to the vast trove of personally-identifying information Google also holds from services like Gmail, Android apps, and Search, Google can “easily associate web activity with the identities of real people”, the report warns.”

Article: State websites are aiding a disgraceful silent surveillance

Facebook Says It Will Use AI to Police Revenge Porn, but It Won’t Fully Explain How

By Melanie Ehrenkranz on Gizmodo

“How will this detection technology be able to discern a lingerie photo that someone uploads confidently of themselves versus a photo of a woman in lingerie that was taken in private by a former partner who is now vindictively posting it across his social media pages? Or, how will this new detection tech be able to differentiate revenge porn from a nude work of art or a historically significant photo?”

Article: Facebook Says It Will Use AI to Police Revenge Porn, but It Won’t Fully Explain How

We need to do better

About the HTML Epidemic, WebAIM “Million” Report, and Teach Access

By Dennis Lembrée on Web Axe

“This is obviously a huge problem that must be addressed. What can we do to help resolve this HTML epidemic?

Digital accessibility must be considered when hiring and training employees. Accessibility must be considered when creating a web-based product. Accessibility must be a part of ongoing training for web professionals. Accessibility needs to be taught in education.”

Article: About the HTML Epidemic, WebAIM “Million” Report, and Teach Access

Read the original post, ‘Tech is not neutral and we need to do better’.

Prejudice, tech’s systemic issues and responsive images

Fri, 15 Mar 2019 09:39:50 +0000

The best bookmarks I saved in Week 11, 2019.

Prejudice

A new study finds a potential risk with self-driving cars: failure to detect dark-skinned pedestrians

By Sigal Samuel on Vox

“The list of concerns about self-driving cars just got longer.

In addition to worrying about how safe they are, how they’d handle tricky moral trade-offs on the road, and how they might make traffic worse, we also need to worry about how they could harm people of color.”

Article: A new study finds a potential risk with self-driving cars: failure to detect dark-skinned pedestrians

Reclaiming privacy: a feminist manifesto

On Privacy International

“So, what does privacy have to do with this? This question calls for another question: whose privacy are we fighting for when we say we defend the right to privacy? Talking about privacy in the abstract – as if we all benefit from the same rights, as if we are all equal – means taking the risk of defending the rights of only the most privileged ones in society – with privilege coming in different forms from having a voice to be heard to socio-economic status.”

Article: Reclaiming privacy: a feminist manifesto

“London-based angry feminists over 30”: why we need to talk about the sexism of online ad profiling

By Eva Blum-Dumontet on New Statesman

“We need to be clear that a data driven world – where artificial intelligence makes decision based on simplistic profiles about us – isn’t going to solve prejudices: it’s going to perpetuate them.”

Article: “London-based angry feminists over 30”: why we need to talk about the sexism of online ad profiling

These gaffes expose British politics’ real issue with race

By Gary Younge on The Guardian

“Racism is not about politeness – it’s about power. What is truly worrying about these blunders is that they have let the mask slip to reveal a political class that, at best, does not understand the racial dynamics of the country in which it operates and, at worst, is deeply hostile to them.”

Article: These gaffes expose British politics’ real issue with race

The gender wars of household chores: a feminist comic

By Emma on The Guardian

“The French comic artist Emma illustrates the concept of the ‘mental load’. When a man expects his partner to ask him to do things, he is viewing her as the manager of their household chores”

Comic: The gender wars of household chores: a feminist comic

Tech’s systemic issues

Mark Zuckerberg discovers privacy

By Taylor Hatmaker on Techcrunch

“But can Facebook reform its 15-year legacy as devourer of all things private with a single sweeping, underedited screed from its copycat visionary and dark-pattern technocrat? Fuck no, of course it can’t.”

Mark Zuckerberg discovers privacy

Why beating your phone addiction may come at a cost

By Oscar Schwartz on The Guardian

“as this burgeoning movement becomes an industry, some worry that the “wellness” approach and its emphasis on personal responsibility is whitewashing deeper structural issues within the tech industry.”

Article: Why beating your phone addiction may come at a cost

And responsive images…

Planning for Responsive Images

By Chris Nwamba on CSS Tricks

“This article aims at affording simple yet effective guidelines for setting up responsive images and layouts in light of the many—and potentially confusing—options available.”

Article: Planning for Responsive Images

Read the original post, ‘Prejudice, tech’s systemic issues and responsive images’.

Dangerous data and understanding privilege

Wed, 06 Mar 2019 09:04:12 +0000

The best bookmarks I saved in Week 10, 2019.

Our data is used against us

Here are the data brokers quietly buying and selling your personal information

By Steven Melendez AND Alex Pasternack on Fast Company

“Apart from the dangers of merely collecting and storing all that data, detailed (and often erroneous) consumer profiles can lead to race or income-based discrimination, in a high-tech version of redlining.”

Article: Here are the data brokers quietly buying and selling your personal information

Diagram mapping the commercial digital tracking and profiling landscape. Copyright Cracked Labs CC BY-SA 4.0

Don’t look now: why you should be worried about machines reading your emotions

By Oscar Schwartz on The Guardian

“According to Meredith Whittaker, co-director of the New York University-based research institute AI Now, building machine learning applications based on Ekman’s outdated science is not just bad practice, it translates to real social harms.”

Article: Don’t look now: why you should be worried about machines reading your emotions

Revealed: Facebook’s global lobbying against data privacy laws

By Carole Cadwalladr and Duncan Campbell on The Guardian

“The documents… reveal a secretive global lobbying operation targeting hundreds of legislators and regulators in an attempt to procure influence across the world, including in the UK, US, Canada, India, Vietnam, Argentina, Brazil, Malaysia and all 28 states of the EU.”

Article: Revealed: Facebook’s global lobbying against data privacy laws

By Natasha Lomas on Techcrunch

“‘The phenomenon that is the GDPR has demonstrated one thing above all else: people’s interest in and appetite for understanding and controlling use of their personal data is anything but a reflection of apathy and fatalism,’ writes Helen Dixon, Ireland’s commissioner for data protection.”

Article: Privacy complaints received by tech giants’ favorite EU watchdog up more than 2x since GDPR

Nearly Half Of All ‘AI Startups’ Are Cashing In On Hype

By Parmy Olson on Forbes

“Startups that are labelled as being in the field of artificial intelligence attract 15% to 50% more in their funding rounds than other technology startups…”

Article: Nearly Half Of All ‘AI Startups’ Are Cashing In On Hype

The real reason why Facebook and Google won’t change

By Shoshana Zuboff on Fast Company

“These histories illustrate Facebook’s radical indifference, my term for the formal relationship between surveillance capitalists and their users. Facebook doesn’t care about disinformation, or mental health, or any of the other issues on Zuckerberg’s list of resolutions. Users are not customers, nor are they ‘the product.’ They are merely free sources of raw material.”

Article: The real reason why Facebook and Google won’t change

Understanding privilege

Violence is not the only way LGBT+ people are ‘erased’

By Eva Wiseman on The Guardian

“We can start with these stories, of preachers and beatings, but then we must widen our lens. To the covert message of assimilation that comes from assumed heterosexuality. From the lack of diverse representation in politics and on film, to what conversion therapy might look like in a time and place unruled by religion, where legislation around equality is outrunning the attitudes we see in schools and on the streets.”

Article: Violence is not the only way LGBT+ people are ‘erased’

To My Fellow White Others

By Chase Strangio on The Progressive

“Our duty as white people who are Othered in society is to name the ways in which our discrimination, our hurt, our alienation, does not erase the power we simultaneously hold, and to watch for the ways it also serves white supremacy.”

Article: To My Fellow White Others

Accessibility toolkit

Semantics to Screen Readers

By Melanie Richards on A List Apart

“If you make websites, you may have tested your sites with a screen reader. But how do these and other assistive programs actually access your content? What information do they use?”

Article: Semantics to Screen Readers

Tips to Create an Accessible and Contrasted Color Palette

By Stéphanie Walter

“Let’s be clear from the start: color contrast will concern every one of you users. Everybody struggles at some point with issues linked to lack of contrast in interfaces and websites, color blind or not.”

Article: Tips to Create an Accessible and Contrasted Color Palette

Read the original post, ‘Dangerous data and understanding privilege’.

Mic Issues

Wed, 27 Feb 2019 10:54:14 +0000

In the last year, I’ve had two notably bad experiences with mic fittings when speaking at conferences. Nowadays most events have a Code of Conduct, but I’ve found them to be largely unenforced, with some of the worst conduct coming from organisers or people working for the event.

Skip the background, get straight to how to fit a microphone to a person without making them feel uncomfortable.

A couple of weeks ago, I posted on Twitter and Mastodon looking for advice for tech teams on how to fit a mic and behave appropriately:

Recently I had another bad experience with a person fitting my mic at a conf where I was speaking. Can anyone recommend good resources on appropriate behaviour for conf tech teams?

(If I’m going to blog about it, I’d like to link to legit advice from people who know their stuff!)‬

Unfortunately, without explicit descriptions of what happened, a few people made their own assumptions. Perhaps I don’t know how wireless microphones work and how they should be fitted. Or I am a diva who refuses to fit a microphone to herself. Or I don’t know how to use verbal and physical language to deter men from touching me inappropriately. Let me describe the two particular scenarios that happened to me.

Scenario one was a panel where I needed a lapel mic (small mic attached to a clip) fitted to the chest of my shirt. It’s easy to clip a lapel mic to a shirt because there are gaps between buttons where you can clip the mic, and the buttons ensure it doesn’t ride up or slip down. Then you have to find a place to clip/hide the wireless receiver (often referred to as a ‘mic pack’) and all the cable that runs between the mic and the receiver. It’s usually easiest to attach the mic pack to a waistband or belt or put it a back pocket. Then you can hide the cable under your clothes so it doesn’t look messy or get caught or tangled while you’re speaking.

On this occasion, the tech person clipped the lapel mic to my shirt, then put their hand down the inside of my shirt to feed the mic pack and cable to the back of my body.

Scenario two was a talk where I needed a head mic, a small mic that sits alongside the face, attached with hooks over the ears and around the back of the head. As with the lapel mic, you have to attach the mic pack to something and hide the cables. I was wearing a dress with tights underneath, and I knew this meant it was slightly trickier to attach the mic pack. Still, I was prepared to fit it to the waistband at the back of my tights.

I discussed the fitting with the tech person who promptly lifted the back of my dress to start putting the mic pack on the waistband of my tights. They also did the same thing again when I went to remove the mic after my talk.

On both occasions I assured the tech person I knew how to fit a microphone, and was willing to put the microphone where they needed, based on their advice. I’ve used microphones enough times to know the basics, but also understand that they’re the experts and know what will produce the best sound quality. Both times, when I was uncomfortable with the way they touched me, I quickly moved, taking the mic pack away from them, to do it myself.

I don’t think either of these people had ulterior motives, they weren’t trying to harass me. But both incidents made me incredibly uncomfortable. I don’t expect to be touched, or to have my clothes moved or removed, by a stranger without my permission or at least prior warning.

It would be easy to consider me overly sensitive or insecure to react in such a way in these scenarios. But honestly, having strangers touch you like this can really throw you, especially if you’re already feeling tense and unsure of yourself. I don’t want to be touched up by a stranger before waltzing on stage! Both times I didn’t make a fuss (though I had every right to do so) but instead told the organisers later. Mostly because I was about to give a talk and take part in a panel. I was already nervous and my mind was occupied with doing the best job I could for the event. I didn’t need to be worrying about what just happened on top of everything else. I’m usually nervous and awkward for the first few minutes of an event, it takes me time to warm up and be comfortable in front of people. These experiences amplified that tense nervousness and the feeling I was not in control.

And I didn’t need to be made to feel this way. It wasn’t appropriate behaviour that considered my feelings. These were both events staffed with professional tech teams. They weren’t even volunteers or people who hadn’t fitted microphones before. And importantly, this doesn’t happen at every event where I speak. For better or worse, I’m the kind of conflict-averse person that’ll put up with a lot of slights before I comment. I can imagine experiences like this could completely alienate women and other marginalised people who are new to speaking.

We need to conduct ourselves in an inclusive and considerate manner to attract (and not deter!) more speakers to spaces where their voices are desperately needed.

A panel where I was wearing that same dress with tights. The person who helped fit my microphone was helpful and respectful. (I have the mic pack on my lap because I didn’t want to squash it when I sat down!)

How to fit a microphone to a person without making them feel uncomfortable

I asked for advice on Twitter and Mastodon because couldn’t find any useful or relevant guidance on how to fit a microphone to a person without making them feel uncomfortable. Is this because it’s considered common sense? Is it because professionals have their own policies? I’ve no idea, but given that many conference organisers are folks who don’t have a background in event management, maybe some basic guidance would be useful.

Adam Markon kindly shared his protocol when he used to work in TV production for sports:

demonstrate on ourselves where we need everything to go and explain how the mic itself works if they don’t know

ask if they’re comfortable doing it themselves or if they need help with any steps

if they need help at any point be very clear about where your hands will be and what you’re trying to do

This really covers all the basics. Personally I don’t require someone of the same gender to fit my microphone (understandably this would make some people feel more comfortable.) I’m even fine with being touched by a person fitting a microphone, just as long as they ask first and warn me what they’re doing to do. Karen Reilly recommended this interesting forum thread on etiquette for fitting mics. There’s so much valuable advice in there too (along with some odd suggestions like wearing gloves!)

If you’re a conference organiser reading this, I’d really appreciate you briefing your tech team on fitting microphones. Even if they’re a professional team where you assume they know what they’re doing. I’d consider it a vital part of enforcing a code of conduct, and a way to show you really care about the experience of your speakers. Little things make a difference.

Thanks to Aral for his proof-reading eye.

Read the original post, ‘Mic Issues’.

Silicon Valley Darkness and Being a Woman

Tue, 26 Feb 2019 11:45:20 +0000

I’m not committing to a weekly anything! Incidentally, here’s the best bookmarks I saved in Week 9, 2019.

Silicon Valley Darkness

If you used to read my Ind.ie roundups or you follow @indie@mastodon.ind.ie on Mastodon and @indie on Twitter (I post lots of links there!), you’ll know I’ve always got something to populate this category. I am not your breathless startup cheerleader. Links this week feature lights being shone on the darkness of Facebook and Google, and UK and EU regulators trying (and often failing) to rein in the Silicon Valley monsters.

You Give Apps Sensitive Personal Information. Then They Tell Facebook.

By Sam Schechner and Mark Secada on The Wall Street Journal.

“The social-media giant collects intensely personal information from many popular smartphone apps just seconds after users enter it, even if the user has no connection to Facebook”

Article: You Give Apps Sensitive Personal Information. Then They Tell Facebook.

Nest Secure had a secret microphone, can now be a Google Assistant

By Ms. Smith on CSO

“If your IoT device secretly contained a microphone, which was previously undocumented, would you be happy when the device maker announced an over-the-air update that can enable the microphone for virtual assistant voice functionality? That’s what happened with the security alarm system Nest Secure.”

Article: Nest Secure had a secret microphone, can now be a Google Assistant

Facebook labelled ‘digital gangsters’ by report on fake news

By David Pegg on The Guardian

Labour moved quickly to endorse the committee’s findings, with the party’s deputy leader, Tom Watson, announcing: “Labour agrees with the committee’s ultimate conclusion – the era of self-regulation for tech companies must end immediately.

“We need new independent regulation with a tough powers and sanctions regime to curb the worst excesses of surveillance capitalism and the forces trying to use technology to subvert our democracy.”

Article: Facebook labelled ‘digital gangsters’ by report on fake news

Why a focus on “fake news” and Facebook misses the internet’s real problems - and solutions

By Jennifer Cobbe on Open Democracy

“The biggest oversight… is in diagnosing disinformation as essentially a problem with Facebook, rather than a systemic issue emerging in part from the pollution of online spaces by the business model that Facebook shares with others: the surveillance and modification of human behaviour for profit.”

Article: Why a focus on “fake news” and Facebook misses the internet’s real problems - and solutions

Even the IAB warned adtech risks EU privacy rules

By Natasha Lomas on Techcrunch

“The IAB is certainly seeking to deploy pro-privacy arguments to try to dilute Europeans’ privacy rights.”

Article: Even the IAB warned adtech risks EU privacy rules

The secret lives of Facebook moderators in America

By Casey Newton on The Verge

“That people don’t know there are human beings doing this work is, of course, by design. Facebook would rather talk about its advancements in artificial intelligence, and dangle the prospect that its reliance on human moderators will decline over time.

But given the limits of the technology, and the infinite varieties of human speech, such a day appears to be very far away. In the meantime, the call center model of content moderation is taking an ugly toll on many of its workers.”

Article: The secret lives of Facebook moderators in America

CSS for good and evil

I like the trajectory of this post, looking at how CSS is employed to thwart blocking technologies, then to how the same CSS could be used in a positive manner, all wrapped in accessibility concerns.

Letters

By Chris Coyier on CSS Tricks.

‘It just feels so rude, doesn’t it? Like a user specifically installs technology onto their computer in order to exert some control over what they allow onto their computers and into their eyeballs. And they are saying, “No, we do not respect that choice. We are going to fight your technology with our technology and force feed this stuff onto your computer and your eyeballs.” Doesn’t sit right.’

Article: Letters

Being a woman

Over the last decade I’ve gone from being wilfully ignorant of how women are treated to being frustrated by it on a daily basis. The last week gave me horror and horrified delight from two bookmarks.

The deadly truth about a world built for men – from stab vests to car crashes

By Caroline Criado-Perez on The Guardian.

“Crash-test dummies based on the ‘average’ male are just one example of design that forgets about women – and puts lives at risk”

Article: The deadly truth about a world built for men – from stab vests to car crashes

The Reply Guy Constitution

By Emlyn Crenshaw on McSweeney’s.

“Section 2 – The Comment. Our replies to all tweets shall fall into one of the following categories: unsolicited advice, explanation, contrarian comment, request for research to be done on Our behalf, improvement upon the joke, and/or sucketh upping. When We cannot think of a proper reply to the tweet in question, a .gif of minimal relevance shall suffice. Above all, no woman shall be excluded from Our familiar and chummy tone.”

Funny: The Reply Guy Constitution

Light relief

Ending on something nice… ten years ago, my pal and then-flatmate Scott Coello made this animation for a dog I loved. His work on it features heavily in my memory of our last year at university, and likely includes some of my junk mail. The animation is so good, adorable, and really stands the test of time.

She Farted And Created The World

By Scott Coello on Vimeo.

Video: She Farted And Created The World

Read the original post, ‘Silicon Valley Darkness and Being a Woman’.

Elastic Brand podcast

Tue, 05 Feb 2019 12:03:06 +0000

Last Friday afternoon, I had a lovely chat with Liz Elcoate about ethics, inclusivity and accessibility in design and branding. That chat is now available as Episode 4 of Liz’s podcast, The Elastic Brand.

Too often, designers feel like they’re operating on the whims of their clients or employers, implementing design in a superficial manner, not able to have an impact. We discuss how that doesn’t have to be the case, and how we hope our insecurities are making us better people and designers!

Listen to Episode 4 of The Elastic Brand podcast on the podcast website.

Read the original post, ‘Elastic Brand podcast’.

Ethical design is not superficial

Tue, 22 Jan 2019 17:40:50 +0000

We are seeing more and more organisations starting to talk about ethical design. Unfortunately I suspect this has less to do with caring about the impact of unethical design on society, democracy and the environment, and more to do with organisations attempting to distance themselves from similar businesses who are finding it impossible to continue to disguise their toxicity.

Matt Alagiah, me, Alex Macleod, Zander Brade and Deborah Goschalk. Photo by my brilliant sister, Jessica Kalbag.

Last night I spoke on a panel in London on “Designing For Tomorrow”, put on by Spotify Design. It was a fun chat, and we started to scratch the surface of some interesting ideas, but thirty-five minutes wasn’t enough time to dig down into a more substantial discussion. These are some thoughts I wanted to expand upon, and others that have been bouncing around my head since last night.

Ethical design is not superficial. It is not a trend, a fad, a framework, a library, or a marketing ploy. To truly commit to ethical design, we need to embrace a complete change of approach, method, and outcome in our work. And expect to ask, and answer, really difficult questions.

What do I mean by ethical design? The potential harms we can cause, and ways in which we can be complicit, varies between industries. In the tech industry, we’re generally getting better at making products functional, convenient and reliable. We’ve even improving at considering the experience of our products for those using them.

But we’re terrible at respecting people’s human rights with these products. We build products that are usable, even fun to use, but we consistently abuse or ignore people’s rights to privacy and security. We build products that exclude and exploit vulnerable people, and people from marginalised groups. We build products that centralise and concentrate power for a few CEO dictator-kings, taking ownership and control of people’s personal information and the content they create to express themselves. This isn’t something we can solve by saying “I care about ethics.” We have to actually do something.

Dilution

Can you be an ethical cog in an unethical machine? Can you be an ethical individual working for an unethical employer? Given the state of the world, and the absolute state of capitalism, it’s arguable that any attempt at being ethical is being an ethical individual in an unethical system. But that doesn’t mean our attempts are always futile, or that we have no control over the impact we can effect. I think it’s about dilution.

In a small team, you may be able to build ethical design processes, and work with an ethical approach, but if your employer’s business model is fundamentally unethical (for example they’re one of the many businesses exploiting people’s personal information for financial gain, also known as surveillance capitalists) your impact is both diluted and limited.

The less agency you have, the less ability you have to change an organisation’s funding model or business goals, the less impact you have. If you’re responsible for one component in a system, you are not going to steer the direction of a product or business, no matter how good or persuasive you are.

With every decision you cannot control, your efforts will be seriously diluted. At best, you’re having some impact on the outlook and work of those around you. But “guerilla” tactics can only get you so far.

At worse, you are providing the superficial appearance of ethics, adding positive reputation to a business that does not deserve it. At worse, you are luring more people into using an unethical product because you’ve disguised it as something more ethical, you’ve given it legitimacy.

Be uncomfortable

Ethics are not something you can try on to see if they make you look good. As I said last night on the panel, being ethical is not comfortable. It is living in a state of continually questioning what you are doing and the rationale behind your decisions. It is learning, iterating, and adapting to do the best you can in a given situation. It is being the person who asks the awkward questions and doesn’t follow orders to keep the peace. It is not going to make you rich or popular.

We should embrace being uncomfortable. We live in a political and social hellscape. The majority of us have no job security, we can’t afford houses and we can’t afford to have families. Many of us can’t even afford healthcare. None of this is comfortable, so we may as well do something to change that for our futures, and for future generations.

There’s no point wasting time pretending to be ethical when we could spend that time learning to have a real impact. If you aren’t able to do that with your current employer, find another, ethical employer. Last night folks laughed when Matt summed up my point as “quit your jobs,” but I mean it. Why are we stagnating in positions where we have no agency, are not valued, and are damaging the world around us? The only way we can have an impact is if we seek out the positions where we can do our best work.

Ethical design is not superficial.

Read the original post, ‘Ethical design is not superficial’.

My 2018

Tue, 01 Jan 2019 14:52:13 +0000

My first yearly roundup since my 2015 roundup. I’ve blogged over the last three years, so I needn’t summarise the last three years. Just 2018. My initial thoughts on 2018 were “I’ve not done enough.” But, actually, thinking back on it, I shouldn’t be so hard on myself.

Skip to photos

One of the reasons I felt behind on work was because of how much travelling I’ve done. We started the year in Ghent, working on the Indienet initiative. Working with the folks in Ghent, and travelling for conferences really dominated the first few of months of 2018.

In March, we moved from Malmö in Sweden to Cork in Ireland. And over 2018, we settled in far quicker than we did in Malmö. Being closer to the UK meant I returned more often to see my family, and it was easier for us to return to North East England for my grandfather’s funeral in November. Travelling is still utterly exhausting, I’ll never be good at it. But I’ve been learning better not to plan too much and burn out too hard with each trip.

The second half of 2018 was dominated by Better. Ahead of our releasing redesigned apps for iOS and macOS in September, I stepped up my work on Better’s blocking rules to try to publish new rules every couple of weeks (which ended up being fairly all-encompassing). This resulted in a lot of ranting and griping on social media whenever I had to block another awful tracker, or work my way around a site’s unethical attempts to block blockers. But it did give me more insight into how trackers work, how the businesses behind them operate, and how an extraordinary number of developers deploy prototyping code to live sites.

I don’t set New Year goals anymore. Just going to try to keep on keeping on. Trying to be better and trying to do better. (Pun not intended!)

Photos time!

Photos

My activity in GitLab code contributions this year. Noticeably more intense in the second half of the year. Mostly successful at not working on weekends!

Beautiful Ghent where we worked hard and made friends.

Snow across Europe at the beginning of the year meant this snow dog had some fun

My trip to Webstock in Wellington, New Zealand, was unbelievably brilliant. My sister Emily flew in from Sydney. We had a wonderful stay and they even flew us from my workshop to dinner in a helicopter! First helicopter trip for both of us, and one of many wonderful experiences the Webstock team gave us.

Living near the wood in Ireland has been perfect for Osky and me

In May, Osky had an operation to remove a wart from his eyelid. He looked miserable but recovered quickly!

In May, Sam and I also started recording the audiobook for Accessibility For Everyone, which we released in August.

In June, Aral and I did a little tour of Cork harbour. (It’s a very big harbour.)

One of many trips back to the UK, one time I even dressed up.

I made it for three days in Menorca for my family holiday. It’s now a yearly tradition to visit Binifadet and have a nice meal to remember my mum on the anniversary of her death.

Oskar made the most of the long summer by sunbathing. Weird snow dog.

On our way to Newcastle for the funeral in November, we stopped off in Dublin and managed to have a little time to ourselves to celebrate Aral’s birthday.

We finished the year with a road/ferry trip to England with Oskar. He didn’t like the kennels on the ferry, so on the return trip we spent two hours in cold on the top deck. Fine for a snow dog.

Read the original post, ‘My 2018’.

A little update on the Accessibility For Everyone audiobook sales

Wed, 19 Dec 2018 09:23:18 +0000

This is another in a series of winter catch-up posts.

In August, we released the Accessibility For Everyone audiobook, and did a big promotional push at the end of September, on the paperback’s first birthday.

Now the third quarter of the year is well over, I have some statistics on the audiobook sales.

In its first two months, before the push, we sold 96 audiobooks. Whether that’s a high or low number really depends on your expectations. I’m really pleased! The audiobook accounted for 19% of all sales (paperback, ebook, audiobook) for those two months. The audiobook was new, and the other formats had been out for a year, so that percentage will probably drop over the following months. But overall, making the audiobook version for 96+ people was definitely worthwhile.

You know I’m not in it to make money, but I was fortunate that my brother Sam had the expertise and generosity to produce the audiobook for me, so it was not an expensive undertaking. Much like making an ebook, many of us already own the tech equipment (computer, ok-quality microphone) required for producing an audiobook, it just requires some dedicated time.

The audiobook was planned all the way back in my original book proposal, it makes perfect sense to produce an audiobook for a book about accessibility. Still, I hope other authors in the web community see the relative success of this audiobook, and consider it as a format for their books too!

You can buy the Accessibility For Everyone audiobook on Audible.

Read the original post, ‘A little update on the Accessibility For Everyone audiobook sales’.

Unbothered on No, You Go Podcast

Tue, 18 Dec 2018 14:06:36 +0000

This is the first in a series of winter catch-up posts.

I’ve been a listener and fan of the No, You Go podcast since their first episode at the beginning of the year. So I was giddy and nervous (and flattered!) when Katel invited me to be their guest.

Despite having known and worked with Katel (CEO of A Book Apart, published my book) and Sara (was editor of A List Apart when I had a column there), I was jittery on the day of recording. Admittedly, I’d just worked through a weekend and was exhausted, but they’re also intimidatingly brilliant people. But my jitters didn’t matter, Katel and Sara were encouraging and kind, the recording was fun, and it felt really great to be talking to two people I really respect. And we covered a particularly tricky topic:

Writing a book is hard. Writing a book as a woman in tech is even harder. So what happens when some mansplainer comes along to rain on your well-earned parade? Laura Kalbag tells us about how she found the courage to write, why listening to women reminds her of what’s important, and how she keeps her cool even in the face of jerks.

You can listen to the podcast or read the transcript on their website. As of last week, No, You Go has been renamed Strong Feelings, so if you want to subscribe and listen to more of their episodes (you should!), you’ll want to search for Strong Feelings in your podcast app’s directory.

Read the original post, ‘Unbothered on No, You Go Podcast’.

Processing Responsive Images with Hugo

Thu, 13 Dec 2018 16:19:31 +0000

Over the last few months, I’d become embarrassed to share my blog posts, particularly image-heavy posts, as I was handling responsive images so badly. The images were all huge and it was my only big barrier in web performance (no tracking here!). With an archive of blog posts going back nearly a decade, it was going to be a big job to get my whole site working consistently, but I had an inkling I might be able to do it with Hugo’s Image Processing.

Over the last few weeks, iteratively and clumsily, I’ve developed a system that works for me:

For writing content:

My content is written in markdown, using shortcodes that mirror the HTML output as closely as possible.
Images live in the same folder as their post (in page bundles).
Every image can be used alone, wrapped in a figure with a figcaption, and/or wrapped in a link. Multiple images can be used inside one figure.
Every image has alt text, even if it’s used outside of its post.

For responsiveness:

Each image is resized into multiple sizes by Hugo, and included in the srcset list for the img.
Images grouped in figures can be arranged in a responsive grid.

For maintainability:

An example of the shortcode is included by default with every new post. Because I have a terrible memory, and I can only keep updating my blog if it’s really easy to do so.

Responsive images

Edit: I learned loads about srcset and responsive images from Mat Marquis’s wonderful book, Image Performance. Eric Portis’s thorough Srcset and sizes post also helped me understand the basics with loads of examples.

Hugo page bundles

Hugo’s page bundles are a way to structure your Hugo content hierarchy. Page bundles are useful as they enable you to group resources (such as images) with a post without having to include them in that post’s front matter. You could just include a shortcode in the post (or outside the post) that says “grab all the images that match these criteria.”

Resources with a type of image can also be processed by Hugo’s Image Processing. Processing is what enabled me to generate multiple image sizes from one original image. So I had to ensure all my posts used the page bundle content hierarchy.

It took a long time to get my head around page bundles. The Hugo documentation can be abstract as it tries to cover as many use cases as possible. (The brevity of the Hugo documentation can also be infuriating, and if one more person tells me that it’s “open to pull requests,” I will scream.) My understanding on page bundles boils down to this:

if a file is called _index.md, it is considered the index of a section/kind, and so uses the list.html template.
if a file is called index.md, it is considered the index of a page/post, and so uses the single.html template.

So, to put my blog posts in page bundle hierarchy, where their images could be used as resources, I had to restructure them to match the following pattern:

/processing-responsive-images-with-hugo
- index.md
- screenshot.jpg
- screenshot2.jpg

If you name your page _index.md, the images will not register as page resources, the image processing will not work. I lost an hour to that, I hope you don’t!

As my blog posts were all previously in a WordPress-style hierarchy that had been hurriedly refactored into Hugo, my blog posts were named processing-responsive-images-with-hugo.md, and all images were held in date-based folders inside the /static folder. Cue a lot of RegEx, a renaming script kindly written for me by Aral, and a lot of time manually moving images around until running hugo server -D no long spat out errors.

Shortcodes

Caveat: I’m relatively new to Hugo, Go, and the templating language (I don’t know what it’s called). My code may not be pretty, but it works! If you have any suggestions for improvement, I’d appreciate them.

Images

In a post, I can include an image in the markdown using the img shortcode:

{{< img src="theonion.jpg" alt="Screenshot of the Onion homepage" >}}

This will output the final HTML, resizing theonion.jpg into three sizes, 500px wide, 800px wide, and 1200px wide. For browsers that do not support the srcset attribute, the src is set to one of the middle-sized images (hopefully not too big too load or too small to look ok.) The sizes attribute has a sensible default for images that fill most of/the whole width of the viewport, but this can be overridden in the shortcode:

<img sizes="(min-width: 35em) 1200px, 100vw" 
  srcset="/you-wont-believe-what-happens-next/006_…_472240_500x0_resize_q100_gaussian.jpg 500w, /you-wont-believe-what-happens-next/006_…_472240_800x0_resize_q100_gaussian.jpg 800w, /you-wont-believe-what-happens-next/006_…_472240_1200x0_resize_q100_gaussian.jpg 1200w" src="/you-wont-believe-what-happens-next/006_…_472240_1200x0_resize_q100_gaussian.jpg" 
  alt="Screenshot of the Onion homepage">

See this image example in action on my post ‘Digital Assistants, Facebook Quizzes, And Fake News! You Won’t Believe What Happens Next’.

Using the shortcode code:

layouts/shortcodes/img.html:

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}

{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1500x" }}

{{/* resize the src image to the given sizes */}}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}
{{ .Scratch.Set "large" ($src.Resize $largew) }}

{{/* add the processed images to the scratch */}}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}
{{ $large := .Scratch.Get "large" }}

{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}

<img 
  {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}sizes="(min-width: 35em) 1200px, 100vw"{{ end }}
  srcset='
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1500" }}
    {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
  {{ end }}'
  {{ if .Get (print $medium) }}
    src="{{ $medium.RelPermalink }}" 
  {{ else }}
    src="{{ $src.RelPermalink }}" 
  {{ end }}
  {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end >}}

Reading the comments above, you might notice that Hugo will upscale small images, so if your original image is only 1200px wide, it will still generate a blurry mess at 1500px wide. My solution was to include the images in the srcset list only if they were narrower than the original width.

Figures

In a post, I can include one or more images wrapped in a figure using the figure shortcode:

{{< figure class="grid two" figcaption="Inevitable" >}}
  {{< img src="osky-1.jpg" alt="Selfie of me and Oskar the huskamute, he’s looking at me." >}}
  {{< img src="osky-2.jpg" alt="Selfie of me and Oskar the huskamute, he’s licking my face." >}}
{{< /figure >}}

This uses the img shortcode, and wraps it in the figure shortcode, just as you would with the <img> and <figure> elements in the HTML. The figcaption is included in the figure shortcode though (this wouldn’t work in HTML!) I may adjust that part of the shortcode to behave more like the <figure> HTML in the future.

I’ve also included CSS that uses the grid and two class names to lay out the images to make better use of the available space. This will output the following HTML, similar to the previous example, but with an extra figure around it:

<figure class="grid two">
  <img sizes="(min-width: 35em) 1200px, 100vw" srcset="
  /photos/5/osky-1_…_500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-1_…_800x0_resize_q100_gaussian.jpg 800w" src="/photos/5/osky-1_…_1200x0_resize_q100_gaussian.jpg" 
  alt="Selfie of me and Oskar the huskamute, he’s looking at me.">
  <img sizes="(min-width: 35em) 1200px, 100vw" srcset="/photos/5/osky-2_…_500x0_resize_q100_gaussian.jpg 500w, /photos/5/osky-2_…_800x0_resize_q100_gaussian.jpg 800w"   
  src="/photos/5/osky-2_…_1200x0_resize_q100_gaussian.jpg" 
  alt="Selfie of me and Oskar the huskamute, he’s licking my face.">
  <figcaption>
    <p>Inevitable</p>
  </figcaption>
</figure>

See this image example in action on a photo post.

Using the shortcode code:

layouts/shortcodes/figure.html:

<figure {{ with .Get "class" }}class="{{.}}"{{ end >}}
  {{.Inner}}
    <figcaption>
      <p>{{ .Get "figcaption" }}</p>
  </figcaption>
</figure>

This shortcode is much simpler than the default Hugo figure.html shortcode because I’m fairly sure I use figures consistently on my site.

Linked images

Previously, I had a strange setup where, if I wanted an image to link to elsewhere, I would wrap the shortcode in a markdown link:

[{{< img etc >}}](https://website.com)

Nesting that many brackets makes it way too easy to make typos, so I just made a quick little shortcode for links. It will work with anything, not just images, but is ideal for wrapping around other shortcodes:

{{< link href="https://theonion.com" >}}
  {{< img src="theonion.jpg" alt="Screenshot of the Onion homepage" >}}
{{< /link >}}

Using this shortcode layouts/shortcodes/link.html:

<a {{ with .Get "href" }}href="{{.}}"{{ end >}}
  {{.Inner}}
</a>

I could’ve called the shortcode “a” to be more consistent with HTML, but with my forgetful future self in mind, I thought link to be more memorable.

Archetypes

Even though these shortcodes are (mostly) consistent with their HTML output, I have a terrible memory for shortcodes, acronyms, and any type of code that doesn’t follow a memorable pattern. To save myself the time copy-pasting the shortcodes every time I write a new post, I added little placeholder shortcodes to the archetypes for each post type. So my archetypes/post.md file looks a little like this:

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true

bodyClasses: "blog"
---

Post text<!--more-->

{{< figure figcaption="caption text" >}}

  {{< img src="filenameX" alt="alt text" >}}

{{< /figure >}}

Handling galleries

One of the great features when using image processing in page bundles is that you can grab the images outside of the post for a gallery. It’s what I’m doing for my Photos page.

Each photo list page gets all the photo posts, and then uses my summary-photo.html partial to render each image. I needed the images in the photo gallery to display differently from a blog post. There’s no need to load massive images in for small thumbnails. I also wanted the photos arranged in a grid, so I used image processing to resize and crop the images the fill the desired space:

<li class="post photo-post">
  <a href="{{.Permalink}}">
    <img
      {{ with .Resources }}
        {{ with .GetMatch "{*.*,*.jpg,*.png,*.jpeg}" }}
        {{ $photo := .Fill "600x600" }}
        {{ with $photo }}
          src='{{ .Permalink }}'  
        {{ end }}
      {{ end }}
    {{ end }}
    alt="{{ .Params.imagealt }}"/>
  </a>
</li>

This code just grabs the first image associated with each photo post. But there’s a problem with only grabbing an image: there’s no alternative text (alt attribute) associated with that image file alone.

Making the gallery more accessible

This is where the alt="{{ .Params.imagealt }}" comes in. For each photo post, it checks the post’s front matter for some alternative text. Going back to my earlier example, the first image in the figure looks like this:

{{< img src="osky-1.jpg" alt="Selfie of me and Oskar the huskamute, he’s looking at me." >}}

So all I need to do is duplicate that alt text in the front matter of that post. The whole post looks something like this:

---
title: 20 July 2018 21:28 IST
date: 2018-07-20T21:28:23+01:00
tags: ["oskar"]
aliases:
  - /photos/2018/07/20/21/28/index.md
bodyClasses: "social notes latest"
colourTheme: "colours-008"
altText: "Selfie of me and Oskar the huskamute, he’s licking my face."
---

{{< figure class="grid two" figcaption="Inevitable" >}}
  {{< img src="osky-1" alt="Selfie of me and Oskar the huskamute, he’s looking at me." >}}
  {{< img src="osky-2" alt="Selfie of me and Oskar the huskamute, he’s licking my face." >}}
{{< /figure >}}

In the future, I could probably find a way to automate this, rather than creating the repetition. But for now, my images are that bit more accessible, and that’s the important thing!

I hope documenting all of this will help someone else. I’m sorry my code examples aren’t very pretty, and I’ve not yet got all the dashes in to wrangle the whitespace in Go. Just before this post was published, I also got social media meta images in the <head> of my pages generating at the right sizes, so let me know if that might be a useful snippet to blog too!

(Big thank you to @jonathanulco on GitHub for sending me a pull request with the alt="" fallback for decorative images/images without alternative text. And to Caleb Jasik for pointing me to the fix for Hugo versions 0.59.0+.)

Read the original post, ‘Processing Responsive Images with Hugo’.

Thunder Nerds Podcast

Mon, 22 Oct 2018 14:50:35 +0100

On Saturday evening, I had a lovely chat with Jenell Pizarro, Brian Hinton and Frederick Philip Von Weiss for their Thunder Nerds podcast. You can watch the video or listen to the audio on the Thunder Nerds site.

After seeing their impressive previous guest list, and listening to a couple of their recent shows, I was excited to chat to such friendly and enthusiastic folks. We covered a whole lot of topics, including privacy, business models and accessibility. I always worry that I ramble a bit on podcasts like this, but Jenell, Brian and Frederick were very kind and held a fun discussion.

I’ll definitely be listening to their back catalogue, and keeping an ear out for their new guests in the future.

If you watch the whole video, you can see me slowly descend into darkness as the sun sets…

Read the original post, ‘Thunder Nerds Podcast’.

One Year Bookiversary

Wed, 26 Sep 2018 18:17:28 +0100

It’s been one whole year since my book, Accessibility For Everyone, came out in paperback and ebook.

Did you read it? Did it help you make more accessible websites? If you didn’t read it yet (or even want to read it again…!) you can always listen to the audiobook on Audible. The whole book takes less than an afternoon…

Please tell me you enjoyed it more than Osky did…

Read the original post, ‘One Year Bookiversary’.

What is Mastodon and why should I use it?

Wed, 05 Sep 2018 10:45:21 +0100

This post is a follow-up to What’s wrong with Twitter?.

You can read this post en français on the Framasoft blog.

Mastodon started out as a microblogging platform similar to Twitter, but has evolved with more features that show an ethical, progressive and inclusive focus. Instead of tweets, your posts on Mastodon are called toots.

Jump to:

Now you know why I’m moving away from Twitter, you probably have a vague idea of what I’m looking for in a social network. Mastodon is unique for a few reasons:

Mastodon is federated

“Mastodon isn’t just a website, it is a federation—think Star Trek. Thousands of independent communities running Mastodon form a coherent network, where while every planet is different, being part of one is being part of the whole.”

Federation means there are lots of different communities running the Mastodon software, but every individual in each community can talk to each other using Mastodon too. Each domain where Mastodon is being run is referred to as an “instance.”

Federation vs centralisation

In my post about Twitter, I mentioned “because we are using the platforms of big corporations, we hand the responsibility for decisions on how to handle abuse over to corporate control.” That way the power is held by an individual or small group of people is a form of centralisation.

There are different ways centralisation is manifested across the web, but for platforms like Twitter, centralisation means the platform is run on a server owned and controlled by that corporation. So to use Twitter, you have to go to Twitter.com, or use a service or app that communicates directly with Twitter.com. This means that Twitter has absolute control over its software, how people use it, and the profile and behavioural data about those people too. Aral explains this by saying these platforms are not like parks, but like shopping malls. You can enter freely, meet your friends there, have conversations and buy stuff, but you are subject to their rules. They can monitor you with surveillance cameras, they can surround you with advertising, and they can kick you out if they don’t like what you’re saying or doing.

The opposite of centralisation is decentralisation. One decentralising alternative to publishing on Twitter is posting your little status updates to your blog, like I do with my Notes. That way I own and control my own content. (Within the bounds of my web host.) If everyone posted their status updates to their blogs, but goes to read each other’s blogs, that would be a decentralised network.

But posting status updates to a blog misses the social element of social networks. We don’t just use social networks to shout into the void, we use them to share experiences with each other. Aral and I are working on ways for us to do this with our personal sites, but we’re not there yet. And that’s where federation comes in.

I have my own Mastodon instance, mastodon.laurakalbag.com where it’s just me (and Oskar). This is referred to as an “instance-of-one.” It’s hosted on my own domain, so I own and control everything I post on there, but because I have the Mastodon installed on there, I can see what other people post on their Mastodon instances, and reply to them with mentions, or favourite and boost (like retweet) their toots, even though they are on different instances. It’s like having my own Twitter which can talk to other Twitters, where I make the rules.

Mastodon is ethical

You can tell a lot about Mastodon’s approach from the Join Mastodon homepage:

“Mastodon is free, open-source software that anyone can install on a server.”

Mastodon is free and open, which is why we can have our own instances with our own rules. It also means that if Eugen Rochko, who makes Mastodon, went in a direction that people didn’t like, we (dependent on our capabilities) can fork it, and make our own version.

“Using a suit of standard protocols, Mastodon servers can exchange information with each other, allowing users to interact seamlessly… Thanks to standard protocols, the network is not limited to Mastodon servers. If better software comes along, it can continue with the same social graph.”

Mastodon uses standard protocols, which means that you can federate with Mastodon even if you are not using Mastodon yourself. This means you’re not locked into Mastodon, as it is interoperable, but also that other technology can work with your toots in the future.

“There is no advertising, monetizing, or venture capital. Your donations directly support full-time development of the project.”

This is a big deal. Mastodon is funded by donations, not advertising or any other nefarious way to monetise your information, and not by venture capital. This means there’s no board of directors who will decide that they need to start doing stuff to monetise you to get a return on their investment, or for “growth.” It does mean that we are dependent on the good will and generosity of Eugen. But, as I mentioned above, because Mastodon is free and open, if Eugen somehow becomes a monster (it seems unlikely), we can fork Mastodon and make a different version that works for us.

Mastodon is inclusive

One of the biggest issues with Twitter is the moderation (or lack thereof) of harassment and abuse. Cage The Mastodon is a post by Eugen which explains how Mastodon is designed to prevent harassment where possible, and give you tools to ensures your timeline, and your replies, are only what you want to see.

“Mastodon comes with effective anti-abuse tools to help protect yourself. Thanks to the network’s spread out and independent nature there are more moderators who you can approach for personal help, and servers with strict codes of conduct.”

Of course, Mastodon is not perfect—this constructive criticism by Nolan Lawson covers some of the biggest issues and potential approaches—but Mastodon prioritises anti-abuse tools, and folks working on Mastodon prioritise design decisions that favour safety. For example, you cannot just search for a keyword on Mastodon. This means people looking to start a fight or a pile-on can’t just go searching for ammunition in other people’s toots. If you do want keywords in your toots to be searchable, you can use hashtags, which are searchable.

Another of my favourite features of Mastodon is that you can provide alternative text descriptions for images a as default without the option being hidden in an “Accessibility” menu.

It’s a subtle way of Mastodon telling people that they’re expected to make their images accessible for their friends.

How to use Mastodon

I’m not an expert, and my use of Mastodon is still in its infancy. Here are a list of great How-To guides by people who know Mastodon far better than me:

An Increasingly Less-Brief Guide to Mastodon by @joyeusenoelle—Simply-written guide following a Frequently-Asked-Questions format. Useful if you want to find an answer to a specific question.
Toot How-to: Intro to Mastodon by Ginny McQueen—Covers all the introductory basics to Mastodon with an eye on keeping yourself safe.
What is Mastodon and why is it better than Twitter by Nolan Lawson—A detailed introduction to Mastodon and some of its history.
Cage The Mastodon by Eugen Rochko—“An overview of features for dealing with abuse and harassment” which also explains the design decisions behind Mastodon.
How Does Mastodon Work? By Kev Quirk—Introduces Mastodon with comparisons to Twitter, in case that makes it easier to understand.
Mastodon Post Privacy—A toot explaining who can see what when you toot on Mastodon with various settings.
The Definitive List—A handy of apps and web clients for using with Mastodon, beyond the default interface. It also has other useful stuff listed, such as cross-posting tools.

Join a small instance, or get your own

If you’re interested in Mastodon, you will have to pick an instance you want to join, or set up your own. I’m an advocate for instances-of-one in most cases, but if you just want to dip your toes in, or have bad experiences being harassed on social media elsewhere, I recommend you join a small instance with a Code of Conduct that suits you.

Most people join mastodon.social (I did) first. You should not join mastodon.social. It is the largest English-language instance run by the developers of Mastodon, including Eugen Rochko (also known as @gargron.) They have a No-Nazis policy and seem to care a great deal. However, mastodon.social has a lot of people using it. When I last checked, it was just short of 230,000 people. This means there’s a lot of pressure on the moderators, and on the server, and it really defeats the federated design if everyone joins the same instance. Remember, you can easily communicate with a person on any other Mastodon instance. If people are nagging you to join their instance, and it’s not for the superior Code of Conduct and moderation, I would question their motives.

Be aware that an instance’s admin can read your direct messages. Also the admin of the instance that the person you are messaging belongs to. This is because your private messages are not end-to-end encrypted. While I don’t think this is catastrophic to Mastodon (it’s exactly the same with your messages on Twitter, Facebook, Slack etc.), it’s a reminder that you really need to be able to trust the admin for your instance. Also if you want truly secure and private messaging, you should always use a dedicated messenger with end-to-end encrypted messaging, such as Wire.

Why doesn’t Ind.ie have an instance we can join?

A few people have encouraged Aral and I to start our own instance. We won’t do this because:

Most importantly: decentralisation is our goal. We don’t want to be responsible for owning and controlling your content, even if you trust us with it. (You shouldn’t!)
Also, we would be lousy moderators. Moderators should be trained and have relevant experience. They are the first defence against harassment and abuse. Moderators must be fair arbiters in disagreements, and enforce their Code of Conduct. That is a full-time job, and I believe it can only be effective on small instances.

My instance-of-one

I first joined Mastodon.social in late 2016. While I was fairly active on the @Better and @Indie accounts, my own account was very quiet. Mastodon.social was already fairly big, and I wanted to have my own instance, and not invest too much of my time in an account that would eventually cease to exist.

But I didn’t want to host and maintain a Mastodon instance by myself. It’s big and complex software, and I am not a big and complex backend developer or sysadmin. Also I just don’t have time for learning the skills required, or even keeping up-to-date with new releases and security updates.

So when Masto.host, a webhost for “fully managed Mastodon hosting” was recommended to me, I knew this was what I needed to make the leap into hosting my own instance.

Why set up an instance-of-one?

Everything I post is under my control on my server. I can guarantee that my Mastodon instance won’t start profiling me, or posting ads, or inviting Nazis to tea, because I am the boss of my instance. I have access to all my content for all time, and only my web host or Internet Service Provider can block my access (as with any self-hosted site.) And all blocking and filtering rules are under my control—you can block and filter what you want as an individual on another person’s instance, but you have no say in who/what they block and filter for the whole instance.

You can also make custom emoji for your own Mastodon instance that every other instance can see and/or share.

Why not set up an instance-of-one?

In a previous post about levels of decentralisation being beyond my means, I looked at the privilege that make us able, or unable, to embrace owning and controlling our own content. The same goes for social networking, particularly in terms of safety. Sometimes we don’t want to, or can’t, moderate our own social network.

I am a privileged person because I can deal with the low-level harassment I get. This is not a marker of my mental fortitude, it’s just the worst I get is creepy dudes coming on to me in my DMs, and some people slagging off our work at Ind.ie in an non-constructive and/or hurtful manner. It is not endless, it is manageable through conventional blocking and muting tools. (I’m also a fan of the pre-emptive block, but that is a post for another day.) I’ve not (yet?!) been the victim of a pile-on, targeted harassment, or more explicit abuse.

But many folks are the victims of this type of harassment and abuse, and they cannot be expected to maintain their own instances. Because in order to be able to effectively block, mute and moderate bad people and things, you have to see those bad people and things.

In the same way that I believe government should provide safety nets for society’s vulnerable and marginalised people, the web should too provide safety nets for the web’s vulnerable and marginalised people. I see small moderated instances as these safety nets. Ideally I reckon you should know your instance admin in person. Instances should be akin to families (with good relationships) or small clubs in the offline world. In those situations you may have someone who represents the group as a leader when required, but it’s an otherwise flat hierarchy.

Knowing good people who have your back is something of a privilege, so perhaps taking a word-of-mouth recommendation for a small instance from a person you know could suffice. I’ve not been in this position, so take my suggestions with a pinch of salt, I just want to emphasise the potential for negative repercussions when deciding who can control your online social life. (Take heed from those who have faced repercussions of Twitter or Facebook deciding how much racist abuse is ok or what is their real name.)

How to set up an instance-of-one

If, like me, you are not great with sysadmin, or just don’t have the time to maintain your own Mastodon instance, I recommend Masto.host. At Masto.host, Hugo Gameiro does the installation and hosting of small Mastodon instances for €5 a month. The process goes something like this:

Buy a domain name (if you don’t already have one you want to use)
Sign up for Masto.host and let Masto.host (Hugo) know the domain name you want to use. I’ve set mine up at mastodon.laurakalbag.com which is quite long, but it’s very clear that it is my Mastodon instance just from the name.
Set DNS settings. Masto.host then sends you a couple of changes that you need to make to your domain’s DNS settings. Most domain name providers will have a page where you can do this. Then let Masto.host know you’ve made those changes.
Create your Mastodon account. Masto.host will install your Mastodon instance. You will then get an email asking you to create your Mastodon account. Create the Mastodon account for your admin. Then let Masto.host know that is your chosen admin account. Masto.host will then grant your admin account those privileges.
Make your Mastodon instance what you want it to be. Once you have admin privileges, you can customise your Mastodon instance however you like. You probably want to start by closing registration to others (Settings > Administration > Site Settings.)

The whole process with Masto.host took around an hour for me. But bear in mind that this is a process that requires some manual intervention, so it could take longer. Masto.host is run by a single real human (Hugo), not a faceless corporation, who needs to sleep, eat, have a life, and maintain other instances, so if you do sign up for Masto.host, please be kind and polite!

But but but

Whenever you start to recommend an alternative social network, people will have their reasons for telling you why it is not for them. That’s fine. As long as the criticism is warranted. As Blaine Cook summarised well on Twitter…

“While I’ve been thinking about and working on this problem since the very beginnings of Twitter, I haven’t had much success at addressing these problems. Nor has anyone else.

These are hard problems. Facile criticism of earnest efforts isn’t going to get us anywhere.

Which isn’t to say criticism isn’t warranted. There are many legitimate issues. But if the argument defaults to “so we should all just continue to hang out on and moan about Twitter” it seriously undercuts the legitimacy of any criticism.” —Blaine Cook on Twitter.

Still, there are some arguments worth quickly covering:

All my friends/cool people/interesting discussions are on Twitter…

Were all your friends, the cool people, and the interesting discussions on Twitter when you joined? Treat Mastodon as a chance to start afresh, find new people to follow, maybe even take the opportunity to follow a more diverse group of people…! You can cross-post across Twitter and Mastodon if you must. (Just don’t cross-post retweets or @replies, it looks ugly and unreadable.)

I subscribe to accounts and lists on Twitter using RSS with Feedbin, so I can still keep an eye on Twitter while weaning myself off.

Even setting up my own instance only took an hour. Joining an existing instance takes less than 30 seconds once you’ve decided which instance to join. Instances.social can help you find a small instance that works for you. Make sure you read their Code of Conduct!

Join me there!

If you read this post and sign up for Mastodon, toot me! I’ll be happy to follow you and answer any questions you have about Mastodon or running your own instance (or boost them when I don’t know the answer!)

Mastodon may not be our final destination as a social network, it might be a stopgap along the way. But it is a genuine alternative to what already exists. We’re currently stuck with platforms that amplify our society’s systemic issues (racism, sexism, homophobia, transphobia) because we don’t have alternatives. We can’t escape these platforms because they’ve become our new social infrastructure. We’ve got to try out alternatives to see what sticks, and as folks who work with the web day-to-day, we should take responsibility for finding safe technology we can share with our loved ones.

Part 2 of a series on Social Networks

Part 1: What’s wrong with Twitter?

Read the original post, ‘What is Mastodon and why should I use it?’.

What’s wrong with Twitter?

Wed, 05 Sep 2018 10:39:35 +0100

You can read this post en français on the Framasoft blog.

A couple of weeks ago I posted a quick note mentioning I now have my own Mastodon instance. But first things first: why?

My aim is to use Mastodon as an alternative to Twitter. While Mastodon is not equivalent to Twitter, many of its features are similar. And I’m looking for an alternative to Twitter because Twitter is not good for me.

Sometimes I assume me saying “Twitter is not good for me” is self-explanatory, but it’s not a universally-held opinion. It’s worth explaining in a little more detail:

Surveillance capitalism

In short, what is wrong with Twitter is surveillance capitalism. If you’re not already familiar with the term, surveillance capitalism is the business model of mainstream technology. The technology tracks us, watching what we do—that’s the surveillance bit. And then uses that information to better sell to us, often through “relevant” advertising—that’s the capitalism bit. For clarity and brevity, Aral calls it “people farming.”

On social networks, such as Twitter and Facebook, we are generally aware that the ads we see fund the service that we use. However we are less aware of how algorithms affect which posts we see in our social network feeds, and what information is used to feed those algorithms. And how those algorithms, and the interface around it, are designed to manipulate us to interact with the service. We are broadly unaware of how most technology uses tracking, and their own algorithms, to addict us and manipulate our behaviour in a manner that is financially beneficial to them.

If this all sounds far-fetched, have a look at my blog version of my talk on ‘Digital Assistants, Facebook Quizzes, And Fake News! You Won’t Believe What Happens Next’.

What is wrong with Twitter… specifically?

Twitter’s business model of surveillance capitalism has an impact on every decision Twitter makes. Twitter rewards abusive behaviour on its algorithmic timeline because controversy drives “engagement.” Twitter builds cults of celebrity (be it around individuals or memes) because more people will signup to a platform to stay updated and prevent FOMO.

Twitter’s algorithm means Twitter decides what you see

Much like Facebook before it, Twitter’s decision to use algorithms to dictate what you see in your feed, rather than showing posts in a chronological order, means you can’t rely on the feed to show you the posts of the people you follow. (The workaround against the algorithmic feed is using Lists, but for that reason, I suspect Twitter will do away with the Lists feature at some point…)

You do not know if your tweets are being seen, or if you are seeing your friends tweets, because you have no insight into this algorithm. It appears that the algorithm favours popular and/or viral users and tweets, which then makes virality the ultimate aspiration for the seasoned social networker, on top of the very visible follower counts. (I’m not judging… I often decide if a person is worth following based on their follower count, don’t you?)

Twitter actually encourages abuse

Twitter lets abuse and harassment continue because engagement thrives on controversy. Dog-piling? That’s engagement! Women and people from marginalised groups being harassed off Twitter? But all those trolls are so engaging! What’s one woman leaving when the controversy will result in more people tweeting, or even signing up to have their say about the controversy? Why should Twitter, Inc. care about people when numbers is all that matters to the investors, and they’re the ones who keep the lights on? All social network corporations have to do is maintain the delicate balance of not making everybody so angry and alienated that they all leave. And given that so many of these folks are so “engaged” in Twitter (is this a good point to mention that “engagement” is probably just a euphemism for “addiction”?), they’re hard-pressed to leave. I am. Aren’t you?

If Twitter were to stick to a strict abuse and harassment policy, there would be fewer tweets. If Twitter were to give us adequate tools to moderate our own Twitter feeds, @replies, and messages, it would likely impact what the algorithm chooses to show us, affecting Twitter’s business which monetises what it prioritises on the algorithmic feed.

Twitter does not adequately deal with abuse

Moderating abuse is not easy. Deciding on what constitutes abuse, and how to appropriately deal with it, is an issue with every publishing platform and social network. They’re also systemic issues faced by local communities and legal systems. Which are usually handled (still often inadequately) by those communities and legal systems. But we have to be aware that technology amplifies these issues, by making it easier to target an individual and sustain an attack anonymously. And because we are using the platforms of big corporations, we hand the responsibility for decisions on how to handle abuse over to corporate control.

The staff at tech corporations should not be the people who decide what constitutes free speech and censorship on what has become our global social infrastructure. People who have financial interests in the outcome should not be able to make decisions about our rights, and what constitutes free speech.

Nuances

Of course there are also nuanced situations and design decisions around the algorithmic feed and the handling of harassment and abuse that are not primarily to serve surveillance capitalism. It could be that there are individuals working at the corporation who have benevolent intentions. (I have met some, I don’t doubt it!)

But because Twitter’s business model is focused around extracting information from people, design decisions that serve the business model will always be prioritised. Instances of benevolent behaviour are exceptions, not proving a pattern of “actually caring after all.” Such instances of kindness are unfortunately executed, or (to be generous) co-opted, to improve public relations.

Understanding my use

When asking myself honestly about why I still use Twitter, there are reasons and there are excuses. All my reasons are probably excuses, it depends how generous I am feeling towards myself on any given day. I am caught in a vortex of my beliefs vs my vanity.

Twitter is where I get news

Twitter is the first place I go for world and local news. It’s hard to find a news outlet that covers the current affairs and issues I care about without also publishing clickbait, listicles and SEO-driven junk. Unfortunately this is largely because web advertising (most of which is surveillance-based) is the business model of news publishing. So I curate my news by following a few news outlets and a lot of individual journalists.

There is a workaround: following Twitter accounts and lists on Feedbin, alongside the other RSS feeds I follow. All the tweets without the algorithm or apps attempting to manipulate your behaviour.

This is a temporary workaround as Twitter may find a way to ban this type of use. (Maybe we can move to RSS as our primary publishing means by then?) And obviously it won’t either help nor solve the issue of news media being reliant on surveillance capitalism as a business model.

Followers

Quite a few folks in the web industry have built up a big following on Twitter, and that’s hard to leave behind. (Mine is relatively small but big enough to flatter me on a bad day.) The nice way of looking at it is that you feel a responsibility to the people who followed you to keep up with industry news, and that you have a platform and reach to promote the issues you care about.

The cynical way to look at is would anyone truly notice if I stopped tweeting? I am one in a sea of many. Has a follower count just become another way to stroke my own ego, and prove my worth to myself because I’m hooked on the dopamine kick of a notification telling me that someone thinks I’m worth that tiny-click-of-a-button that is following? Maybe following me isn’t the joyous experience I smugly tell myself it is. There is no workaround for this except simultaneously self-improving and becoming less self-obsessed. As a millennial in a society driven by capitalism, I wish myself luck.

Friendships

Despite the follower/following model of Twitter, I do have friends on Twitter. I’ve gone on about online friendship before. I’ve made friends on Twitter, and I use it to keep up with people I know in person. I want to see how my friends are doing, what they are doing, and what they care about. I also want share small talk and meaningless nonsense with strangers, sharing in our experiences until we can become friends.

The workaround: Mastodon. A far-from-perfect but well-intentioned social network. In my next blog post, I’ll explain why (for now at least) it is the Twitter alternative for me.

Part 1 of a series on Social Networks

Part 2: What is Mastodon and why should I use it?

Read the original post, ‘What’s wrong with Twitter?’.

Custom Emoji on Mastodon

Tue, 04 Sep 2018 09:11:42 +0100

This morning I made an :indieHeart: custom emoji for Mastodon. Here are some things I learned.

One of the many cool features of Mastodon is that you can create custom emoji for your instances which can be duplicated and adopted by other instances.

The :indieHeart: shortcode in action…

Firstly, you need to have admin access to your instance to add custom emoji. (Another reason to get your own instance!) If you don’t have admin access, you could probably politely ask your instance’s admin to add your emoji to the instance’s list.
You need to be able to tell what the emoji is at 20x20 pixels, as this is the standard size it’s displayed on the Mastodon web view.
The emoji could be displayed on any colour background as different Mastodon themes have different coloured backgrounds. If you’re looking for compatibility with the (current) default Mastodon themes, check your emoji graphic with these hex colours as backgrounds: #1F232B, #282C37, #D9E1E8, #E6EBF0, #FFFFFF.
Make the bounding box square, even if your graphic is tall and narrow. It looks like some apps might render all emoji as the same height and width, so this will avoid your emoji looking stretched or squashed.
The 50KB limit for emoji files is fairly high for a simple shape, so you can afford to scale your image up to be pretty big (the indieHeart is 520x520px) so it looks sharp on screens with a higher resolution.
Thickening lines in the graphic will make them look better when the emoji is scaled down very small, as it will increase the contrast and visibility of the lines, particularly on higher resolution screens where fine lines can appear very thin.
You need to post a toot with the emoji shortcode in it on your own instance before it becomes available to copy by other instances.

Lastly, but importantly: the macOS screenreader VoiceOver reads “indie underscore heart, image” for :indie_heart: and “indie heart, image” for :indieHeart:.

So while word_word or wordword seems to be the standard for multiple-word emoji on Mastodon, using camel case is probably more accessible.

Read the original post, ‘Custom Emoji on Mastodon’.

Accessibility for Everyone Audiobook

Tue, 14 Aug 2018 13:44:04 +0100

I am very happy to tell you that the audiobook of Accessibility For Everyone is now available to buy on Audible.

It’s thanks to the hard work of my brother, Sam Kalbag, who single-handedly edited, engineered and produced the audiobook, helped me do the recording properly, and gave me the benefit of his extensive knowledge of audiobooks. And also Katel LeDû, A Book Apart’s CEO and all-round publishing legend, who navigated the Audible process for us all.

The “Health and Personal Development” category does make it sound a little like a self-help book…

Audiobook vs paperback and ebook

Looking back as far as the proposal I wrote in 2014, it’s always been important to me that a book about accessibility and inclusivity should include an audiobook. It makes reading more accessible to people who find it difficult or impossible to see or read text, folks who like to read while they’re doing other stuff, and anyone who just prefers the audio format.

As A Book Apart books are “brief books for people who make websites”, the audiobook itself is relatively short at 3.5 hours. It is unabridged, however I’ve summarised some of the images and code so that the listening experience is equivalent to the reading experience. Nobody wants to hear me read “open bracket, a element, href attribute equals open double quote…” The book is not really about code examples, so I hope my explanations provide the what and why behind those code chunks.

It is also narrated by me. I tried to pronounce everything correctly. And while the book is technically written in US English, it is read in very British English because I really can’t do anything else.

Please let me know if you find the audiobook useful, and where you listen to it! That would absolutely make my day.

Buy it on Audible today

There is also a long sample available on Audible which is similar to the sample of the text as previewed on A List Apart.

Sam and I will share more about our working process in the future. And I might write something about choosing to distribute the book via Audible too.

Read the original post, ‘Accessibility for Everyone Audiobook’.

Interview with Shannon Fisher about Accessibility For Everyone

Tue, 14 Aug 2018 13:36:25 +0100

A while back I had a lovely evening chatting with the fabulous Shannon Fisher about Accessibility For Everyone. Shannon asks really thoughtful questions, and it was fun chatting to someone who already cares so much about inclusivity.

What role does accessibility play in your design practice? Are you thoughtful about barriers that keep someone from accessing your site? Can you name them? Are you on the search for solutions? I sat down with Laura Kalbag, author of Accessibility for Everyone, to discuss why and how you should make accessibility a focus of your design practice.

With more and more designers pushing the envelope of web design, it’s important to remember the purpose our sites serve and that the best designs are accessible to anyone wanting to experience them. It’s time to push ourselves, our teams, and the design community to prioritize and incorporate accessibility as an inclusive and fundamental approach to design and development.

You can read the whole interview on Webflow’s Medium post.

Read the original post, ‘Interview with Shannon Fisher about Accessibility For Everyone’.

Cross-posting using meta information

Wed, 25 Jul 2018 10:31:01 +0100

Writing a few blog posts last week, and cross-posting them in various locations, got me thinking about how meta information can be reused.

I started looking into the meta information in the <head> of each page, and how best to format it so that social networks (Twitter, Facebook, messaging apps…) would pick up on titles, descriptions and images. That way, when I share a URL from my site, if the site/app has the functionality, they can expand that URL into a preview including a nicely-formatted title, summary, and image. When a platform expands a URL like this, it also saves on the cross-posting hassle, as just posting a URL pulls in the acceptable length of text, correct number of images, and any other arbitrary platform-specific limits. I can just paste a URL into an Apple Message, Slack, Facebook, Wire, and Twitter, and those platforms do the work:

The URL expanded on Slack

The URL expanded on Twitter

The URL expanded on Wire

The URL expanded on Apple Messages

The URL expanded on Facebook

An additional bonus is that if anyone else shares that URL from my site, the same preview will usually be shown, so I have some additional control.

Writing <meta> tags for each blog post or note could be very time-consuming, especially as Twitter cards and Open Graph require different formats, resulting in (currently) sixteen meta tags on each page of my site. Fortunately, it seems like most sites pull from these same formats, or the standard <meta name>, <meta author> etc. Hugo can generate these from its embedded templates, or you can use something like the Indiego theme, which helps with other useful meta information such as microformats. Both types of templates use either the default title and summary in your post/page and site config, but can also use the front matter from each post/page to override or add additional meta information. For example, here’s the extra front matter from my Insecure blog post:

image: "/images/2018/07/weary-laura.jpg"
altText: "Photo of me looking wearily at the camera."
description: "The state of sharing on the web is broken."

Using this front matter, the platforms use the specified image, rather than my site’s favicon, and the specified description, rather than a truncated form of the first paragraph.

When I wrote a note about cross-posting the other week , I talked about manually producing summaries for different social media platforms. But when I was starting to add description and image to the front matter for my latest blog posts and site pages, I realised that the custom-written summaries and descriptions would be far more reusable if I wrote and stored them on my site, at the time of writing.

Maybe something like:

image: "/images/2018/07/weary-laura.jpg"
altText: "Photo of me looking wearily at the camera."
description: "The state of sharing on the web is broken."
description280chars: "The state of sharing on the web is broken. After the Snowden revelations, it became clear that my sharing “content” willy-nilly was a potential danger to me. I was previously oblivious to the risk of sharing everything about myself on social media…"
description500chars: "The state of sharing on the web is broken. After the Snowden revelations, it became clear that my sharing “content” willy-nilly was a potential danger to me. I was previously oblivious to the risk of sharing everything about myself on social media. The tiniest most harmless piece of information about me could be derived in a data set somewhere to become something very meaningful (even if it’s wrong) and potentially dangerous."

I’d make the description lengths (280 characters for Twitter, 500 for Mastodon) generic, rather than specific to the social networks (e.g descriptionMastodon) as I might want to use those description lengths for other platforms, and those may not be my platforms of choice in the future.

With these custom descriptions, I can either use them for automated posting (using something like IFTTT or clever API integration), or just copy and paste the text out if I want to manually post somewhere. The descriptions are stored in a memorable and canonical location.

I suspect the arrival of image resources and page bundles in Hugo will help with automating meta information around images. Though I’m yet to get my head around bundles, and I’m concerned that automatically grabbing images from folders means it may not be easy to include vital meta information like alternative text.

As I continue making my site more useful and efficient, I’m sure I will find other ways to automate as much of this as possible. Nothing beats handwritten copy, but I don’t need to be writing the same thing over and over again.

Read the original post, ‘Cross-posting using meta information’.

Insecure

Thu, 19 Jul 2018 11:58:38 +0100

The state of sharing on the web is broken.

After the Snowden revelations, it became clear that my sharing “content” willy-nilly was a potential danger to me. I was previously oblivious to the risk of sharing everything about myself on social media. The tiniest most harmless piece of information about me could be derived in a data set somewhere to become something very meaningful (even if it’s wrong) and potentially dangerous.

Blaming the victim

These revelations came along at a similar time when we as a society started realising how bad social media could be for our self-confidence and sense of self. I don’t like victim blaming when it comes to addiction to technology. It is not any of our faults that we have become addicted or obsessed with browsing and posting to social media when these interfaces are specifically designed to addict (engage!) and manipulate (call-to-action!) us. It is their business model to collect our information in order to monetise it. It is no surprise that they design systems to make data collection effective.

When I post on someone else’s website (be it Facebook or Twitter), I’m putting myself at risk. By encouraging my friends and family to respond, I’m making them vulnerable too.

Vulnerability

And I am vulnerable online. Both on social media and when I post stuff to my own site. Far less than many, far more than a lot of you. I’m not important or famous or exciting. I don’t have anything particularly egregious or thrilling to hide from public view, but I want to have control over what I choose to share (y’know, this is a good definition of privacy…) Happy to share photos of the dog, or what I attempted to cook today, but I don’t necessarily want to share my period cycle or my sex life with the world in the same way.

As these thoughts and risks built up in my head, I’ve been posting less and less on social media. I’m not being sanctimonious about leaving, I’ve not left. I’ve not “recaptured my life and my sense of self.” I’m just a quiet lurker, occasionally replying, sometimes getting a hit of confidence (or wine) and posting a thought unprompted. Largely, I am reduced to dog photos and the occasional snarky political comment.

And while there’s much to be said for just listening to a diverse group of people and not feeling like you have to be the person speaking, I have been holding back. Not just on social media, but on my personal site too. I’ve lost confidence in the web I want to share things on, and I’ve lost confidence in those things I want to share.

I want to be able to share again. It was the sharing of silly little things that helped me form relationships and social lives with folks in the early(ish) days of Twitter. People who had met me IRL after meeting me online behaved as though they already knew me well. They did. I was consistent with my online self. I’m a flawed human and a nervous over-sharer, not a brand.

At Ind.ie, we’ve been looking at building alternatives to mainstream technology. How do we fund, design, and create communities that are not toxic to human rights, but are also not exclusive to privileged nerds who have the time and resources to configure complicated privacy and security tooling?

A big part of this is going back to first principles, and trying to work out: what do I actually want to do with the Web and Internet? What do I genuinely enjoy and find valuable, rather than just feeling like I have to do it or I’ll miss out (FOMO). It’s more than just trying to reproduce Twitter or Instagram on my own website, because both of those experiences come with stuff I don’t want. (Harassment, being profiled, nazis etc etc.)

Part of this is convincing myself that I have something worthwhile to say again. That sharing something cool or posting the odd thought doesn’t mean I’m arrogant and think the world needs to hear me. I’m just craving connection over shared experiences.

In my post about how owning my own “content” is often beyond my means, I mentioned there’s a confidence required to share content. It’s also finding the confidence to share the stuff that isn’t lofty. Stuff that isn’t a meaningful philosophical thought on technology, or a tutorial on how to do something useful with web technologies. Sometimes I want to share a photo of the wonky animal I knitted, or my feelings towards the latest TV show I binged, or a half-baked angry comment on politics. Because if I’m to own the kind of detritus I post on social media, it’s this kind of detritus.

And it’s not one-sided publishing I’m after—I want to keep up with other like-minded folks. My sharing my detritus into the void is just sad. I want to consume other people’s detritus too. I want to read what you think about the feminism in Dietland, which track on Dirty Computer is your favourite, and which makeup technique you tried that went awry. I want to compare notes on how to make good naan bread, hear how your government is impacting your life, and what you’re trying to do to chip away at society and carve a safe space for yourself and your kin.

The folks I want to hear from aren’t publishing

Last year I got all excited about RSS again. I wanted to stop relying on Twitter for news and industry updates, thinking I could use RSS instead. Just like I did before I used Twitter. Thinking it could be a way for me to find all that detritus that I’m looking for too.

Calling out to folks asking for their blogs’ RSS feeds to follow, I swiftly realised that RSS was not a viable replacement for what I wanted to follow. 99% of the RSS feeds recommended to me were of white men. Now I follow plenty of lovely white men and learn a lot from their writing, but Twitter has been vital in connecting with folks from a wider range of backgrounds and experiences.

Most of the folks I want to hear from aren’t publishing in the same way, or with the same confidence, as the white men of RSS. It probably has something to do with their means (I’m referencing my my own blog post a lot today…), and a lot to do with the vulnerability I mentioned above.

Desiring connection

I’m desperately seeking these connections and community. The web can be used to find common connections with folks you find interesting, and who don’t make you feel like so much of a weirdo. It’d be nice to be able to do this in a safe space that is not being surveilled.

Owning your own content, and publishing to a space you own can break through some of these barriers. Sharing your own weird scraps on your own site makes you easier to find by like-minded folks. If you’ve got no tracking on your site (no Google Analytics etc), you are harder to profile. People can’t come to harass you on your own site if you do not offer them the means to do so. (That’s why you will not be finding a comments form or contact form on my website anymore!)

So I’m going to experiment with posting my detritus. Finding the edges of what is comfortable and safe to share, trying to make those connections. I can’t make anyone else do the same, so I’ll be sharing sadly into the void. But hopefully it will give me a better understanding of how I relate to other people via technology, and how we can make our ethical alternatives to mainstream technology a safe and fun way to share.

Here comes my first scrap:

How I feel at the end of this blog post. I’m trying.

Oh and hey! If you’re doing something similar, please let me know. Yes, even if you’re a white man… 😉

Part 3 of an as-yet un-named series. Working out my thinking around personal websites.

Part 1: Owning and controlling my own content
Part 2: Beyond my means

Read the original post, ‘Insecure’.

Beyond my means

Tue, 17 Jul 2018 14:43:23 +0100

When I wrote about owning and controlling my own content, I talked about trying to keep my “content” in its canonical location on my site, and then syndicating it to social networks and other sites. Doing this involves cross-posting, something that can be done manually (literally copying and pasting titles, descriptions, links etc) or through automation. Either way, it’s a real faff. Posting to my site alone is a faff.

As Aral keeps saying to me (and I reluctantly agree), we have to do these things the hard way so we can work out how to make them easier. It is the essence of what we’re trying to achieve at Ind.ie.

I am not being defeatist when I say that these tasks are often beyond my means. Beyond my means in financial cost, ability, time, and confidence.

Financial cost

Owning your own content is expensive because you’ve got to host your own content. Jessie Frazelle wrote this relevant tweet last year:

“cloud privilege:

when you can spin up infrastructure to mess around with things without paying for it. (working for cloud provider)”

I think of cloud privilege every time a person complains that someone else took their old site offline, or didn’t set up redirects. Hosting a history is expensive. Paying for yearly domain renewals is expensive. It may be a negligible cost to you, but it is not a negligible cost to everyone.

Of course, there are numerous cheap (or even free) hosts and cloud-related services out there. But do they respect my privacy? Do they respect the privacy of the people visiting my site? Recently I wrote about the cost of access for folks using free assistive technologies. The same goes for all technology as well as owning our own content. Privacy should not be the cost of freedom. As ever, marginalised groups are the most affected by these costs.

Time

Another area where owning your own content is a privilege is time. Building a website is time-consuming. Manually copying and pasting content to syndicate it to social networks is time-consuming. Building a tool to do the work for you is time consuming. Nobody is going to pay me for this time.

As free time goes, I’m fairly well-off. My only dependent is a dog. But the majority of my time is spent doing work that pays the rent, domestic tasks that keep me alive, and enough time leftover to stop my mental health from caving in. That does not leave a lot of time to create, maintain, and use the tools required to own my own content. Because these tools do not really already exist. And those that do exist are not trivial to use… which brings me to ability.

Ability

I can make websites. I can make text into a web page and deploy it to my own (rented) server at my own publicly-available address. Those things alone are not insignificant—it took me a lot of time, and some financial cost, to get my knowledge and skills to the point where I had the ability to do those things and more.

There are tools, libraries, and all sorts of wonderful things that could make owning my own content easier. But many of them are still outside my ability. Many of their readmes and tutorials assume notable existing knowledge. It’s not necessarily the fault of the people making (and generously sharing) these tools and libraries. But they are making those tools for people who have the same desires and abilities as them. I don’t have the same abilities, or the resources to get me to the point where I could have the same abilities. Perhaps in time, but it’s not going to come cheaply or quickly.

Confidence

I’ll write about this later in this series, but confidence also plays a role in owning your own content. If you have the finances, the time, and the ability to have a system up and running, you also need to have the confidence. The confidence that you are choosing the right approach and technologies for yourself, and the confidence that the content you are creating is worth the time, cost, and effort. Committing text and images to a web page feels more permanent than spitting out status updates on a social network. It is more permanent. And for people from more marginalised groups, having findable content attributed to your name can have unpleasant consequences. So maybe the heading for this section should be Confidence/Foolhardiness. There is no (usable) “only for my friends” mode for personal websites. Yet.

Accessibility

It’s frustrating that in order to own and control my own content, to have real freedom on the web, I need all of the above. It’s like running through treacle, stopping every few miles to shave herds of yaks. We need to enable and build alternatives to mainstream technology that are inclusive. Inclusive because they are accessible to everyone regardless of background or personal situation, and also minimising the requirements of money, time, technical ability, and confidence in using these alternatives.

Much of the thinking in this post comes from irritation and, quite frankly, bitterness, when it comes to working on the web. Too often I feel I must meet arbitrary expectations or give up arbitrary rights in order to participate freely in technology that works for me. I don’t want this for me, and I don’t want this for anyone else, and I’m going to keep trying to do something about it.

Part 2 of an as-yet un-named series. Working out my thinking around personal websites.

Part 1: Owning and controlling my own content
Part 3: Insecure

Read the original post, ‘Beyond my means’.

Owning and controlling my own content

Tue, 17 Jul 2018 12:01:07 +0100

One of the ultimate goals we have at Ind.ie is owning and controlling our own data. That means I want to have ownership and control over my own personal information, rather than it being in the hands of big corporations. My personal information could range from something as intensely private as my medical information, or my private messages with another person. These are things that are increasingly digital, online somewhere, and thus “in the cloud” (“the cloud is just someone else’s computer.”) I don’t necessarily want these things on someone else’s computer. Especially not someone else who might use that information against me, be it a corporation or a government.

Owning and controlling my own data also means having control over the “content” I choose to share and publish publicly. This is stuff I don’t mind having “out there”, but it is still mine. It might be a dog photo or a “subtweet”, but it’s my dog photo and my subtweet. If I thought it worthwhile to post somewhere, it’s a part of my digital history. It’s a little part of me. It might be a shitty little part of me, but it’s still a part of me.

I’m working to make my site the canonical location for all these parts of me. My blog already contains posts about technology I no longer use and stances I no longer believe in. I own them, in all senses of the word.

Notes

Another little progress towards this goal is creating the Notes section of my site. Notes is “content” that is less notable than a blog post, but still something I want to share. Each note is a thing I’ve probably syndicated to another site, a social network or similar. But it’s existence is now not limited to the lifespan of that social network. The Notes section also has its own RSS feed, so you don’t have to visit my site or use a social network to see it.

Part 1 of an as-yet un-named series. Working out my thinking around personal websites.

Part 2: Beyond my means
Part 3: Insecure

Read the original post, ‘Owning and controlling my own content’.

The cost of access

Sat, 07 Jul 2018 22:07:24 +0100

This was my opening introduction for Futurefest’s “Who Is the Internet For?” debate today in London. I didn’t hit all the points as smoothly as this, but I covered most of it throughout the debate.

In the description for this session, it says “Without the inputs from internet users with physical impairments we wouldn’t have the voice technology underpinning Siri or Alexa.” But what is the cost of using Alexa for people who would find it difficult or impossible to access the web or technology without voice recognition?

Assistive technology, such as voice recognition software, or screen readers that read the contents of the screen aloud have been historically expensive. One of the most popular screen readers, JAWS, costs more than £700. When Apple added VoiceOver, its own free screen reader, to its devices, it made screen readers much easier to access. For people who could afford iPhones.

It’s a wonderful thing that assistive technology is now built into some technology as a default. It’s an important part of making technology more inclusive. But in the case of Amazon’s Alexa, and many inexpensive or free solutions, the cost of access is your privacy.

Alexa, as part of Amazon’s Echo, means you are always connected to Amazon. Every request you make, every question you ask, is recorded and saved by Amazon. The always-on microphone means Alexa is always listening out for your requests. Alexa is always listening. What if the microphone gets hacked? What if the government requests access to your recordings? How differently do you behave knowing that there’s a chance someone is listening in on you? The same goes for Google Home.

I’m a designer and developer, I got into the web because I loved the idea of the democratisation of information. I want all people to have access to technology. Especially as technology is now so vital to involvement in society. I wrote a book to introduce accessibility to people who make websites, explaining how to make websites easier to see, easier to hear, easier to operate, and easier to understand. But I also work to build ethical alternatives to the mainstream technology.

Because not all technology is entirely beneficial.

In a recent article in the Guardian, Dr Frances Ryan interviewed disabled and marginalised people about the value of social media. Her article covers how social networks have provided “a lifeline – a bridge to a new community, a route to employment, a way to tackle isolation.” Social networking has become vital social infrastructure for all of us, especially for marginalised people.

However, the vast majority of social networks are free because they monetise our attention and our personal information. Shoshana Zuboff calls this “surveillance capitalism”.

And it isn’t fair that this is the cost of access. Marginalised groups are the most vulnerable to the use and abuse of their personal information. People from marginalised ethnicities are vulnerable to racist governments. LGBTQ people are vulnerable to homophobic and transphobic governments. Disabled people are vulnerable to discrimination from governments and insurance companies. Any marginalised group is vulnerable to abuse because the social networks we use value engagement over safety because engagement makes them more money.

Why has surveillance capitalism become so prevalent? It’s because the cis straight non-disabled white wealthy men who control the majority of technology are the least vulnerable to the monetisation of their personal information. They can afford special security and privacy measures. They can afford to pay for expensive access rather than being forced to sell their personal information.

I often try to sell accessibility by explaining that making the web more usable to people with disabilities, you invariably make the web more usable for everyone. The same goes for our ethical alternatives to mainstream technology. If we make, participate, support and fund inclusive alternatives, we will all benefit.

Read the original post, ‘The cost of access’.

Gallery Grid With CSS Grid

Mon, 02 Jul 2018 19:25:46 +0100

CSS Grid Layout is great. My site layout is fairly simple, so had no need for lots of grid—I only used it for lining up comments and avatars on old blog posts.

Working on my Notes section, I realised I’d sometimes be adding multiple images (dog photos) in one note. The default style for my images is big and full-width, but two or three full-width images in rows would likely be overwhelming. It’d be much tidier if all the images auto-filled across the row. Regardless of how many images there are in the notes.

My HTML for these notes looks something like this:

<figure class="note-image">
	<img src="2018/06/14/21/osky1.jpg" alt="Oskar with his head on a cushion and begging eyes."/>
	<img src="2018/06/14/21/osky2.jpg" alt="Oskar with his head on a cushion and closed eyes."/>
	<img src="2018/06/14/21/osky3.jpg" alt="Oskar with his head on a cushion and begging eyes open again."/>
    <figcaption><p>How could you say no to this face?</p></figcaption>
</figure>

Sometimes there is one image, sometimes two or three. I concluded there would rarely be more than three, though I’ll adjust the CSS accordingly if that is ever the case. Sometimes there is a caption, sometimes there isn’t.

The CSS is remarkably minimal:

figure {
    display: grid;
    grid-template-areas:
        "image1 image2 image3"
        "figcaption figcaption figcaption";
}

figcaption {
    grid-area: figcaption;
}

The images auto-fill across the first row, filling all available space. If there’s no image2 or image3, image1 fills 100% of the available width.

The figcaption always fills the whole width, regardless of whether there is one, two, or three images above it.

The results. Note the two side-by-side portrait images do not fill the width of the viewport as the max-height of the images is set to 100vh.

Isn’t that fabulous?

As always, everything I’m learning about CSS Grid Layout is from work by Rachel Andrew and Jen Simmons. Resources I used to inform my decisions/cobble this together were from:

Read the original post, ‘Gallery Grid With CSS Grid’.

Hello Ireland

Mon, 28 May 2018 10:12:52 +0100

On Saturday, we celebrated the victory for Irish people as they repealed the anti-abortion laws. We were celebrating not just because we care about the rights of people with uteruses, but also because we have now been resident in Ireland for two months. And we love it here.

Why move?

If you know Aral and me, you’ll know we’ve been trying to find the right home for the last three or four years. We initially left the UK because the Snooper’s Charter was a threat to our work in building a privacy-respecting social network. But also with the election of the Conservative party, we could see further authoritarian laws, and Brexit, on the horizon. All the while we were both still European citizens, this gave us freedom of movement within most of the EU, and the privilege to find somewhere less of a threat to our livelihoods. With Brexit happening, and so much of Europe enacting more authoritarian surveillance bills, it has become even more important to find a country where we can live together (as one British citizen, one French citizen) and continue to work without struggling to exist within the system.

Why not Sweden?

We made some really great friends in Sweden, and I imagine it’s a lovely lifestyle once you’re a part of the system. We glimpsed some of that, but it is not easy to exist as an outsider in the Swedish system. In two years living in Malmö, we had to move three times, and couldn’t get bank accounts, phone contracts, or register for medical care. The bureaucracy just didn’t have the accommodation for two EU citizens who had their own non-Swedish business. And there was no flexibility to help us unless we were able to spend a huge sum of money to buy our way in. Navigating everyday life as an outsider affected our work productivity, and I was more anxious and depressed than I’d been before.

Why Ireland?

Have you been to Ireland? You should come! It’s beautiful, and the people are so genuinely friendly, helpful and kind.

In two months, we are registered as residents. We have a lovely home, we have bank accounts and phone numbers, we’ve been to the doctors, the dentists, and Osky has been to the vets. We learned lessons from our previous country move, and tried to get the bureaucracy off our minds as soon as possible. Of course it’s been easier as English is a native language in Ireland.

Also British citizens have additional rights that exist outside of the EU. So when Brexit comes, Aral and I won’t be separated by a border.

What now?

It feels good here. We’re settling in well, and are becoming more productive as a result. We’re continuing to work on Indienet, and Better Blocker. I just recorded the audiobook for Accessibility For Everyone. We want to take root here, become more involved locally, and properly integrate. So if you’re based in Co. Cork, let us know!

Read the original post, ‘Hello Ireland’.

Bookmarked: Animation

Mon, 12 Mar 2018 12:17:46 +0100

A few weeks ago I gave a workshop in New Zealand about designing inclusive content and accessible design. Afterwards, I was asked for recommended reading on accessible animation. These are a bunch of bookmarks I’ve stored up, and what I’d recommend to get started on designing and building animations in an inclusive way:

Books

Designing Interface Animation by Val Head.
Animation At Work by Rachel Nabors.

Articles

Your Interactive Makes Me Sick by Eileen Webb.
Patterns and Purpose, an Excerpt from Animation at Work by Rachel Nabors.
Designing Safer Web Animation For Motion Sensitivity by Val Head.
Designing Interface Animation: an Interview with Val Head by Mica McPheeters and Caren Litherland.
An Introduction to the Reduced Motion Media Query by Eric Bailey.

Video

Infinite Canvas 6: Vestibular Disorders and Accessible Animation Rachel Nabors interviews Greg Tarnoff.

More…

To stay updated on the topic, I’d really recommend you follow Val Head and Rachel Nabors. One of these days I’ll add comments to my blog so folks can add their own suggestions, but if you’ve got any further recommendations, please tweet me!

Read the original post, ‘Bookmarked: Animation’.

Podcasts, February 2018

Mon, 12 Mar 2018 12:17:22 +0100

In February, there were two podcasts released featuring interviews with me! Both focused on ethical design and privacy.

CodeNewbie

CodeNewbie Season 3 Episode 4: What should developers know about online privacy? with Laura Kalbag

CodeNewbie is a fantastic podcast by Saron Yitbarek featuring interviews that introduce topics to people who are new to coding. You can find the podcast on the CodeNewbie site along with a full transcript. One note is that I am continually muddling up the GDPR acronym, calling the GDPR the “General Directive Privacy Regulation” when it is actually “General Data Protection Regulation.” Ugh, acronyms…

Digital Mindfulness

Digital Mindfulness #96 Ethical Data & Design with Laura Kalbag

Digital Mindfulness is a podcast by Lawrence Ampofo looking at “digital experiences that focus on time well spent.” As I mentioned to Lawrence, I do not agree with a lot of the work in this area (see addendum below), so it made for an interesting interview which disagrees with many of the podcast’s previous guests. You can find the podcast on the Digital Mindfulness site.

Addendum

Six hours later…

Yesterday Aral sent me a link to an article: [‘Be Wary of Silicon Valley’s Guilty Conscience: on The Center for Humane Technology’] (https://librarianshipwreck.wordpress.com/2018/02/13/be-wary-of-silicon-valleys-guilty-conscience-on-the-center-for-humane-technology/). Upon reading it today, I realised this perfectly summarises why I take issue with the previous guests on the Digital Mindfulness podcast. (And in a far more eloquent and coherent manner than I could ever muster.)

“The [Center For Humane Technology] senses that there is anger in the air towards the big tech companies, and it pulls a clever bait and switch by acknowledging that there is a problem but then insisting that the people who caused the problem can be trusted to fix it.”

I recommend you [read the full article on the LibrarianShipwreck site] (https://librarianshipwreck.wordpress.com/2018/02/13/be-wary-of-silicon-valleys-guilty-conscience-on-the-center-for-humane-technology/).

Read the original post, ‘Podcasts, February 2018’.

I’m a DIY Rebel

Mon, 05 Feb 2018 13:45:02 +0100

Probably the coolest I’ve ever sounded…

Last week Ind.ie was featured in a Guardian article, ‘The punk rock internet – how DIY rebels are working to replace the tech giants.’ We were interviewed by John Harris, and I think he did a really great job of explaining what we do and why we do it.

Not having massive experience in being interviewed, I was a little nervous that I’d sound a bit daft, especially as I’m nowhere near as eloquent as Aral. But overall, I think the quotes were good and it works as a primer that I’ll be sharing whenever somebody asks what we do at Ind.ie!

There’s a nice little paragraph where I sum up the why of it all…

“I got into the web because I liked the democracy of it,” says Kalbag, who has just published a book titled Accessibility for Everyone, about innovating in a way that includes those who technology too often ignores – not least people with disabilities. “I want to be able to be in a society where I have control over my information, and other people do as well. Being a woman in technology, you can see how hideously unequal things are and how people building these systems don’t care about anyone other than themselves. I think we have to have technology that serves everybody – not just rich, straight, white guys.”

Of course, Oskar had to be in the photos. Our faces was because I was really trying to get him to look at the photographer!

Read the original post, ‘I’m a DIY Rebel’.

Semantic HTML on 24 Ways

Fri, 22 Dec 2017 18:59:08 +0100

It’s been a few years since I wrote something for 24ways, but this year I’m back, making the case for semantic HTML.

As I mention in the article, I see a lot of redundant and unsemantic HTML while I’m working on Better. HTML is often seen as easy, and therefore not worth learning in detail. It’s frustrating because HTML is one of the few completely unavoidable technologies of the web. It doesn’t take much to better understand how to use it effectively, and it can make a huge difference to the accessibility of a web page.

Read the original post, ‘Semantic HTML on 24 Ways’.

Wonky for now

Thu, 30 Nov 2017 15:25:45 +0100

Please excuse the wonkiness of my site. I am iterating on a new design, including all new backend. It’s static!

Because I apparently like to be stressed, I had a hard time limit for deploying this new design (today!) This means some of the content is a little garbled, and a lot of the CSS, particularly the colour schemes, needs refining in places.

For now I won’t be publicising this new design, so if you’re here and you’re seeing this, shhh!

Read the original post, ‘Wonky for now’.

Accessibility For Everyone

Fri, 18 Aug 2017 13:44:22 +0000

After three years of work, I can finally tell you that I’ve written a book for A Book Apart about web accessibility called Accessibility For Everyone.

In case you’ve not heard of web accessibility (you wouldn’t be the first!), web accessibility is the degree to which a website is usable by as many people as possible. A lot of material around accessibility focus on making websites usable by people with different types of disabilities and impairments, but designing inclusively for a wide range of needs will generally make websites more usable for everyone.

There is a huge wealth of information about accessibility from accessibility experts on the web. But where do you start? This is why I wrote Accessibility For Everyone. I want to help you learn the foundations of accessibility, and point you in the direction of the accessibility experts I learn from so we can keep making the web better.

Accessibility For Everyone will be published in a few months, and you can sign up to be notified when we launch on the A Book Apart website. If you forget, don’t worry, I’ll probably be going on about this for a long time to come… 😉

10 comments

Kathy Bray
at 18:35pm

This sounds like a must have book!
Wendy Barron
at 19:26pm

I am excited about this book. Plain language, plain design, inclusiveness and accessibility are part of what I do for a living, and resources are important! (I’m redoing my website with accessibility in mind, right now.) Thanks for doing this work and putting it out there where we can get at it.
peter
at 20:10pm

thank you
Nathan Jeffery
at 00:56am

Congrats and good luck with the launch!
Noufal binu
at 09:55am

I’m curious to read this book, I expect *Accessibility for everyone* is a very helpful for my blog redesign and improve my blog functions for everyone, So i hope this book going to really interesting.
Jonathan Melton
at 15:59pm

Congratulations on the book!
Laryn
at 19:48pm

Thank you! I look forward to reading it.
Jack McElaney
at 01:55am

Congratulations Laura on “Accessibility for Everyone”! Based on the title of the book, and your description of it, it is a much needed book and I look forward to reading it. I curate a weekly newsletter called “Accessibility in the News” so I will let my subscribers know about your book in this week’s issue.
Tim Smith
at 13:16pm

Congratulations Laura! I can’t wait to read it!
Marie Moyles
at 21:28pm

I cannot wait to read this book! Well done and thank you for producing a new resource on web accessibility 😊

Read the original post, ‘Accessibility For Everyone’.

Digital Assistants, Facebook Quizzes, And Fake News! You Won’t Believe What Happens Next

Mon, 10 Apr 2017 12:58:22 +0000

This is the talk I gave at DIBI Conference in Edinburgh in March 2017. Many people asked me for my slides, but I wanted to include them in context, with accessible links. This is roughly how it went:

Performance!

Nowadays performance seems to be the hot topic of the web industry. So let’s have a look at how we might improve the speed of a web page.

theonion.com

Looking at the Onion homepage, you can see it’s loading lots of images and a few videos. It’s mostly images and text content. There’s a big sticky ad at the bottom of the viewport that takes a while to load.

If you look at what’s loading behind the scenes, you can see a the layout being rendered, loading in all the content first, then more and more requests as new stuff is being loaded in. All in all, they’re loading 384 resources, coming in at 8MB, taking 15.24 seconds minimum to load. (There’s also 205 errors which may well be impacting that load time.)

If we look at Safari’s Network Requests tab, we can see a little more of what’s being loaded in. If we look at the requests by size:

.html the primary HTML document is only the 19th largest file being loaded
The largest file is .js, a biggish javascript file, that’s fairly standard
The next .js file is a lightbox script, there’s an external CDN for fast loading, that’s fine.
.css is CSS, which is very important!
.js is jQuery, fine if you must…
.jpg is a big picture of houses

But then there is also…

addthis.com AddThis social buttons
addthis.com more AddThis
perfectmarket.com Perfect Market
taboola.com Taboola
taboola.com Taboola again
doubleclick.net Google DoubleClick
krxd.net Krux
moatads.com Moat Ads
googlesyndication.com Google Syndication
googlesyndication.com Google Syndication again
optimizely.com Optimizely
googleadservices.com Google Ad Services
2mdn.net which I know is another domain for Google DoubleClick.

I could go on for other 408 requests but I’d be here for a week. These are all scripts for tracking people in one way or another.

What would happen if we just load the main page without any third party tracking scripts? Let’s look again at that timeline, but this time with those third party tracking scripts blocked:

The Onion now has 115 requests, coming in at 2.95MB, loading in just 2.27 seconds.

Comparing the before and after, that’s 269 requests, 5.11MB and 12.97 seconds caused by third party trackers.

You know what that means? Your web performance effort counts for little to nothing if your organisation’s business model requires a gazillion tracking scripts to make money.

Facebook

Me on Facebook

Let’s look at this phenomenon from the perspective of the people browsing the web. We feel like we know Facebook’s game. They show us adverts, and we get to socialise for free. Simple as that?

I don’t give Facebook much info, I get ads for the average 30 year old woman: washing liquid, shampoo, makeup, dresses, more dresses, and sometimes a wild card ad for pregnancy tests. But what happens when Facebook gets a bit more information?

Nearly two years ago, my mother died. We didn’t want any of our friends and family finding out from a poorly thought-out tweet or Facebook post… so we didn’t post anything on social media. We rang people to let them know. And then Facebook suggested I might be interested in… Goodwill Family Funeral Directors.

Surely just a coincidence?

So I asked my sisters and brother if any of them had posted something on Facebook…

Well it might just be a strange coincidence, but maybe too close to be a coincidence. My sister had told her friend via private message. She’d used some key words in a Facebook message to her friend Maddy, Facebook may have made the connection that I’m her sister, figured out that I might want a Funeral Director and stuck that ad in my feed. It just goes to show how much Facebook knows, and how much complexity it can grasp, despite my not telling it anything.

How do they know?

But how else could Facebook have known?

If I was browsing funeral-related sites, maybe Facebook would have that information if those sites had Facebook Share Buttons or Facebook login. As this article in SBS News points out, those Facebook buttons track you across the web, violating your privacy. (Also note the hypocrisy of this news site using multiple Facebook buttons on this article.)

You can find out some of the things Facebook knows about you in your Ad Preferences.

But as ProPublica point out, Facebook doesn’t tell its users everything it really knows about them:

“What the [Facebook ads] page doesn’t say is that those sources include detailed dossiers obtained from commercial data brokers about users’ online lives. Nor does Facebook show users any of the often remarkably detailed information it gets from those brokers.”—Julia Angwin, Terry Parris Jr.and Surya Mattu, December 2016

I’ll come back to data brokers later.

“The fundamental purpose of most people at Facebook working on data is to influence and alter people’s moods and behaviour.They are doing it all the time to make you like stories more, to click on more ads, to spend more time on the site.” A data scientist who previously worked at Facebook

If your first thought is “but isn’t that what we’re all trying to do”, you need to watch some sci-fi. The Nosedive episode from Black Mirror series 3 may seem far-fetched, but we are already participating in this ranking. It’s just not visible to us.

“But you don’t have to be on Facebook!” We hear this all the time from people who have never joined Facebook, have no intention of leaving Facebook, who don’t socialise, or who are generally pedantic and tedious. My answer is: NOPE.

You can’t just leave Facebook

You can’t just leave Facebook. First of all, you’d end up severing social ties, miss out on events and other social interactions that people limit to Facebook. But even if you do leave, or if you never joined, Facebook has a shadow profile on you.

If a friend or acquaintance has used the Find Friends functionality, or used Facebook Messenger on their phone, they gave Facebook access to their Contacts. Facebook uses those names, email addresses, and phone numbers to build their shadow profiles.

The following quote is nearly four years old:

“Right now commenters across the Internet will be saying, Don’t join Facebook or Delete your account. But it appears that we’re subject to Facebook’s shadow profiles whether or not we choose to participate.

I feel like we’re only beginning to understand why Facebook’s data is so very valuable to advertisers, governments, app makers and malicious entities.”—Violet Blue, Zero Day. June 2013

Facebook isn’t alone

Facebook isn’t the only place this happens. If I go to the Spotify website, just to download Spotify, using Firefox and their Lightbeam extension. (Lightbeam is a Firefox add-on. It shows you who is tracking you via third-party scripts.) Lightbeam shows me that Spotify sends my data to 25 sites.

Let’s have a closer look at these sites… there are a few that are familiar to developers…

Google Analytics, we know that’s analytics
Twitter and Facebook, possibly some kind of sharing buttons (but also possibly not)

But that leaves 21 more mysterious scripts… Let’s have a close look at one of those sites…

What is adsrvr.org?

A quick search of adsrvr.org brings me to an opt-out page which shows me this site belongs to the The Trade Desk. The Trade Desk is apparently: “true buying power” and “omnichannel buying capabilities and industry –; leading tech” Whatever that means.

At Ind.ie, we’ve been doing a lot of research into trackers lately, and here’s a top tip: always check out the privacy policy. Most tracking companies are the clearest about their agendas in their privacy policies.

“The Trade Desk Technology allows our Clients to buy ad space on websites for online advertising and allows for the use of proprietary and third party data in the purchase of that media.”—The Trade Desk Privacy Policy

“Our Technology collects Non-Personally Identifiable Information(“Non-PII”) that may include, but is not limited to…

Your IP host address,

the date and time of the ad request,

pages viewed,

browser type,

the referring URL,

Internet Service Provider,

and your computer’s operating system,”

The Trade Desk Privacy Policy

That’s a lot of your information going into the cloud. But did you notice the caveat? Non-personally identifiable information.

Non-personally identifiable information

“Such as your IP host address, age, gender, income, education, interests and usage activity…”The Trade Desk Privacy Policy

Take my IP address where I work in Malmö… it can pinpoint me to exactly where I am 25% of the time. And then if you add in my age, gender and education (which is all easily available on Facebook, Linkedin, etc)… How many 30 year old women who studied in Somerset in the UK are working in that building in Malmö 800 miles away? It’s definitely this idiot.

But they “don’t share it.” “It’s non-personally identifiable information.” But how true is that really? In ‘Why “Anonymous” Data Sometimes Isn’t’, Bruce Schneier, a cryptographer, computer security and privacy expert says:

“it takes only a small named database for someone to pry the anonymity off a much larger anonymous database”— Bruce Schneier.

With more than one dataset, and the right algorithm, nearly any dataset can be de-anonymised. An example of these databases could be Sweden’s hitta.se, or the UK’s electoral roll. With these publicly-available databases, any or all of this data could be connected to me as a person.

This means many of these third parties can work out a lot more about me and my habits, but surely they don’t know me as…a person?

“Facebook knows you better than your members of your own family”—Sarah Knapton, Science Editor, Daily Telegraph.January 2015

Psychologists and a Computer Scientist from the Universities of Cambridge and Stanford discovered that computer-based personality judgments are more accurate than those made by humans.

“The team found that their software was able to predict a study participant’s personality more accurately than a work colleague by analysing just 10 ‘Likes’.”—Sarah Knapton, Science Editor, Daily Telegraph. January 2015

“Inputting 70 ‘Likes’ allowed it to obtain a truer picture of someone’s character than a friend or room-mate, while 150 ‘Likes’ outperformed a parent, sibling or partners.”—Sarah Knapton, Science Editor, Daily Telegraph. January 2015

“It took 300 ‘Likes’ before the programme was able to judge character better than a spouse.”—Sarah Knapton, Science Editor, Daily Telegraph. January 2015

With the introduction of Facebook reactions, there’s even more Facebook can know about you because they have more specific data. Police in Belgium have even warned people about using Facebook reactions…

“Belgian police now says that the site [Facebook] is using them as a way of collecting information about people and deciding how best to advertise to them. As such, it has warned people that they should avoid using the buttons if they want to preserve their privacy.”—The Independent

“By limiting the number of icons to six, Facebook is counting on you to express your thoughts more easily so that the algorithms that run in the background are more effective,” the post continues. “By mouse clicks you can let them know what makes you happy.”—The Independent

That is real information from the Belgian police. How many things have you liked on Facebook? Do you use the other reactions too?

Welcome to the world of the Data Broker

And this is why data brokers exist. They are corporations whose business it is to collect and combine data sets:

“LexisNexis helps uncover the information that commercial organizations, government agencies and nonprofits need to get a complete picture of individuals, businesses and assets…”

“Only Acxiom connects people across channels, time and name change at scale by linking our vast repository of offline data to the online environment”

It’s a big money business, and the different ways to monetise you are endless. For example, a couple of years ago, Facebook was granted a patent:

“When an individual applies for a loan, the lender ” examines the credit ratings of members of the individual’s social network who are connected to the individual through authorized nodes. If the average credit rating of these members is at least a minimum credit score, the lender continues to process the loan application. Otherwise, the loan application is rejected.”

Yes, that means what you think it does. It means they want to approve loans based on the financial records of your Facebook friends. And would that make you think about your friends in a different light? What about when your friend unfriends you on Facebook because you’re too poor?

Governments and corporations

Privacy advocates have long worried about the data that is collected by corporations getting into the hands of unfriendly governments. With the political situation we find ourselves in now, those privacy advocates are unfortunately being proved right:

Border controls across the world using social media to discriminate against travellers, even demanding those under scrutiny enter their password to allow authorities access to their accounts. Of course, this disproportionately affects people of colour and other victims of bigoted profiling. People arrested during protests on Trump’s Inauguration Day had investigators requesting their data from Facebook to help incriminate them. And anti-choice groups have used behavioural advertising on phones to target women in healthcare clinics. Erin Kissane put it best in her post on how to “Be More Careful on Facebook” when she said:

“If you believe Facebook will keep your data safe and never let it be used against you or your most vulnerable contacts, by governmental or private entities, you’re putting your faith in an entity that has demonstrated bad faith for years.”—Erin Kissane, Be More Careful on Facebook, February 2017

Data grabbing is the dominant business model of mainstream technology

I may be spending an unequal amount of time focusing on Facebook when, grabbing your data is really the dominant business model of mainstream technology. I thought I’d insert here a list of products and services that collect your information without really needing it, but I realised it’d be unending. Instead, I’ve made a list of products whose information on you would probably make you a little uncomfortable…

Google Nest, home security that will have a good look around your home
Hello Barbie, a doll who your kids can talk to, recording all their responses, and sending it back to a multinational corporation
Smart pacifier, in case you wanted to put a chip in your baby.
Your medical records. Because it’s fine if Google has those, right?
Looncup, a smart menstrual cup! It’s one of many smart things that women can put inside themselves. (Note that most of the internet of things companies in this genre are run by men…)
We Connect’s smart dildo, which was found to be tracking its users’ habits

And have you ever wondered how many calories you’re burning during intercourse? How many thrusts? Speed of your thrusts? The duration of your sessions? Frequency? How many different positions you use in the period of a week, month or year? Then you want the iCondom.

That’s assuming you want all that information shared with advertisers, insurers, your government, and whoever else wants to buy it…

Needless to say, beware the Internet Of Things That Spy On You.

Learning about yourself ≠ corporations learning about you

Some of these products are really cool. I was an early adopter of fitness trackers. I love to know data about myself, and use that to encourage better habits. Learning about yourself does not have to mean that corporations learn about you too. None of these Internet Of Things products need to share your data back to their various clouds, or with any other parties, to be convenient to you. These are physical products. They have a clear option for a business model, they can be sold for money.

Not to mention, collecting information about people can be dangerous. Any organisation collecting data has to be able to keep it secure and safe from malicious parties. Glow, a pregnancy app, was discovered to have vulnerabilities making it easy for stalkers, online bullies, or identity thieves to use the information they gathered to harm Glow’s users.

Chilling Effect

Even if you’re aware that these products are spying on you, and you continue to use them, they can still affect you in adverse ways. They can create a “chilling effect.” A chilling effect is where a person may behave differently from how they would naturally, because of the legal and social implications of their actions.

From the other side, products with information about you are far more able to manipulate you. Products like digital assistants such as Amazon’s Alexa or Google Now…

“As the digital butler expands its role in our daily lives, it can alter our worldview. By crafting notes for us, and suggesting “likes” for other posts it wrote for other people, our personal assistant can e ectively manipulate us through this stimulation.—Maurice E. Stucke and Ariel Ezrachi, The Subtle Ways Your Digital Assistant Might Manipulate You, November 2016

Fake News!

I’ve got fake news in the title of this talk, but what does all of this have to do with fake news?

First of all we have to look at what constitutes fake news. Fake news is content presented as a news story but with no grounding in reality, let alone journalistic rigour. Fake news roughly fits into three categories:

1.Real issues exaggerated to distract you, such as issues that are exaggerated to distract the public. 2. Propaganda, weaponised speech delivered to achieve a political aim –; a mixture of truth, exaggeration and deception. 3. “Disinformatzya,” false content deliberately created to muddy the waters of informed public opinion, to make you distrust everything in the news

Adtech!

We have to ask why have all of these forms of not-news dressed up as news become popular? The answer is adtech:

“This form of digital advertising [adtech] has turned into a massive industry, driven by an assumption that the best advertising is also the most targeted, the most real-time, the most data-driven, the most personal”—Doc Searls, Brands need to fire adtech, March 2017

The problem is that adtech powers the ads that show alongside everything. Adtech is behind the pay-per-click ads that show you things that are relevant to the article or to you.

Adtech is the ads that follow you around the web.

Adtech is the clickbait of intriguing stories that are sometimes dressed up as “Other articles you might like”, “Promoted links,” or “Sponsored content.”

“1. It’s adtech that spies on people and violates their privacy.

It’s adtech that’s full of fraud and a vector for malware.

It’s adtech that incentivizes publications to prioritize “content generation” over journalism.

It’s adtech that gives fake news a business model, because the fake is easier to produce than the real, and it pays just as well.

—Doc Searls, Brands need to fire adtech, March 2017

Wired talked to a Macedonian teenager about his lucrative business posting disinformatyza:

“He posted the link on Facebook, seeding it within various groups devoted to American politics; to his astonishment, it was shared around 800 times. That month—February 2016—Boris made more than $150 off the Google ads on his website. Considering this to be the best possible use of his time, he stopped going to high school.”

And on top of that, as Evgeny Morozov said in the Guardian:

“The problem is not fake news but the speed and ease of its dissemination, and it exists primarily because today’s digital capitalism makes it extremely profitable – look at Google and Facebook – to produce and circulate false but click-worthy narratives.”—Evgeny Morozov, Moral panic over fake news hides the real enemy – the digital giants, January 2017

But how do we solve this problem that is now at the core of journalism?

“Solving the problem of sensationalistic, click-driven journalism likely requires a new business model for news that focuses on its civic importance above profitability.”—Ethan Zuckerman, Fake news is a red herring, January 2017

Not-news is causing problems for the advertisers too, with some advertisers stopping using adtech platforms after their products appeared alongside undesirable and extreme content. But I’m not so sure this will make much of a difference to the pockets of the adtech makers. I wonder is this adtech business model too lucrative to change?

What can we do to block clickbait and fake news from our lives?

We need to think about what can we do now to block the clickbait and fake news from our lives? Assuming our friends aren’t forcing us on to it via social media…

Ad Blockers?

Could ad blockers be the answer? Many people have started blocking trackers using ad blockers. The key issue with this is that ads are not the problem. Trackers are the problem. The third-party tracking scripts are the problem.

At Ind.ie, we’ve been doing research into trackers, and we found some of the most used third-party scripts on the web:

google-analytics.com—64.1% of sites researched
doubleclick.net—54.4% of sites researched
google.com—41.9% of sites researched
gstatic.com—32.8% of sites researched
googleadservices.com—32.3% of sites researched
facebook.com—29.0% of sites researched
googlesyndication.com—26.9% of sites researched
facebook.net—26.4% of sites researched
google.se—23.0% of sites researched

So far, we’ve found around 78.5% of trackers from the top 10,000 sites come from Google. All of these sites set third-party cookies and/or tracking pixels.

Cookies themselves aren’t inherently problematic. First-party cookies can be useful in storing your username at logins or remembering your preferred language on a site. But we don’t want or need the bad third-party cookies that are just sitting there following us around and spying on everything we do.

Surveillance Capitalism

This is what Shoshana Zuboff coined as “Surveillance capitalism.” Also know as “corporate surveillance” or more simply, “people farming.”

Some people recognising this problem have started using ad blockers to block ads and third party scripts. As consumers of the web, we often use ad blockers, but as web builders, they can inconvenience us if they block what we’ve created.

When it comes to ad blockers, it bears repeating: ads are not the problem. Trackers are the problem. There are some horrifying ads and clickbait out there, but many of these blockers are not doing exactly what you think they are. For example, [Adblock Plus](https://adblockplus.org/en/acceptable-ads" rel=“nofollow) has a whitelist called Acceptable Ads which are ads and trackers that they just let through:

“we share a vision with the majority of our users that not all ads are equally annoying”—[Acceptable Ads criteria](https://adblockplus.org/en/acceptable-ads#criteria" rel=“nofollow)

Acceptable ads are largely included under the criteria that they’re not too dominant or annoying. But as I said before, annoying ads are not the problem. Trackers are the problem. And there’s nothing in the Acceptable Ads criteria about ads tracking you.

“we are being paid by some larger properties that serve non-intrusive advertisements that want to participate in the Acceptable Ads initiative”—[Acceptable Ads Agreements](https://adblockplus.org/acceptable-ads-agreements" rel=“nofollow)

What’s worse is that larger companies are paying for their ads to be shown. Including Google’s ads (and trackers). And we know how wide Google’s trackers reach… Worse still, now AdBlock Plus is even selling ads to replace the ones it blocks.

The anti-annoying-ad argument is distracting us from the real problems. Ad networks aren’t inherently bad. For example, The Deck (now sadly closed) was an ad network which targeted its audience by only being used on specialist sites. And they were fine with knowing nothing about the individuals who viewed those ads:

“We don’t track our readers in any way or allow any other behind-the-scenes shenanigans. We just serve useful, relevant ads in a simple, unobtrusive way to support independent publishers.”—The Deck Privacy Policy

Can we still have behavioural ads?

The benefit of The Deck was that it showed static ads to a niche audience, but what about behavioural ads? We could still show relevant ads based on behaviour. Advertising does not need to phone home to the cloud. You could still have behavioural advertising that keeps your information private by doing all the behavioural analysis and decision-making on the device itself. So it could work in theory, but who is going to use these systems when your personal information is so lucrative?

Analytics

There’s one third-party script that almost all of us put on our sites… analytics. Considering everything we’ve looked at so far, how can we use analytics more ethically?

Remember that stat from before, that 64.1% of the top 10,000 sites are using Google Analytics? How many of those sites do you visit? What has that told Google about you? How does that make you feel about using analytics on your own sites? Is it ethical or necessary to track visitors to our site? This isn’t a problem with a yes or no answer, but we need to consider these questions.

Ethics in technology

All of these issues I’ve discussed fall under the bracket of ethics. Ethics are defined as “a set of moral principles, especially ones relating to or affirming a specified group, field, or form of conduct.” So how do they relate to our everyday work in the web and technology industries?

We build the new everyday things

Us people building the web are building the new everyday things. We’re building the new infrastructure that powers our society. Much like other systems we use every day that we might pay taxes for: roads, clean water, waste removal, police, fire and rescue services.

How much time do you spend using a road every day? On the average day, I’ll cycle to the office, walk to the supermarket, that’s around 90 minutes using roads and paths. When the average person spends 2 hours 51 minutes of time per day on the internet, it becomes clear how much impact our work can have. And that’s why we need to take responsibility.

We need to take care of people using the new infrastructure we’re building. Having responsibility isn’t usually fun, but it is necessary. And this is why we need ethics, a kind of code of conduct for the people in our position of power of building the web. Mike Monteiro points out how hypocritical we can be…

“[W]hen other industries behave unethically we get upset. Yet, many of us seem to have no problem behaving unethically ourselves. We design databases for collecting information, without giving a second thought what that information will be used for.

As a community have we fallen to the level of debating the importance of ethics that’s usually reserved for politicians, bankers, hedge fund managers, pimps, and bookies?—Mike Monteiro, Ethics can’t be a side hustle, March 2017

Use your powers for good

We need designers and developers to use their powers for good.

This come with the understanding that code is not neutral, that whatever we build comes with our biases. We all have biases. And that code is political. I’m not saying that your code is politically aligned to a particular party, you do not need to have the same political affiliations as me to believe that your world outlook has an impact on the things you create.

What happens when someone only tests their algorithms on the other white people around them? Or when a programmer makes a security system that assumes there are no women doctors?

We’re not just building cool stuff for fun, we’re building things that affect other peoples’ lives.

The Ethical Design Manifesto

At Ind.ie, we decided we need an Ethical Design Manifesto for the things we use every day:

We need to build products that are decentralised, private, open, interoperable, accessible, secure and sustainable. Because that means a product will respect human rights.

Decentralised

Decentralisation is something we talk about as developers as being a good thing because we don’t like to rely on centralised systems. It’s why we don’t hotlink all our images and scripts from other sites, and why nobody gets any work done when Github is down. We understand that if it’s not on our computers or servers, it’s not under our control. But for some reason we’re happy to give corporations control over all of our data.

With control over data comes power. After the Snowden revelations, people were rightly outraged by how much access our governments had to our browsing information, but not so many people were angry with the corporations who were collecting that information, and handing it right over to the governments. As Bruce Schneier said:

‘The NSA woke up and said “Corporations are spying on the Internet, let’s get ourselves a copy”’—Bruce Schneier

Private

We need to build products that are private. Privacy can come as a result of decentralisation: if your data is only on your device, it’s private to you.

Open

We need to build open products. “Free and open” or “open source” mean that anyone with sufficient technical knowledge can take the code from some software and make their own version. For free. When a product is free and open, it means you can trust it to some degree, because if one version goes in a direction you don’t like, you can use a different version. Though it’s worth noting that developers are much more of a position to do this than most people who use computers.

Interoperable

We need to build products that are interoperable. Back in the day, we had phones where you enter all your contacts in manually. It took ages, and then when you got a new phone, you’d have to enter your contacts in all over again. It was a frustrating experience. But using a SIM card to transfer the contacts across made it much easier because SIM cards are interoperable.

Another example of where we don’t have interoperability is in “walled gardens.” It is very common for corporations to want to lock you into their own beautiful ecosystem. That’s what can make it a nightmare switching between Apple and Android.

Accessible

We need to build products that are accessible. Accessibility is making something available to as many people as possible. To make our products more accessible we need to consider diversity, cost, and catering to a variety of needs that aren’t necessarily the same as our own. We must never stop looking for ways to make our work more accessible.

Secure

We need to build products that are secure. In the age of https on everything, we’re more clued up about security. However, security is also confused and conflated with privacy. For example, Google encrypted email and said “yay! all your stuff is now safe and private from hackers!” But that email is not encrypted and private from Google, it just protects your information in transit between you and Google.

Sustainable

We need to build products that are economically, environmentally and culturally sustainable. When a product is sustainable, you know it’s worth putting your time into using it. The product isn’t going to disappear tomorrow with all your information and hard work down the drain.

One of the key elements of sustainability is that a product has a viable long-term business model. (That doesn’t rely on selling your data!) If a startup has been given a huge amount of venture capital without having a business model, chances are they’re not sustainable, and it’s highly likely they’re going to rely on selling your data for profit.

Functional, convenient and reliable

When we’ve ensured our product respects human rights, we can work on making it functional, convenient and reliable. Doing so respects human effort, and these are generally the goals most of us are reaching for when we’re building things.

When a product is functional, convenient and reliable, it actually does the thing, it does the thing in a way that doesn’t get in your way, and it does that thing reliably again and again.

Delightful

Once our product respects human rights and human effort, we can layer the delight on top, to make our product delightful, respecting human experience.

Delightful isn’t just making products fun and fluffy. It’s about creating a genuinely great experience, which is reinforced because it’s built upon the strong foundation of respecting your effort and rights. Basecamp is a good example of this, where they have little touches of delight.

The Basecamp schedule when you haven’t had any past events yet

Basecamp can only get away with whimsical details because they already respect your human rights and effort. As Sara Wachter-Boettcher wrote in a fabulous article last year:

“Quit painting a thin layer of cuteness over fundamentally broken interfaces.”—Dear Tech, You Suck at Delight, Sara Wachter-Boettcher

Layering cuteness on top it is not a solution to a badly-built product, it’s just a way to make ourselves feel better about the problem.

At Ind.ie, we call Respecting human rights, Respecting human effort, and Respecting human experience the 3 Rs of Ethical Design.

Many modern products don’t respect our human rights. Instead they’re built on the backs of the humans that use them. These (often-Silicon Valley) products may respect human experience and human effort, but they take advantage of their users. They don’t give them privacy or security, interoperability or open technologies. Very rarely are their products accessible or sustainable.

But as an industry, we hail these products. We call them the “disruptors.” In the dictionary, “to disrupt” means “to interrupt (an event, activity, or process) by causing a disturbance or problem.” People making these products call themselves disruptors because they “disrupt” a market. They take down existing sustainable businesses and kill them off. They monopolise and they dump. We need to disrupt the disruptors. We need to disrupt their disruption.

We need to ask ourselves these questions

We need to ask ourselves these questions about what we build. Because we are the gatekeepers of what we create. We don’t have to add tracking to everything, it’s already gotten out of our control.

The business model of the organisations we work for is our business. If what we are building is harming people, we can’t blame someone else for that. We can’t defer responsibility for the products we build, that’s how bad things happen.

Some people say to me “but if I don’t like what Google/Facebook/Other Corporations are doing, surely I don’t have to use their services…?”

Nope. As I said before, social networks are part of society now. Email, booking services, ecommerce are our new everyday things. If I stopped using every site that is sharing my data with Google, I’d be using less than 25% of the web. And I couldn’t use email. We deserve to be able to take part in society, and use everyday things without our privacy being compromised.

Another thing I often hear is “what if I trust Google/Facebook/Other Corporation with my data?” Seriously people, Google isn’t your lover, you shouldn’t have to trust them. Why are we so loyal to faceless corporations?

We need to design and build systems that don’t need to be trusted. If it fits with the Ethical Design Manifesto, you don’t need to trust it, you own your own data, and you can easily go elsewhere if you’re no longer satisfied.

It’s important to realise that not worrying about your data is privilege. If you don’t worry about corporations (and by extension, governments) having access to your data, you are privileged. And quite possibly just foolish. What if you lived in a country where your sexual preference is illegal? What if you lived in a country that wants to deport people with your ethnic background? What if you lived in a country where your religious beliefs can get you killed? What if you needed a loan and your friends were considered too poor? What if you needed medical treatment but your medical insurance considered your habits made you too high risk?

Look at the world around us, any of these things could happen tomorrow. If you want to think about it in terms of how trackers affect you, you need to fear for your future self.

You also need to bear in mind that you’re not making these decisions for yourself. If you use Gmail, you are swapping free email for the data of everyone you exchange emails with. If you support your business with tracking, you are making that decision for your visitors. It’s invisible, and it’s opt-in by default. Is that fair?

As creators we need to make wise decisions on behalf of our visitors. We can be the gatekeepers of harmful decisions. If making these decisions becomes a battle you have to fight with the top of your organisation, there might just be something wrong with the business model. An organisation that makes its money by tracking people, whether they’re doing it themselves, or getting something in exchange for adding scripts to their site, is not going to want to change. They may even find it impossible to change.

As people become more aware of these issues, we need to be careful that if an organisation does appear to change, it’s not just superficial, that they’re not misdirecting us, or telling us something is better when it’s just bad in a different way. Like when WhatsApp switched on end-to-end encryption for hundreds of millions of users. So many people said “Yay! They’re the good guys!” But as Rick Falkvinge said on his blog…

“Would Facebook really allow WhatsApp to throw away the business value in a 19-billion acquisition? Of course it wouldn’t. This demonstrates that the snoop value was in the metadata all along: the knowledge of who talks to whom, when, how, and how often. Not in the actual words communicated.”—Rick Falkvinge

And surprise! WhatsApp is now sharing user data with Facebook.

And remember when Google’s Allo was heralded for its privacy features? Turns out, that was just a bit of announcement PR.

You can learn about the value of metadata by watching the fantastic documentary, A Good American. In this film, Bill Binney, working on surveillance for the US, says that meta information is the most valuable information that the NSA can collect. Without meta data, surveilling people is like looking for a needle in a haystack. (I also recommend the recent Oliver Stone Snowden film for learning about how corporate surveillance and government surveillance come together.)

As we become more aware of the problems, the people behind the trackers are getting defensive. Massive German publisher Axel Springer says their “core business is delivering ads to its visitors. Journalistic content is just a vehicle to get readers to view the ads”. According to Lindsay Rowntree, who writes for a marketing and advertising blog…

“The web, as it is today, exists because of an implicit understanding that ads pay for the content consumers love and, therefore, need to be seen.”

—Lindsay Rowntree, Why Three’s Partnership with Shine…, May 2016

Again. No. This is just not true. Ads are the most common business model, but not the only one. Do you want to get all your news from people who just want your eyeballs? And remember, ads are still not the problem. Trackers are the problem.

Corporations need to stop treating us like we’re greedy lab rats, making outrageous demands just by asking “please don’t experiment on us.”

We must question and challenge these unethical practices. And we need to learn to see past the PR. We certainly shouldn’t engage in this PR ourselves. We need to make real things that have meaning, rather than the illusion of having meaning. Don’t be the person shaving a few kilobytes off an image file when someone else is adding 5MB of trackers.

We should also be selfish. Building ethical alternatives to centralised technologies will save our jobs. The average Facebook user spends 50 minutes on Facebook a day. Facebook’s functionality has replaced status updates, photo sharing, company sites, news, and chat, to name just a few.

When it comes to our business use, what Facebook hasn’t got covered, Google has a product for you. If we want jobs that aren’t at Facebook or Google, we’re going to need to make sure the rest of the web actually exists.

Build and support alternatives

We need to build alternatives, giving ourselves the choice to choose a different way, as both the consumers and the builders of the web. And when we find alternatives, we must support them.

When you’re looking for replacements for Facebook and Google products, don’t just look for another behemoth. You can’t replace Google in its entirety, but you can use individual products/services to replace different parts of its functionality. Perhaps DuckDuckGo for search, OpenStreetMap for maps, WordPress for blogging, Fastmail for email. The benefit of using individual products is that no one organisation has all your information.

It’s also worth looking for organisations that have traditional business models. Business models where you pay for a product or service in small one-off or recurring fees. With larger organisations, that’s no guarantee that they won’t track you, but small-to-medium businesses are less likely to take your money and track you too.

It’s also vitally important that we call out bad behaviour and make tracking socially unacceptable. Call out businesses you see tracking you, especially if you also pay them.

Work for more ethical companies

We can’t all just quit our jobs to go work somewhere more ethical, but maybe next time you’re looking for work, do your research on their business models. Help make a difference by putting your valuable knowledge and skills into building the alternatives, and help us build these bridges from the mainstream technology to the future we want to see.

Build the world you want to live in.

3 comments

Prisca
at 09:45am

Laura, thanks for posting this — must have been an excellent talk, going by this brilliant write-up. Thank you :)
Wayne Darnell
at 20:52pm

Excellent…. You hit on some fantastic points that more people need to be aware of. It’s definitely an uphill battle making changes and developing or finding products that can adhere to an ethical business model (I’m changing gears in my company to spend a lot more time working on solutions) but it must be done. To continue along the path that the large corporations have laid out for us “users” will eventually end with no privacy, control, or ownership of our information and ultimately our identities… The writing is on the wall for anyone who takes the time to look, it’s up to us to erase that writing.
Alina & Deian
at 12:21pm

Dear Laura,
wonderful article with a lot of information. We’ve been following you closely and even use Better on our Macs. When we started developing our Travel/Digital Nomad blog last year, we thought hard about how to make it sustainable without handing data over to big corporations. Google Analytics was never an option so we did some research and found stetic, a German alternative, that is not free. Still, we bought a one year license, eating up the costs and protecting our visitors while still getting useful data to improve our website.

What that shows is, that you have to invest — nothing is for free these days. Sadly, most people prefer a free service over a paid one.

Read the original post, ‘Digital Assistants, Facebook Quizzes, And Fake News! You Won’t Believe What Happens Next’.

Site adjustments

Mon, 10 Apr 2017 10:18:28 +0000

My site is looking a little different, I’m now using the lovely Recia for the type. Fontdeck recently retired, and while they gave loads of notice about the service stopping, I still didn’t update my fonts in time. This left my site looking a little sad and Helvetica-y.

My site with web-safe backup fonts, Georgia and Helvetica

I have a redesign in the works. But I’ve no idea when it’ll be finished. It requires a major reworking in the focus of the site itself. Since I’ve been full time with Ind.ie, the portfolio element of the site is a bit redundant. Although it’s nice to have a history of work, and I’d really like to use it for case studies of the design work for Ind.ie and Better. Most of my writing has also appeared on Ind.ie, or on other sites, but needs to be linked to from here. It’s also time I got my head around all the WordPress theming changes from the last couple of years.

The site as it is today, with Recia replacing Georgia and Helvetica

For now, I thought I’d take a step towards the new design with an update in fonts. The typography otherwise remains the same, so apologies for any wonkiness or poor layout!

Read the original post, ‘Site adjustments’.

Bereaved

Mon, 03 Oct 2016 12:44:47 +0000

Last night I had a dream, or maybe a nightmare. I was in a ballet class in a church hall, learning all kinds of complicated and not-really-ballet dance sequences. The class was busy, we were all in clumsy rows. We were a diverse group of dancers in our everyday clothes. It was the same church hall I did most of my ballet classes in when I was younger, with lots of wood panelling, and stacked plastic chairs in place of a barre. The left side of the hall was a folding wall painted pale green. One of the folds was open into the side room, to allow latecomers and visitors in and out of the room. Lots of people were coming and going through the door.

During a particularly tricky piece of choreography, I absent-mindedly looked over to the side door and saw my mum standing in the doorway, watching and smiling. I hurried through the pack of dancers to get to her, but she turned and walked away, exiting the side room door into the carpark. I chased her, and called out to her, “Mummy!” She turned around smiling at me, standing there in the car park. I went to give her a hug, there was nothing more that I wanted in the world than to just give her a hug. But before I could get to her, she put her hands up and gestured for me to stay away. “You’re all sweaty. It’s not good for me. Not right now.”

I woke up shocked with a lump in my throat. It’s been fourteen months since my mum died. Eighteen months since my grandmother, my mother’s mother, died. I’d never lost anyone so close to me before, let alone our family’s two local matriarchs in the space of four months. Two women who loved, supported, and encouraged us, non-stop from our births to their deaths. Sometimes in their own peculiar ways, but always fiercely.

The grief of bereavement surprised me. It wasn’t like it was in books or on TV. I’m a tearful kind of person, but I didn’t cry all the time, or even very often. I mostly felt strange and a bit empty. Sometimes the painfulness hits me in a sudden wave, the overwhelming feeling of how much I miss them, and I sob until my pillow is wet. I bawled in a café on my birthday because what was the point of a birthday when I couldn’t share it with the person who gave birth to me?

Still, distraction is the strongest effect grief has had on me. It has gotten better over time, but I had long periods of struggling to focus on anything at all. Firstly months, then the odd week, now the odd day. Previous traumatic events have seen me plow everything into my work, but now I just couldn’t. My mind wouldn’t settle, it felt soft and cloudy. My short-term memory stopped functioning so well. My mind wasn’t always hurting, but it wasn’t doing much else either. But I was fidgety. I didn’t want to sit around feeling weird so I started knitting a lot. My mum taught me how to knit a few months earlier, and we’d bought a bear pattern together. In just over a week, Stanley was created.

Stanley, as named by my brother Sam who has a knack for naming cuddly toys

As time goes by, the tearful moments have become less, but I’m often shaken. Throughout 2015 and 2016, I’ve had days of sudden drops in mood, going back to feeling distracted and odd. I didn’t realise until fairly recently that those drops weren’t always random turns. Sadly, 2016 has been noticeably full of high-profile deaths. Somebody I can’t remember wrote a kind tweet advising all to take care of their friends during those times; the massive coverage and shared emotional distress can affect those who have experienced loss themselves. I’ve always tried to be empathetic to triggering, but I’d never experienced anything like it myself. I was being triggered by the news; other people’s sad experiences were making me feel those feelings all over again. It can seem a bit selfish to have to take care of myself when others are suffering more recent pain, but it’s hard to tell my biology to behave selflessly.

As the weepy incidents lessen, remembering my mum and granny becomes less about suddenly remembering they’re not there, and more remembering the fun and silly stuff. With two strong personalities like them, the missing holes are very big, but the memories are all the more enjoyable. The family knows exactly what both of them would say about any given situation and can parrot it to each other convincingly. We’ll always miss them, just hopefully less painfully.

I’m never really sure what to say when people ask about my bereavements, how I’m feeling, or even how I’ve been recently. Knowing is hard and dwelling on the matter isn’t much fun either. Everybody will inevitably experience the loss of someone very close to them in the course of their lifetime. It’s probably a more horrible realisation than realising we ourselves are going to die. But like many other mental health-related issues, it’s normal. Because of that I’m sorry I don’t have any useful advice or uplifting wisdom as part of #geekmentalhelp week. I’m not a professional. And sometimes all the rest of us can do is share what hurts.

4 comments

Ashley Baxter
at 11:57am

This is beautifully written, Laura. Thanks for sharing.
Ruth John
at 12:44pm

Agreed, this is so such a heart felt read. Sharing is more than enough x
Antonia
at 21:24pm

Awesome, and just spot on. My dad and Grandmum (his mother) passed on in a space of 3 weeks this June and I just didn’t know what to do with myself. Your words are almost exact of how I could describe things. Sharing is so important and I’m glad I stumbled across your post. I hope it would comfort you in knowing that someone out there is comforted by your post.
Kathy
at 21:12pm

Wow, lady! This is deep stuff. Thank you so much for sharing. I have not lost my mom, but I lost my granny a few years back. Thank you for phrasing this so beautifully, and for sharing your pain. It reminded me that it’s okay to feel, and that is a powerful and much-needed reminder. Kudos.

Read the original post, ‘Bereaved’.

Diary, 29th June 2016

Wed, 29 Jun 2016 13:44:48 +0000

It’s not even been a week since 51.9% UK citizens voted to leave the EU, and it’s already a mess for any business operating from, or with, British Pounds. I’ve spent today working through our finances to see how best for us to proceed in terms of currencies and bank accounts. Despite living in Sweden, we’re still tied to the UK, not least because I’m a British citizen… * shakes fist at the idiots who voted to Leave *

Other than the Brexit woes, we’ve been working hard on keeping Better up-to-date and fixing any teething problems we’ve had with the trackers list. Since launch we’ve updated Better (the app) twice, and updated the content (the tracker list) seven times. We’ve had loads of great reviews on the App Store, and reading these are encouraging, motivational, and the best way to start our days! :smile:

We’re now working on the best trackers to target next, and ways to keep improving Better. As well as how to continue raising awareness alongside promoting sales to help keep us sustainable.

Oh, and I nearly forgot the…

Oskar status

King of the park

This diary entry was originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-wednesday-29th-june-2016

One comment

StillUntitled
at 07:29am

But the pound’s getting stronger and stronger against USD, right? Does it cause inconveniences as well? There’s been no administrative decisions as to currencies yet, has there?

Read the original post, ‘Diary, 29th June 2016’.

Diary, 13th June 2016

Mon, 13 Jun 2016 13:38:04 +0000

Time rolls by and it’s about time I did another diary entry. I’m going to try to get Aral and me to write more frequently now what we’re working on (Better) is out in the open. (No more talk of the hush-hush project! ;-)

Since the launch of Better, we’ve been keeping development going, whilst making improvements to the Better app and Better.fyi, as well as responding to emails, tweets, feedback and questions.

As well as keeping the financial and admin side ticking over, recently my biggest tasks have been getting the Reviews on to Better.fyi, so people can see all the great stuff that has been said about Better before they buy. This is, so far, the best job ever. You don’t know how encouraging and exhilarating it is to read through brand new 5* reviews on a daily basis. I’ve danced in the office, and Aral and I have high-fived our hands raw. Thank you to those of you who have left such wonderful reviews, it has not only given us encouragement, but also let other people on the App Store know what Better is about.

We also added a Support page to Better.fyi to answer some of the most common questions. This was something that would’ve been harder to do before the launch as we weren’t entirely sure what would come up. These questions have also shaped the rest of our copy in the app and on Better.fyi.

Hopefully I’ll be back to give you another update soon!

Oskar status

Making friends!

This diary entry was originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-monday-13th-june-2016

Read the original post, ‘Diary, 13th June 2016’.

Diary, 22nd April 2016

Fri, 22 Apr 2016 14:59:43 +0000

Always busy here! Aral and I have been doing a good job of getting out to events in our new home city of Malmö. Last week we went to see A Good American at DocLounge, and this week we’ve been to a few events right here in [Media Evolution City](http://mediaevolutioncity.se/" rel=“nofollow). We’re really lucky to have an amazing venue that hosts so many events around us.

I’ve been knuckling down on the financial/admin side of things now we’ve moved to Malmö. I can’t remember if I mentioned before that Aral and I are both closing our own limited companies down so that we’re only paying to run Article 12 (Ind.ie). This makes sense as we have no money going into those companies, And so I’m now officially a Director of Article 12 (the other being Aral). This much better reflects my day-to-day responsibilities too.

We’ve got a few events that I’ll add to the site in the coming few weeks, and then hopefully something big not so far away

Oskar status

Mostly chill

This diary entry was originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-friday-22nd-april-2016

Read the original post, ‘Diary, 22nd April 2016’.

Diary, 29th March 2016

Tue, 29 Mar 2016 14:55:34 +0000

Back in the office today and we’re working hard and getting a lot done. We can’t wait to share what we’re working on with you all. (Soon, I promise!)

Friday and today, I’ve been getting our Labs and source.ind.ie in tip-top shape. Now with our own logo in the corner, it feels more like home, and Aral has added single sign-on so you can sign up with your GitHub account, as well as adding some new copy on the source homepage to explain a little more about what is housed on source.ind.ie. (It’s only visible if you’re signed out.)

We’ve added Timer and Swifty File Manager to Ind.ie Labs too. These have new logo/icons along with updated and new logo/icons for Ind.ie Labs, Set, and a couple of internal projects. Where Labs projects have demo iOS apps, these apps now have proper icons when you run them on your device or on the Simulator, so you can easily tell them apart.

I’ve been working to create a more consistent style language across our logos and icons. As we go along, certain rules and patterns are emerging that helps everything feel a bit more Ind.ie.

Oskar status

Cosy on his fancy office bed…

This diary entry was originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-tuesday-29th-march-2016

Read the original post, ‘Diary, 29th March 2016’.

Diary, 21st March 2016

Mon, 21 Mar 2016 16:24:55 +0000

It’s been a busy few weeks.

Ethical Design Manifesto refresh

Last week we launched a refresh of the Ethical Design Manifesto, along with a video. As it was a short-ish video, I felt like I had no excuse but to do the captioning for it too. I couldn’t get Subtitle Horse (my usual favourite web software) working with the video, so I ended up using Jubler instead.

It took a while to get my head around how to use the interface, but I found using the audio track from the video very useful, as I could sync the subtitles to the wave forms.

Jubler in action

Creative Mornings Malmö

On Friday I also gave my first ever talk in Malmö/Sweden. It was at Creative Mornings Malmö which had a lovely venue at Djäkne. The topic was “Change” and I spoke about Ethical Design, and why we need it. Aral took lots of bad photos of me, and one of them is below.

Me doing my impression of a crow

We’re settling into a good routine here in Malmö. We’re working from the office all week, 8:30-5ish, and doing a better job of taking time off during the evenings and weekends. It’s still tiring though! I underestimated the sheer cognitive load of dealing with an unfamiliar language and culture. Of course, everybody speaks English and is very kind and friendly. But just going to the supermarket, finding our way around, and learning how things work, takes a little more time and a little more effort. It’s a great adventure! But makes us well worn out at the end of every day.

Oskar status

Enjoying the beach life!

Originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-monday-21st-march-2016

Read the original post, ‘Diary, 21st March 2016’.

Diary, 1st March 2016

Tue, 01 Mar 2016 10:14:56 +0000

Well… we’re here! In Malmö, sitting in our new office at Media Evolution City.

It’s been a busy and exhausting week. Oskar and I made our 800 mile trip in one day, thanks to the wonderful “courier” and took another day to recover. Then it was straight into the office.

The last week has been meeting new friends, relocation admin, and arranging a few events for the year. All the while Aral has been coding. (And he intends to write a moving-related update on our blog ASAP!) Things will move much faster now we’re in a city with a supportive community and a proper place to work…

Oskar status

Loving the beach!

Originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-tuesday-1st-march-2016/1099

Read the original post, ‘Diary, 1st March 2016’.

What advice do you give to aspiring designers or typographers?

Wed, 17 Feb 2016 10:30:00 +0000

I was just asked, amongst a couple of other questions, what advice I would give to aspiring designers or typographers.

With my mind focused on the aspiration part, I started writing an answer based on finding your own way of working through studying others, not copying… And then I realised it was a bit superficial. What’s the biggest problem with young designers today? They’re coin-operated*. So I wrote what I hope is slightly better advice:

Be ethical. Design is a great power where you can choose to instruct and manipulate others into thinking, feeling, and acting. Use those powers for good, don’t promote or help those whose business and goals harm people. Work hard to build a society you want to inhabit in the long term. Don’t underestimate your own impact.

* Aral came up with that term. I just love it.

One comment

David
at 10:32am

I would say focus on the one thing you are good at and master that skill and style, don’t get distracted thinking you need to know everything about anything. Such as if youre thing is vector graphics become the best at it, or if you use illustrator get to know it inside out. Hope that’s helpful advice for someone.

Read the original post, ‘What advice do you give to aspiring designers or typographers?’.

Diary, 16th February 2016

Tue, 16 Feb 2016 09:26:57 +0000

It’s nearly time! We’re moving to Sweden next Tuesday, and it’s currently at equal parts exciting and stressful.

The storage locker in Brighton is almost empty, and we’ve stashed all our sentimental stuff—the things you want to keep, but probably aren’t worth putting in a suitcase to a foreign land—at my family’s house. We’re only taking a couple of suitcases of clothes, our work equipment, and of course Oskar. If we can squeeze Aral’s fancy Anglepoise lamp and a few nice bits of artwork into the pet transportation van, then we’ll have those along too.

Speaking of pet transportation, Oskar and I will be making our way to Sweden by road with pet couriers. It’s not cheap, but it means that I don’t have to drive across five countries on the weird side of the road, and me and my pup get to travel together. It’s going to be a long trip, with at least one overnight in Germany, so I might keep myself occupied by blogging the experience as we go…

On the admin and accounting side, Aral and I are taking this “fresh start” opportunity to wind down our own limited companies that we used for consultancy/freelancing, and simplifying our accounting. Neither of us are doing anything that isn’t in some way related to Ind.ie, so there’s no point us spending money on maintaining all the accounts. That’s also particularly good news for me, as it should lessen my admin tasks and leave me more time to work on design.

One week to go!

Oskar status

If I look cute, I won’t be told off for being on the sofa…

Originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-tuesday-16th-february-2016

Read the original post, ‘Diary, 16th February 2016’.

Diary, 5th February 2016

Fri, 05 Feb 2016 11:29:24 +0000

I’ve been meaning to write a diary entry for ages, and 8am on a Friday morning is the first opportunity I’ve had to get to it (and I’ve already been working for an hour…)

Everything is going well. You might’ve heard that we’ve decided to move to Sweden. Our visit at the end of January saw us finding a beautiful apartment in Davidshalltorg in Malmö, and the wonderful people at Media Evolution City going out of their way to organise us an office space where Oskar can join us. It’s been an arduous six months, and we’re really excited to move to such a friendly and welcoming space.

It’s been a busy few weeks, with us both working hard on the hush-hush project (not long to go!) Aral speaking in Amsterdam, our two-night house-hunting trip to Malmö, and my speaking on two panels this week. Now we have just over two weeks to move everything we need to Sweden, and sort everything else. Including transporting Oskar across 5 countries.

To that end, we’re selling some of the stuff from our storage room on the 13th February. If you’re interested in any of it, give me a shout.

Oskar status

Making the most of the British countryside!

Originally posted on the Ind.ie forum at https://forum.ind.ie/t/laura-s-diary-friday-5th-february-2016

Read the original post, ‘Diary, 5th February 2016’.

Office Furniture (and other nice things) for sale

Tue, 02 Feb 2016 15:51:26 +0000

So we’re finally moving to Sweden at the end of the month. You might remember that we sold a lot of our stuff last summer when we left Brighton. We kept a lot of good stuff, thinking we’d relocate it with us.

But now we’re moving to a small apartment in Malmö, and a beautiful furnished office in Media Evolution City, so we are only taking the essentials. (Yes, that includes Oskar.)

What’s left is the things that we really would’ve kept, but can’t. Fancy any of it? Please let Aral or me know, via Twitter or email.

2x Biurko adjustable desks

### ~~£500 each~~

~~Only used for ~4 months, these Biurko adjustable desks are nearly-new, with spotless oak tops. They go for £650 new (excluding VAT and shipping from Poland) we’re selling them for £500 each.~~

~~120 cm width~~
~~80 cm depth~~
~~73 – 120 cm height range (sit-stand)~~

Biurko desk. It’s bigger than it looks. This is at full height. Legs come out wider when desk is lowered.

~~They’re already packaged with special wrapping to protect the tops from damage in transit. They weigh a lot, and are very big, so you will need a large van and more than one person!~~

1x 2x Apple 27" Thunderbolt Displays

### ~~£500 for newer display,~~ £400 for older

Big Apple Thunderbolt displays in mint condition and their original packaging. Requires a Thunderbolt port to connect to a Mac.

Apple Display as seen on a messy desk. Ridiculous dog not included.

The older display has a defect since purchase that it cannot act as a power supply for the Mac (the power lead doesn’t work) but it’s otherwise in perfect working order. This defect won’t affect you if you already have a charging power supply for your Mac.

Depending on how old your Mac is, you may need one of the tiny magnetic adapters to fit the power supply to your Mac. I think we might have a couple that we’ll throw in if you need one. Again, the display can be used without powering the Mac, it’s just a nice bonus feature to reduce the number of things you plug into the wall.

1x Herman Miller Aeron chair

### ~~£350~~

~~The iconic office chair. Dark grey, size B (medium sized) with lumbar support. Bought refurbished 18 months ago. Costs ~£900 new.~~

Aeron chair

1x Nobo Double-sided 1200 x 900mm mobile whiteboard

### £200

Bought less than a year ago. Great whiteboard for wheeling around the office, and double the planning space as you can flip the board over. It has brakes. RRP £500, on Amazon for £330. We’ll throw in a load of whiteboard pens and an eraser to get you started.

It’s large and heavy (great for writing on, harder to lift.) It’s currently in two pieces: board and stand. It can be dismantled into smaller parts, but the board itself is 1200x900mm, and the wheelbase is probably no shorter than 1250mm in one piece, so you’ll need a vehicle that fits it all in.

Vintage Shadow 861 Semi Acoustic Guitar (VEC1500N)

**£150**

Great condition, stays in tune. With soft case and guitar stand included. Goes for ~£300 online.

The guitar is on the left side. Only photo I could find with it in! Dog not included.

Long board (Loaded Tan Tien complete)

**£100**

£250 new. Longer than a skateboard, and looks cool too. I have no idea about long boards. You can ask Aral if you want to know how it rides…

And also…

Some smaller items. Let me know if you want any more information:

Dyson Animal vacuum cleaner £100 ONO (~£300 new) Used condition, but still works really well. The best vacuum cleaner for dog hair as Oskar can testify.
~~USB 2200 AA Microphone £50 ONO~~ ~~(~£175 new) Nearly new.~~
~~Fitbit Aria Scales £50 ONO~~ ~~(£99 new) Nearly new. Requires AA batteries to work, and WiFi to send the data to “the cloud.” Doesn’t need to be used with a Fitbit.~~
**Skateboard £50 ONO **(~£100 new) Good condition. But I don’t know what type it is…
~~Blue Yeti USB Microphone £50 ONO~~ ~~(£99 new) Nearly new, podcasting favourite. Has different directional modes which is useful if you want to record two people talking to each other.~~
**Wooden tree bark bookcase £50 ONO **(~£100+ new) Great condition. 3 sturdy shelves, fits big books.
**Philips Wake-Up Light Alarm Clock £50 ONO **(£100 new) Great condition. Perfect for people who struggle with dark mornings. Coloured sunrise simulation, five sounds and radio function.

When? And how?

Everything will need to be collected from Big Yellow Storage Brighton (from our storage locker) on **Saturday 13th February** between **12 noon –; 5pm**. If you definitely want the desks, or a combination of the larger items, we might be able to arrange pick up a few days before or after (But we really don’t have much time, we’re moving in under 3 weeks!)

We can’t post anything, it’s really expensive. But if you want to arrange a courier to collect on the 13th, we can handle that.

Read the original post, ‘Office Furniture (and other nice things) for sale’.

My 2015

Fri, 01 Jan 2016 12:45:02 +0000

I’m not even sure how to write about 2015… 2015 can die in a fire, go away and never come back.

My mother died in August, three months after her mother, my grandmother, died in April. Missing them both has really done me over. Grieving is not what I expected, it just makes everything exhausting. Oddly, knitting helped.

In July, we moved from Brighton to Reigate to stay with my family. We intended to stay a couple of months while we planned our move abroad to escape the Tories and their Investigatory Powers Bill. By chance, I got a month at home with my mother before she died.

At Ind.ie we were struggling for money, and I wanted to be close to my family, so it made sense to stick around in Surrey. It now just about feels right (and just about affordable) to move away.

Looking back, my fitness, reading, and writing goals from 2014 seem trite. Ind.ie is still incredibly important to me, and I’m sure we’ll do more great things in 2016. Aral’s blog post sums up our Ind.ie year well.

Goals for 2016

Be efficient. Busywork isn’t productivity.
Make the most of everything.

Read the original post, ‘My 2015’.

Flexboxing the Universal Video Player

Mon, 26 Oct 2015 13:11:45 +0000

I added a flexbox layout to our Universal Video Player (accessible HTML5 video player) and wrote a blog post on Ind.ie Labs about using flexbox with progressive enhancement.

Read the original post, ‘Flexboxing the Universal Video Player’.

The Sticky, Pocked Underbelly Of The Web

Fri, 07 Aug 2015 21:19:23 +0000

This week’s roundup covers Swiss Cheese Internet vs The Database Of Ruin, The Right To Be Forgotten, and Diversity. Lots of variety!

Read the original post, ‘The Sticky, Pocked Underbelly Of The Web’.

Windows To Your Soul

Fri, 31 Jul 2015 17:40:09 +0000

In this week’s Ind.ie roundup, I wrote about privacy, politics, tracking, Timelines, and a little thing called “corporate nullification.”

Read the original post, ‘Windows To Your Soul’.

Is there potential for “ethical analytics”?

Thu, 30 Jul 2015 10:19:04 +0000

We have Piwik analytics on the Ind.ie site, and I use Gauges and GoSquared on my own site (I was indecisive at the time…) But I use Ghostery so I actually block analytics like this for my own use.

As someone who is a big web fan, and used to work in client services, I understand the value of particular types of analytics for simple sites like ours:

Amount of hits (required to understand popular/unpopular content and make financial decisions for hosting etc)
Browser/browser size/operating system (required to know how to optimise for visitors)
Language spoken (required to work out how to best optimise for different languages)
Referring links (to track who is saying what about your site)

BUT, I think there are unnecessary metrics that can be on the invasive side for simple sites:

Internet Service Provider
Tracking of individuals

And some metrics I find misleading, as they’re based on pattern-matching and guessing:

Engagement time
Gender/Income Level/Age/Interests

Some of these are grey areas when it comes to tracking web apps, but I’d be interested to know where you all see boundaries? Are all analytics bad analytics? Is there room for “ethical analytics” that only tracks anonymous data with limited uses? Would there be a business in that?

Discussion on the Ind.ie forum

Read the original post, ‘Is there potential for “ethical analytics”?’.

The Social Web: A Glorious Dystopia

Fri, 24 Jul 2015 18:00:55 +0000

Lots of good quotes and a book recommendation in this week’s Ind.ie roundup.

Read the original post, ‘The Social Web: A Glorious Dystopia’.

Tethered Beings

Fri, 17 Jul 2015 17:56:41 +0000

This week the Ind.ie roundup returns with a big one. Great news on the UK surveillance legislation front, and lots of corporation news. Read the Ind.ie roundup: Tethered Beings.

Read the original post, ‘Tethered Beings’.

Farewell Caspar

Mon, 13 Jul 2015 10:46:13 +0000

We didn’t have an Ind.ie roundup the previous week because we were moving, though Aral wrote a quick update on what’s happening with our move. Last week we were roundup-less again, as we heard the sad news that Caspar Bowden had died. We decided that, instead of the usual roundup, we’d take a look at Caspar’s privacy advocacy in tribute to his work.

Read the original post, ‘Farewell Caspar’.

Book Bundles for Sale

Fri, 26 Jun 2015 00:00:04 +0000

3rd July: NEW BOOKS ADDED!

We’re moving. And because we’re moving abroad, we’re getting rid of all of our stuff.

Just take me to the books already

Aral and I have a lot of books between us. We’re sad to lose them. Many have been gifts from friends, written by people we know, and helped us do what we do.

Selling books one by one is a time-consuming (and not cost-effective) exercise. Inspired by my friend Al Power coming over and asking “which books do you have on Typography?” I thought they’d be worth selling as bundles. All these books are worth way more than we’re selling them for, but we’re in a rush and want them to go to good homes. I’ve not done any particularly complicated pricing. Small books are £8 per bundle. Four small books: £10. Two small books: £5. Big books are £12 per bundle. Big book bundles with two books are £10. They’re all in good condition, most nearly-new. A few come with bonus margin notes…

There’s more (lots of bigger books) coming! If people show interest in this, we’ve got more on typography, art, programming languages and more.

Postage options

The problem with books is that they cost a fortune to post. So I’ve bundled them all under 2kg so we can keep the post cheap. (Oddly, 2kg costs more to post than 2 x 1kg.) They fall into two categories: below 1kg, and above 1kg. (Listed alongside the bundles)

If you want them 2nd class to save the pennies, that’s cool too.

Below 1kg postage

Collect from us in Brighton (Kemptown): Free!
1st Class: £3.30
1st Class Signed for:** £4.40**

Above 1kg

Collect from us in Brighton (Kemptown): Free!
1st Class: £5.45
1st Class Signed for: £6.55

Books

All books are now gone. Thank you for your interest!

Want to buy them?

Give me a shout on Twitter, or drop me an email. We can arrange payment by bank transfer, and I’ll post them right away. First come, first served.

Already reserved

Sorry, these are already gone:

The 8 Faces Bundle I

RESERVED 8 Faces Issues #1, #2, #3, #4 (Above 1kg) £10

The 8 Faces Bundle II

RESERVED 8 Faces Issues #5, #6, #7, #8 (Above 1kg) £10

The Accessibility Bundle

RESERVED Design Meets Disability by Graham Pullin, Universal Design for Web Applications by Wendy Chisholm and Matt May, Just Ask: Integrating Accessibility Throughout Design by Shawn Lawton Henry (Above 1kg) £8

The Colour Theory Bundle

RESERVED Color Harmony Workbook by Lesa Sawahata, Colour: A workshop for artists and designers by David Hornung (Above 1kg) £10

The Communicating Design Bundle

RESERVED Visual Literacy: A Conceptual Approach to Graphic Problem Solving by Judith Wilde and Richard Wilde, Communicating Design by Dan M Brown (Above 1kg) £10

The CSS Bundle

RESERVED Sass For Web Designs by Dan Cederholm, CSS3 For Web Designers by Dan Cederholm, SMACSS by Jonathan Snook (Below 1kg) £8

The Design Approaches Bundle

RESERVED Design as Art by Bruno Munari, The Language Of Things by Deyan Sudjic, The Hacker Ethic and the Spirit of the Information Age by Pekka Himanen, The Shape of Design by Frank Chimero (Above 1kg) £10

The Design Theory Bundle

RESERVED Principles of Form and Design by Wucius Wong, Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler (Above 1kg) £10

The Grids and Visualisation Bundle

RESERVED A Practical Guide to Designing with Data* ** *by Brian Suda, *Ordering Disorder: Grid Principles for Web Design* by Khoi Vinh, *Making and Breaking the Grid* by Timothy Samara, *This Is A Print Handbook *(slim, no spine!) (Above 1kg) **£12**

The Holistic Design Bundle

RESERVED Designing For Emotion by Aarron Walter, A Practical Guide to Designing the Invisible by Robert Mills (Below 1kg) £5

The JavaScript and jQuery Bundle

RESERVED jQuery in Action by Bear Bibeault and Yehuda Katz, JavaScript: The Good Parts by Douglas Crockford, Simply JavaScript By Kevin Yank and Cameron Adams (Above 1kg) £10

The Mobile Web Bundle

RESERVED Mobile First by Luke Wroblewski, Content Strategy For Mobile by Karen McGrane, Mobile Web Design by Cameron Moll, The Mobile Book by Smashing Magazine (Above 1kg) £10

The User Experience Bundle

RESERVED Undercover User Experience Design by Cennydd Bowles and James Box, Neuro Web Design by Susan M Weinschenk, Don’t Make Me Think! By Steve Krug, The Elements Of User Experience by Jesse James Garrett (Above 1kg) £10

The Web Design Bundle

RESERVED A Practical Guide to Designing for the Web By Mark Boulton, Just Enough Research by Erika Hall (Above £1kg) £5

The Writing More Good Bundle

RESERVED *The Complete Plain Words *by Penguin, *Chambers Writing for The Web * (Below 1kg) £5

The Tech and Design Business Bundle

RESERVED It’s Not How Good You Are, It’s How Good You Want To Be by Paul Arden, Rework by Jason Fried and David Heinemeier Hansson, Insites: The Book by Keir Whitaker and Eliot Jay Stocks, Crush It! by Gary Vaynerchuk. (Above 1kg) £10

The T-Shaped Designer Bundle

RESERVED ** Interviewing For Research by Andrew Travers, Design Is A Job by Mike Monteiro, * Mobile First by Luke Wroblewski, Undercover User Experience Design* by Cennydd Bowles and James Box. (Below 1kg) **£10**

The Talk The Talk Design Bundle

RESERVED The Designer’s Lexicon by Alastair Campbell, The Universal Methods Of Design by Bella Martin and Bruce Hanington. (Above 1kg) £10

The Timeless Usability Bundle

RESERVED Defensive Design for the Web by 37signals, Usability Engineering by Xristine Faulkner. (Below 1kg) £10

The Graphic Design Bundle

RESERVED *The Designer Says *compiled by Sara Bader, Logo Design Love by Jon Hicks, The Icon Handbook by Jon Hicks. (Above 1kg) £12

The Ellen Lupton Typography Bundle

RESERVED Type on Screen by Ellen Lupton, Thinking With Type by Ellen Lupton. (Above 1kg) £10

The ActionScript 3.0 Bundle

** ActionScript 3.0 Cookbook* *by Joey Lott, Darron Schall & Keith Peters, *Learning ActionScript 3.0* by Rich Shupe with Zevan Rosser. (Above 1kg) **£10**

The Typography Bundle

8Faces #5, Detail In Typography by Jost Hochuli, A Typography Workbook by Kate Clair. (Above 1kg) £10

The Extreme Programming Bundle

The Mythical Man-Month by Frederick P. Brooks Jr, Testing Extreme Programming by Lisa Crispin and Tip House, Extreme Programming by Martin Lippert, Stefan Roock and Henning Wolf. (Above 1kg) £12

The Being An Artist Bundle

Art & Fear* ** *by David Bayles and Ted Orland, *This Is Not A Book* by Keri Smith, *Letters To A Young Artist* by Julia Cameron. (Below 1kg) **£8**

The HTML5 Bundle

HTML5 For Web Designers by Jeremy Keith, HTML5 Cookbook by Christopher Schmitt & Kyle Simpson, Introducing HTML5 by Bruce Lawson and Remy Sharp (Above 1kg) £8

The Introductory Philosophy Bundle

Penguin Dictionary of Philosophy, The Story Of Philosophy by Bryan Magee (Above 1kg) £5

The Beginnings Bundle

The Autobiography of Charles Darwin, Origin Of Species by Charles Darwin, Big Bang by Simon Singh. (Above 1kg) £8

The Ologies Bundle

Mythologies by Roland Barthes, The Decisive Moment by Jonah Lehrer, Here Comes Everybody by Clay Shirky (Below 1kg) £8

Read the original post, ‘Book Bundles for Sale’.

Photography on manual: 11 –; Overlay

Thu, 28 May 2015 17:38:14 +0000

A weird experiment that almost works…

Sleeping in Spring. Mucking about with overlaying a couple of photos. It’s a bit more editing than multiple exposures, but a similar style. I was just flicking through the layer blending modes and found something that looked a bit different. Here I’ve layered a couple of blending modes and erased some areas to bring Oskar’s face out

Read the original post, ‘Photography on manual: 11 –; Overlay’.

Photography on manual: 10 –; Miscellaneous

Thu, 28 May 2015 11:39:31 +0000

The last few days have brought a very miscellaneous collection of photos.

Rama on the beach. I was out trying to get the sea and the pier, but the weather was grim, and I found this little figure instead. I think it might be Rama, but I might be wrong…

The next photo is part of our overlaying exercise set by Ashley. I did it in post-processing, before I discovered that my camera has a multiple exposure setting. It’s pretty cheesy, but an okay first try.

Overlay. Aral and the sky. Looks a bit film poster…

Grove. The tree outside the back of our house looks like it’s glowing at night.

Read the original post, ‘Photography on manual: 10 –; Miscellaneous’.

The Destiny Machine

Mon, 25 May 2015 08:54:43 +0000

Last Friday’s roundup was back to business as usual, after a couple of weeks of re:publica-related work. We’ve got the latest in the world of Spyware 2.0, and some fun ways that people are challenging the system.

Read the original post, ‘The Destiny Machine’.

Photography on manual: 9 –; Oskar in the grey

Sun, 24 May 2015 15:20:03 +0000

This week we’ve been looking more at natural light, and portraits with foreground detail. I took my trusty (actually incredibly unreliable) model, Oskar, out for a walk and hounded him with the camera. It was a very grey day, but with a lot of light.

Oskar in the cow parsley. It’s much easier to get a shot in focus when the model is sitting still! I’m pleased with the depth from the different layers of cow parsley.

Oskar walking. Trying to rotate the shot to make it feel less wonky meant it ended up quite closely cropped.

Oskar in the hedgerow. I used Ashley’s trick of picking some weeds and holding them in front of the camera.

Read the original post, ‘Photography on manual: 9 –; Oskar in the grey’.

Interview on the Subjective podcast

Sat, 23 May 2015 16:12:38 +0000

At the beginning of the week, I had fun talking to Victor Johnson on Episode 9 of the Subjective podcast, ‘Free As In Liberty.’ I ranted a lot, and we talked about Ind.ie, diversity, my upbringing, and how I got into design and the web.

Subjective is also a great podcast in its infancy, with Victor at the helm, it’s definitely one to watch (or listen!)

Read the original post, ‘Interview on the Subjective podcast’.

Accessibility By Design

Sat, 23 May 2015 15:04:40 +0000

On Thursday morning I gave a talk online for Inclusive Design 24, a free 24-hour event celebrating Global Accessibility Awareness Day (#GAAD.) I wanted to share my talk in a more readable way, so here it is:

In the last two years, I’ve given eleven accessibility-related talks, almost entirely on an introductory level. I want to go into a group of people who work with the web, and convince them to make their sites more accessible, no matter what their role or position. If they’ve not heard of accessibility before, then it’s not usually a hard sell. It’s hopeful, positive and appeals to peoples’ good sides. But if they have heard of accessibility it’s a much harder sell.

As web professionals, we come up with so many reasons to avoid accessibility. It’s not often one solid reason but a hazy combination of the following:

we don’t understand who we’re trying to help
we’re not sure what to do
it’s hard, and there’s too much to think about

I’ve addressed these reasons before, so I won’t cover them here, but it’s important for us to understand why we think this way. We think along a decision-making scale that goes from easy things to impossible things. The reasons I mentioned before aren’t really excuses, but are mapped to different locations on the scale based on how a person perceives the difficulty of accessibility in relation to their job and its associated tasks.

One developer might see learning Angular as a challenge, but another developer might already know Angular and so see it as an easy decision. One content strategist might have worked with lots of video, but another might be more experienced working with text. One designer might create prototypes in HTML and CSS, but another might work exclusively in Photoshop.

When we’re working on a project, we have to balance all the factors and features on our difficulty scale. There are easy wins we can incorporate into projects without thinking about it: this could be the decision to use text to communicate on our sites. You might think: “Using text on a web page? It goes without saying!” But somebody has to write that text, so it’s not really a given. Instead it’s an easy win.

There are impossibilities that we’ll (probably) never try on our projects: this could be the decision to make our site scroll on the Z axis, out of the screen, into some kind of cool 3D hologram between the viewer and their screen. It’d be incredibly difficult to achieve, and probably completely irrelevant to our project, so we’re never going to do it.

And all other decisions are somewhere between text on a web page and Z axis hologram scrolling. We’ll decide an approach or a feature’s worth based on its position on this scale, and based on how many other things are on the scale. Do we have a lot of easy wins on the scale? Well, maybe we can do one difficult thing. Do we have a lot of moderately tricky tasks on the scale? Then maybe one of them has to go, based on our budget or how much time we have.

As people trying to promote accessibility, we need to help pull accessibility up from the “difficult” end of the scale, towards the “easy” end of the scale. How we approach making accessibility easier depends on who we’re trying to encourage. Give a copy writer an alt attribute and they’ll have a more accessible image. Teach a copy writer how write alt attributes, and they’ll have accessible images for a lifetime.

I’ve mostly found developers and content creators fairly easy to convince about accessibility. The most trouble I seem to get is from designers. Which is strange because I’m a designer. So why are designers a sticking point? When our content is fabulous, our markup and code is well-structured and thoughtful, even our interactive behaviour is well planned, but the visual side lets us down. Aesthetics are often even the enemy of accessibility, how can we change that?

Differences between design, decoration and aesthetics

What does a designer do? It’s probably one of the most contentious job titles in the web world. “Designer” tends to be applied to people who work on the visual side. A designer might work on UX (user experience), or experience design, which is usually focused on what you can’t see as much as what you can see. Sometimes a designer is described as a “visual designer” to be extra clear. It’s these kinds of designers I’m going to discuss now. I do this kind of design. I also do other types of design at the same time. But when I’m working in this area of design, I call it “aesthetics.” It’s the stuff you can see.

Aesthetics isn’t just decoration. Decoration does very little. Decoration is the pretty stuff. If I had a pound for every time a client tried to employ me to add some decoration to their ugly site in the hope people would enjoy using it more, I’d have been a wealthy freelancer. But adding pretty bits to a site won’t make it a better experience. It’ll just make it an awful experience with bells on.

That’s why when I usually talk about design, I don’t just talk about the work created by the people with the job title of ‘designer’. Design is a problem-solving practice. Everybody on a team does it. Content strategists do it when they decide on a direction and approach for a product. Developers do it when they choose a framework or a coding language. Designers do it when they pick a layout. Every decision we make that has an impact on the final product is design.

What makes the difference between pretty effective and just pretty?

We use aesthetics to help convey the message in our content. That’s why the study of design is often called ‘Visual Communication.’ Communicating in a visual way aims to create media that:

draws people into the content
assists people in understanding content
encourages people to respond to content

We achieve these goals by applying typography, colour, layout and form in a way that represents the meaning of the content, makes it easy to understand, and makes it easy to interact.

It’s easy to find design that fails in these goals. There’s a lot of stuff out there that looks good at a glance, and at drawing you in, but is impossible to use.

Anti-accessibility aesthetic trends

It’s a deliberately inflammatory title… I had a look at what the gallery websites reckon were the trends of the last four years. A disclaimer comes here as I don’t think anyone using these trends sets out to make their sites inaccessible. The examples following may well be incredibly accessible. These examples are just to show how these trends could compromise usability in favour of looking sexy and fashionable.

2012 was the year of the grid system

With responsive design becoming the rage, grid systems were abound in 2012. Frameworks popped up everywhere. Some frameworks, used responsibly, were great, making responsive layouts and prototyping very easy. However, most frameworks resulted in <div> and <span> soup when developers used them without any customisation or care for accessibility. There wasn’t a meaningful HTML element in sight…

2012 also heralded image carousels, back then still referred to as “sliders.” Designers could now cram extra content on to the page through the wonder of jQuery and other scripts. Unfortunately, the accessibility of the content, and the controls that helped you stop, advance, and rewind the content whizzing before your eyes, was not usually a priority.

2013 was the Year of Parallax

Scrolling with combined static and moving layers was the done thing. Rich content and storytelling made for compelling experiences, but also image-heavy pages that hijacked input conventions.

2013 was also the year flat design started becoming “a thing.” Textures and images lost favour as responsive design meant the elements on our pages needed to be flexible. ‘Flat Design’ with its solid blocks of colour could be created easily with CSS, load quickly, and expand and collapse to fit the viewport size with no loss of quality. This meant it was also the year designers learned how to spell new words as they endlessly argued the merits of flat design vs skeuomorphism.

2014, Year of the Video Background

Video backgrounds became big in 2014. I’m not even sure why, as these videos probably only ran smoothly on the large desktop screens of the designers working at mega corporations with extra speedy fibre-optic internet connections. The rest of us have to put up with slow, choppy and pixelated videos making the layouts distracting, and making it hard to read the text overlaid on top.

Looking around at sites that predict and analyse the trends so far for 2015, there’s not much that’s new out there. A few sites have mentioned simplicity becoming a trend, and as long as that doesn’t just mean hiding stuff, that may be a good thing. It might mean that web design is finally growing up.

Constraints

You can see from the trends how much designers crave constraint. Fashion is a constraint. It’s much easier to come up with a design when you know what you have to do in order to be “cool” or “modern.” Charles Eames said that:

“Design depends largely on constraints.”

As a designer working in furniture, architecture, film, art, graphic and industrial design, Charles Eames understood that constraints affect design no matter the discipline. A designer’s work is to respond to requirements or aims set by others or ourselves.

On the web, constraints come in all different forms, some bigger than others. There are some overarching constraints that affect every project:

Project constraints

Each project comes with its own unique constraints dependent on its owners and their goals. A typical example of a project constraint might be existing brand guidelines. You have a particular logo, colour palette, tone of voice, and typographic system that has to be used on the project, and every other decision has to work around those constraints. You might have an existing content management system that dictates the framework and language you can use.

Medium/technology constraints

When we communicate in print, paper and ink is expensive. Newspapers look the way they do because we had to try to fit lots of text into tight columns on a few sheets of paper. When we communicate on the web, we avoid using massive images on every page because bandwidth is expensive. We compress our images, and try to optimise their appearance on different screen sizes.

Audience constraints

Audience constraints can also be seen as constraints through convention. They’re are certain ways we approach the web based on the activity and expectations of our audience. Why don’t more websites use horizontal scrolling? Because a lot of people don’t know how to scroll horizontally, so they might miss important content. Search boxes are usually in the top right of the page because people started doing it, and then so many people were doing it that we came to expect search boxes on the top right of the page.

Time constraints

Time is one of the most obvious constraints we have when working on a project. Even if we’re working on a constantly-evolving publishing project, there will be sub-projects within it. Such as articles and updates, that will be subject to a time frame.

Budget constraints

Budget and time combined forms the strongest constraints. As these constraints will constrain everything else within a project. Budget will put constraints on time, and time tends to push the limits of budget. This is why budget and time are often used as reasons to avoid accessibility. “We don’t have enough time to make our site accessible,” or “we don’t have enough money to make our site accessible” are two of the most common excuses.

Of course, these excuses aren’t good enough. I probably don’t need to explain the value of making a site accessible. There’s some truth in a little more budget and time being needed for accessibility; whether it’s through training, research, testing, or additional design and development time. But no more than is needed for the consideration of these other core constraints. Nobody would ever say that there wasn’t time or money enough to consider web performance as a constraint. The expense of not considering web performance is far too high. What we need to convey to people is that not considering accessibility is also expensive. It costs a huge amount in lost audience, and a lack of usability for the remaining audience.

I think accessibility belongs on this list as a core constraint that we consider as part of every project:

Project constraints
Medium/technology constraints
Audience constraints
Time constraints
Budget constraints
Accessibility constraints

Arguably, it could be a sub-set of audience constraints, but including it in that way could lead to the misunderstanding that people with accessibility needs are a sub-set of the overall audience, rather than looking at it from a universal design—everybody benefits from accessibility—approach.

Designers understand constraints

When we’re trying to convince designers to work with accessibility as a constraint, it shouldn’t be so difficult. Designers are used to working with much smaller and more specific constraints in the field of aesthetic design. When designers are learning their practice, they learn rules about typography, colour, layout, and form; and only once they understand these constraints, they learn how they can break out of them.

So let’s look at the four pillars of aesthetic design, and the constraints therein:

Aesthetic design and the accessibility constraints

Typography

When we look at web typography from an aesthetic point of view, we have two major areas to consider: the technical and the practical.

Technical typography

The technical part of web typography is considering how a font might look applied straight to text without any interference/fancy CSS typesetting, or any control over it whatsoever. Because this is what we work with on a basic level without JavaScript or the CSS that only works on a few platforms. We also need to consider how it renders cross-browser. Looking at fonts through progressive enhancement and cross-browser consistency is definitely an accessible approach to typography.

Text with a web font applied, but no other styling.

Checking cross-browser rendering using Typekit

Practical typography

It’s slightly less obvious when it comes to the practical part of web typography. In order to choose typefaces that work for our projects, we need to really understand what we want from a typeface, and what we aim to achieve through typography.

We need to remember that typography exists to represent content, and so it’s always worthwhile to read the text before we design it. Our aim is to invite the reader in, and make the text appear easy to read, not an intimidating mass. Typography should also reveal the meaning of the text. Comic Sans isn’t appropriate for a formal restaurant site, and a swirling script typeface isn’t appropriate for the website of a party clown.

Blackoak Std makes for chunky intimidating body text, Heinemann makes for a more inviting paragraph.

When we read through the text, we can understand where it needs special treatment: where does the structure and order need to be made clear? The connections and differences between elements should be shown. The visual relationships between the text and other elements should reflect their real relationship. A heading is more important than a paragraph, and its importance should be revealed through size differences at the very least. All of these factors can be combined together to induce an ideal state for reading.

Clear headings, links, and typographic hierarchy.

The easiest win in accessible typography is just getting the text at a readable size. The most readable typeface is unreadable at a small size, yet so many sizes squeeze tiny text so they can fit more into a layout. Responsive design should have made it more obvious that scrolling is perfectly acceptable. The smaller the x-height (the height of a lowercase x), the bigger your text will need to be in order to be readable.

Readability

Whilst good structure and a strong differentiation between elements will help a reader understand how to read the text, the key to accessible typography is in choosing a readable font.

Uniform texture is more important than the shapes of the individual characters in a typeface. Typography isn’t the same as logo design. When we look at the relationship between the letters, an even texture helps our eyes flow over the text, not getting caught up on unexpected spaces and distracting shapes.

If you squint at the top paragraph, it has an even texture. If you squint at the lower paragraph, it’s a much more blobby, uneven texture.

Since high resolution displays became the designers’ favourite, thin text is all the rage. Apple did it, and now everybody else does too. But so often thin text is just too thin, making the text appear very light against the background, making it harder to read. Heavy text also doesn’t provide enough contrast between the text and the background, as its chunkiness makes it hard to distinguish letterforms. You want to choose the Goldilocks of typeface weights: not too heavy, not too light. A high contrast of crisp letterforms with enough space around and between the shapes will make text much easier to read.

The lines of each letterform also need attention. Serif fonts, in particular, often contrast thick and thin lines within one letter. Your eyes are naturally drawn to the thick lines, and less to the thin, which creates an uneven and distracting texture, making it harder to read.

High-contrast serif

We also want to avoid complex details in the letterforms. The loops in Giddyup Std are cute, but overcrowd body text too much. You can see how our reading would be disrupted and tripped up by a loop or a curl in an unusual place.

Another feature of letterforms that affects the readability of a typeface is the counters. These are the spaces inside the letters. Sometimes they’re open, like Cs, and sometimes they’re closed, like Os. We need a clear distinction between the open and closed counters, so you can easily tell them apart. Otherwise a phrase like Rococo Cocoon could easily be misread as Rooooo Ooooon.

Some typefaces are specifically designed to be easier for people with cognitive difficulties. Heinemann is a beautiful typeface designed in-house at Heinemann educational publishing for young readers. The ascenders and descenders (the parts of the letters that ascend above the lowercase letters, and the parts that descend below the lowercase letters) are emphasised to make it easier for readers to distinguish between letters. The letterforms such as lowercase a and g are drawn in the same shape as we learn to write by hand, to make them more recognisable.

While many designers look down on Comic Sans, it shares those same early-learner letterforms as Heinemann, and is often favoured by teachers in classrooms as the letterforms are the same as those the children are using when they’re learning to write.

Read Regular, Dyslexie and Open Dyslexic are both fonts designed with dyslexic readers in mind, but with very different approaches. Read Regular is more similar to Heinemann in that it takes a sans serif style, and simple letterforms to assist in readability. However Dyslexie and Open Dyslexic take a very different approach, with noticeably heavier sections around the baseline to prevent readers from accidentally reading the letters upside down (a common issue in dyslexia.) The counters have been opened up, and similar looking letters (such as n and m, or vwy), have been adjusted in shape and height so they look different, and are easier to tell apart.

Colour

How we interact with colour

When we’re designing for the web, we tend interact with colour via colour pickers.

Colour wheel (left) is a more classic layout, with blended hues in a ring. The colour spectrum on the right is more recognisable as it takes the blends you see in the colour wheel, and adds white and black to give you varying shades. The bars in the middle are usually sliders, and allow you to slide between different hues, saturation and brightness for your chosen colour.

The benefit of using hues visualised on a colour wheel is that you’re more likely to find colours that work well in a palette. You can pick from side-by-side colours for an analogous blend, or from colours opposite each other on the wheel for a more striking colour contrast.

Colour picking from opposite sides of the colour wheel

But the accessibility of colour is more than just picking two different colours. In order to make our foreground text readable against our background colour, we need contrast.

When we’re trying to find a good contrast, the colour wheel isn’t much help. The key is the sliders for brightness and saturation. A high contrast is caused by a greater difference the foreground and background brightness, and the foreground and background saturation.

Varying the brightness for colour contrast

For example, a blue background with blue text of a similar lightness will be hard to read, whereas a lighter blue against a darker blue is much easier, making a more accessible foreground-background contrast.

Varying the saturation for colour contrast

The same applies to saturation. Deeply saturated yellow text will have a low contrast against a similarly deeply saturated yellow. However, using a desaturated yellow in the background makes for a more accessible foreground-background contrast.

Using the different colour pairs with the same brightness and saturation as before

The same rules apply even when you’re using different colours for the foreground and background.

Very high contrast foreground and background combinations can also suffer from accessibility problems. Issues with high contrast aren’t talked about as often, but can hurt your eyes, and be particularly problematic for people with dyslexia.

To avoid screaming high contrast, I would recommend softening the difference between the foreground and background values slightly, bringing one value slightly closer to the other. By tweaking these contrasts slightly, they’re much easier on the eyes.

Softening the high contrast values

Accessibility and Branding

If we considered accessibility at a brand level, what would that be like?

What if we designed our logos and associated colour palettes with an accessible colour contrast in mind? I’ve been doing this for years, not really thinking much of it. As a designer who usually created a logo and would then go on to design and develop a site around it, it just made sense to me.

Some of my old logo designs

If we make the colours accessible, then the colours we use on the site can be consistently on-brand later on; we won’t suddenly need to use a darker colour for our body text because our brand’s colour palette produces unreadable results.

Some early designs for logos, with accessible, web-compatible typography

What if we choose our logo and brand typefaces with readability and web typography in mind, not just which typeface has three letters that look good for our logo? Maybe if our logo is a swirling script face, we should consider a complementary body text early on, when we’re designing the rest of our brand. This could prevent us getting caught out when our site designer or developer has to pick a completely off-brand typeface because our brand typography is so hard to read as body text.

A beautiful script logo and beautiful web typography, but the brand doesn’t quite match up.

The earlier we, as designers, learn to consider accessibility, the less likely we’ll have our designs diluted and confused further down the line.

Strategies for involving accessibility from the beginning of the design process

So I have a few simple strategies for involving accessibility from the beginning of the design process…

Understanding accessibility

Just understanding why it’s worth making our sites accessible is a big first step. Only the most foolish people would learn a little about accessibility and not hold it in their heads for every future project. I don’t mean having to become an expert overnight, but just knowing little tips and tricks to make sites better.

Constraints

Considering accessibility as a constraint is a complementary to the other strategies. It’s a more specific way of thinking, as you’re always referring back to accessibility.

Sitting in on testing and focus groups

When we hear and witness the experiences of others, it’s much easier to:

a) understand how other people don’t interact with the web in the same way we do

b) understand the multitude of ways people CAN interact with the web and how we might better serve their needs

Being involved in human research

Being involved in human research is very similar to the previous point, but is more about being ahead of the work, rather than behind it. We need to be researching and understanding human interaction before we start a single task.

If we’re only discovering issues with accessibility in a later testing phase, we’re already behind the curve.

In the talk I gave this morning, I then went on to talk about the 3 Rs of Ethical Design. But rather than explain it to you here, I think you should watch Aral cover it in his talk Beyond The Camera Panopticon: You Are The Product (the part on Ethical Design starts at around the 53 minute mark.)

Make accessibility more accessible

If we want to make accessibility more accessible to different roles in our organisations, we need to learn how to better incorporate it into our existing processes. Acknowledging accessibility as a constraint from the outset ensures we have it as a point of reference at every step in the process. This also deliberately avoids looking at accessibility as some kind of checklist. Designers need to understand that accessibility can no more be ticked off a list than user experience can. These aren’t checklist tasks, but are our goals, our focuses, and our approaches.

So that was my talk. Some of these thoughts are more developed than others. If you have any comments or want to discuss these things further, I’d love to hear what you think!

3 comments

Lisa LaMagna
at 23:59pm

Laura, this is the second time I have randomly found one of your articles, gained a lot of insight, and realized “oh, it’s Laura Kalbag again.” Thank you.

Read the original post, ‘Accessibility By Design’.

Photography on manual: 8 –; Traffic and Jess

Mon, 18 May 2015 08:39:23 +0000

Our most recent exercise was to take a long exposure shot.

Seafront traffic. I wandered around for a while, trying to find a good angle from a height, but the traffic was too quiet! The main sea front road was much better, though it was pretty windy last night, so it’s slightly blurrier that I’d like on the static objects.

Before that, Ashley gave us a great tutorial on using natural light.

Jess. After reading Ashley’s email on light, I stalked my family around windows. I lightened Jess’s face up a bit, and removed the distracting toasted on the window sill. It’s a bit of an odd crop, but I didn’t want any of the junk in the background.

Read the original post, ‘Photography on manual: 8 –; Traffic and Jess’.

Photography on manual: 7 –; Small Cat

Wed, 13 May 2015 16:19:03 +0000

My parents’ cat, called Milly. Who I call “Small Cat” because she’s so small.

Small Cat. I edited out the wonky lamp in the background because it was distracting. I also muted the grass and plants so her scary green eyes would be more noticeable.

Read the original post, ‘Photography on manual: 7 –; Small Cat’.

Photography on manual: 6 –; Walk

Mon, 11 May 2015 16:33:49 +0000

When I started doing this course, I knew I’d probably end up with a lot of dog walking photos. Oskar and I are out every day, and so there’s lots of photo opportunities.

After exploring the self-timer in my last photo, I thought I’d try it again. Dog photos are obviously great, but I wanted something to show how we exist as a pair. Also outdoors.

East Brighton rest. I knocked the grass back a bit, as it was very bright, and I brought out the blue in the sky with curves.

Read the original post, ‘Photography on manual: 6 –; Walk’.

Photography on manual: 5 –; Levitation

Sat, 09 May 2015 17:01:56 +0000

Another photo post so soon? Yes! It’s the weekend, and Ashley gave us a really cool new exercise to try levitation, so I thought I had to try it.

Levitation. This took SO MANY tries. The light changed while I was setting up, so it was a bit tricky to edit the two originals together. I tried to crop out the most distracting elements of the shot, and desaturate the rest.

Read the original post, ‘Photography on manual: 5 –; Levitation’.

Photography on manual: 4 –; Post-processing

Sat, 09 May 2015 07:53:33 +0000

On my last day in Berlin, I took a lot more photos. Last night I started post-processing them, following Ashley’s email and video tutorials. Post-processing is an area where I have more experience, I’ve done a lot of Photoshopping in the past, but now I’m trying to achieve new effects using Lightroom, which is a very different animal!

Me in a hotel room, original. Travelling in Berlin, and being a bit slow to set up shots, I found my only (mostly) willing model was me. I found it really hard to get the focus on my face, so my hands are slightly crisper.

In post-processing, I cropped out the most distracting parts of the shot, and straightened the bottom line of the mirror slightly. I adjusted the white balance so the lighting feels more natural. Using Ashley’s eye pop tutorial, I tweaked my eyes, but because my irises are almost black, I looked a bit scary if I lightened them!

Reichpietschufer, original. It was a bright but overcast day, so the original was high contrast but a bit dull.

Reichpietschufer. I wanted to soften it a little in post-processing, so it has a bit more of a retro feel. I also straightened it so the sign is along a properly horizontal line.

Read the original post, ‘Photography on manual: 4 –; Post-processing’.

Photography on manual: 3 –; Day One at re:publica

Tue, 05 May 2015 14:58:33 +0000

This week, the Ind.ie team are at re:publica in Berlin, so I’m getting lots of opportunities to take photos that aren’t just of the dog!

re:publica in Berlin

Projection. A very abstract photo.

STG-1 (Stage 1) at re:publica. A fairly dark location, lit very strongly at one end. I managed to get a blurry walking man against it all.

Close up Aral. Chopped the top of his head off, and he’s a bit coloured by the red light. I’m pleased I managed to get his face in focus, though it’s stronger around his mouth, whereas I guess the eyes is where we should be aiming for sharpness?

Between heads. It’s not the most interesting shot, but I was pleased to get an in-focus photo between the heads in front of me.

Read the original post, ‘Photography on manual: 3 –; Day One at re:publica’.

Photography on manual: 2 –; Splash

Sun, 03 May 2015 19:37:04 +0000

The first exercise we’ve been given is to capture a splash in a cup…

First splash. My kitchen is in a basement, so it’s a little bit dark. Even with the ISO jacked all the way up, this was the lightest I could get with the fastest possible shutter speed.

Second splash. So I went outside! Unfortunately my burst caught the splash a bit late.

Best splash. Finally got the hang of it. Though I wonder if the plant pot on the left spoils the composition.

Best splash, cropped. If I crop the pot out, but keep it landscape, I cut too much of the splash out. I’m not sure if square works either.

Read the original post, ‘Photography on manual: 2 –; Splash’.

Photography on manual: 1

Sat, 02 May 2015 12:27:28 +0000

I’ve had a DSLR for nearly a year now. And I still only ever use it on the Auto modes. I studied photography (with film cameras) during my Art Foundation course ~10 years ago, but I think any decent photos were mostly luck, and I can’t remember much of it. So when Ashley set up her Girl With A Camera Course, “For the beginner photographer who wants to pick up their camera more,” I was instantly sold!

Over the next month, I’m going to try to blog some of my photos taken during Ashley’s exercises (and hopefully lots more that I’ve taken for fun!) Maybe I’ll be able to ditch the Auto modes by the end of it. I’ve not edited any of these photos yet, as tempting as it is, as I want to wait til we get to that bit of the course!

The first task was to switch my camera to manual…

First photo on manual. Fallen at the first hurdle, I turned my settings on to manual and fiddled with the shutter speed and aperture but couldn’t seem to get any exposure at all.

Narrow depth of field. Following the examples in Ashley’s email, I tried to get a narrow depth of field on Oskar. The shadow in the room made it a bit awkward, as your eyes are drawn to his leg rather than his head, but at least the background is blurry!

Narrow aperture. To mimic the landscape shot, I was a bit lazy and looked out of our back window. The built-up buildings round here are pretty maze-like.

Shutter speed 1. These next few shots were playing with the shutter speed to see what would be blurry, and what would be sharp. I couldn’t seem to get any of them very sharp!

Shutter speed 2. The sharpest of the Osky shots.

Shutter speed 3. The blurriest of the Osky shots.

I’m also going to try to take more than just dog photos!

Read the original post, ‘Photography on manual: 1’.

What do web experts think of BBC Taster?

Tue, 14 Apr 2015 13:55:31 +0000

In the spirit of catching up on slightly older news, in January I was part of a panel commenting on BBC Taster on Creative Bloq.

Looking through, I liked the content and the concept interested me, but there were implications for accessibility that concerned me. Overall, I came across as a lot more cynical that the other designers and developers commenting on BBC Taster, but I think it’s important that we look at the bigger picture before we get caught up in the shiny.

“I think anything that explores new ways to present content, and new types of content, has the potential to be really cool. But why so much Flash? It seems contradictory to pair innovative content with an outdated technology. It may well defeat the point as visitors aren’t likely to be able to consume content on their preferred browsers and devices, and so will come at this new content from a biased position of discomfort (or just plain won’t be able to access it in the first place).

“I’m particularly wary of anything that says something won’t be accessible because it’s experimental (see [Terms of Use](http://www.bbc.co.uk/taster/about" target="_blank)). Surely they’re just missing out on the opinions of anyone with accessibility needs?”

Read the original post, ‘What do web experts think of BBC Taster?’.

Europe fights back

Mon, 13 Apr 2015 09:18:46 +0000

Last Friday’s Ind.ie roundup had more on corporate surveillance, a couple of great videos with Edward Snowden, and Europe fighting back against Google and Facebook.

It took me a long time to pull it all together. I’m going to have to start writing my Friday roundups on Thursday! If you know of any interesting or relevant links, please let me know :)

Read the original post, ‘Europe fights back’.

130 words on getting creative in Offscreen Magazine

Thu, 09 Apr 2015 13:03:00 +0000

I’m slightly behind on my posts, but I wanted to share my contribution in the latest edition of Offscreen Magazine. Offscreen is a beautiful, printed, independent magazine about the “People behind Bits and Pixels.” I contributed 130 words to Issue 10 on getting into a creative mindset.

You can buy a copy, or get a subscription to Offscreen by visiting their website.

Read the original post, ‘130 words on getting creative in Offscreen Magazine’.

Speaking at 418:conf web meetup

Tue, 07 Apr 2015 09:26:27 +0000

I’m speaking at the very first 418:conf web meetup on 16th June 2015 in Nutfield (near Redhill) in Surrey. It’s exciting for me because it’s near where I used to live, and it’s a cool new meetup with a lot of potential.

If you’re local, you should get your ticket now. They’re free!

Read the original post, ‘Speaking at 418:conf web meetup’.

My Friday Roundup for Ind.ie

Fri, 03 Apr 2015 15:46:14 +0000

Every Friday I write a roundup of great links we at Ind.ie have seen over the last week. I’m not going to lie, it’s a lot of fun. I finally have an excuse to sit and properly read articles that are related to independence, privacy, human rights, democracy, diversity and more. I feel more well-informed as a result!

The roundups started out as just lists of links, but have now evolved into a little article each week where I collect the best reads together under common themes and occasionally a bit of analysis. Read today’s Friday Roundup.

Read the original post, ‘My Friday Roundup for Ind.ie’.

The Illusion Of Free on A List Apart

Fri, 03 Apr 2015 14:31:57 +0000

Last week, my column on The Illusion Of Free was published on A List Apart. I took a lot of time writing it, as I think it’s an incredibly important issue, and it reflects my thinking around Ind.ie. As ever, a massive thank you to the wonderful editor Rose Weisburd who helped me round things out, made me sound smarter and encouraged me in the first place.

Read the original post, ‘The Illusion Of Free on A List Apart’.

A realign for 2015

Thu, 02 Apr 2015 17:24:04 +0000

Almost a year after last year’s realign, I’ve made some more tweaks to my site. There were a few reasons behind it:

I’m not freelance anymore, so I don’t need the focus on my portfolio
As I’m now working with Ind.ie, I needed to update my about page
The navigation needed some accessibility work
The colours were beginning to grate on me

Less portfolio, more…

My blog has been fairly quiet, but actually that’s because I’ve been writing a lot elsewhere. I write a weekly roundup on the Ind.ie site every week, and a regular column on A List Apart. I want to keep up with linking back to this new content, and keep writing more blog posts specifically on this site. As the portfolio isn’t needed so much, as I’m not looking for clients, it doesn’t need as much focus, so I’ve moved latest posts to a more prominent position on the homepage. However, I do want to keep up with the project case studies. They’re fun to share, and help me remember what I’ve done. I’ve got a big backlog going back at least a year, but I will get those projects up!

Old homepage with big portfolio, loud colours, and the ill-fitting Ind.ie banner (now the Ind.ie logo is more subtly in the header)

New homepage with blog posts, smaller portfolio and different colour mix

Less about me…

The site previously had loads of “about” content. There was a ordinary about page, then my skills, who I work with, what I do, and separate pages detailing my main areas of work. These are all now streamlined and redirected into a properly up-to-date about page.

Recently I’ve been getting my head around WAI-ARIA. It’s a very valuable way to help make more modern interactive elements of your site accessible to assistive devices. This was massively helped by the wonder Heydon Pickering, who sent me this tweet:

[@laurakalbag](https://twitter.com/laurakalbag) Hey Laura. Know you’re big on [#a11y](https://twitter.com/hashtag/a11y?src=hash), so thought you may want to try [http://t.co/iiYoaLRYbp](http://t.co/iiYoaLRYbp) to fix your site’s dropdown.
— Hayden StandardAware (@heydonworks) November 14, 2014

I’m just ashamed that it took me so long to get around to it. Now, thanks to Heydon’s fantastic rundown of Practical Aria Examples, I’m using aria-controls, aria-hidden, and aria-expanded to great effect.

The dropdown navigation menu which shows on narrower viewports is now more accessible. You can view the page source to see more.

The colours

I love my brightly coloured site, and the custom colours for different pages, posts and projects. I’ve used Advanced Custom Fields to set up colour pickers for the WordPress page and post editors, so I just have to choose a colour every time I publish. The colours are pulled in via PHP, on top of my general styles, into the CSS in the <head> of each page. My pickers look something like this:

The colour picker in the WordPress post editor

In the previous design of the site, I used brightly coloured backgrounds with white text. However, this was getting a little bit dicey with readability. While I made sure the colour combinations had a contrast that was technically accessible, I’d often go back to a post a few days later and shudder at my appalling colour choices. I needed to ease off the colour and go a little bit cleaner. However, I had picked a colour palette for every page, post and project on my site ever when I’d redesigned in 2012. It’d be a shame to waste all that effort. I decided to just switch some of the colour palette choices around, so the background was a simpler easy-on-the-eyes grey, and the text would take on the colour. Suddenly the site felt a lot less oppressive!

I learned a lesson in semantic naming that day. Unfortunately, if you rename a field in Advanced Custom Fields, it wipes out the entries in the database for that field, so I’m stuck with my original palette names such as “header colour” for the colour of the text. Hopefully the colours match up fairly well, as the contrast hasn’t changed much, but please let me know if you find a page that’s hard to read.

Other tweaks

There are lots of other little fixes and changes I’ve made after having them on my list for ages. Fixing block quote styles, footer layout on certain viewport widths, mismatch of font sizes before and after web font loading, dodgy search box layout and ensuring I’m not loading the web font loader from Google anymore.

SSL hoorah!

And the final thing is that this site now works at https://laurakalbag.wpengine.com. That’s thanks to WP Engine for enabling SSL as an option on their personal accounts, making it as easy as me pressing a button and paying a little bit of money.

Hopefully this site is now a little easier to read, and way more up-to-date. I like to think it’s a little bit more grown-up. Any further suggestions always gratefully received!

Read the original post, ‘A realign for 2015’.

Speaking at the Sherpa Summit

Thu, 02 Apr 2015 10:57:51 +0000

Last October, Web Standards Sherpa published my mini series on Getting Started With Sass. It was a whole new experience as I’d never written a technical tutorial as in-depth as this, let alone doing so with a proper editor and technical editor. Web Standards Sherpa is like that; all about the quality. So it was sad to hear about Sherpa closing its doors this year. However, in order to keep the site and all its wonderful resources online forever, Web Standards Sherpa is hosting an online conference on the 23rd April, and I’m speaking.

Sherpa Summit

It’s an online event, so you can attend from wherever you have an internet connection. And if you can’t make the sessions, a ticket will also buy you the videos afterwards. I’m speaking first (lucky for me as I’m not in the same timezone!) and then there’s talks from fantastic speakers covering a wide range of web-related topics. There’s also two roundtable sessions where you can ask questions and interact with the speakers, all from the comfort of your computer.

Individual tickets are just $99, but you can get a whole 20% off if you use the code LAURA.

Read the original post, ‘Speaking at the Sherpa Summit’.

Digital Arts: Web fonts: what designers need to know in 2015

Fri, 20 Feb 2015 16:34:52 +0000

Another fab and in-depth article from Craig Grannell on Digital Arts, this time on Web fonts: what designers need to know in 2015. Craig asked a load of smart designers (and me) about web fonts, web font services, and how to choose web fonts.

My full answers to Craig’s original questions are below:

What do you consider the current best options for working with web fonts?

I’m forever changing my mind, but I tend to prefer to host fonts on the site itself. That way you usually have more control over the font itself, and you’re not beholden to a font service that could slow your site down, or even go down completely. I also like paying a one-off fee for fonts where possible, even if it’s a bit more expensive. A one-off fee is a more predictable cost than paying for a subscription for the foreseeable future.

For newcomers, what key differences are there in using a web font service of hosting fonts themselves?

When a web font service hosts the fonts themselves, it usually results in a great selection of typefaces for a very reasonable price. Most font services also handle a lot of the trickier technical stuff, so you can easily pick out the weights and subset you want, and you’re good to go.

If you use a particular service, what differentiates it for you?

I always pick the service based on the typeface I want to use. When I’m designing the typography, I’ll hunt down a few typefaces to choose from, then shop around a few services to see which gives me the most freedom and control at the most reasonable price.

The only service I always avoid is Google Web Fonts. When you install a script from a third party on your site, including web fonts, you need to trust that third party to deliver its goods, and only track the page data in a way that’s appropriate to their services. Google makes money from tracking data, and is providing the font services for free. I wouldn’t be happy exchanging the data of my visitors in return for free fonts. It’s worth reading Yves Peters’ post on about Google Web Fonts.

What changes in tech are likely during the first half of 2015, and how do you think this will benefit designers?

Whether its net neutrality, the snoopers charter, or rights to encryption, equal access and privacy keep coming up as primary concerns in tech. These important issues with rights and ethics on the web give designers great opportunities to create work that can make a difference to the future of our platform. With new problems, designers get the chance to work with new constraints and user experience challenges that could stand the test of time, rather than just making more commercial brochureware for a brand that’ll disappear in a couple of years.

Read the original post, ‘Digital Arts: Web fonts: what designers need to know in 2015’.

For Sale: Mid 2013 MacBook Air

Thu, 12 Feb 2015 16:30:33 +0000

In October, I found myself doing a lot more in Terminal than I’d done before, and I needed a computer with a faster processor, so I upgraded to a MacBook Pro. This means that my pimped-out Mid 2013 MacBook Air that I bought in December 2013 is now for sale. It’s in nearly-new condition, as it’s been kept in a shell case for almost all its (short) life. I used it for around 8 months. These are the specs:

13.3" Mid 2013 MacBook Air
Processor 1.7GHz Intel Dual-Core Core i7
Memory 8GB 1600MHz LPDDR3 SDRAM
Hard Drive 512GB Flash Storage
Fresh install of OS X Mavericks (easily upgraded to Yosemite)

It’s exactly the same specs as a fully-specced new MacBook Air, so you’ll be getting yourself a bargain. I paid £1,579 for it, and you can get it from Apple for £1,499. I’m looking for £1,100, and I’ll include free UPS delivery inside the UK.

If you’re interested, send me an email to me@laurakalbag.com, or tweet me @laurakalbag.

Photos below:

Read the original post, ‘For Sale: Mid 2013 MacBook Air’.

Do your skip links work with keyboard navigation?

Wed, 14 Jan 2015 14:59:26 +0000

Recently I’ve been doing a lot of research in web accessibility, and it’s lead me to testing web pages more thoroughly. I’ve been testing keyboard-only navigation a lot. Keyboard-only input is how most screen reader users interact with the web, as well as many alternative input and mouse-less users.

This afternoon I was testing a new feature I want to add to Ind.ie’s accessible video player, and started moving down our style guide (work in progress!) page, tabbing through the links. Our style guide is really long, so I’ve added skip links at the top of the page, allowing you to jump to the relevant section without having to scroll such a long way. Skip links are very common as an accessibility feature to skip past lengthy navigation to get straight to the page content. They’ve also become a common form of navigation used on one-page sites that have a lot of content on one page.

The code usually looks something like:

    ...
&lt;div id="#main-content"&gt;
    ...
&lt;/div&gt;```

## What’s the problem?

Some browsers don’t support skip links in this way. After some very quick tests, I found both Safari and Chrome don’t change the keyboard focus to the visual focus area when a user follows a skip link. This means you might be looking at the section on branding, but the keyboard focus is still on the navigation at the top of the page. If you tab to the next item, your visual focus will scroll right back to the top of the page. A few web searches later and I find this isn’t a new problem at all.

The difference between visual and actual focus could be an irritation to any sighted users, but for screen readers users, it makes skip links utterly useless. They’re not actually skipping at all.

## How can we fix this?

Having a read through this [Webkit bug report](https://bugs.webkit.org/show_bug.cgi?id=17450), there’s seems to be cross-platform issues and implications. There’s no web standard for skip links, so there’s no guidance for browsers to follow.

But after some searching, I found [a JavaScript snippet](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/) that seems to solve the problem. Relying on JavaScript is less than ideal, but I think right now it’s the best we can do.

Without consistent behaviour for focus on skip links, they’re little value to the wider audience on the web.

Other sites posting on this issue:

* [WebAIM keyboard accessibility](http://webaim.org/techniques/keyboard/) (October, 2013)
* [Fixing “Skip to content” links](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/) (January, 2013)
* [Skip links and other in page links in WebKit browsers](http://www.456bereastreet.com/archive/201203/skip_links_and_other_in_page_links_in_webkit_browsers/) (March, 2012)
* [Keyboard Navigation in Mac Browsers](http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/) (useful for knowing how to test)

## 4 comments

<ol class="commentlist">
	<li class="comment even thread-even depth-1" id="li-comment-137909">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/47d083708ad8d06202d50d5e567f3eaf?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/47d083708ad8d06202d50d5e567f3eaf?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn"><a href='http://github.com/svinkle' rel='external nofollow' class='url'>@svinkle</a></cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-137909"><time datetime="2015-01-14T15:09:03+00:00" pubdate class="published">
		 at <span class="hours">15:09pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		<p>This is how I’ve been approaching this:

```&lt;a href=&quot;#main&quot; class=&quot;visuallyhidden focusable&quot;&gt;Skip to content&lt;/a&gt;```

CSS classes there are from HTML5 Boilerplate CSS.

I then have this for my main element:

`&lt;main id=&quot;main&quot; tabindex=&quot;-1&quot;&gt; ... &lt;/main&gt;`

Using tabindex=”-1" like this allows the main element to programmatically receive focus. When the user hits tab again, it will move focus away from main to the next focusable element.
	</div>
</li>
	<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-137910">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/2e7291b36e6344f7c6d2cb1b56aff1c9?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/2e7291b36e6344f7c6d2cb1b56aff1c9?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn"><a href='http://www.pixeldiva.co.uk' rel='external nofollow' class='url'>pixeldiva</a></cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-137910"><time datetime="2015-01-14T15:09:53+00:00" pubdate class="published">
		 at <span class="hours">15:09pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		Another minor thing, to make things better (once the above problem is fixed)… having the link text be Skip to Main Content gives a screen reader a bit more context so the pronunciation will be correct as *Con*tent, rather than Con*tent*.
	</div>
</li>
	<li class="comment even thread-even depth-1" id="li-comment-137914">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/5375b1b830a01f1b6a894eea985ce7b8?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/5375b1b830a01f1b6a894eea985ce7b8?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn">goetsu</cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-137914"><time datetime="2015-01-14T16:11:58+00:00" pubdate class="published">
		 at <span class="hours">16:11pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		<p>Yes after 8 years of waiting for this bug to be fixed after I create it now it can work but the target of you links must be focusable (a link, a button, a form element or anything with a tabindex).

So, in your case the most easy thing I presume is to add a tabindex=”-1" to you hx</p>	</div>
</li>
</ol>

Read the original post, ‘Do your skip links work with keyboard navigation?’.

My 2014

Thu, 01 Jan 2015 14:21:02 +0000

Well, things didn’t slow down in 2014! So much so that I didn’t manage to write this post yesterday. In 2014 I spoke at 8 events in 4 countries, and worked with 11 clients on 15 projects before starting work full time with Ind.ie in August.

I wrote a lot more, with regular slots on A List Apart and The Pastry Box, and a series on Getting Started With Sass on Web Standards Sherpa. And I had more fun on podcasts including co-hosting Unfinished Business with Ashley Baxter in August.

Again, I’ve summarised my year in photos:

Saw Skindred twice. What a fantastic live band.

Moved around the corner to a lovely little house.

Ind.ie began with Jo joining as Director of Operations (I wasn’t full time yet…)

Another trip to North Cyprus where we managed to work the WHOLE TIME.

In June, I joined the Ind.ie team part time and we got the full team working from the office at our house.

The Ind.ie team worked from London for four days in June.

We ran the Indie Tech Summit in July, meeting brilliant people from around the world.

Went on a last-minute Mediterranean cruise, where we got drenched up Mount Vesuvius.

Started doing Pilates with Brighton Pilates at Yellowave. The best beach view in town!

Gave my first talk and workshop representing Ind.ie at border:none in Nuremberg.

My little sister Annie got married to the lovely Sarah.

Went to the Big Brother Awards in Amsterdam with Aral, where Edward Snowden gave a fantastic talk.

Following goals for 2014

1. Collaborate more.

Joining Ind.ie meant I went from working remotely, to suddenly working with a team of people in our house every day. It definitely resulted in a lot more collaboration!

2. Be more selective, say no more often.

Early on in the year, I decided to only speak at an event every other month. I mostly succeeded in this, and it meant I was less stressed, and also enjoyed the events I spoke at a lot more.

3. Challenge myself physically in a new way.

I sort-of managed this one. I tried ballet, but it’s not for me anymore. I tried Crossfit, but the nearest location is slightly too far away to attend frequently. Doing much more challenging courses of Pilates has had a positive impact on my year.

Goals for 2015

I have a big writing project to finish, which needs hard work and lot of confidence, but I also want to share more design and development writing on my blog and the Ind.ie blog.

Write more.
Read more.
Make the most of Ind.ie.

My life has changed a lot in the last year as I’ve started working with Ind.ie. It’s really important to me that we make a difference, and create alternatives to spyware technologies. I’ve got an amazing opportunity to work with the rest of the team to do something about the current system. I need to make sure I make the most of it, work hard, don’t let my insecurities get the better of me, and stand up for what I believe in.

2 comments

Damian Potrykus
at 17:32pm

I wish you the achievement of the goals for the year 2015. I’ve got one question about your work. When your effectiveness is better, when you work as a freelance? or as you work in a team?
Sorry if I made some mistakes in the sentences above. :>
- laurakalbag
  at 10:59am
  
  @Damian thanks :)
  
  I find there’s benefits in both working freelance and in a team. There’s less disruption during the working day if you’re working alone. But when you work in a team you can make more progress coming up with ideas, learning from each other, and bouncing thoughts and problems around.

Read the original post, ‘My 2014’.

Unfinished Business 97: Made in Scotland from girders

Mon, 01 Dec 2014 14:14:51 +0000

This week’s episode of Unfinished Business was great fun to record. Both Ashley Baxter and I were Andy’s guests, and we talked about unhealthy food, being a podcast guest, Christmas decorations, and everything that’s in store for the three of us over the next year.

Read the original post, ‘Unfinished Business 97: Made in Scotland from girders’.

What I’m doing now and why

Fri, 28 Nov 2014 13:09:28 +0000

I’d been a freelance web designer/developer full-time, working for myself, for six years. I love working with clients, and working with small businesses is a very sustainable business model. You can make a big difference to a small business. You can get paid fairly well. And you can forge long-term relationships with people whose businesses you really care about. I always said I’d never give it up, unless it was for something I really believed in.

And that’s what happened. In June, I wrote about [becoming part of Indie Phone](/indie-phone/ "Becoming part of Indie Phone") for 50% of my time. Then some time in August I became full time. 50/50 sounds like a great idea in theory, but in reality it meant I wasn’t able to concentrate fully on client work or [Ind.ie](https://ind.ie). The work I’m doing would be the jobs of a few people in a larger organisation. I cover all the branding, web design and front-end development, run the blog and email newsletters. I also work with the rest of the team on the design (which includes strategy) for everything under the Ind.ie bracket. Everyone on the team is working cross-discipline and covering a lot of different jobs. It leaves little room for any other work.

Indie Phone became Ind.ie

At some point over those months, as we started to brainstorm our crowdfunding campaign. We realised that running a campaign for an all-new phone with new hardware, software and “cloud” services, would be a mammoth task. We’d have to look at raising at least $1 million, and would need people to trust us to deliver a phone after two whole years. The phone is really the summit of the Ind.ie mountain. The phone will only be of value if it’s part of a larger foundation platform that equips people to own their own data. It needs to work with existing platforms, such as social networks and computer operating systems. Otherwise we’d be expecting people to switch to an all-new system, cutting themselves off from the existing technology they use with their friends and family. That’s just not practical. We quickly realised that Ind.ie phone had to be part of an ecosystem that allows people to share their data with each other and nobody else (using Pulse and Heartbeat as part of the Indienet.) We also need part of that ecosystem to help people find each other in the first place (Waystone.) That ecosystem is most of the mountain. And then the phone will be the ideal way to use the ecosystem.

Flexibility and change

The change from Indie Phone to Ind.ie emphasised how flexible Ind.ie needs to be as a company and a team. We can’t be scared to change our minds and iterate on our ideas and goals. As a freelancer, I learned how I needed to continually learn new development techniques, and adapt to understand the modern web. The same applies to Ind.ie, but on a bigger scale. And I’d be lying if I said it isn’t a bit terrifying.

Always learning

As with freelancing, staying on top of new technologies and techniques are important, but even more so when you’re a small team under a lot of scrutiny. When you ask for money, people want to know that you’re trustworthy. We have to pay attention to all the little details, and do everything right. Of course we make mistakes. I’ve screwed up bits of the website and a couple of email newsletters, and probably a whole lot more… But we have to own our mistakes, admit the blame, don’t take it personally, and fix it as quickly as possible. The upside of the fast-moving pace of the business is that I get to learn loads of cool and challenging things. As my job requires me to understand the entirety of my platform, I’m looking into areas I’ve not needed to investigate before. I’m facing design challenges for completely different types of content and interactions. In the last week alone, I’ve written the hardest JavaScript I’ve ever tried, learned how to create and implement Git submodules, and learned how to set up Grunt. It’s pretty thrilling.

It also means doing things that feel new and pit-of-your-stomach daunting. Like when I gave my first talk and workshop around Ind.ie. And facing some of the challenging feedback we’ve got through social networks.

Handling feedback

Whilst the work is physically and mentally exhausting, the hardest part of working for Ind.ie is the feedback. As a designer, I’m a firm believer in critique and constructive feedback. I’m a leave-your-ego-at-the-door designer (at least I try my best.) But sometimes the feedback isn’t so constructive, and sometimes the comments are a bit personal. Occasionally they’re from people you considered friends and it’s very very difficult to not feel upset, let down, and emotionally drained. It takes time to process and get past hurtful comments, but it’s unavoidable when you want to get past the junk to the criticism that’ll help you do things better.

Why is it worth it?

But to me, Ind.ie is worth it. The technology industry is broken in so many ways (diversity, accessibility, first world priorities…) Unethical business is at the heart of most of the problems. A lot of designers and developers talk about the difficulty of running a business because everyone expects something for free. Free mobile apps and free web services have given consumers the impression that good stuff needn’t cost anything. Very few people realise that they’re not getting these apps and services for free, but in exchange for the data provided when they upload photos, write to each other, play games, track their activities. (What the companies do with this data varies, but it’s very rarely in the best interests of the user.) We’re paying with our privacy.

I’m frightened of how this could escalate. I’m frightened of how companies operate today. As far as I know, I’m a normal, law-abiding citizen, and I’m not doing anything wrong. But that doesn’t matter. All the data I’ve shared combined could tell strangers things I don’t know about myself. It could tell strangers things about my friends and family too. Privacy is a human right, and it shouldn’t be traded for consumer goods.

I don’t want to make a difference for the sake of being good. I want to work on Ind.ie because I don’t see enough people putting time and effort into fighting these infringements on our human rights. If I can’t dedicate my time and energy into creating alternatives, then how important can it be?

Please support us

Ind.ie is hard work and costs money. We’re frugal. We’re small enough that we can work from a home office, we have only the equipment we need, and nothing more. We use free and open technology wherever we can. But we need human resources. I cost around £28,800 per year to Ind.ie. I worked out the lowest amount that Oskar and I can live comfortably on, and that’s all I need. It’s a lot less than what I earned as a freelancer. The others on the team take similar pay. But we’re only four people, and we’re limited to our expertise and time. We want a Mac and iOS developer, a Node.js developer, and an Android developer. These people will help us create a platform that will help people own their own data on the current platforms. This platform will become a sustainable business which we can then use to extend to more platforms, and work on the phone.

Please support us. Ind.ie is my life and livelihood, and a deserving cause.

4 comments

Austin Prior
at 20:05pm

Hi Laura,
Seeing as you you’ve found the negative feedback tough at times, allow me to give you some positive feedback:
Ind.ie is the most exciting, inspiring project I’ve ever followed. My wife and I have both donated and are looking forward to participating in the pre-alpha.

Your work is reaching people and is already helping before you’ve even released anything. You’re helping people understand the issues around privacy and freedom and in no time at all, you’ll be empowering people of diverse backgrounds and abilities by putting beautiful, free and open tools in their hands.

Thank you for all of your great work. You are appreciated. :-)

Austin
- laurakalbag
  at 20:34pm
  
  Thank you so much, Austin. You’ve completely made my day. And please pass my thanks on to your wife as well :)
- Darina Prior
  at 01:54am
  
  Hi Laura,
  
  Your thanks and your tireless work to make our digital world a better place are gratefully accepted :-)
  
  Darina (Austin’s wife)
- Matthijs
  at 10:54am
  
  Hi Laura,
  Fully agree with Austin. The indie project and what you are doing is very exciting and inspiring. Really looking forward to what is coming. And will try to help or provide feedback where I can.
  
  Thanks, Matthijs

Read the original post, ‘What I’m doing now and why’.

Unfinished Business 89: Burger in donut

Mon, 13 Oct 2014 11:14:47 +0000

Last week’s episode of Unfinished Business was a very different discussion from the usual. Andy and I talked about his fantastic idea for Geek Mental Help week (October 27th onwards) and how so many people in our industry are affected by mental health issues. I’ll definitely be writing a post for Geek Mental Help Week, and I hope you will too! I’m sure you’ll be able to find out the latest about Geek Mental Help Week from the Twitter account @geekmentalhelp.

3 comments

Kathy
at 09:57am

I think Geek Mental Help week sounds like a brilliant innovation! As a sufferer of several job-related mental health issues myself (I think being a lone lady in a STEM department attracts them), I would be delighted to share and learn! I’d love to know how to contribute.
- laurakalbag
  at 10:36am
  
  <3 I’m sure others would love to hear from you (I certainly would!) Andy Clarke recently wrote an article on exactly [How can you contribute to Geek Mental Health Week](https://stuffandnonsense.co.uk/blog/about/how-can-you-contribute-to-geek-mental-help-week" rel="nofollow).
  - Kathy
    at 21:27pm
    
    Aw! Thank you, Laura! Thanks for sharing the link, too, and for all the great work you are doing. Kudos.

Read the original post, ‘Unfinished Business 89: Burger in donut’.

Breaking Stuff on A List Apart

Tue, 07 Oct 2014 13:57:33 +0000

Last week my latest column, Breaking Stuff, was published on A List Apart. I’m in a strange transitional period, moving from client work to fulltime at ind.ie, so I think I’ll be writing more about situations like these as time goes on.

I’ve also finally updated that terrible avatar to something much better. I look uncharacteristically pale, but at least I’m normal colours! (Unlike the last terrible photo I’d used.)

Read the original post, ‘Breaking Stuff on A List Apart’.

ind.ie Project Stratosphere announcement

Thu, 02 Oct 2014 14:16:15 +0000

After a few months of being pretty quiet, and working towards our crowdfunding campaign, we’re finally able to reveal some big stuff about ind.ie.

We’re not just designing a phone. A crowdfunding campaign for a phone that you’ll get in two years is not a risk worth taking. We need to build a network and ecosystem around that phone. We need a fantastic and mature platform that the phone to give the phone the ultimate experience on its release. So that’s what we’re building. It’s not just a phone. It’s not just hardware, software and cloud services. We’re going post-cloud and creating hardware, software, a peer-to-peer network and all of this will be part of the ind.ie ecosystem.

Read the original post, ‘ind.ie Project Stratosphere announcement’.

Speaking at Web Day at Bath Digital Festival

Thu, 25 Sep 2014 14:09:46 +0000

I’m speaking at Web Day at Bath Digital Festival on the 28th of October. Bath is great, I went to university there, and it’s full of lovely people. I’m looking forward to going back and giving a talk about accessibility. Tickets are a very reasonable £15, and it looks like it’ll be a very interesting day.

Read the original post, ‘Speaking at Web Day at Bath Digital Festival’.

5 reasons why you should get an office dog

Wed, 17 Sep 2014 09:16:30 +0000

Last week I wrote my Pastry Box thought on 5 reasons why you should get an office dog. It’s not just silly photos of Oskar, but actually five reasons why having Oskar for company has helped keep me sane. Through living and working by myself, to living and working with other people, he’s still incredibly valuable as a companion.

And if you do happen to like dog photos, you might want to follow @gigapup on Twitter or app.net. They’re just auto-posted photos of Oskar.

Read the original post, ‘5 reasons why you should get an office dog’.

Speaking at border:none

Tue, 16 Sep 2014 08:44:10 +0000

Next month I’m speaking and running a “creator unit” at border:none in Nuremberg. This is incredibly exciting as it’s an event focused around the decentralisation of the web, a topic that I care about a great deal. I’ll be talking about using considerate design and great user experiences to create genuine alternatives to the products that make money from exploiting their users’ data.

It’s also an all-new topic for me to share with other people, so I can’t wait! Tickets for the whole 2-day event are just 199 euros, and they have a really clever way of matching participants up with the topics they’re interested in, using an “aurora” of interests. You really should come along.

Read the original post, ‘Speaking at border:none’.

dConstruct 2014

Mon, 08 Sep 2014 15:08:47 +0000

Jeremy Keith is a master curator of brilliant talks from wonderful speakers, and Friday’s dConstruct was a great event. Gone are the days where I write long connected writeups on conference themes. I wish I had the time, and venues like the Brighton Dome are far too dark to take notes. However, I really wanted to record and share some of the thoughts I got out of dConstruct, as I think the themes are very important.

Living with the network

Technology and freedom

Living with the network is more about social interaction than it is about technology. When new technology is introduced, it brings more issues around social change and social acceptance than it does around the features, gadgets and gimmicks of the technology itself. As an industry, we’ve set up systems that serve the majority, but only provide benefits to the few. Georgina Voss’s talk about distribution systems covered how the postal networks allowed governments to censor media through distribution channels. These examples had alarming parallels with the internet as a distribution channel allowing for censorship through a centralised system. It was a strong warning about the importance of net neutrality.

As Cory Doctorow put it, “it’s not a fight about information, it’s a fight about people. And people want to be free.” And for people (and information) to be free, the information networks need to be free.

Privacy and surveillance

When it comes to privacy and surveillance, we are currently frogs sitting in a pot of warm water. The water is slowly being boiled around us, our privacy and freedom being slowly taken from us by governments and corporations. We won’t notice we’re being boiled until it’s too late, we won’t notice that our privacy and freedom has been irreversibly damaged until it’s too late.

We’re already in trouble and this is why we need to talk more, and act more, on the issues of privacy and surveillance. We need to bring these issues to the fore so we don’t become the frogs in the boiling water. As Tom Scott said in his vision of 2030, “privacy was already dead, it’s that not everyone agreed with it yet.”

Technology and diversity

Mandy Brown emphasised how the effect of technology on society around us isn’t just about the individual, and our own selfish gains. At least it shouldn’t be. With the lack of diversity in the web and tech industries, we’re creating technology for the privileged. When we’re creating products to scratch our own itch, and solve our own problems, we’re largely creating products for young white men.

Cory Doctorow pointed out that business models don’t exist in a vacuum, they reflect political, economic and social needs. And following the lines of Mandy Brown’s talk, the political, economic and social needs that we’re currently serving are largely those of young white men.

This was a brief summary

My post is a little summary of some of the themes that jumped out at me over the course of Friday. Lucky for you, all the talks are available in audio format on huffduffer, and they’re well worth a listen.

Read the original post, ‘dConstruct 2014’.

Building a diverse speaker lineup

Tue, 02 Sep 2014 08:53:56 +0000

This post is so good, and so incredibly valuable, that it’s deserving of more than just a passing tweet. Julie Pagano has written about ‘Building a Diverse Speaker Lineup.’ This should be the go-to post for conference organisers, and it should be read as soon as you’re even thinking about organising an event.

Julie’s post doesn’t just explain why you want a diverse lineup (also worth reading on this topic: Aral’s post, On design and diversity), but also how.

This is not about collecting random people from a demographic to fill some token slot, so the mean people on the internet don’t yell at you.

I’m a woman, I’m not 100% white, and I’ve spoken at (according to Lanyrd) 30 events. Being invited to speak is still a very tricky situation. I’ve had situations where I could very easily tell that I was invited at the last minute to be a token speaker to boost the diversity of the event. But I’ve had far more situations where the organisers knew me, knew the kinds of things I like to talk about, and considered me a good fit. My experiences are largely very positive.

However, as a “minority” speaker you can feel a horrible amount of pressure to speak. There’s the feeling that if you say no, you’re allowing your groups to be under-represented. Or worse, the conference organiser can say “well I asked her, and she said no, so it’s her fault we don’t have a diverse lineup.” It’s horrible and wrong, but it happens. And following the guidance in Julie’s post can help organisers understand how to approach speakers, and how to make their Call For Proposals more friendly.

The other problem I have as a speaker is finding the event itself generally unfriendly and alienating. I am one of those people who feels intensely uncomfortable in a dark room with lots of alcohol and loud music. I’ve avoided a lot of after parties because of casual sexist remarks that made me feel like I didn’t belong there. Julie’s section on Conference Environment can help prevent these awkward situations, and make everyone feel more welcome.

In response to a few organisers complaining about being bullied for their event’s lack of diversity, Julie finishes on a brilliant note:

Organizing a conference is hard work. Nobody is denying that. Working on making your conference diverse should be part of that work. I just gave you some insight into how you can do that. If you don’t want to do the hard work, you may receive criticism or people may not want to attend your event. That’s not bullying. That is holding you accountable for failing to do your job well. Work hard and avoid falling into the trap of the homogeneous conference lineup.

Read the original post, ‘Building a diverse speaker lineup’.

Unfinished Business 83: Slightly sticky bottoms

Wed, 27 Aug 2014 16:04:23 +0000

Andy is back this week and so we did a handover episode of Unfinished Business. This week we talked about our different approaches to the podcast and what’s relevant to “business”. Andy found an interesting article on the BBC website about smartphone stress, so we talked about how we handle disconnecting when we go on holiday, and in our downtime at home.

Read the original post, ‘Unfinished Business 83: Slightly sticky bottoms’.

Give and Tell Challenge

Tue, 26 Aug 2014 14:42:01 +0000

When Andy Clarke challenged me to the “Give and Tell Challenge”, I was very happy to comply. Dan James, inspired by the ALS Ice Bucket Challenge, came up with the challenge:

You donate to a cause, or causes, that have meaning to you and you say why. You then challenge 3 other people to do the same thing.

All Out

I have just donated to All Out. All Out campaigns for a world where no person will have to sacrifice their family or freedom, safety or dignity, because of who they are or who they love. Living in a country that has a fairly open-minded approach to equality, it’s hard to believe that in 2014:

it’s illegal to be LGBT in 77 countries
being LGBT is legal grounds for life imprisonment or execution in 10 countries
one transgender person is murdered every 36 hours
only 17 countries recognise marriage equality

It is completely unfair to suffer because of the way you were born and who you love. All Out has run a lot of campaigns focusing on the laws and treatment of people in particular countries, but also on the suffering of individuals who desperately need urgent support. They’re a small organisation who often rely on the expertise of its members, so I recommend you join their mailing list.

My nominations

Andy donated to WWF, and nominated Sean Johnson, so you should go and read Shaun’s post on The Water Project too.

I’d like to nominate:

I’d love to hear about an issue that they care about. But I want to change the terms slightly…

Give AND/OR Tell

In his “Give and Tell Challenge” post, Paul Boag explains the reasons behind giving regularly and how to calculate a reasonable donation size. Andy Clarke and Sean Johnson both do regular work for charities for free. But not everyone can afford to do so. The element of the Ice Bucket Challenge that I admire the most is that it encourages people to raise awareness of motor neurone disease (ALS). If we can’t afford to donate to charity right now, even though we want to do so, raising awareness is a charitable act in itself.

To Jo, Natalie and Steve: I challenge you to give and/or tell. And no time limit this time!

Read the original post, ‘Give and Tell Challenge’.

Indie Tech Summit videos and my talk on Universal Design

Tue, 26 Aug 2014 11:59:37 +0000

Yesterday we finally published all the videos from the Indie Tech Summit on the ind.ie site. It was a fantastic event, with two days of talking about how we can create sustainable and ethical alternatives to corporate surveillance. The first day was talks and panels, with everyone discussing the problems and their own free and open solutions. The second day had workshops and discussion groups where we talked about where we could go from there, and what we could do as a community.

Launching the videos was a longer process than we anticipated, but for many good reasons. We wanted all of our videos to have transcripts. We’re very committed to accessibility (see my talk below) and sometimes, people just prefer reading to watching. We also had a couple of false-starts with our video player. We didn’t want to use any of the services with corporate surveillance business models (Youtube is out) and we couldn’t afford for our videos to get a lot of views with expensive hosting (we had a $300 Wistia bill for a week of views!) We ended up using VideoJS with some customisation made by Andy, Aral and I. It may still have bugs in some places and on some platforms, so if you spot any, please let us know!

Universal Design

I gave a five minute talk about Universal Design, and the video and transcript are available alongside all the others. It was very difficult to condense such a huge topic into a short talk, so I tried to just cover the question of “why should we care?” Luckily, I was then on the Designing Independence panel with Cole Peters, Ivanka Majic and Lena Reinhard. This panel was a life highlight. Cole, Ivanka and Lena are all such incredibly smart and caring people. It was a fascinating discussion, and we managed to cover the connections between our talks in a way we didn’t have time to cover individually.

I would really recommend watching all of the videos, and please blog about your thoughts. It would be lovely to hear more people talking about ethical and sustainable business models in technology, and how we can make the industry a more diverse and accessible place.

Read the original post, ‘Indie Tech Summit videos and my talk on Universal Design’.

Unfinished Business 81 and 82

Tue, 19 Aug 2014 18:57:57 +0000

I was so busy last week that I forgot to post about Unfinished Business episode 81: Do you have a dinosaur onesie? This week, Ashley and I recorded episode 82: Love a good pep talk.

It’s been a fun few weeks. It’s been interesting how a lot of people have said that Ashley and I focused more on business-related topics than Andy’s recent episodes. That may well be the case, but it wasn’t really intentional, or because we think the podcast should be more business-focused. I love the informal, conversational style, and how (as a listener) I can keep up with the goings-on of the regular guests. There’s a lot more to business than the obvious topics.

I can’t speak for both Ashley and I, but I know that I was a bit scared of messing up the podcast, and so having some structured business-related topics made me feel a little more secure, and prevented me from rambling too much off topic!

I’ll be back for a handover episode with Andy this week, so I’m not going anywhere!

Read the original post, ‘Unfinished Business 81 and 82’.

Workplaces of Web Professionals

Fri, 15 Aug 2014 07:20:40 +0000

This morning Martin Wolf published an interesting blog post with photos of the “workplaces of web professionals”. I always wonder if people really are that tidy, or if they spent a while clearing up before they took the photo.

The featured photo of my workplace (in our ind.ie home office) shows the fairly typical mess on my desk, and the very typical dog getting in the way.

Read the original post, ‘Workplaces of Web Professionals’.

Digital Arts: Designing for the unknown

Thu, 14 Aug 2014 15:47:30 +0000

Last week, Craig Grannell asked me some questions about designing for the unknown. The result was a really fantastic article called Designing for the unknown: how to design templates and frameworks, and has contributions from some really smart people.

The title image is from my writeup of the Default Perch Theme project I did with Perch.

Read the original post, ‘Digital Arts: Designing for the unknown’.

Desert.fm Playlist

Tue, 05 Aug 2014 09:30:57 +0000

A few weeks ago I was asked to create a playlist of ten songs for Desert.fm. Nate, Bobby and Jamie sent me an email with the premise:

Our idea is to to add value to digital playlists through personal stories and inspirational music. We’re totally genre agnostic and we don’t judge (honest!), we can find inspiration in the most unlikely of places sometimes, so we encourage our curators not to hold back. If theres a story to it we want to hear it.

Music is, like it is to many people, a big part of my life. Listening to music together has always been a family activity, and with such a big family, we all developed very critical opinions of each others’ tastes. My dad taught us that it doesn’t matter if your taste in music isn’t “cool”, so I went very non-mainstream in my teens and haven’t looked back.

My desert.fm playlist is semi-chronological and describes the context of the music in my life, as I went from enjoying what my dad shared with us, to developing my own very particular taste. I’ve explained why I love the music, the band or just that song.

I also created a Spotify playlist of these tracks if you want to just get down to listening.

Read the original post, ‘Desert.fm Playlist’.

Unfinished Business 80: I wonder why he trusts us?

Mon, 04 Aug 2014 09:47:42 +0000

Andy Clarke is on holiday for three weeks and has handed over the Unfinished Business reins to Ashley Baxter and I. This week’s episode is all about business insurance for freelancers and small businesses. We talked about public liability, professional indemnity, business contents and copyright infringement. It was great because I got to ask Ashley loads of questions I forgot to ask when she was helping me get insured!

I’m not sure if the audio quality is as good as it usually is on Unfinished Business, as my editing skills are rather rusty… But this episode does feature a little bit of Oskar!

Read the original post, ‘Unfinished Business 80: I wonder why he trusts us?’.

Digital Arts: The future of web design

Fri, 01 Aug 2014 13:16:04 +0000

Over the next few days I’m catching up on things I failed to share in recent months. It’s been a very busy few months, but I still like to have a record of what I did and where I’ve been!

In April, I spoke to Neil Bennett about the future of web design, and the challenges we face. There were some good questions, and it’s interesting to see the answers of difference people from different areas side-by-side.

Read the original post, ‘Digital Arts: The future of web design’.

I Don’t Like It on A List Apart

Thu, 31 Jul 2014 15:52:31 +0000

Heh. That’s a misleading title! I’ve been on holiday, so I’m late to posting this update. Just over a week ago, my most recent column, I Don’t Like It, was posted on A List Apart. I’d heard some designers discussing their clients in less-than-favourable terms. This kind of behaviour makes me cross. It’s the Clients From Hell attitude that poor communication is a client’s fault, when it’s more often a designer’s fault. It might be easier to talk about these situations in the abstract than give solid advice on how to behave better. So I gave it a try, with some example interactions in my column.

Read the original post, ‘I Don’t Like It on A List Apart’.

Discount code for WXG 2014 in Guildford

Tue, 29 Jul 2014 10:25:22 +0000

You might have seen that I’m speaking at WXG in Guildford in September. If you didn’t already get a ticket, you might want to use my discount code of kalbagWXG to get £10 off the (already very affordable £99) ticket price.

There’s some great speakers in the lineup, and it’s sure to be a fun day!

Read the original post, ‘Discount code for WXG 2014 in Guildford’.

Accessibility en France

Sat, 14 Jun 2014 11:19:30 +0000

Yesterday I gave a talk at KiwiParty in Strasbourg. KiwiParty is a lovely conference, but all of the speakers spoke in French, to the French audience. Except me. I speak a little bit of (A-Level) French, but I certainly couldn’t give a talk in French.

Designing for accessibility

My talk was about Designing for accessibility. I wouldn’t be setting a very good example if I was to give a talk about accessibility which was hard to understand for 99% of the audience. I talked to my friend, Stéphanie Walter, one of the organisers of KiwiParty, about getting my slides translated into French. Stéphanie very generously offered to translate my slides, on top of all the other hard work she was doing with organising the conference and creating the lovely (and very accessible!) website.

The slides

My slides support the information in my talks. I present the main points that I’m trying to cover in text, and then talk about the context of those points as I show the slides. I didn’t get translations for the examples that I showed, as the detail I discuss the examples depends on the audience on the day, but overall I had 85% of my slides translated.

It was tricky to fit the translated text into the slide designs. Usually I have as little text as possible on a slide, and French can be a lot longer than the English equivalent, so it took a while to ensure the slides were all readable on a projected screen.

Now I had a talk which would be easy to understand for English speakers, and French speakers who would find it harder to follow my English, the slides provided the backup information.

Why?

Accessibility isn’t just about wheelchairs or screen readers. Accessibility is about optimising the experience to include as many people as possible. With the French translations of my slides, I hope I was able to do just that.

Sidenote: The French designers and developers were mostly very knowledgeable about accessibility. I was introduced to a great resource for accessibility: opquast.com. It’s in English as well as French. Thanks KiwiParty!

5 comments

Jérôme
at 12:25pm

Hey,
I loved your conference. I think you motivated Julio to make a similar conference in french this year. We will see ;)

Hope to see you next year.
Kindly

Jérôme
Chaopale Lamecarlate
at 17:16pm

I attended your conference, and it was wonderful: dynamic, fun, interesting.
We were a small group of french-speaking friends, and all agreed that they had understood everything. Thank you!
Grégory STOOS
at 07:12am

Thanks Laura for this very nice conference. Can you share your slides ?
Thanks.
- laurakalbag
  at 10:41am
  
  Oh yes, sorry, I’d forgotten to post the link. The [slides are up on Speakerdeck.](https://speakerdeck.com/laurakalbag/designer-pour-laccessibilite" rel=“nofollow)
- Pete Blakemore
  at 22:21pm
  
  Wow Laura, didn’t realise the rest of the conference was en Français! Sounds like you had a brilliant time and hats off for having the confidence to do it, and nice thinking to get the slides translated.

Read the original post, ‘Accessibility en France’.

Unfinished Business 72: Big Bad Boy Breakfast Bap

Mon, 09 Jun 2014 16:02:49 +0000

This week’s episode of Unfinished Business was great fun to record. After my recent move to working on Indie Phone, alongside my boyfriend Aral Balkan, I was curious to know how Andy and Sue have worked so well together since the beginning of Stuff and Nonsense.

I sent Sue some questions, which she answered and sent back to me, without Andy seeing the answers. During the show, I asked Andy about his thoughts and read Sue’s answers. Andy’s posted the full list of questions and Sue’s answers on the Stuff and Nonsense blog. After hearing so many stories about Stuff and Nonsense on Unfinished Business, I was expecting some funny answers. I wasn’t disappointed, but I was also struck about how kind, thoughtful and caring Andy and Sue are in their working relationship. That must be their secret to working together for so long!

Read the original post, ‘Unfinished Business 72: Big Bad Boy Breakfast Bap’.

And I accidentally became a control freak…

Thu, 05 Jun 2014 08:28:36 +0000

Following on from my post yesterday about working with Indie Phone for 50% of my time, my thought on the Pastry Box today is about how I accidentally became a control freak. It’s hard to admit the flaws you find in yourself, but I’m so determined to do a good job that I think it’s better to find those flaws and try to fix them!

Read the original post, ‘And I accidentally became a control freak…’.

Becoming part of Indie Phone

Wed, 04 Jun 2014 08:36:28 +0000

There’s some big changes around here. As of Monday, I am now working with Indie Phone for 50% of my working time.

What is Indie Phone?

Indie Phone is a huge, and very ambitious, project. We’re building a smart phone that allows you to own your own data. The majority of companies on the web have a simple, and potentially dangerous, business model. These companies give you services for free, and sell your data on to third parties to make their money (think Google, Facebook, Twitter).

This has opened our data up to a lot of potential abuse, including the government dragnet surveillance employed by the NSA and GCHQ (and other governments). For users aware of these problems, we can either choose to share our data, or be excluded from the majority of services (and social interactions) on the web. Worse still, the majority of general consumers on the web are unaware of these problems. There are loose, and often misleading, privacy settings on these services. Few people realise that they’re still sharing their data with the companies that own their services, and many other third parties. Even fewer people realise that their email and private messages are being stored, and potentially read and shared, with these services and third parties. To find out more about these issues, I really recommend watching Aral’s talk, ‘Free Is a Lie’, and watching ‘Terms and Conditions May Apply’.

Indie Phone aims to create a smart phone that isn’t just for the tech folk that want to take control over their data. We want to create experiences that combine hardware, software, and the cloud, as well as appealing to the everyday consumer. The fact that it’ll be open, and allows you to take control of your data, and choose what you want to be shared, is an essential bonus. It’s incredibly important that these tools are available to everybody. We don’t want to discriminate against those with less tech experience or knowledge.

There’s nothing like Indie Phone. There are a few fantastic companies and products working towards other indie technologies. Together we can try to make technology, and the web, more open and user-friendly.

What’s indie tech?

Data-hungry services have become the norm. Indie Technologies have sustainable business models and offer alternatives to these services. These alternative products need to be design-led and consumer-friendly so they can realistically compete in the consumer market. At Indie Phone, we’re spearheading indie tech, we want to be a great example to other indie technologies. We also have plans to help support and promote other indie tech projects.

Why work with Indie Phone when I love client work so much?

It’s been very trendy lately to switch from client work to a side project or product. A lot of designers and developers don’t enjoy client services. But I do. I really really love working with clients, and helping them achieve their goals. It’s similar to why I love Indie Phone. I like providing services to people who otherwise may not be able to create their own site or understand what would work for them on the web.

I’ve been Chief Sounding Board for the last 10 months, as Aral has researched, planned, brainstormed and agonised over Codename Prometheus and Indie Phone. It’s been his life for nearly a year, so in turn has been a huge part of my life. I have absolute faith in his ability to see it through. It’s been hard sitting on the sidelines, desperately wanting to help, but not being able to dedicate the time and money that a project of this size really needs.

After the sale of Aral’s family’s home in Ankara, we finally have funds to afford other people to work on the Indie Phone up to crowd funding. Money is still tight, we can’t afford me to work on Indie Phone 100% of the time, and this works for me. The money is far better spent on other valuable skills required to get us up-and-running.

What I do for Indie Phone

Design and web development. Web is my specialism, so the most expertise I can offer Indie Phone is in producing the websites, mini sites and other web-based materials. I also work on the branding and other general graphic design tasks. Sometimes I do some writing, and I do a lot of editing. All of my work is collaborative. Aral, Jo and I all review and critique each others’ work, and this is an exciting new experience for me!

What about the other 50% of my time?

I can still carry on the relationships I have with my existing clients, and take on a few new clients, with a decent amount of time to dedicate to client work. I love the variety of client work, and I really enjoy working with different people.

I want to work with other indie tech projects

I’ve always been picky with new projects, I only work with clients that I care about and projects that interest me. That’s how I do my best work. And lately, as I’ve been absolutely influenced by Indie Phone, I really care about the success of indie tech projects. Is your project design-led, free and open, and independent in line with the Indie Technology Manifesto? Then I’ve got a deal for you…

20% off for indie tech projects

I’m going to put my money where my mouth is. I want to work on indie tech projects so much, that I will work for 20% less (on my hourly rate) for an indie tech project. This will be expensive for me, but I want to do more to help indie technologies.

What can I offer an indie tech project?

Design. I’m an all-round designer. With design-led projects, the majority of indie tech projects probably have a designer in place already, but I’m here for support and strategy.
Branding. From logos to typography to icons for your avatars, I can create your brand and show you how to use it effectively.
Web design. I love the web. If it’s working out the experience for your app, I can help you with design and front-end development. With marketing sites, I can promote your product with an end-to-end solution (copy to content management system, I can do all of that.)

If you’re interested in my 20% discount, please [send me an email at me@laurakalbag.com](mailto:me@laurakalbag.com?subject=Indie%20Tech Project).

It’s huge, but also not so huge

In some ways, this hasn’t changed much. I’m still working from home, as the Indie Phone office is currently occupying the largest room in our house. I’m still working on projects I love with people that I love. I’m very lucky :)

2 comments

Ngaire
at 08:45am

What a great idea Laura! I really hope it goes well for you. Having a side project that you’re passionate about can make your client work even better too I think. It’s having that freedom to do something where you can see your creativity bloom while making a difference that is great about side projects.
Ran
at 01:00am

Keep us posted on Indie Phone, sounds good.

Read the original post, ‘Becoming part of Indie Phone’.

How to get started with public speaking

Wed, 21 May 2014 14:59:31 +0000

Last week, the wonderful Ashley Baxter asked me about how I got into public speaking. Ashley asked a few cool people, and published their public speaking stories on the Insurance By Jack blog.

By the way, if you want business insurance, you really should get a quote from Insurance By Jack.

Read the original post, ‘How to get started with public speaking’.

Why accessibility matters to me #GAAD

Thu, 15 May 2014 10:14:06 +0000

The reason I fell in love with the web was the democratisation of information. I love that so many people can access, learn, and share such a huge variety of resources. That’s why I’ve always considered accessibility so important. To me, access for all is an essential part of the nature of the web.

How I learned accessibility

When I started to learn about web design and development, I learned from great books like Dan Cederholm’s Web Standards Solutions. Web Standards Solutions continually referred back to why the different markup solutions suggested would be better or worse for accessibility. That’s how I learned that accessibility was important, part of a developer’s everyday work and not so hard to achieve.

Modern web development and accessibility

Nowadays when developers talk about modern web development techniques, they most often mention the impact they may have on web performance. Considering performance during each step of a project makes sense as bandwidth and battery life are uncertain commodities. However, I’d really like the community to start talking (again) about accessibility in the same way they talk about web performance. We need to change the minds of people who think that accessibility doesn’t make business sense, and I want the web to be a better place to visit for a wider range of people.

I’ve written this little post as part of Global Accessibility Awareness Day (#GAAD). Thanks to Neil Milliken and his fantastic post on designing for accessibility for the heads-up. If you want to find out more about accessibility, there’s a 24 hour Inclusive Design community conference happening online right now (Thanks to Bruce Lawson for tweeting so much about it!)

I also run a Twitter account that shares all the best accessibility resources that I find, it’s called @newtoa11y.

Read the original post, ‘Why accessibility matters to me #GAAD’.

A look inside a designer’s sketchbook

Thu, 08 May 2014 10:52:20 +0000

A couple of months ago, Ian from logogeek.co.uk, asked if I’d share some of my sketchbook pages on his site. Ian wanted to emphasise the rough, imperfect nature of the way we plan logo designs, and show real work done by real people.

Last week, Ian added some pages from my sketchbook to his post, “A look inside a designers sketchbook”. He included some of my sketches from the Indie Phone and Turbine projects. As he didn’t include all of them, I thought I’d share them all below.

Ian’s post

Rocket sketches from Indie Phone

More rocket sketches from Indie Phone

Even more rocket sketches from Indie Phone (and these aren’t even all of them!)

More Turbine shape sketches

Turbine shape sketches

Turbine letter sketches

One comment

tobi
at 11:06am

Thanks for sharing all this pages.
It’s quite good to see that your sketches are –; in my opinion –; far away from a perfect “drawing” and that a logo isn’t born as you can see it in its final state but it “grew up” with some iterations on it.

While being not really good at all this painting stuff it encourages me keep on noting down my ideas with pictures and some rough lines.

Again, thanks for sharing this, Laura! :)

Read the original post, ‘A look inside a designer’s sketchbook’.

April’s Pastry Box thought on writing

Tue, 06 May 2014 09:34:39 +0000

I was slow to post about my April Pastry Box post as my realign got in the way. It was really a little insecure thought about how my writing and thinking is improving, but I’m finding it hard.

Read the original post, ‘April’s Pastry Box thought on writing’.

A little realign

Fri, 02 May 2014 13:10:30 +0000

Things are looking a bit different around here. It’s not a redesign so much as a realign. I’ve been tinkering for a few months, and finally got to the point where I’m happy to push it live (even though there’s more I could do.)

There were a few particular goals for this redesign:

Rewrite the CSS

I lived in fear that someone might look closely at my CSS. My last redesign came about when responsive web design was still young, and I was incredibly foolish. I linked to three different stylesheets in my header, one for 320px and up, one for 768px and up, and one for 1024px and up. There were some “minor” breakpoints in these stylesheets, but yes, I was using fairly device-based breakpoints, and that was three HTTP requests in the head. Certainly not ideal.

The previous version was also a peculiar Sass/plain CSS hybrid as I’d started learning Sass a few months into the redesign. As Sass is so easy to integrate into ordinary CSS, it wasn’t too problematic, but I knew I could lessen repetition and make the structure of my CSS much easier to maintain if I moved it all into a consistent format.

Now I’ve rewritten all the CSS from scratch using Sass, and added in a few new techniques, such as flexbox, for some of the form elements. If you’re interested in how badly I write Sass, I’ve uploaded those files (in the spirit of Dan Eden’s max CSS) into a /sass folder and you can find the file references in the main file, style.scss.

Reboot the typography

I love Avenir, I really do, but I was increasingly aware that it can be hard work to read as body text. After falling in love with Brandon Text, I decided it was a nice evolution from Avenir, keeping the geometric shapes but in a softer, more legible, way.

Avenir as display and body text on the old version of my site

I recently read Tim Brown’s fantastic Combining Typefaces book and felt encouraged to be braver with my typefaces choices. I didn’t want to just keep using different weights of the same family as I had before. After some deliberation and advice, I settled on Arek for headings, to add a bit of quirky personality to my site. This is the first time I’ve used Fontdeck properly, and I’m really pleased with the quality of the font and the speedy rendering.

Arek for the display, and Brandon Text for the body on the new realign

I’m both self-hosting and using external JavaScript to pull in fonts for my site. Brandon Text is self-hosted whereas Arek is hosted on Fontdeck. I can’t quite make up my mind whether I prefer to suffer slow loading times on my self-hosted fonts, or the risk of my site depending on another site for the fonts to load with a font delivery service.

Simplify

The illustrations had to go. I’m always trying to tame my temptation to over-decorate, and while the illustrations in the previous version were a nice responsive bonus for large screens, a cleaner design is less distracting.

Previous homepage layout, with portfolio images, blog posts and a messy illustration

For a long time, my homepage was my most hated page. And the most visited. It just felt like everything had been thrown on, it was unstructured and untidy. Given that the second most popular area of my site is the Past Projects, I decided to include twelve (nicely divisible for smaller screen sizes) images from my past projects and a brief introduction.

New version of the homepage, with just an introduction and larger portfolio images

WordPress, by default, gives you so many options for meta information on archive pages. I previously listed the amount of comments, categories and tags on each post on the blog archive. On the projects archive I listed the dates and type of project. I realised these were unnecessary chunks of information that were easy enough to find on the single post or project pages. Just because I could add everything to each template, it didn’t mean I should. Less repetitive content means the pages are now cleaner, easier to read, and nowhere near as long as before.

Previous blog, with lots of information about each post

New blog post layout with no unnecessary meta information

New projects with Dribbble shots

I’ve been terrible at keeping my portfolio up to date in the last year. I’ve still got five projects that are halfway to being documented, but I’ve added four recent projects with some more in-depth explanations of the process. I want to keep adding more useful explanations to each project, making it more of a case study, so they’ll inevitably take a little longer.

four new case studies: Indie Phone, Freelancing map illustration, Rachel Andrew’s site and the Turbine logo

After hearing Andy Clarke chat with Dan Cederholm on Unfinished Business a few months ago, I shamelessly borrowed Andy’s great idea to include Dribbble shots from a project in my portfolio. I found a handy plugin to grab my Dribbble shots as they’re posted and add them into WordPress, so I can now easily connect my Dribbble shots to the relevant post and include a little gallery at the end of each project case study.

progress shots from the Indie Phone project

There’s probably more to do…

As ever, there’s always more testing to be done. I don’t expect this site to be perfect, but I thought it was about time I hurried up and pushed it live. If you spot anything wonky, please let me know in the comments, on Twitter or send me an email. I’ll be very grateful!

2 comments

Lee Gargano
at 13:50pm

Great decisions, Laura! I agree with you wholeheartedly on the font selections and home page redesign. I need to reanalyze my own site soon now that I have enough data to make those decisions. That’s the beauty of launching a product (your site) and then adjusting it as you go along based on the results you find.
Matt Soria
at 14:37pm

Hey Laura!
I have frequently visited your site in the past year for reference and inspiration. Even before the new “realign” I appreciated your bold choice of color and great copy (especially the “about” page).

I just so happened to be making a few adjustments to my own site late last night and turned to your site again for inspiration when I noticed the changes on your homepage, and I must say — brilliant little improvements. The fonts look great, and the new layout on the homepage is indeed simpler and quite inviting I think.

It reminds me also that as designers, and as people that grown and change, our websites don’t have to be something that we re-design every year-or-so — they can be continuously changed and adapted as we grow and learn, and our design tastes change as well.

It makes me think of [Frank Lloyd Wright’s Home and Studio](https://www.google.cl/search?q=inside+frank+lloyd+wright%27s+home+and+studio&client=firefox-a&hs=PHG&rls=org.mozilla:en-US:official&channel=sb&source=lnms&tbm=isch&sa=X&ei=SK1jU5SPDPO0sASJkoHoBw&ved=0CAgQ_AUoAQ&biw=1360&bih=631" rel=“nofollow) in Hyde Park, Illinois (US). When you walk through it much of it seems like a hodgepodge of different styles and periods, and it was because it was his home, and he was constantly experimenting on it with new ideas that he would then take out into the wild and use on his paid projects. Shouldn’t our own websites be that too? Besides a portfolio or résumé or whatever, what better place for experimentation and growth? If you got feedback today that was overwhelming negative about the changes you made (doubt you will), well you’d just change them again. No big deal, right? What a great way to learn?!

Anyway, cheers to the realign, and keep killing it!

Read the original post, ‘A little realign’.

Unfinished Business #64

Tue, 15 Apr 2014 14:58:00 +0000

On Friday I was a guest on the Unfinished Business podcast again. It was a special episode as Rachel Andrew was also a guest (yeah, I designed her site!) I don’t like to go on about stuff like this too often, but if you’d told 21 year old me (7 years ago) that I’d be appearing on a podcast with Andy Clarke and Rachel Andrew, it would’ve blown my mind. They’re two very lovely people whose writing helped me learn about, and become so excited about, the web.

The show is focused around the closure of Five Simple Steps, the great publishers of web-themed books, last week. I’ve never written a book, and have only recently started writing much, so I learned a lot from Andy and Rachel as seasoned writers (and ex-Five Simple Steps authors).

Read the original post, ‘Unfinished Business #64’.

Me and My Big Fat Ego on A List Apart

Thu, 03 Apr 2014 12:56:33 +0000

Today my column on Me and My Big Fat Ego was published on A List Apart. It’s not that I’d say I have a huge ego, but it’s definitely something that’s easily bruised when I feel like things aren’t going my way.

Read the original post, ‘Me and My Big Fat Ego on A List Apart’.

Speaking at KiwiParty in Strasbourg

Thu, 27 Mar 2014 07:50:21 +0000

On the 13th of June, I’m speaking at KiwiParty in Strasbourg. I’ll be speaking about web accessibility.

It’ll be my first conference in France and I’ll be trying to remember my French from AS Level ten years ago! I won’t be giving my talk in my terrible French, but if you’re coming along, please find me and test my conversational French. Especially if you want a good laugh!

One comment

Cristian CIOFU
at 10:33am

Hey Laura,
It’s great that you’re coming to Strasbourg. It’s a lovely city and you’ll love it (that’s for sure).

I hope I can be at the KiwiParty, but anyway, if you want a guide to walk you through the city (or want to grab a beer/coffee) don’t hesitate to give me a sign :)

See you on the 13th of June.

Read the original post, ‘Speaking at KiwiParty in Strasbourg’.

Unfinished Business #61

Tue, 25 Mar 2014 10:52:12 +0000

Last weekend I was a guest on the Unfinished Business podcast again. I had a lovely time chatting to Andy about speaking at conferences, working for free and I even managed to squeeze in a rant about accessibility.

Read the original post, ‘Unfinished Business #61’.

Inspiration on A List Apart

Mon, 24 Mar 2014 10:37:24 +0000

Last week my column on Inspiration was published on A List Apart. It follows roughly the same structure as the talk I gave at Design + Banter a few weeks ago.

Read the original post, ‘Inspiration on A List Apart’.

Video interview for Interlink conference

Thu, 13 Mar 2014 17:47:43 +0000

Sadly, Interlink conference has been cancelled. I’m gutted that I won’t be visiting Canada this year, but I totally understand how difficult it is to run a conference, especially if you’re trying to put on the best possible event for your attendees and speakers.

Last week I had [a chat with my friend Steve Fisher about my upcoming talk and workshop at Interlink conference and all things Canadian](http://interlinkconference.com/2014/03/laura-kalbag-design-gretzky-maple-syrup/). It was a fun way to end the day, and is complete with me doing a really terrible Canadian accent. It made me *even more* excited for [Interlink in June](http://interlinkconference.com), I can’t wait!

If you want to know a bit more about my workshop, I’ve put some extra details in a blog post about the workshop, and you should check out the amazing conference lineup. It looks like there’s still some Super Early Bird tickets left, so you should grab them before they’re gone!

Read the original post, ‘Video interview for Interlink conference’.

March’s Pastry Box thought on purpose

Tue, 11 Mar 2014 17:46:47 +0000

Today my thought for March was posted on The Pastry Box. It was inspired by First Things First 2014, talks by Cole Peters and Nicklas de León Persson at Design and Banter, and Fictive Kin‘s slashpurpose.org.

I’ve started formulating a draft of my “purpose” for this site, but it’s not quite ready yet.

Read the original post, ‘March’s Pastry Box thought on purpose’.

Speaking at WXG 2014 in Guildford

Mon, 10 Mar 2014 10:52:16 +0000

I’m speaking at WXG 2014 in Guildford in September. This is exciting for me because I attended the first ever WXG a couple of years ago, and it’s about as local as a conference is going to get to my hometown, Reigate.

The tickets are a bargain at just £69 for early birds, and there’s already a great lineup with still more to be announced…

I’m going to talk about how we design the web. These days, “web designer” is used to describe all sorts of jobs and people. I’m going to discuss what we really create when we design for the web, where our responsibilities and loyalties lie, and how we hone our design skills.

Read the original post, ‘Speaking at WXG 2014 in Guildford’.

Guest on A Bit More Backendy podcast

Fri, 07 Mar 2014 12:04:04 +0000

Yesterday the fourth episode of the Backendy podcast was released, and I was the guest. It was lovely talking to Darren, partly because he’s been a great client for a while now, partly because I’ve been working on the podcast logo and site, and also because I think a podcast focusing on back-end development is a really good idea.

http://backendy.com

Read the original post, ‘Guest on A Bit More Backendy podcast’.

Design theory for the web workshop at Interlink conference

Mon, 03 Mar 2014 18:42:46 +0000

I’m running my [‘Design theory for the web’ workshop at Interlink conference](http://interlinkconference.com/workshops/#design-theory-web) in Canada on the 18th of June.

It’s a one day workshop and I’ve written a mega description below for anyone wanting to know more:

There’s a lot more to web design than making something look pretty. I’ll take you through five web design primers, looking at visual design language and how it can be used to communicate with your users, making your sites more usable and beautiful.

The primers covered are:

Typography
Layout and grids
Colour
Designing for responsiveness
Accessible design

As I’m a designer and front end developer, I’ll refer to techniques you can use practically on the web today. However, this workshop does not rely on HTML and CSS knowledge so it is perfect for those just starting out in web design, or those wanting to focus on improving their visual design skills.

Looking at the hands-on application of design skills, I’ll walk you through the visual design of two website projects. One project will be used to learn the techniques, and one project will be used to apply what we have learned together.

Typography

What do we aim to achieve with typography? What makes a good typeface and what makes it suited to a particular project? Text is the foundation of the web and learning typographic principles will help you make your text easier to read, understand and reinforce your brand.

Layout and grids

Why should we use grids? How do we create layouts that work with varied content? Layout design is what makes for sophisticated visual design. Learning about layout and grids will make your site easier to navigate, helping your users find the information they need.

Colour

Are there any ‘best colours’ for website design? How do we create good colour palettes? Many designers are scared to use colour in their designs. Learning about colour will help you highlight key areas of your site and make your brand stand out.

Designing for responsiveness

How can design principles help us design for the responsive web? What are the pitfalls of responsive web design? Responsive web design makes designing for the web more challenging. Learning about useful working processes and the common pitfalls of responsive design will help you make your site more future friendly.

Accessible design

What makes design accessible? What can we do to make our sites better for a wider audience? Accessibility isn’t just about disabilities. Learning about how important design is to accessibility will make your site a better experience for as many users as possible.

Read the original post, ‘Design theory for the web workshop at Interlink conference’.

Delivery Logistics on A List Apart

Thu, 27 Feb 2014 15:25:44 +0000

There’s nothing wrong with sending a client a rough sketch if that’s all that’s needed to communicate your idea. In my latest column on A List Apart, I’ve written about deliverables and why what the client expects isn’t always the right thing to do…

http://alistapart.com/column/delivery-logistics

Read the original post, ‘Delivery Logistics on A List Apart’.

Speaking at Design + Banter

Wed, 26 Feb 2014 12:07:11 +0000

I’m speaking at Design + Banter on Monday in London. It’s already sold out, but there’s a waiting list available for the free tickets.

Nicklas Persson and Cole Peters are also speaking so I’m really chuffed to be part of a great lineup!

Read the original post, ‘Speaking at Design + Banter’.

Interview about web fonts on Type Quest

Tue, 25 Feb 2014 11:17:40 +0000

A few months ago Tyler Sanguinette sent me some questions about design and web typography as part of his thesis on web fonts.

Recently I found that he’d published the interview, and interviews with a load of very smart people, on the Type Quest website. Type Quest also has some really useful information on the OpenType features of web fonts, so it’s well-worth a look.

One comment

Andy Warburton
at 17:40pm

Are you vagabonding? That first paragraph makes you sound like some kind of transient (“currently from Brighton”) :-)

Read the original post, ‘Interview about web fonts on Type Quest’.

Speaking at Interlink conference in Toronto

Mon, 03 Feb 2014 11:34:14 +0000

This is very very exciting. In June, I’m going to speak at [Interlink conference](http://interlinkconference.com) in Toronto, Canada. The line-up is incredible, and I can’t believe I’m a part of it. It’s also my first trip to Canada, and only my second trip to North America. I can’t wait!

One comment

lndngeek
at 14:30pm

Congrats! You’ll love Toronto!

Read the original post, ‘Speaking at Interlink conference in Toronto’.

Sketch of the day

Fri, 31 Jan 2014 10:08:46 +0000

A strange thing has happened in the last week. I’ve been a bit blue, but I’ve really got into my One Sketch A Day book. This was a lovely little book that Rachel Shillcock sent me.

Read the original post, ‘Sketch of the day’.

Unfinished Business #54

Sun, 26 Jan 2014 18:59:34 +0000

The latest Unfinished Business podcast has just been published, and I’m on it again! I had a lovely time talking to Andy about scheduling projects, invoicing, rates and people who don’t understand copyright.

A very big thank you to my friend Jo who let me take over her internet and bedroom for the recording, as our internet is still terrible!

Read the original post, ‘Unfinished Business #54’.

Industry mentoring on Creative Bloq

Thu, 23 Jan 2014 14:06:16 +0000

Craig Grannell has written a fantastic article on Creative Bloq about mentoring, looking at loads of different ways the web industry can do mentoring well. Including interviews with Clare Sutcliffe, Greg Hoy, Jeffery Zeldman, Andy Budd, Josh Emerson, Andy Budd, Anna Debenham and me!

It’s well-worth a read if you want to mentor somebody, or would like to find a mentor yourself.

Read the original post, ‘Industry mentoring on Creative Bloq’.

Speaking at DotYork

Mon, 20 Jan 2014 18:06:30 +0000

I’m speaking at DotYork conference in York on the 1st of May. My friend Jonic is one of the organisers, and with the thought and love that they’re putting into the event, it’s got to be fantastic.

It’ll be my first time in York, so I’m looking forward to seeing the sights and feeling incredibly Southern. You should join me! Early bird tickets are coming out soon, so why not go over to the DotYork website and sign up to be the first to hear when tickets are available.

One comment

Jonic
at 19:07pm

Thanks for the plug, Laura! Can’t wait to see you there :)

Read the original post, ‘Speaking at DotYork’.

Interview with Heart Internet

Fri, 17 Jan 2014 15:12:48 +0000

Yesterday, Heart Internet posted an interview with me on their site. They start off saying some very kind things about me, and then it covers accessibility, design, speaking at conferences and a bit of client work. As a bonus, it’s interspersed with photos of me pulling weird faces at conferences (and being business on the phone!)

Read the original post, ‘Interview with Heart Internet’.

Writing on The Pastry Box and my first post on ethics

Sat, 11 Jan 2014 11:06:40 +0000

Today is the day my first “thought” of the year is published on The Pastry Box. When Alex asked me if I wanted to be a part of The Pastry Box project, I leapt at the chance. There are some fantastic people who have contributed such interesting thoughts and ideas over there in the last couple of years, and looking at the lineup for this year, I’m sure that won’t be changing anytime soon. It’s very exciting to join in, and I really love the philosophy of consuming content in a way that works for you, and ensures the content’s longevity.

Ethics

I had a great conversation about ethics in client work with Andy Clarke on the Unfinished Business podcast a few weeks ago. In a world where society is clearly struggling with so many issues (wealth/poverty divide, human rights, privacy, and so on) I wonder how I can make a difference, or prevent myself from being complicit in further problems.

In the run-up to my publishing date on The Pastry Box (it’ll likely be the 11th of each month) I was so worried about what I would write, and trying to come up with something interesting. Then I read this post by Cory Doctorow, and had some worrying conversations about other people’s attitude to privacy with Aral. Suddenly I found myself writing an incoherent stream of anger into my notebook. A long thoughtful walk with the dog later, and I finally had something that might be worth sharing.

Please let me know what you think, this means a lot to me.

Read the original post, ‘Writing on The Pastry Box and my first post on ethics’.

I love this pen

Tue, 07 Jan 2014 09:25:48 +0000

Read the original post, ‘I love this pen’.

Speaking at 12 Devs of Winter

Mon, 06 Jan 2014 21:17:32 +0000

I’m speaking at 12 Devs of Winter on the 22nd January in Shoreditch. Because I’ve clearly lost my mind, I’m going to be doing another new talk. This time on ‘Freelancing for the reluctant businessperson.’ I’m that reluctant businessperson, and I’m hoping to share some silly stories about all the daft things I’ve done and some of the things that have worked out just fine.

For once, I’m ahead of the schedule, and tickets will be released this Wednesday 8th January at 10am.

One comment

Sarah
at 10:32am

Really enjoyed your talk at 12Devs Laura. Hope to catch you speaking again soon.

Read the original post, ‘Speaking at 12 Devs of Winter’.

My 2013

Tue, 31 Dec 2013 17:14:04 +0000

My 2013 has been another big year. Oskar and I moved down to Brighton to live with Aral, I spoke at 13 events in 3 countries and worked with 13 clients on 20 projects. 2013 was the year of the podcast and I was a guest on 12 podcasts, most frequently with the lovely Andy Clarke on Unfinished Business. I also started writing a lot more, and now have my own column on A List Apart.

Like last year, I thought it would be fun to sum up my year in pictures. Looking back through my collection of photos, I’ve done so much that I’d forgotten half of it! But these are some of the best bits…

Oskar had a great start to the winter in the snow.

In March I spoke at Responsive Day Out. Probably the most nervous I’ve ever been…

I went to see Skunk Anansie with my sister, Nini. It was the best gig I’ve experienced.

Every year it’s harder to get all the family in one room, but whenever we do, it’s like this…

We went to Faenza in Italy for the excellent Kerning conference and ended up on an impromptu day trip to Venice with our new friend Nina

I moved to Brighton, and moved in with this nice man.

While Oskar loves Brighton, he wasn’t so impressed by the salty taste of the sea.

Winning the .net award for Brilliant Newcomer. That was pretty amazing.

I started Web Talk Dog Walk, a fortnightly dog walk for locals wanting to chat about the web in the great outdoors.

Then winning the Critter award for Next Big Thing just a couple of weeks later made me totally giddy.

We had a lovely holiday in the very hot North Cyprus

Oskar got big enough for cuddles to be like this…

I gave my first solo workshop in Barnsley to these lovely people

I sprained my ankle again and broke my toe a week later. I’m hoping this doesn’t become a yearly occurance…

I managed to convince the whole family to wear matching jumpers at Christmas…

Following goals for 2013

1. Keep saying yes to things that scare me

The amount of events I did this year was hard to manage; I was so excited at people asking me to speak at events, I said yes to too many. So 2014 will have to be a year of saying “maybe”!

2. Get a better balance of more client work and be more fussy about the conferences I attend (19 events in one year is too many!)

I was very fussy about what I attended, only going to the few events I really wanted to be at (and missing out on a few too…) My balance on client work was much better, and I had a more consistent year financially.

3. Be more efficient with my time

Must try harder in 2014…

Goals for 2014

Until I looked back over these photos, I’d not noticed how solitary 2012 was (there’s not so many people in last year’s photos!) And I want to make next year more sociable still:

Collaborate more.
Be more selective, say no more often.
Challenge myself physically in a new way.

The third goal is because I missed the build-up and fun of the Spartan race last year. This year I want to try something completely different. It might be returning to ballet. Might be.

2 comments

Read the original post, ‘My 2013’.

Interview on Workspiration

Wed, 18 Dec 2013 11:59:17 +0000

A few weeks ago I answered some questions for Workspiration on my hardware and software setup, inspiration and dreams.

Workspiration seems to have collected interviews from a huge variety of people working in and around tech, and with everybody answering the same questions, it makes for a really interesting read. Bonus is that they also (eventually) translate the interviews into Russian. It’s nice to see a site that’s open to non-English speakers!

Read the original post, ‘Interview on Workspiration’.

Why Bother With Accessibility? on 24ways

Tue, 10 Dec 2013 09:45:22 +0000

My article for this year’s 24ways has been published today. I wrote “Why Bother With Accessibility?” after giving my Designing For Accessibility talks, and still coming up against the same excuses. I wanted to write something that could be a go-to for people trying to understand why designing for accessibility was worthwhile. Fingers crossed that this helps, because we can’t talk about accessibility enough!

Read the original post, ‘Why Bother With Accessibility? on 24ways’.

Guest on Beyond Ink podcast

Tue, 03 Dec 2013 09:06:12 +0000

Yesterday the first episode of the Beyond Ink podcast went live. This was a podcast that Rachel had in the works for a while, and we first recorded together a few months ago. Last week we re-recorded that episode, so everything was up-to-date, and I had a fancy new microphone so I didn’t sound as terrible as I did on the last Unfinished Business.

Rachel and I chatted about process, the type of work we like to do and inspiration, amongst other things. I think this will shape up to be a great podcast for insights into different designer’s working processes.

Read the original post, ‘Guest on Beyond Ink podcast’.

Speaking at MKGN this Thursday

Mon, 02 Dec 2013 10:57:42 +0000

This Thursday I’m speaking at Milton Keynes Geek Night. Tickets sold out terrifyingly quickly, but I put that down to MKGN always being a great event.

I’m going to talk about self-discipline, it’s a new talk and so that makes me even more nervous than usual!

Read the original post, ‘Speaking at MKGN this Thursday’.

Unfinished Business #44

Tue, 12 Nov 2013 18:22:41 +0000

Last week I was on Unfinished Business again! Andy and I talked about hosting workshops, business names and how to make a good impression via email. My audio is pretty awful, and I’m sorry for that. I tried to be all clever with my headset, but ended up sounding very small and faraway…

I’m also going to be on Unfinished Business more regularly. I always have fun chatting to Andy, and it’s a great excuse to pick his more experienced brains about business stuff.

Read the original post, ‘Unfinished Business #44’.

Including “ask me anything” in my contract

Mon, 04 Nov 2013 10:14:44 +0000

At Dare conference in September, I saw a great talk by Kevin Hoffman on “How To Rebuild Amidst Crisis.” I loved this talk, there was so much in it, but one thing struck me as something I could carry over into my work: Kevin said he included “ask any question and I’ll answer it” in his contract.

This might seem like stating the obvious at first, but really there’s nothing obvious to a client who is new to you, and your process. And this is even more true for a client who is new to having a website built, or working with web professionals for the first time. There’s no book on how to be a client, and many of us (regardless of whether we’re on the client or consultant side) can often be fearful of asking the wrong questions in case it shows us up as ignorant.

I want my clients to feel comfortable, and that they know what’s going on. I’m sure that sometimes I don’t explain things as well as I could do, or fail to explain some things at all, so having something in my contract that lets a client know that they’re encouraged to ask questions can help make up for my shortcomings. I also believe it’s good for a designer to be challenged. I’ve said before that communication and justification are a large part of our work as designers, and encouraging clients to ask me “why” will only make me better at understanding my own design decisions.

This is the new section I’ve now included in my contract:

Ask me anything

I want you to feel that you understand what’s happening, and why, throughout the duration of the project. Please feel free to ask me any question that comes to mind. I’ll always be happy to answer your questions, explain what I’m doing or how I work.

It might make a difference, it might not. Contracts are a great way to set the tone of your working relationship with your client, so I hope that this will do just that.

2 comments

Kris Marissens
at 10:31am

Loved this article. Learned a few things too. For instance the way English is written by a “native” writer/speaker. Native speaker/writer sounds so stupid, don’t you think? :) Anyway, I hope you don’t mind me sending this, sometimes I guess I’m like that Warren Zevon song. Thanks, Laura!
Shannon Lerner
at 15:26pm

Lovely.
Your Ask Me Anything paragraph has such a friendly tone, much like everything else you publish. Your clients are sure to understand exactly what to expect from you.

Read the original post, ‘Including “ask me anything” in my contract’.

Interviewed by The Learning People

Thu, 31 Oct 2013 10:51:06 +0000

The Learning People have posted an interview they did with me about women in the technology sector, working for myself, and what inspires me.

Read the original post, ‘Interviewed by The Learning People’.

Talking about building with Typecast

Thu, 24 Oct 2013 09:03:51 +0000

Last November at Build conference 2012, I had fun talking to some of the folks from Typecast about building, web design, responsive design and type. They recorded these videos (along with a load of lovely, smart and cool people!) and made a nice collection that you can watch on their website.

Typecast are also giving away a ticket to Build conference 2013 and some Typecast subscriptions. The draw closes tomorrow, so you’d better be quick!

Read the original post, ‘Talking about building with Typecast’.

My Secret is Honesty talk video

Mon, 21 Oct 2013 18:59:45 +0000

The lovely people at Dare conference have released the video of my talk, My Secret is Honesty. It’s pretty much a longer, talk-version of my latest column on A List Apart, “Open for Business.”

I’m not going to embed it here, because I want you to go to the website to watch it. The reason is that there’s loads of great talks on there, and in order to help support Dare conference for next year, they’re taking donations. If you enjoy any of the videos, please donate. Dare didn’t make any money this this, but it was a phenomenal, heartwarming and groundbreaking event. I can’t wait for next year’s!

Read the original post, ‘My Secret is Honesty talk video’.

Open for Business on A List Apart

Thu, 17 Oct 2013 14:04:33 +0000

My second column for A List Apart, “Open for Business,” is now up. I wrote Open for Business as a follow-up to my Dare conference talk about honesty. It’s not the same as the full talk (and has been edited into a far better shape by Rose Weisburd) but is the essence of why I feel that being open works for my business.

One comment

Daniel Dogeanu
at 18:16pm

I read your article on A List Apart and I wanted to follow you on Twitter because the article was so awesome. Then I realized I was already following you. Awesome feeling!

Read the original post, ‘Open for Business on A List Apart’.

I also pledge to be better

Thu, 17 Oct 2013 07:28:18 +0000

This post was inspired by Faruk’s great post “I Pledge To Be Better (And I Hope You Do Too)” where he speaks about the continuing problems with discrimination and lack of diversity in tech, and how more people should speak up about these issues. Faruk rightly says we all have the power and responsibility to make things better. I believe that when we don’t speak out about discrimination, we’re almost causing as much damage as condoning discrimination. Because it won’t just go away if we pretend it’s not there.

I’ve spoken about it before, and I’m all too aware of how I used to be one of those “Fuck You, I Got Mine” women. I want to make up for that. I also believe it’s important that women aren’t scared to be vocal about discrimination and diversity. In fact, it’s of the utmost importance that nobody is scared to be vocal about these issues.

As women, we need to be better allies to those who have suffered. For me, this starts with acknowledging that, whilst my own experiences have been mostly very positive, this doesn’t mean that I’m reflective of the whole industry. It’s too easy to sit in your own self-absorbed bubble. I have so much respect for the people who are standing up and speaking out for diversity, I want to show my support.

It’s not all bad, but it’s more than bad enough

It’s easy to get defensive when you’re reading posts like this, it’s easy to get annoyed at people “focusing on the bad”. I want to be clear that I love 99.99% of the people that I’ve met in the industry, and that a huge majority of people are good and mean well. But we’re not going to make anything better by refusing to see the dark side. We need to confront our problems so we know how to find the solutions.

The pledge

Faruk’s pledge (which you also can find and fork on Github) is a clear set of intentions to help make the industry a better place. I’ve forked my own version, and tweaked it so that it represents my own intentions. This has mostly been removing the part about declining speaking opportunities if it’s an exclusively white/male lineup. As I’m a woman, this puts me in a slightly different position. Still, I want commit to voicing my concerns to organisers if I feel a lineup I’m included in lacks further diversity (within reason). This is a bit wooly, and is all about intentions and contexts, so isn’t so easy to put into a pledge!

I Pledge To Be Better

I want our industry to be a safe, welcoming and inclusive place for everyone, regardless of their gender, abilities, skin colour, sexuality, age, class, neuro-diversity or any other attribute. I acknowledge that this is not currently the case, and will do my best, to the extent that I can afford to dedicate to this, to help make ours a better community and industry.

I value the diversity of perspectives that people with different backgrounds bring to the table. I will call out exclusionary practices, behaviours or cultures and see how, together, we can perhaps reshape them to be inclusive and supportive instead.

I will take some time to read up on, and educate myself about issues such as sexism in our industry. I acknowledge the onus is on me to be decently informed before speaking out, calling out, or participating in these discussions.

I will examine my own privileges, uncomfortable though it may be, and do my best to recognise them going forward.

I will call out people for behaviours that I deem offensive or unacceptable, but I will do so respectfully and with civility. I will strive to educate, not antagonise.

I acknowledge that I will make mistakes, and that I may offend someone unintentionally with my words or actions. Rather than get defensive when called out on it, I will try my hardest to listen respectfully, and learn more instead.

I will not attend events that do not have clear Code of Conduct policies, like an anti-harassment or diversity statement. I will also decline to attend events that feature, or permit to attend, any known offender of sexual assault.

I pledge to be better, and set a positive example for others in our community, industry, and society.

1: The Ada Initiative Conference anti-harassment policy

---

The appeal

Please blog about diversity. It doesn’t matter if you want to pledge for yourself or not, we just need to make it clear that we don’t accept discrimination in our industry. If you don’t have a blog, why not post a quick tweet? If you’re feeling unsure, read these two primers first.

Read the original post, ‘I also pledge to be better’.

Speaking at MobX Conference in Berlin

Thu, 05 Sep 2013 17:05:28 +0000

Next Friday I’m speaking at MobX Conference in Berlin about designing for accessibility, covering problems that affect many different types of screens and devices. It will be my first time in Germany, so I’m very excited!

One comment

Anna
at 10:34am

Hello there,
I very much enjoyed your talk about accessibility at the mobXconference last friday. Is there any chance you can put your slides online?

Cheers, Anna

Read the original post, ‘Speaking at MobX Conference in Berlin’.

A List Apart column and first post on Good Designers, Good Clients

Fri, 30 Aug 2013 09:00:54 +0000

This week the first post was published on my A List Apart column. It’s a very exciting thing for me. I’ve been reading A List Apart since I started learning about the web and loads of people I admire have written there.

It’s good fun and a proper challenge having an editor working with me. I’ve already learned a lot, and I hope to be slightly less hopeless at writing clearly as the months go by…

Read the original post, ‘A List Apart column and first post on Good Designers, Good Clients’.

No more Red Bull

Tue, 27 Aug 2013 09:00:00 +0000

Using a Fitbit over the last year and a half has taught me that making your habits more visible in public makes you more likely to work harder. When you’re giving up a bad habit, often there’s not much stopping us from slipping back into the bad habits. So I am writing here, on Tuesday 27th August 2013 that I am giving up Red Bull.

It sounds ridiculous, but I have a problem

Fortunately I’ve not got to the point where my teeth have dropped out or I have heart palpitations, but Red Bull has been my “one last thing” for the last couple of years. I used to have a terrible diet, and barely exercised, which I wrote about a little in my Fitbit review post.

I’m past that now, I do a lot of exercise and eat healthily but not to the point of obsession. But I’ve still been drinking a lot of Red Bull. Last week I fooled myself thinking that if I swapped Red Bull for organic energy drinks, then it’d be ok. Yesterday I realised that I was just attempting to justify the bad habit. Most people just laugh when I tell them I drink a lot of Red Bull, but you know it’s bad when I tell you that I have Red Bull after breakfast.

Addictive personality

Some people just seem to get addicted to things that much easier than others. I’m one of them. Luckily I’m addicted to exercise now, so it’s not always a bad thing. But through drinking so much Red Bull, I’m also addicted to caffeine and sugar. I’ve tried giving up Red Bull before, but I just ended up eating more pick’n’mix sweets. When I go on holiday or away, it’s often harder to find energy drinks, so I find myself drinking coffee (which I hate) or tea, loaded with sugar. I’m determined to not replace it with other bad sugary things. I’m writing this here so I really do it.

Highs and lows

Caffeine and sugar are great, but the rush is so impermanent. I always say I do my best design work when I’m hopped up on caffeine and sugar. I think that’s probably me making excuses for drinking so much Red Bull! I hope that getting caffeine out of my system will result in a more consistent working pace, where I don’t feel like I have to adhere to all these conditions I’ve invented for myself in order to be productive.

Stand by for the whining

I know I’m going to be annoying, and sleepy. Sympathy should probably be directed towardsAral, who has to put up with me. I don’t deserve any sympathy, I’m just doing what I should have done so long ago!

One comment

Thierry D.W.
at 09:37am

Hiya Laura,
first of all, great desicionmaking here! Avid “water-drinking-and-avoiding-all-sorts-of-coffee” person that I am, I can wholeheartily recommend a healthy lifestyle that doesn’t involve any coffe, redbull or cheap alternative. The only thing that comes close to it for me, is cola, since that stuff keeps me up (and makes me hyper) with even less then half a liter. But since it’s been more than a few years already since I’ve had my last drop, I’d say that that is proof that there can be a life after addiction. You’re not the only one who’s highly vulnerable to addictions there.

The trick that kept me alive through and after the process of the addicition is to have a healthy dose of outgoing alternatives (walking, jogging and running are my favorites), replace the sweet factor by (a lot of) something of the healtier kind (Evian-water is my favorite so far, I’m guilty) and always keep some form of gum at the ready. That last one is to keep your mind of the temptation. Other then that, willpower and short naps are your only friend.

Best of luck (and maybe keep us posted?),

Thierry

PS Sorry I just came around now to posting here, so late after your publication

Read the original post, ‘No more Red Bull’.

Guest on Happy Monday Podcast

Mon, 19 Aug 2013 08:26:55 +0000

Last Friday I was a guest for today’s Happy Monday podcast. It was great fun chatting with Josh and Sarah about design, client work and inspiration.

Read the original post, ‘Guest on Happy Monday Podcast’.

Design theory for the web, a workshop

Mon, 12 Aug 2013 10:18:43 +0000

Here’s a slightly scary thing: I’m doing my first solo workshop on the 11th October 2013 in Barnsley.

I often get asked about the best way to “learn design”, and I usually say that you learn by doing and you learn by watching how others do it. In this workshop, I want to give new designers, developers, and anybody else wanting to learn how to design for the web, a good foundation with five primers, a bit of doing and a bit of watching.

It’s a low-cost workshop. The early bird tickets are just £125, and the full-price tickets are just £165. Fancy joining me for the day? Grab a ticket from the makedo site.

3 comments

Neil
at 14:18pm

Good luck on your first solo workshop, although I’m sure you’ll be great at it.
One thing, how suitable is this for a developer who’s looking to understand more about design? I don’t have much of a design background at all, mostly a server-side developer.
- Laura
  at 14:27pm
  
  Thanks Neil :)
  
  It’s absolutely aimed at developers and beginners who are new to designing for the web. More experienced designers might pick up some tips and tricks, but my main focus is the beginners.
  - Neil
    at 15:12pm
    
    Awesome, I’ll see if I can get my self up there.

Read the original post, ‘Design theory for the web, a workshop’.

Podcast interview with Jonathan Kahn

Fri, 09 Aug 2013 08:52:59 +0000

Ahead of speaking at Dare conference this September, I was interviewed by Jonathan Kahn, one of Dare’s organisers, about being honest, client relationships and mentoring in the web industry.

It was lovely chatting to Jonathan, and his podcast also has a proper transcript if you’re more of a reading person than a listening person :)

Read the original post, ‘Podcast interview with Jonathan Kahn’.

Browser windows and responsive language

Thu, 08 Aug 2013 18:59:17 +0000

In the same way that we continually evolve the processes we use when working with clients, I’ve now found myself evolving and refining the language I use with clients when discussing responsive web design.

“Devices”

It started out with talking about devices. “This design will use X on a mobile phone, Y on a tablet and Z on a desktop computer.” Then it seemed that, as a web community, we realised that the lines between these devices were fairly blurry. There’s no way of telling which device is being used without testing for user agents, and then it’s likely that the user agent string is lying to us anyway.

“Screen sizes”

Next, many of us started talking about device-agnostic “screen sizes”. Being device-agnostic meant we’d hopefully stop trying to make assumptions about user behaviour based on the particular type of device they were using. Mobile phone users could be “mobile” but it wouldn’t make a difference to use because we were basing our designs on screen sizes and using the knowledge that some people could possibly be “mobile” to improve usability and performance for all our users.

But then we still keep hanging on to those devices.

We know that smart phones tend to start at around 320px, tablets possibly around 760px and then we often count anything upward of 900px as if it’s a desktop computer. If we talk about screen sizes like this, they still correspond to the screens on particular types of devices.

“Browser windows”

Nowadays I talk about “browser windows”. Yeah, these are often non-resizable fullscreen apps on the screens of various portable devices, but on desktop operating systems, a browser window could be any size.

If I check out my own site’s analytics, there are visitors from 24 different browser window widths upward of 800px. And my responsive media queries are responding to those browser window sizes. Not the device, not the size of the screen, but the width of the browser window.

And that’s only counting browser sizes at 800px and above. Who’s to say that a user doesn’t resize their browser window so that it’s narrower than 800px? They might be using two windows side-by-side. This would mean that they’re viewing a narrow version of a site, responding to media queries we may have designed with mobile phones in mind…

Trying to be clear

Whilst we’re explaining what we’re doing as designers working on responsive sites, speaking in terms of “browser windows” helps clients (bosses, stakeholders, coworkers, whatever…) understand what we’re really doing. It helps them understand what we can and can’t detect, what we do and do not have control over and help us collectively truly embrace a responsive device-agnostic approach. We need to take care with the language we use, and choose accuracy, even if it means we sometimes have to educate others, over the dumbing-down which inevitably results in expectations we can’t, and don’t want to, meet.

One comment

Adam Krueger
at 19:23pm

Hi Laura,
Great post, referring to the browser when talking about RWD makes a lot of sense. I’ve heard “mobile-first” miss used a lot at my office. This post should help clear up some confusion.

Read the original post, ‘Browser windows and responsive language’.

Sass for designers — the talk and the case study

Fri, 26 Jul 2013 09:00:10 +0000

Yesterday I gave a talk at the fantastic online conference CSS Summit on ‘Sass for designers’. It uses my new site Web Talk Dog Walk as a case study, and explains the basics of Sass and how to get started using CodeKit.

Usually I wouldn’t recommend checking out my slides, as they’re useless without me explaining them, but as this was an online conference and I wanted the slides to be extra clear in case of technical problems, they hopefully read in a fairly easy-to-follow way:

See the Sass for designers slides on my Conferences page.

I’ve also made most of the site code (the stuff not covered by other people’s licenses!) available on GitHub. I’ve tried to make the commits fit in with the slides as much as possible.

Edits: the very kind [Roy Tomeij](https://twitter.com/roy/status/360670152855011328) wrote a post about [when to use mixins vs @extend in Sass](http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html) following my talk. I didn’t know much about @extend, but now I do! So [this is some additional recommended reading](http://roytomeij.com/2013/should-you-use-a-sass-mixin-or-extend.html).

Andy Spicer also asked if I could share my Sketch mockups for the site design. You can download the zipped .sketch file here. I use the latest version of the Sketch beta, so you’ll need to use this to open the file as it may not be compatible with older versions.

One comment

Steven Grant
at 10:52am

A good wee article Laura. Always interested in seeing other workflows. The more I read about Sass, the more powerful it gets.
Until recently I didn’t know about placeholder selectors. Also, with RWD projects I’ve moved my breakpoint calls into a mixin and passing the breakpoint by a variable.

So many great tools out there at the moment :-)

Read the original post, ‘Sass for designers — the talk and the case study’.

Web talk dog walk, the site

Thu, 25 Jul 2013 17:56:04 +0000

I’ve finally made a site for the web talk dog walks! It may be a small site, and is probably very broken in places, but it was a fun mini project and worked well as a case study for my Sass for designers talk.

It also makes use of Perch, that wonderful little content management system. I really would recommend it.

One comment

Richelle Cortis
at 16:10pm

Nice design Laura, and a great ideea to write about your walks in nature, along with the dog and friends. I have a small terrier that I take with me wherever I go. My dear Sheba!

Read the original post, ‘Web talk dog walk, the site’.

Speaking at Dare conference

Wed, 03 Jul 2013 16:49:56 +0000

I’m speaking as a ‘Breakout’ speaker at Dare conference in September. As soon as I saw the rumblings of this conference, I knew it was an event I wanted to attend. It’s focusing on risk, vulnerability, communication and trying to make the world a better place.

Then I realised that I actually had an idea for a talk that could work for this event. I’d wanted to talk about my openness and honesty online, and how it affects my business. I was only just becoming aware of what I was doing, and writing a talk was a good way for me to dig a little bit deeper. So I wrote a proposal and my proposal was accepted.

The talk has a slightly cheesy name, “My secret is honesty” but I promise you, the content is real. I’ve already tested it on a lovely group of people in Porto, Portugal, and hope to have a shortened version ready in September. It’s a very different topic for me, I usually talk about web design and development, but I think it’s the right place for an open talk about openness.

One comment

Read the original post, ‘Speaking at Dare conference’.

Fonts.com mockup fonts

Tue, 02 Jul 2013 09:53:48 +0000

I do like the way that fonts.com do web fonts. (I also like all of the web font services for different reasons and different projects.)

Mockup fonts

Fonts.com have this new system that really works. It involves an app called SkyFonts. This allows you to try out different fonts in your desktop mockups as rentals. Great for static mockups of web designs. You choose the fonts you want on the fonts.com website, and it syncs them to your desktop. I didn’t expect it to work as well as it does, but it just works. (I love using Typecast and working in the browser, but a lot of time I want to play with layout on a canvas.)

However, the plans don’t allow for much

The plans on fonts.com are frustrating. I have a Pro plan. It’s a very reasonable price for what I get, including a Typecast subscription and 1 million pageviews a month.

20 mockup fonts a month

This sounds like a very reasonable amount. Am I likely to use more than 20 different fonts over all my mockups in a month? Maybe only just… Say five family weights (bear in mind, I’m mocking up, not embedding these all on the web!) on four different projects. That’s doable. But if you hover over the details of the plan, you see this:

Mockup fonts are desktop versions of your Web fonts provided exclusively for creating website mockups. Delivered through SkyFonts, mockup fonts remain active for 1 day.

**Mockup fonts remain active for 1 day. **This means that if I want to use the same font two days running, I use two of my allowed fonts. This means working on a mockup for three days with four fonts, I’ve nearly burned through my allowance already.

The next plan up allows unlimited mockup fonts but costs nearly three times as much

As much as I’d like to upgrade just for the unlimited mockup fonts, I can’t justify that cost when I won’t use any of the other features.

Please fonts.com, may we have more mockup fonts?

For those of use who are small (me, just a one person!) web-based studios, it would be great to have more mockup fonts. We’re the people who try out your fonts, and then get our clients to subscribe and buy your fonts. We’re like an extension of your sales team!

I’ll happily pay slightly extra, just not three times the amount

I don’t doubt the value of the fonts, and I’m willing to spend money to get quality. Seeing as SkyFonts is doing a good job of allowing rentals, without any concern for piracy, couldn’t we have more fonts? (Maybe 150 × 24 hour uses a month?)

I know this is an odd blog post, and probably a niche request. I was going to tweet about it, but realised I just have too much to say in a short post. If anyone else has this problem, please leave a comment!

3 comments

Matt Brinkerhoff
at 15:34pm

Hi Laura,
Thanks for taking the time to write such detailed feedback. We see Mockup and Desktop Fonts as one of the most important features of our Fonts.com subscriptions and we’re currently exploring ways to make it better. If you have more feedback, I’d love to hear it at twitter@fonts.com.

Thanks!
Matt

Fonts.com
Jason Bradberry
at 16:28pm

Here here! Yes and yes. And Amen.
Ken Clinkenbeard
at 19:09pm

Has anything changed with Mockup and Desktop fonts since your post. It does not appear so. For Mockup fonts, 20 font/days per 30-day period is paltry on most any design single project. And only 5 Desktop fonts per month is no better. This is especially true at this time, also, when the top plan switches to Unlimited for both categories. I realized they want people to upgrade, but this just plays us as dumb by offering an unusable plan in practice.

Read the original post, ‘Fonts.com mockup fonts’.

Interview in Allan McAvoy’s Freelancers series

Tue, 02 Jul 2013 09:00:11 +0000

Last week Allan McAvoy posted up the interview he did with me as part of his Freelancers series. Some of the questions are fairly standard, but there’s also some unusual ones like “favourite colour for design” and “typical day in the life…”

Read the original post, ‘Interview in Allan McAvoy’s Freelancers series’.

Mentoring Q and A on .net magazine

Mon, 01 Jul 2013 21:19:05 +0000

After finishing the mentoring project last week, I had a chat with Craig Grannell about mentoring which he published on the .net website: “Laura Kalbag: web designers should mentor newcomers.”

It’s a good summary of the mentoring project and has extracts from a couple of testimonials by Sibylle and Phil.

Read the original post, ‘Mentoring Q and A on .net magazine’.

Web talk dog walk II

Thu, 27 Jun 2013 09:29:04 +0000

The last web talk dog walk was a success, with three of us (plus three dogs) taking in the slightly damp wilds of Sheepcote Valley. Now for the next one!

I was originally planning on making them fortnightly but have already failed as I wasn’t organised enough to sort one out this week. This means the next Web talk dog walk will be:

9am on Wednesday 3rd July 2013

Meeting at the same spot on the corner of Wilson Avenue and Roedean Road planning to walk for an hour or so (maybe slightly longer if I continue navigating badly) in East Brighton Park/Sheepcote valley. I drew some routes on the map below, but I’m a terrible navigator so I can’t promise we’ll stick to them. Some lovely people have been clearing the paths in Sheepcote Valley so it shouldn’t be too much of a jungle exploration!

Anyone can join us

No need to bring a dog if you just want to walk and talk
But please bring a dog or few if you’ve got them, walking with a pack makes it more fun!
You don’t have to be a freelancer or professional or even work with the web, just happy to chat
You don’t have to come every time, just whenever you fancy it
We’ll leave pretty soon after 9am so please be on time or be willing to catch us up!
You don’t need to let me know beforehand if you’re coming along, but I’ll know to wait for you if you send me a tweet @laurakalbag beforehand
Wear sensible walking shoes. Trainers should do. It’s a fairly mud-free route, but it can be rough terrain and a bit hilly
Do I need to recommend you wear a jacket if the weather’s grey? Does it ever rain in Britain?

Read the original post, ‘Web talk dog walk II’.

Mentoring: the evaluation

Tue, 25 Jun 2013 11:11:11 +0000

Previous posts on the mentoring project:

[Mentoring a project: the idea](/mentoring-a-project-the-idea/" target="_blank “Mentoring a project: the idea”)
[Mentoring a project: the right project](/mentoring-a-project-the-right-project/" target="_blank “Mentoring a project: the right project”)
[Mentoring a project: finding the right people](/mentoring-a-project-finding-the-right-people/" target="_blank “Mentoring a project: finding the right people”)
Mentoring a project: the project
Mentoring a project: contract and kicking off

It’s been four months since we started the mentoring project and now it’s drawing to a close.

It’s been very different from what I expected, I didn’t realise I’d learn so much just through explaining to Sibylle, Yago and Phil what I do and why I do it. They really wanted to get to the bottom of the ideal processes when creating sites and working with clients and it made me want to do the same.

Tricky areas

There were three problem areas, all of which could have been overcome with more planning and attention on my part. However I think all of these tricky areas are very much reflective of the problems we come across in everyday project management. Maybe I just need to up my project management skills!

Working in a team with strangers

I thought that splitting the project tasks across multiple people would lighten the load, but in reality it also required strangers who had never worked together to get to know each other, the best times to work together, and how to collaborate effectively. That’s a huge first step in the project.

As happens with many client projects, each time they had a face-to-face interaction, or a voice chat, productivity increased. In a remote working environment it can be hard to value the importance of hearing another person’s voice when trying to communicate effectively; seeing facial expressions to understand intent and less formal chatter to just get to know each other better.

I divided the three main tasks for the website project into branding/visual design, front end development, and back end development/WordPress. Despite emphasising that I expected the workload to be spread, with each mentee working as a hybrid, the whole new-to-working-together thing had made this difficult. These roles are not as clear-cut or as simple as they may appear. This led to an unfair, unbalanced workload that was tricky to correct.

Hybridisation

In order to be a successful freelancer, I strongly believe a designer/developer must be a hybrid with a range of skills and a wide knowledge that they not only need to call on for different projects, but can also use to better inform their work with others.

Unfortunately, in giving each mentee a clear non-hybrid role, I was actively discouraging this with the division of roles. I could ask them to “collaborate” until I was blue in the face, but I hadn’t made it easy to do so.

Time

Time is what we inevitably struggle with on all projects. This was no different. It’s hard to estimate how long a web project will take, and when nobody in the project is working full-time, it makes it even harder.

I also wish I had more time and given more attention to the project. I started out with the best of intentions, I waited until I had some time to dedicate to mentoring. But, as ever, my client work expanded to fill all available space, making it harder to keep a closer eye on process and progress.

I made sure I read every email and Basecamp message; checking in when I thought it necessary and answering every question as quickly as possible. But I could have done a lot better. I could have pre-empted more issues before they arose and given tighter guidelines on working process to make the ride smoother for the mentees.

Successes

The Gislingham village website

I genuinely believe that the resulting website, gislingham.com, that Sibylle, Yago and Phil have worked on is a triumph. Its branding, design, structure and underlying code is more than fit for professional web design and development. In fact, in many areas I think it’s exemplary.

The type of project

Thanks to our fantastic client, Mallen Baker, the village community website was a great fit for a mentoring project. Even though the quality of the resulting site was incredibly important, the idea of a not-for-profit community site feels less high-pressure compared to a money-making corporate site.

It had challenges in the best way to display the unique content it already contained, and was going to contain in the future. It also had emphasis on ease of use for less tech-savvy users. This meant continually checking and ensuring ease of use for all potential users.

Mixed disciplines

Even though I split, and may have unevenly weighted, the roles within the project, the whole team had a good idea of what was required, assisted each other in key decisions and could take over from each other when required to do so. This was a testament to the varied skills of the mentees and their flexibility, as well as being a successful element of my hybrid ideology.

Great teamwork

There were times where enviable teamwork took place. Smooth communication, smart analysis and decision-making, and effective collaboration. This made me particularly proud (though it was nothing to do with me!) As someone who often works in teams, but rarely as closely, the fact the team managed to establish these close bonds in such a short time was impressive.

Guidelines for better mentoring

It was my first go at mentoring a web project and I knew it was unlikely to be perfect. I was unprepared for how much it would challenge me, my working processes, and my abilities (or lack thereof) as a leader. I wasn’t great, and I really appreciate the risk Sibylle, Yago and Phil took in joining me on this project.

These are guidelines to help me do better next time, I hope they might be helpful to anyone else looking to mentor other people who are new to the industry or client work:

Guidelines for a better business

There were a couple of things I learnt from the project (and the mentees) that I think could improve my business in the long term. Both of these involve an evolution of my current contract:

Don’t just stop at copyright: specify the exact licenses (Creative Commons, MIT, GNU etc) and whether these are retained by you or the client. I already do the latter but have previously failed to research the former. Doing this should result in a clearer contract with more detailed and universally-understood terms without having to add much more text.
If you have a contract with a payment schedule of 50% up front and 50% on launch, specify exactly what will prompt the final invoice. I haven’t had this structure in my contracts for a while but when I did my contract was vague at best, leaving me to bill when I felt it was the “right time.” This can lead to confusion and uncertainty on both sides.

One-to-one mentoring probably works better

While a team, and the equal division of labour sounds like it might make for a smooth project, there are many issues brought about by many people learning to work together for the first time. If anything, I’d now recommend using an apprenticeship model. Make yourself, the mentor, the other team member, so you can lead by example. Allow the mentee to take responsibility by doing, but also let them learn by seeing more closely how it’s done by a professional.

Face-to-face is probably better

It really is too easy to forget the value of face-to-face interaction when working with other people remotely. I believe that for a truly useful mentoring experience on both sides, frequent face-to-face, or at least voice-to-voice meetings are invaluable.

Ensure the roles are clear from the beginning

It shouldn’t be as easy as assigning “you can do the visual design” to a mentee, sitting back and expecting them to know the rest. The whole point of the project is to provide guidance and so you should be pro-active in suggesting the responsibilities and tasks associated with that role.

Set out standards for client communication

Again, you cannot expect the mentees to know the best way to communicate with clients when they are there to learn from you. Tell them what you’ve found to be most effective and set guidelines and milestones for the project.

Allow more time than you think is necessary, and multiply that by 3

You’re used to working fulltime on projects and your estimates for project duration will probably be based on your experience of similar projects. Remember that your mentee is learning on the job, so multiply by two again.

I’ve been so lucky to work with such passionate and hard-working people. I can’t recommend mentoring enough to others more experienced in client work. Much like people say of teaching or speaking, it really does compound the knowledge you already have, and makes you realise more about yourself than you’d think possible.

2 comments

Mallen Baker
at 11:46am

Well done to you –; and to Phil, Jago and Sibylle, for the great job they did on the site. It was a pleasure working with you all, and I could not be more pleased with the end result.

Read the original post, ‘Mentoring: the evaluation’.

The Critters 2013

Fri, 14 Jun 2013 19:25:35 +0000

After winning the .net award two weeks ago, I really wasn’t expecting to win another award. Last night at a fun black tie, storybook-themed ubelly Critters awards, I won Next Big Thing.

Read the original post, ‘The Critters 2013’.

Fl*t design trend

Tue, 11 Jun 2013 14:41:59 +0000

I’m about to apply a mute filter to the word “flat” on Twitter. That or start unfollowing a lot of people.

What’s flat?

There’s an aesthetic “trend” that’s been around for a while. It involves fewer gradients and textures and has thus been described as “flat” design. It’s often described as the opposite of “skeuomorphism,” (which is an equally irritating word when used in this way.) It was popularised by Windows Metro and, being an aesthetic associated with fewer images, and thus better performance and more flexibility in the development of interfaces, has been a feature of many designs in both apps and on the web.

Design described as an aesthetic summary

Aesthetics are just one facet of design. Something may be pretty, but a horrible user experience. Something may be pretty, but completely inappropriate for the audience or the business. Every decision made in the process of creating a product is by design. There is so much complexity to design, and to judge an interactive design purely on an aesthetic basis is simply superficial.

Trends

Trends are fine, and inevitable. Designers are inspired by each other, particularly the more effective solutions to common problems, and consequently some work ends up looking much like other work. However, to dismiss work that is aesthetically similar as part of a trend is often insulting to the role of a designer.

Yes, many (charlatan) designers will simply reapply an aesthetic to the content they’ve been given and call it “design” without questioning whether it’s appropriate for the content or easy to use in its behaviour. But true designers do not just assign aesthetic styles to content.

There will be a decision and a reason behind choosing that aesthetic. It will be used as a design language to communicate to the user how to interact with the product. It will be affected by, and have implications for, the use of the product and the build process. A million tiny decisions will have been made to come to that aesthetic conclusion.

And I’m sure that decisions made by 99.99% of designers will not have been “I’ll use the flat design trend.”

Notes:

*This post was inspired by the many people on Twitter criticising Apple for “following the flat design trend” (and the many variants on that comment) with their iOS7 interface design. I’m trying not to be snotty when I say this, but I’m reserving judgement until I’ve had a device running iOS7 in my hands for a few days.*

*Aral wrote a very good post on “[Design is not veneer](http://aralbalkan.com/notes/design-is-not-veneer/)” which explores this topic in more depth and is well-worth a read.*

12 comments

Dan Davies
at 14:49pm

I’ve found the whole debacle really funny. Dribbble seems to house many designers that believe their opinion is higher than that of Apple themselves. Give it a few months and they’ll be knocking out icons just like Mr Ive whilst sipping on their skinny latte.
Bugger them all, I just plan to do stuff my way.
Andy Hunt
at 14:59pm

My initial reaction is that I don’t like the icons or the colour palette. However, Im also aware I’m looking at the design ‘blind’ and that this direction has been taken due the UX and new features that have been put in.
Simon Mason
at 15:01pm

I get more irritated by the fact Apple’s website still isn’t responsive, because, you know pinch and zoom is all you need …
Anyway come October there will no doubt be lots of praise for the new iOS7 shiny.

Funny how people love the new but hate change.

Ho hum
Mark
at 15:03pm

It is nice to see designers putting things in context like you are doing here.
Somewhere along the line the idea that flat is better or even the correct way to design established a critical mass. Many designers seem to be adopting it without much questioning.

Careful, do not drink the Kool-Aid.
Cliff Huizenga
at 15:11pm

I guess the world that revolves around Dribbble has kind of spoiled me when it comes to design. I see all these great works — many of which do follow trends, but also great unique ones — so I expect something mind-blowing from Apple. While the fl*t design in the apps look nice, those home screen icons (mainly Safari and Mail) simply look rushed and condensed. Their design gives the impression that they were changing the look for the sake of “de-Forstall-ing” iOS and getting it ready in time for WWDC, not because it’s truly a better experience.
Honestly (and I’ll probably be shunned for saying this), the new Weather app is a great example of an excellent design with a pleasant experience. It’s simple, can be used easily, makes sense, and just begs to be used for its visuals. And those backgrounds make them not entirely fl*t in design! ;)
Lee Griffin
at 15:13pm

It’s a tough one, Responsive Design is probably in the same sort of category, I’ve written in the past about how “responsive design” is made up of so many little micro design decisions that vary between implementations that it is ok to use the term even though it isn’t always used the way a purist may want it to be used (completely fluid layouts). In this light flat design has to be seen not as a comment on a design style but a set of design practices that culminate in an end product that resides in the aesthetic group we would call “flat design”.
I guess the problem with the prevalence of the “flat design” trend as a meme (which, let’s face it, is really what this is…right?) is that it creates an atmosphere that draws an illusionary line between modern professional practice and out dated or unprofessional practice.

The use of the term flat design throughout our literature, magazines are big culprits when it comes to this, actually causes our industry harm. Even if people don’t think they’re doing it, there is a whole ethos that a certain “type” of design is the way things must look, otherwise you are just “not doing it right”.

I don’t mind people using the term flat design so much as how or why they use it, I guess is what I’m trying to say.

The whole nonsense with iOS7 is quite funny in this respect because despite any of my personal opinions about it, if Metro was what spawned flat design then iOS7 is by no means a “flat design” solution. The UI world is not either skeumorphic or flat, as you say! If we want to attach a label then one that has been used among plenty of 3rd party android developers over the last couple of years for their UI apps seems more apt and semantically accurate… minimalistic design.
- David Blanchet
  at 04:08am
  
  But who wants to say minimalistic when flt is shorter and faster and will get you winks from the geeks on their tablets at strbucks :D
  
  btw I 100% agree with you.
- Lacey Tech Solutions
  at 15:17pm
  
  Talking in very general terms, I prefer an uncluttered interface that uses design elements (gradients, drop-shadow, text-shadow) sparingly.
  
  Just because you have the ability to do something, doesn’t mean you have to. Design in its simplest form (usually) lends itself to uncomplicated user interfaces that are easy to use. Using simple blocks of tonal colour (like your site) looks nice, its simplistic but it lends itself to faster loading times, which always helps.
  
  I’ve seen the iOS 7 interface and icons and whilst I like some aspects of the update I really don’t like some of their new icons. I think Apple lost their innovation with the death of Steve Jobs and now they’re copying what others are doing –; and that will only end in Apple losing everything that made them great.
- Michael Hastrich
  at 15:21pm
  
  Yes! You are totally right.
  We have absolutely no idea how the designers at Apple got to their design decisions, so to simply dismiss this to following a trend is wrong is so many ways.
  
  It’s also one of the things I dislike about show-pretty-picture-sites like Dribbble.
  Often we get no background information on the why and how for a design. No idea about the client it’s made for (if any client is involved in the first place), the brief or what so ever.
  Like Aral wrote in his post, we can’t stress enough that design isn’t about pretty pictures. It’s about all things involved in a service or product.
- Iain
  at 19:05pm
  
  I think Flat is a bullshit term. It’s not a new thing, and I’m sick of it being seen as such. Metro is typography based, but inspired by the use of Type and Grids by the Swiss (if you’re a designer and have no idea on the Swiss Style, you REALLY need to be educated about this stuff), which was simple, and minimal. Flat is nothing more than that. The fact it has that word as if it’s a new thing really annoys me.
  If you’re going ~~flat~~ minimal, at least do it well, and put it good practice. I’m tired of everything “needing” to be flat, let alone the atheistic being more important than the objective. ~~Fuck~~ the flat police.
- Steve Perry
  at 08:54am
  
  A great post, Laura, and one that I have been considering myself, and for the same reasons.
  Far too many think that a few minutes of subjection to videos of a user interface (of iOS7) qualifies them to over rule many months of painstaking design decisions that Apple have made over the last year or so, most of which will probably go totally un-noticed. Frankly it’s embarrassing to hear these people call themselves designers.
  
  Everyone’s a critic when it comes to the visual elements of design but, as you mention above, that is only one small part of the whole.
  
  Thanks for sharing, Laura.
  
  Steve

Read the original post, ‘Fl*t design trend’.

Speaking at Untangle the Web

Mon, 10 Jun 2013 11:09:40 +0000

Nothing quite like a last-minute post… Tonight I’m speaking at Untangle the Web at Google Campus in London. I’m doing a talk on Design Theory for the Web where I do a whistle-stop tour through designing with typography, grids and colour on the web.

I also have a stinking cold so I’m going to be taking industrial quantities of Red Bull and a quarantine zone with me.

One comment

Suleiman
at 17:25pm

I was looking forward to this when I heard you was speaking but at 5:20pm just over an hour before it starts I’m having to forfeit :(
If possible post up the video and/or slides so we can soak in your snot muffled wisdom.

Thanking ye’ :)

Read the original post, ‘Speaking at Untangle the Web’.

Web talk dog walk

Sun, 09 Jun 2013 16:13:31 +0000

I walk my dog Oskar every day, no matter what the weather. And usually it’s just him and me. So I’ve got this idea. A “web talk dog walk” where a group of us from the Brighton area can meet on a regular basis (probably fortnightly, maybe monthly) to walk dogs and chat about the web. Do you want to join us?

The first walk is 9am this Wednesday 12th June 2013

The best place to walk in the area (and conveniently near to where we live is East Brighton Park/Sheepcote valley. Asides from at the very start of the route, it’s a long way to any roads so it’s safe to let the dogs off the lead. The easiest place to meet is on the corner of Wilson Avenue and Roedean Road. I’ve planned out three of my favourite walks on the map to give you a rough idea of how far we tend to walk. Oskar is a big dog and I walk fairly quickly but we’re happy to do shorter slower walks depending on the company and the weather(!)

Anyone can join us

No need to bring a dog if you just want to walk and talk
But please bring a dog or few if you’ve got them, walking with a pack will make it more fun!
You don’t have to be a freelancer or professional or even work with the web, just happy to chat
You don’t have to come every time, just whenever you fancy it
Oskar gets along with all sizes and breeds, so please don’t be intimidated by his wolf-like appearance!
We’ll leave pretty soon after 9am so please be on time or be willing to catch us up!
You don’t need to let me know beforehand if you’re coming along, but I’ll know to wait for you if you send me a tweet @laurakalbag beforehand
Wear sensible walking shoes. Trainers should do. It’s a fairly mud-free route, but it can be rough terrain and a bit hilly

And now I wait and see if anyone can come along. If this day/time is inconvenient, then I’m happy to reschedule next time!

Oskar in Sheepcote Valley

Read the original post, ‘Web talk dog walk’.

Speaking at LXJS in Portugal

Sat, 08 Jun 2013 09:10:59 +0000

I’m really looking forward to October, where I get to return to Portugal to speak at LXJS in Lisbon.

One of the reasons I jumped at the chance to speak at LXJS was their fantastic Code of Conduct. After hearing some horror stories from other women speakers, I wish more conferences had this sort of approach. It’s friendly, not strict, and lets everybody know where they stand.

The tickets are incredibly reasonable for a two-day event, and it looks like Lisbon is well-worth a holiday so a conference there is a bonus!

Read the original post, ‘Speaking at LXJS in Portugal’.

#define 2013

Fri, 07 Jun 2013 11:24:22 +0000

Next Saturday I’m speaking at #define 2013, a “diversity in computing festival” for 11-13 year old students who wouldn’t usually consider careers in computing.

It’s an event aimed at improving diversity in computing and I’m really proud to be speaking. I’m going to talk about a day in the life of a web designer/developer in the hope that I can share the variety involved in this kind of work and how rewarding and fun this job can be. I’m also hoping to promote a more independent way of working, showing that you don’t have to go and work for somebody else when you leave school, and that working for yourself isn’t necessarily the financial hardship that it’s often painted as.

Read the original post, ‘#define 2013’.

.net awards 2013

Sun, 02 Jun 2013 09:32:12 +0000

Last Friday, this happened. I really didn’t expect it; I tripped over on the way up to the stage and mumbled through a thank you while the microphone was mostly switched off. Despite being clumsy and totally inarticulate, I was delighted. It didn’t just make my day, it made my year :)

Read the original post, ‘.net awards 2013’.

Guest co-host on Unfinished Business II

Mon, 20 May 2013 09:07:45 +0000

Last Friday I was a guest co-host on Unfinished Business again. It was great fun, Andy and I spoke about clients, how location affects our businesses, how to find good subcontractors and Star Trek.

I’m a massive fan of Unfinished Business and listen to every episode so it was a real treat to go back again. Thank you for inviting me, Andy!

Oh, and one more thing: Slide + Stage

One of the sponsors this week was Slide + Stage, a full-day intensive masterclass with Aral Balkan. It’s going to be brilliant and I’m going to be there. I’ve already written a post about how much I’ve learnt from Aral, and if you want to speak at events, or even just become better at presenting your work to clients, I really recommend you come along.

Read the original post, ‘Guest co-host on Unfinished Business II’.

Sass For Designers at CSS Summit 2013

Thu, 09 May 2013 09:13:01 +0000

I’m speaking at CSS Summit 2013 about Sass For Designers. CSS Summit is a great online conference, meaning you can attend from anywhere in the world (hooray!)

There’s a huge amount of expert speakers across three days, with a day each dedicated to CSS3 Training, Advanced CSS and Preprocessors. I’m on the third day, covering the basics of Sass with ‘Sass for Designers’. The other talks on that day will cover Sass in more depth, with case studies and more advanced techniques, so I’m hoping to provide a useful introduction for those of us who are less familiar with programming.

20% off!

If this sounds like your kind of conference, then you’ll want this discount code. Use 20LAURA to get 20% off individual or meeting room tickets.

2 comments

James
at 16:07pm

Hey Laura
Big fan of you in the industry. Small thing i just noticed on your comment form on your website (this one!). You don’t have an asterix on the Comment field, even though this is a required field. Annoying as this is the wordpress default, they should fix this also.
- Andrew
  at 12:09pm
  
  What’s the point of using a comment form if you don’t leave a comment? Hmmm?

Read the original post, ‘Sass For Designers at CSS Summit 2013’.

Mentoring a project: contract and kicking off

Tue, 07 May 2013 18:58:42 +0000

Previous posts on the mentoring project:

[Mentoring a project: the idea](/mentoring-a-project-the-idea/" target="_blank “Mentoring a project: the idea”)
[Mentoring a project: the right project](/mentoring-a-project-the-right-project/" target="_blank “Mentoring a project: the right project”)
[Mentoring a project: finding the right people](/mentoring-a-project-finding-the-right-people/" target="_blank “Mentoring a project: finding the right people”)
Mentoring a project: the project

It’s been far too long since I wrote about the mentoring project. I’ve been incredibly busy and really needed to dedicate more time to make it a success (more about that in another post!)

Last time I wrote about the project, we had just started to get the contract sorted. I use an evolved version of Andy Clarke’s Contract Killer for my client projects. Over the last four years I’ve amended it, and added in extra chunks, to prevent myself from repeating the same mistakes on multiple projects.

I reused this contract again for this project, adding in some extra text about my responsibility as a mentor to the client and mentees. We then decided, prompted by the client’s desire to potentially share the code with other community projects, and Yago’s knowledge of Creative Commons licenses, to license the code under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported license.

Licensing code

It’s an interesting and important part of the contract, and merits discussion. Previously I had always used the Contract Killer’s lines about licensing where the client has all the rights to the graphics/design elements, whereas the developer has the rights to the code and licenses it to the client for one use.

This always seemed to make sense to me before, it restricts the client from rehashing your code for a different project, or even reselling it to others. But code is not a static one-off document. A website, and subsequently its code, is a living document which is usually frequently updated, fixed and improved upon. How does this then work with a one-use license? Are we then telling clients that if they need any code to be changed, they must re-hire us for the job? This wouldn’t work for most client-developer relationships. As an industry, we seem to have mostly moved to a model where we give clients the tools and knowledge to keep their own sites updated. Maintenance contracts are a thing of the past for all but the most complex systems.

Yago found the perfect license for our particular case, where we wanted to allow the client to share the work on a not-for-profit basis, but I do urge you to look into the correct license which really makes it clear what the client is and isn’t allowed to do. And the wonderful thing about Creative Commons is that they write the licenses in plain English. This means the licenses work with the Contract Killer, and also makes it easy to find the best license for the job.

It all takes time

Sorting out the contract took a lot more time than I’d have liked. When so many parties need to sign a contract, it can take a lot of to-ing and fro-ing before it’s agreed upon. Add in email-based communication and people working on the project part-time, and it took us a good couple of weeks to get it all ironed out. Far too long.

I use Right Signature to get documents signed online, and I was jumping into it too quickly. It’s fairly quick to email a PDF (or even better, pasted text) of the contract for all the signers glance over before they need to sign. As fantastic as Right Signature’s sequential signers option is, it’s a complete pain if you get to the last person to sign the contract and they need to make an amendment!

After the contract

Once the contract was signed, having roles within the project actually become useful. Whilst I expected Yago, Sibylle and Phil to work as hybrids, collaborating on design and development, their responsibilities to lead on front-end development, content and WordPress and design (respectively) meant each could be responsible for planning more in-depth requirements for that area. These requirements took a while to nail down but provided a structure to work from, and gave each mentee a better idea of what the others were doing.

One comment

Michael.
at 11:46am

When it comes to licenses for code, I see nothing wrong with the old standards: the GNU General Public License, and the GNU Lesser GPL. Particularly when working with WordPress, where plugin and theme code is meant to be GPL compatible, using the GPL just makes sense. Yes, it does mean that the client could turn around and re-use, re-sell or whatever, the code. But considering that your name should be clearly identified anyway (in the license block at the top of each file), it will be obvious who to turn to to fix any issues.
Moreover, by using a license that permits re-use, modification, etc., you are clearly saying, “I am not locking you in to my services, if you’re not happy, you can go else where with no problem; I’ll try and keep you happy”. And I think that’s valuable in and of itself.

Read the original post, ‘Mentoring a project: contract and kicking off’.

Psychology for designers

Mon, 15 Apr 2013 08:55:45 +0000

This week I went all out and bought all the currently-released Five Simple Steps Pocket Guide digital books. I say “went all out”, they’re an absolute bargain at £6 for a collection of four, or £2 per book. Reading this book thoroughly, following the links in the text, took me about an hour. I’m a fairly fast reader but can be slow to digest new ideas.

Read the original post, ‘Psychology for designers’.

Learning to speak

Thu, 11 Apr 2013 17:46:03 +0000

Just over a year ago, I was in a country I’d never visited, about to give two talks I’d never given before to two large, paying audiences in the space of three days at Future Insights Live. I had only given a couple of talks to small audiences before. It was one of the scariest things I’d ever done.

A helping hand

I’d seen Aral Balkan speak a few times before. His talk at Future Of Web Design had blown me away. I recommended him to my friends who organising The Big M as a must-have speaker. On the first of the five days at Future Insights, Aral kindly offered to go through my talks with me. In just one hour, I had learned so much, and my confidence increased hugely. My talk the next day went down really well. We repeated the process the following day, my next talk was also a success. I’d done it, I started getting more and more speaking offers.

Not just me

Over this last year I’ve learned I’m not so special. In fact, I’ve seen and heard about Aral giving speaker training to many people. Some have gone over their talks a few times, some have had last-minute reassurances. Everyone has come out happier and more confident with their talks.

Lots to learn

The things I’ve learned from Aral haven’t just been “how to give a talk”. There were so many facets I’d never even considered before. How do I walk on the stage? How do I finish my talk? How do I set up the stage? How do I interact with the audience afterwards without just being awkward?

It’s never about over-thinking my talk, or treating my talk like I’m giving a world-class performance. It’s about being prepared.

We’re all different speakers

Aral never tried to make me speak like him. He’s naturally very funny on stage, his jokes have audiences roaring. I’m not like that. I can never remember the punchline and have a unique talent for making jokes really uncomfortable. Aral taught me how to improve my own style, working on basic principles that apply to everyone, and how to fight awful bouts of nerves and anxiety.

The masterclass you shouldn’t miss

Aral didn’t ask me to write this post. If he did, I would’ve said no, I’m contrary like that… I wanted to tell you about the masterclass Aral is holding in June, where you can benefit from all the things he’s taught me, but in the space of one day.

A lot of people ask my advice on speaking, and honestly, I just pass on what Aral’s taught me. The best piece of advice I can give you is to take this masterclass. It’s very affordable (I say this as a wary freelancer!) And I promise it will make a huge difference to your talks.

7 comments

Jonic
at 17:52pm

“I … have a unique talent for making jokes really uncomfortable.”
Unique, you say? ;)
Laura
at 17:52pm

Yeah, jokes, Jonic. Your unique talent is making *everything* awkward… ;)
- Jonic
  at 17:54pm
  
  Well we all have to have a hobby.
- Jeff Lau
  at 18:01pm
  
  That made me lol.
- Sam Barnes
  at 22:32pm
  
  Ello, I just mailed Aral about this… very interested indeed.
- Suleiman
  at 15:18pm
  
  I did my first mini speaking gig at Untangle the Web and even though I had a lot of very nice comments, me, myself thought it was a train wreck. I think the main problem was I wasn’t myself and probably came across more like a robot in some stages. It was a small talk about why people that are using CSS should use Sass and how easy it was to get started.
  Afterwards I realised I didn’t even explain what Sass stood for :/ It was one of those talks :P
  
  If I could I would most definitely go to Aral’s workshop. I’ll never forget seeing him for the first time at FOWD. His talk was totally engrossing and very informative.

Read the original post, ‘Learning to speak’.

Responsive Day Out

Mon, 01 Apr 2013 22:52:39 +0000

A month ago I spoke at Responsive Day Out, an “affordable, enjoyable gathering of UK designers and developers sharing their workflow strategies, techniques, and experiences with responsive web design.” As I said to Jeremy Keith when he first asked me if I wanted to do it, this would be a day I couldn’t possibly miss, regardless of speaking. It very much lived up to my expectations.

After a whole month of mulling over the talks in my head, and chatting to other people who were there or who have listened to the talks since (you can listen to them here, or watch them on BeSquare), I’ve joined a lot of dots in my head. I had intended to publish this writeup just a few days after the event, but burnout and a whole lot of client work got on top of me.

The hugeness that is Responsive Web Design

Elliot Jay Stocks described Responsive Web Design as being about “making your site accessible and adaptable to any device, regardless of the design.” Bruce Lawson described it as “make it work everywhere or else you’re a walrus.”

For a seemingly niche subject for a day-long conference, the amount covered in this day was huge. As Mark Boulton put it in the closing talk, responsive web design is, in a way, bigger than web standards. It disrupts far more industries than our own. The subtleties in the markup that we write is only visible to us as developers, but responsive web design has an effect on any user of the web, and any industry that has a presence on the web.

Despite having such a huge impact on modern web design, there wasn’t anyone really preaching that responsive web design is the “one true solution”. One of the first points David Bushell made was that if a site that isn’t optimised for small viewports and isn’t too hard to browse on mobile, then it’s worth considering whether an alternative is really worthwhile.

All the devices

Since the dawn of Responsive Design (and before that, really) we seemed to focus on making our sites work on particular mobile devices. Namely the iPhone. It made life easier as we just had to design for a few more specific widths of websites.

Many of the speakers at Responsive Day Out spoke about how we need to break away from designing for specific devices, as you’ll never be able to cater for every user, and there is no average, normal or most common viewport width or capabilities. In his talk about future-friendly browser support, Tom Maslen posited that there are far too many edge cases (almost every device is an edge case in some way) to take this approach, and that you have no idea what’s going to come out next week or next year.

“You’re never going to win, you’re playing the wrong game…” David Bushell on designing for devices

“Device detection isn’t futureproof. Avoid.” Anna Debenham on designing for devices

Anna Debenham—Device detection isn’t future proof. Avoid.

As Tom Maslen pointed out, we’re foolish focusing on devices. Before responsive design, did we ever talk about whether a website worked on a particular Dell PC or a MacBook? We didn’t, we thought in terms of browsers and whether our sites worked in Internet Explorer 8 or the most recent version of Firefox. This makes it much easier to test and gives us a much narrower set of requirements that our sites need to fulfil.

David Bushell explained how screen size doesn’t equate to viewport size, as many desktop users, especially those with very large displays, will use browser windows much narrower than their screen. Something that I also touched on in my talk was that you can’t judge what device is being used, or what user is doing based on the size of their viewport. A narrower viewport does not necessarily guarantee a mobile device, or low bandwidth or that the user is “on the go”. A narrower viewport could just mean that the user has stuck the browser window to one side of their enormous display on a high-end Mac, using broadband while at work in their office.

Breakpoints and tweakpoints

Many of the speakers discussed breakpoints, but not obsessing over them as the defining feature of Responsive Web Design. While most of us have been guilty of basing breakpoints on particular (Apple!) devices, the focus was on moving away from device-based breakpoints.

Mark Boulton suggested that breakpoints should be based on changing user experiences based on the features and capabilities of the browser; using “macro breakpoints” when something big happens, such as a layout change, and mostly basing your CSS around “micro breakpoints”, on the little tweaking details that add up to 80% of your styles. These are very much along the same lines as Jeremy Keith’s “tweakpoints”.

In my talk I shared my ideas of basing breakpoints around the optimal display of the content, as every content element has an ideal maximum width and and ideal minimum width. Using the content in this way ensures the best browsing experience, as well as using constraints derived from the one thing that won’t change in the future.

Bruce Lawson also touched on making assumptions about types of user interaction based on viewport size. Bruce gave the example of browsing a site on a TV. Whilst the TV screen is very large, the distance at which you sit from it makes the interaction more akin to using a mobile device, they occupy the same space in your field of vision.

Not just screens, but inputs

Anna Debenham’s talk on consoles showed us the wide range of web browsing experiences on gaming devices, and how the inputs and interactions on these devices have a huge impact on the browsing experience. Combinations of touch screen and voice input, stylus wielding, button hitting, pointer waving and joystick nudging can make the web a challenging experience on consoles, however Anna emphasised that designing specifically for these devices isn’t the way forward. These devices are rapidly improving their support for web standards, so building a site with web standards, multiple contexts and accessibility in mind will inevitably result in a site that’s a joy to use on a console.

“Don’t design for consoles, design for everything and nothing.” Jeremy Keith summing up in the panel session after Anna’s talk

Designing for features and capabilities

Mark Boulton, Andy Hume and Tom Maslen all spoke about designing for features and capabilities instead of devices. This is tied in with the idea of progressive enhancement, which many of us have been using as a web development mantra for years. Tom Maslen named his talk after the technique of judging browsers which “cut the mustard.”

Cutting the mustard

Tom Maslen and Andy Hume both work on large news sites (bbc.co.uk, guardian.co.uk) and so shared their experiences of practically applying responsive design to huge content-heavy sites. Their technique of “cutting the mustard” is to define a list of browsers deemed to be ‘modern’, with a certain set of features and capabilities, and then delivering a progressively enhanced experience to those browsers only.

This technique relies on building a simple core experience where the content is accessible from any device. Andy suggested there are three stages of the page load, where only one is vital:

“content”: HTML and CSS
“enhancement”: javascript which enhances the experience with rich/interactive media
“leftovers”: analytics, ads, and anything else which is least important to the users but useful to include on the page

Tom pointed out that using this technique would mean no time wasted on polyfilling, or other ways of trying to make the older/less capable browsers support the same enhancements. As the browsers that cut the mustard all support modern standards, you can be assured of a good level of support for CSS and other modern technologies.

This approach is far easier to manage than the BBC’s previous strategy of supporting a specific table of browsers, using graceful degradation to give a similar experience to all users. This was all easy enough when all browsers were free, uncomplicated and easy to test; where you could test most browsers on either a PC or Mac, but now you need to invest in an enormous array of devices to test on every browser.

Tom Maslen demonstrating the BBC’s previous strategy of supporting a specific table of browsers

More markup and code

“The web and web standards have always been responsive”-Bruce Lawson on how the web is inherently flexible.

Bruce Lawson started his talk saying that we constrained ourselves on the web. Mark Boulton later pointed out that we didn’t really constrain ourselves, we’ve been using the web for everything and anything when it was really just designed for memos. The web wasn’t designed to be inherently flexible, it just happened that way.

Fluid design

However, Bruce was really highlighting the fact that we could have been developing sites based on fluid layouts for years, it’s just that most of us have been falsely constraining ourselves with fixed-width layouts in order to give us more control. Throughout the day, Jeremy Keith relished in telling us how he’d always worked in this way and how it made the move to responsive layouts significantly easier.

Andy Hume spoke of an ideal future where every component of a site would be standalone, as a modular part of a greater system. Building our sites in this way would mean we didn’t even need to rely on media queries. If we built our components to suit any width, embracing fluidity, they would fit any device without forcing particular responsive behaviour.

All the CSS possibilities

Bruce Lawson introduced us to a huge amount of existing and up-and-coming standards that we’ll be able to use to make responsive design much easier.

Viewport meta and @viewport

Bruce explained how the viewport meta tag meta name="viewport" content="width=device-width" is a bit of a blunt instrument, and how it’s really mixing presentation into our structure as it’s telling pages how to display from within the HTML and not the CSS.

Bruce showed us a potential solution using an @viewport rule in your CSS which could replace the viewport meta tag and allow for more sophisticated combinations of viewport and media query rules.

Some next level CSS

Under the cheeky name of “CSS Level 4”, Bruce walked us through some proposed additional media queries:

(script) which can be used to provide fallbacks or enhancements based on whether the browser supports JavaScript
supported inputs and interactions such as (touch), (hover), (remote) and (keyboard) which can be used to optimise the user experience based on the capabilities of their device

These could be used to replace the functionality of something like Modernizr, where JavaScript is used to detect browser capabilities.

Flexbox

Read the original post, ‘Responsive Day Out’.

Guest co-host on Unfinished Business

Mon, 01 Apr 2013 10:17:14 +0000

Last week I was guest co-host on one of my most favourite podcasts, Unfinished Business. It was great to ramble and rant with Andy for 90 minutes as it’s not often I get to chat for so long to another designer whose main focus is client work.

We talked about smoking chimps, mentoring and how we can try to help newcomers in the community, tools and techniques for dealing with client feedback, egos and constructive criticism among many other things.

Read the original post, ‘Guest co-host on Unfinished Business’.

Alfred App v2 theme

Sat, 30 Mar 2013 20:09:49 +0000

Today I finally got around to playing with Alfred v2. This is the one OSX app I’ll allow to open on login, I use it to launch every app and find every file. I use it to work out maths for my CSS and double-check the meanings of words I’m about to write. And it does so much more.

I was playing around with the appearance and made a really minimal theme. There was a handy sharing feature so I thought I may as well share it…

Minimal Alfred v2 theme

Grab my Alfred v2 ‘Minimal’ theme. If you’ve got v2 installed on your machine, this link should auto-add the theme to your app. If you don’t, it won’t do anything!

Read the original post, ‘Alfred App v2 theme’.

Speaking at Breaking Borders

Fri, 29 Mar 2013 16:01:21 +0000

Next month I’m speaking at Breaking Borders. Breaking Borders is a brand new, totally free, bi-monthly event in Reading organised by my good friend, Ben MacGowan.

The inaugural Breaking Borders event will have the lovely Steve Workman speaking about Front-end web architectures that won’t bite you (in the ass) and me speaking about design systems.

If you’re in the area, I really recommend you join us. If Ben’s events are anything like his front-end development skills, it’s going to be great!

Read the original post, ‘Speaking at Breaking Borders’.

Ladies In Tech

Tue, 26 Mar 2013 14:15:22 +0000

A while ago, Jeremy Keith introduced me to ladiesintech.com, suggesting that it might be something that’d interest me. After having a chat with the lovely Jenn Lukas over email, I had a story that I wanted to share about my adventures in speaking, and Jenn has now helped me share it on the site.

This was the first time I’ve ever had anybody edit my writing. I’ve had other people proof-read and check my writing for mistakes, but never changing that much (despite often needing it!) Jenn teamed me up with Steph Hay, who was so kind in helping me un-jumble the story into a more coherent order and make sure I made my points clearly. They both gave me a lot of support and encouragement along the way too!

My post on ladiesintech.com is about asking for help, and how I stopped making excuses and found the confidence to get into speaking with the help of other people.

One comment

Jenn Lukas
at 20:50pm

I never knew how hard it was to edit until being involved in this site! It’s taught me so much, both being edited myself for my article as well as watching the process with others. It’s an interesting break from development, but also one that reminds me how much I love development. ;)
So happy Jeremy got us in touch!! And double happy that you shared your story with us!! I truly believe the more we share, the more we understand that feelings of nervousness are okay but the reward is totally awesome!! Thanks for helping us spread that story!

Read the original post, ‘Ladies In Tech’.

Interviewed on The Industry

Thu, 14 Mar 2013 07:36:06 +0000

Last week I had a chat with the lovely Conor O’Driscoll and last night he published the interview on The Industry. We talking about design work, education and what I define as success, among other things.

Read the original post, ‘Interviewed on The Industry’.

Burnout

Tue, 12 Mar 2013 20:41:36 +0000

Burnout. Spending hours just staring into space when you’re supposed to be doing work, when you want to be doing work. Feeling foggy-headed and grey the whole time when you usually feel eager and excitable. Menial tasks are just about manageable, but anything requiring careful consideration or creative thinking feels impossible. I sleep but I still feel tired.

I’m burned out. The last couple of months have really taken their toll. I tend to always be on top of my work schedule, ensuring I don’t work late into the evenings or weekends on client work, as I know I need time away from the screen to spend on my social life and my health. However, due to some client work getting out of hand, over-optimism with scheduling, and a talk at Responsive Day Out (speaking is always exhausting), I got through the mad rush and just couldn’t do any more.

Adam Onishi has spoken extensively about burnout, and I know I’ve got it lucky. Burnout can be a bad side effect of really caring about your work, and I’ve always been aware that I’m inclined to over-work and so need to keep myself in check. I rarely lack motivation (though sometimes lack confidence), I love what I do. Burnout is not laziness, it’s illness.

Dragging myself out of it

After a week of feeling incredibly unhappy, I spent a weekend trying to escape work. But spending the weekend worrying about the amount I had to do once the weekend was over made it worse. The first step to dragging myself out of the burnout was acknowledging that it had become a problem, and realising that I would improve far quicker if I stopped trying to fight it and let myself rest.

A little bit at a time

I’ve found that working a little bit at a time is helping. I’m always very productive in the mornings, so I’ve been getting up early and getting on with work. When I feel the burnout dragging me down, I stop. I do something completely different, completely unrelated to work (walking the dog, playing computer games). These stints away from work seem to re-invigorate me, and after a couple of hours I can get back into working again. I can’t speak for how anyone else feels when they’re burnt out, but this seems to be making me more productive, and really helps my mood and motivation.

I’m also trying to harness the moments when I’m feeling sharp and focused. Right now I’m writing a blog post because it’s too late to do client work (I know it’d have an effect on a productive early morning tomorrow) but I’m still running off the adrenaline of a successful few hours work earlier in the evening.

Our minds are funny things

We forget how important our state of mind is to our overall health until it becomes a real problem. Recent events with those close to me, and Shannon Fisher and Liz Elcoate writing bravely about depression have inspired me to write this post. Let’s talk about these funny minds of us more.

28 comments

Jonathan Strong
at 20:50pm

Great blog post, i feel i can relate to ‘Burnout’.
I’m currently working full-time, starting my own business and studying a distance learning degree! I’ve found that if things get too much and i feel myself getting stressed, i take 15mins to meditate. It’s something new for me but i’ve found that it helps.
Lee Griffin
at 20:51pm

The frustrating thing about it is that you can both understand how it was avoidable…but also how it couldn’t be avoided! I imagine it’s degrees worse as a full time freelancer, but the whole job is about relationships, and it almost seems inevitable that points are reached where we find ourselves painted in to a corner and unwilling (rather than unable) to do what we really should do which is be frank with those we’re working with and for.
But there’s the fear that the relationship may sour, and probably some experience in the past about how turning back work, or pushing it back, has resulted in the business side of that relationship being as fruitful.

Jenny (@Grinblo) posted this link today and I think it’s really useful on this subject: [http://t.co/V8ZrEIAgIy](http://t.co/V8ZrEIAgIy" rel=“nofollow)
Tim Smith
at 20:53pm

Thanks for writing about this. I had recently been in the same boat.
Karolina Szczur
at 20:57pm

There’s an interesting take on positive side of burnout too: [http://zenhabits.net/burn/](http://zenhabits.net/burn/" rel="nofollow)
And plus one to being there.
James Young (@welcomebrand)
at 21:00pm

I’ve suffered from mild depression (actual, diagnosed depression rather than feeling depressed) in the past as well as having the occasional stretches of just feeling burnt out and unable to focus and it’s all gone away since I’ve started distance running.
I love being outside in all weathers covering the miles on local trails and I’d recommend it to anyone who struggles.

There’s a notion that designers love their jobs so much they’re always “on the clock” thinking about design, buying typography books or practicing photography skills etc and I think it’s vital getting away from it all whether it’s running or some other hobby/activity.

Hope your mind clears a little after a break!

J.
Christophe Franco
at 21:41pm

It’s so difficult to comment on this one… Kudos for having the strength to admit if though, I know what it feels to go through all this, and the hardest part is probably to admit it publicly.
One deep cause that I’ve been able to identify was lacking a reason to keep on with the daily work routine that was progressively burning me out. After a year or so since I’ve finally realized this, I’ve still to figure out what could possibly change my mind so deeply (hint : at least I know it includes life changing decisions both in my work and in my personal life…)

Reading Peter Bregman’s 18 Minutes has helped me a lot figuring out all this… If you haven’t read it yet, it’s worth giving it a try.
[http://peterbregman.com/18-minutes/](http://peterbregman.com/18-minutes/" rel=“nofollow)
- Roger Carr
  at 05:20am
  
  I second the recommendation for the book “18 Minutes.” I read it at the suggestion of a friend and it helped me as well.
- Ida
  at 22:15pm
  
  Thank you for sharing!
  
  I kind of recognize this. People talk a lot about separating work and your personal life. As for me, since I started working as a web developer, I don’t have a barrier between those two anymore. This is both awesome and real bad. I’ve definitely had my moments when I’ve been totally stressed out.
  I really hope you feel better soon. Stay strong!
- Christopher Gutteridge
  at 22:18pm
  
  I am an always-on-the-clock kinda person, but I know (now, after many mistakes and f- ups) that I need to keep some slack in the schedule. Even if I’m in full flow and *could* take on one more thing, I’ve learned to keep enough slack so when I go into a mild burnout I don’t let anybody down.
  That’s when, not if. You can’t run 100% all the time, so don’t budget your time that way. You’ll make yourself ill trying to look after everybody but yourself.
  
  I generally take the view that any respectable professional looks after their tools and should be respected for doing so. Your number one tool is yourself; mind and body — not looking after your health isn’t going the extra mile, it’s unprofessional. You’ve got to say some small “no”s all the time, so you don’t end up having to say “no” for 6 months.
- Sush Kelly (@maxray)
  at 22:51pm
  
  Ah yes burn out. Kind of sneaks up on you! Had a real bout of it over the last year since we had a little boy. Adding him and the associated sleep depravation and lack of free time suddenly shifted the balance and I realised I had been burning the candle at both ends in order to maintain things.
  As James mentioned about running I found that a run or bike ride really helped as well as accepting that I can no longer just work through the night to get something done!
  
  It is definitely something that affects web designers more than other fields. I think this is because of the constant shifting in skills and the like.
- Paul Masek
  at 23:44pm
  
  I find keeping up with the constant changes in the web dev world and the resources that go along with that the most exhausting thing (It does keep things interesting though!).
  I’d be interested to know how people manage to fit ‘education’ into their busy schedules, as I often find my twitter favourites / instapaper / google reader lists spiral out of control….
- Joey Augustin
  at 02:20am
  
  The combination of staring at screens all day, sitting, trying to keep up with the industry, looking for work, doing work… it all adds up to this mental juggling act and before we know it our brain and body fail.
  I’m working through similar issues. Being a one-person show as a freelancer is very difficult. Thanks for being honest. I wish you the best.
- Nik
  at 13:31pm
  
  I can completely relate to this –; a bi-product of being a perfectionist, working hard towards my design career and having an almost full time admin job to hold down too. I find myself getting depressed and cabin fevery when I spend too long doing work in front of the computer so it definitely is worth considering our mental health, taking time away from the computer and doing things that refresh you. Wise words Laura!
- Chris Comben
  at 14:09pm
  
  Ah you all just need to man up! ;)
  I’ve found cutting up the day and not worrying about constant work helps me too. Watch some TV while working, take a 10 minute nap, call someone, go see a film. Yes it does mean sometimes I have to work at night, but if I feel like I can then it helps me. It amazes me if you actually stop and look at an office how often people are actually not working. You just feel that if you work on your own or at home that you have to do more hours than anyone else.
- Paul Cross
  at 16:27pm
  
  Possibly the “best” articulation I’ve read. 7 years into running a small business and I’ve been feeling like you describe for the last 2. There are a few other symptoms you’ve not listed, but I’m not man enough to admit to them. All the best.
- Steve Fisher
  at 17:31pm
  
  Laura, this is such a great post. One I’ve been close to writing over the last few months as I’ve had too much on my plate and knew I was more than burnt out and had reached depression. Recently I took a few days off which lead to three weeks off work just so I could regain some balance. I’m still working on it as it isn’t easy, but I’m lucky to have a courageous life partner at my side.
  I want you to know that Shannon and I are in your corner ready to contribute to a healthy future! You should take some time off this summer and come to Vancouver. ; )
  - shannon
    at 02:44am
    
    HELLS YEAH. xo
  - Brian Hermelijn
    at 11:28am
    
    I have to say, that I am completely related to this as well. Its like you work on for hours on end, without caring for your own health.
    
    So finding that [peak hours that makes you more creative, would not only give you the advantage to finish work easier, it will also makes you come up with better results.
    
    Aside from that, I wholeheartedly agree that playing games or just watch some shows that makes you laugh, can make your mind rest and enjoy the moment, until you can start working again. For some this may be difficult, since they become to focused on the other mentioned tasks.
    
    But it’s definitely something to try out. Thanks for posting this article!
    
    Brian
  - Chatman R.
    at 20:52pm
    
    I’ve dealt with burnout a few times. It really is a consequence of loving your work so much that it doesn’t feel like work. I used to pull a ton of all-nighters to get things done, because I was so eager to get it all launched. Your sleeping habits get messed up, and the exhaustion just shatters productivity.
    That said, I’m nowhere near strict enough to have 9-5 kind of consistent hours. Instead I work when I feel most productive, and after a set time (usually 7 hours, give or take an hour), I just stop. I’ve found it helps to work according to your natural rhythm, and sometimes that just means stepping back from the keys when time’s up.
    
    Of course, as you said, sometimes things just spill over in ways we don’t expect. Burnout used to completely piss me off, but now I just try to accept it as a sign that my mind is running on empty and needs a break. And I completely agree that as people we try very hard to look bulletproof to the outside world. Sharing our vulnerabilities can be liberating in a sense, because we all have them. It’s just part of being human.
    
    As always, I appreciate your honesty. Lets us know we’re not alone with our frustrations.
  - Simon Cox
    at 10:00am
    
    I have talked with Adam about this having been through it myself several times. This is going to happen to a lot of people if they don’t balance life and work. You right to find other things to do but video games is a bit too close to working on the web –; still using a computer. Taking the dog for a walk is good but you will still be thinking about work while getting pulled along.
    Find yourself a hobby –; something you can loose yourself in that completly removes yourself from design and the web. I make model railways –; it’s challenging and very creative (the way I do it –; read ‘bodge’) and completly removes my mind from work and the web. Choose something that doesn’t put any time pressures on you, something that you need to concentrate on and requires some craft to acomplish. The craft aspect will instill ideas in you head for later by opening new nural pathways and provide inspiration.
    
    Last year I took a week off work and built a shed –; quite a big shed. I was absolutly exhausted, had loads of cuts and bruises including nettle stings when I ignominiously fell off the staging into a nettle bed –; and despite all that the following week I was unstopable at work, really motivated and full of inspiration.
    
    Go get ’em girl.
  - Edward McIntyre
    at 22:27pm
    
    One line you said really sticks with me, “Burnout can be a bad side effect of really caring about your work” The interesting thing for me lately is defining the which part of caring is bring me so much grief.
    Personally, I truly get invested in the success of my employers/clients. Sometime this leads to burnout from being overworked, other times it leads to burnout over the actions/inaction of said employer/client. This had led to a lot of thought over when to terminate work for a freelance client or look for a position at another company.
    
    I find the things the burn me out the most are feeling like you’re working for a company that doesn’t recognize your contributions, or for a client that doesn’t put foot to pavement and use the tools created to be successful.
    
    I often find myself analyzing what I could have done better to contribute to their success. What tools could I have equipped them with? Did I build the best product for them? Did I really hit their target market?
    Then apathy kicks in, and its defiantly a squatter in my house of creativity.
  - Ben Ford
    at 17:18pm
    
    Nice article Laura.
    The way you explain to overcome ‘burnout’ is generally a very good way of working anyway; find the time you work at your best, and try to get a higher percentage of your work done during that time. Take short, regular breaks completely away from your work and your work station.
    
    I read a lot of blogs about this way of working and completely ignored it, questioning how I can do more work when I work less hours.
    
    I decided to try this technique in the last year of my degree, and it completely changed the way I was writing, revising and studying and haven’t stopped working this way since.
  - Roger Carr
    at 05:16am
    
    It is great that you are writing about the topic of burnout. I have been there and consider myself a recovering burnout.
    It is great that you are already aware of burnout and are addressing it before it becomes more serious. I denied its existence while it crept up on me, so it has required more time and change to deal with it.
    
    Getting away from work can provide a temporary relief, but doesn’t change the work situation. If you continue to find yourself in chronic stress, consider reevaluating your purpose, goals and processes on the work side of your life. Changes may be required.

Read the original post, ‘Burnout’.

Mentoring a project: the project

Mon, 04 Mar 2013 11:38:43 +0000

Previous posts on the mentoring project:

[Mentoring a project: the idea](/mentoring-a-project-the-idea/" target="_blank “Mentoring a project: the idea”)
[Mentoring a project: the right project](/mentoring-a-project-the-right-project/" target="_blank “Mentoring a project: the right project”)
[Mentoring a project: finding the right people](/mentoring-a-project-finding-the-right-people/" target="_blank “Mentoring a project: finding the right people”)

In the previous posts, I mentioned that I was going to explain the details of the project later on. This was because I didn’t want to get bogged down by the details of the brief while I was focusing on finding the right team.

Now we’ve got our team together, I can elaborate on our client and the brief. I was very lucky to be contacted by the lovely [Mallen Baker](http://www.mallenbaker.net/" target="_blank), who had a great project in mind and was willing to give me, and the mentees I chose, a go.

Gislingham village website

Gislingham is a rural village in Suffolk which has a thriving community with a number of local organisations and businesses. The village website is to be revamped to be able to provide an excellent online support to that community.

[http://gislingham.com/](http://gislingham.com" target="_blank)

The website is an old site, using now outdated development techniques (tables!) created by Mallen around ten years ago. Whilst the site has been maintained and updated, it’s in need of a redesign to help it better serve the local community. We are at two distinct advantages here. The existing website means that we can learn from what does and doesn’t work on the existing site. Also, having a client who works in the web industry gives us the advantage that we won’t have to teach the client about the web as we work on the site.

Our first client meeting

Mallen was keen to meet Phil, Yago and Sibylle, and it was a good opportunity to kick the project off. We met last Friday in London.

Preparation

In preparation for our first meeting, the mentees dissected the brief and assembled a list of questions for the client. They each made their own lists and then collated these together in a master list which covered a huge range of detail and depth.

Yago, Sibylle and Phil explored tools and file formats that everybody could use together without causing compatibility issues, wrote a very thorough content inventory and started looking at personas based on the brief and existing users, and researched project management systems at length to find one that was best suited to us, settling on Basecamp. This meant that we had somewhere to keep our discussions as all the email was becoming unruly!

The meeting

I tried to stay out the way in the meeting. All of the preparation and research that the mentees had done assured me that they were very capable running the meeting. I tried to only jump in when I thought something might be overlooked (rarely) and to assure them the role I would take for the project.

Mallen started by explaining more background on the project and what he was looking for in the new site. This informal start already answered a lot of the questions that the mentees had prepared and helped us get to know Mallen better. Then the mentees ran through the list of questions they had, asking any other questions they came up with as they thought of them. This was exactly what I was hoping would happen. Everybody was comfortable enough to ask questions at any point but we didn’t all end up speaking over each other either!

Money

At the end, I went over how I thought the project should be run, and we talked about money. I’ve been getting better at discussing money with clients, but [listening to Andy and Anna on Unfinished Business](http://unfinished.bz/" target="_blank) has given me more confidence and reassurance that this is the best way to work.

I want the project to be run as much as possible like I would run a client project myself. This means taking payment in stages, not just in one lump sum. Over the last six months I’ve successfully moved my clients to a structure where I bill 50% of the estimated project as a deposit/retainer, then bill every first and third Thursday of the month (pretty much every two weeks) to ensure a sensible cash flow and that nobody has to wait for, or pay, enormous invoices at the end of a long project.

Mimicking this process, we decided that, as we’re looking at a nominal payment of £500, breaking it into less than two stages would become a little too much of an admin nightmare. I will have to take the payment, and then pass it on to each mentee. If this got down to sending £10 payments around, it would be more hassle than it was worth. So we decided on a 50% up front and 50% on completion (the details of which will be ironed out in the contract).

The next steps

Before we kick off the project, the mentees are going to assemble a proposal/estimate where they break down what needs doing and how long each task should take. This will help us plan how best to run the project and work out if our deadline is realistic. My next step is sorting out a contract for all of us to sign to make sure we understand our roles and responsibilities over the next couple of months.

One comment

John Wickee
at 19:22pm

I really love this project you’re doing. It’s a great idea and can provide some great experience for those you selected. It’s great of you to share and help them. Mentoring can be invaluable.
I’m really interested to follow along and see how it plays out.

Read the original post, ‘Mentoring a project: the project’.

Nothing to display podcast

Sat, 02 Mar 2013 17:43:55 +0000

Last week I had a lovely chat with El for her Nothing To Display podcast. We talked about technology and how people get started with technology, accessibility, mentoring and dystopian futures! It was a real treat.

Read the original post, ‘Nothing to display podcast’.

Why I love Unfinished Business

Mon, 25 Feb 2013 17:48:24 +0000

I know, this is a funny topic on which to base a blog post but I love the Unfinished Business podcast, and I’d like to elaborate why in something more than a few fawning tweets.

Business, but not suits

Business doesn’t feel like the right word to describe what I do. It’s a hobby that makes me enough money to support myself. The word ‘business’ conjures up images of suits, handshakes and networking. Unfinished Business feels like a podcast about my kind of business. It’s not about synergising or maximising profits in the next quarter, it’s about how to do the best by our clients and ourselves.

Transparency, openness, honesty

The entire premise of the Unfinished Business podcast is to speak openly about business end of the web, design and creative industries. And Anna and Andy really do exactly that. They’re not saying things to impress people, they talk about mistakes they’ve made and how they think they could do business better, and they’re not scared of talking about “taboo” subjects, such as money. This means each episode is full of insights on how to get started working as a small business, and how to keep that small business running successfully.

It says it all over my site, honesty is really my thing. From me this might come in the form of over-sharing occasionally on Twitter, and often putting my foot in my mouth. Still, honesty feels like something that’s lacking in the business world. The web community that I know isn’t competitive, it’s sharing. Unfinished Business reflects this non-competitive sharing when Anna and Andy speak so honestly about business. They’re not doing a podcast to gain a competitive advantage against other developers and designers who don’t have podcasts, they’ve just created a space to share experiences.

Ethics

This is what struck me today, and the reason why Unfinished Business resonates so much with me. Anna and Andy don’t talk about how to make money, they talk about how to do a good job for your clients. Today I listened to them discussing handing over files to clients when the business relationship has finished. Their priority was doing the right thing, and not making life difficult for that client after they’ve moved on. This means so much. It’s one thing to be hardworking and good at your job, it’s quite another to be a good person.

These are good people. And you should listen to their podcast.

9 comments

Tim Smith
at 17:56pm

I totally agree. I love this podcast. I’m really excited about this new wave of talking frankly and honestly about business. It’s so helpful, no matter what stage of your career you find yourself in.
- Laura
  at 18:09pm
  
  And that is high praise indeed coming from someone who runs such a meaningful podcast himself!
- Rob
  at 18:16pm
  
  This is awesome. Couldn’t agree more. Will be checking out this podcast :)
- Dan Boulet
  at 18:17pm
  
  I agree, Laura. Never thought I’d enjoy listening to two people talk about business for an hour, but Andy and Anna have proven me wrong.
- Ian
  at 20:19pm
  
  Personally what I enjoy most about the podcast is the realisation that we all experience similar problems in business and I am not alone. They are things that can be solved/worked through.
  When knee deep and in the thick of it, sometimes it pays for me to step away and reflect on that.
- Chatman R.
  at 21:13pm
  
  I definitely need to catch up on Unfinished Business. I’ve been building things for a while, but I still have some difficulty wrapping my head around the business side of things. I mean, clients *are* the business, but no one really likes to talk about the financial side and daily operations.
  I feel like Unfinished Business fills a gap we were only vaguely aware was there: real business advice without stiff business practices. Mike Monteiro got that ball rolling with Design is a Job, which I will shamlessly endorse because it’s an excellent read. That it’s hosted by two of my professional heroes is just icing on the cake.
- yago
  at 23:01pm
  
  I couldn’t agree more. I don’t know them personally like you do, but by listening to the ideas they defend and how they approach ‘taboo’ subjects, I very much look forward to meeting the both of them soon! :)
  Just to state the obvious, unfinished.bz has become a must-listen for me, I’m actually saving the episodes for offline perusal… ;)
  
  Y
- John Wickee
  at 19:28pm
  
  I recently subscribed to their podcast because it sounded good, but hadn’t started listening yet. Glad to hear it will be worthwhile when it comes up in listening.

Read the original post, ‘Why I love Unfinished Business’.

Upfront Podcast

Fri, 15 Feb 2013 09:06:32 +0000

I was a guest on the Upfront podcast with the lovely Jack Franklin and Ben Howdle. They got me on to talk about accessibility, but we ended up chatting about the mentoring project too! You can listen on their website, or listen and subscribe on iTunes.

Read the original post, ‘Upfront Podcast’.

Design Feast Designer’s Quest(ionnaire)

Thu, 14 Feb 2013 08:51:34 +0000

Design Feast have my answers to their Designer’s Quest(ionnaire) on their site.

Scroll past the scarily large photo of me quickly… their questions prompted me to think about some interesting points, especially challenges for designers:

What are some of the challenges you encounter as a designer and how do you deal with them?

I think the greatest challenge a designer comes across is their own ego. It’s in our nature, as those that deal in creativity, we have egos that allow us to consider our work good enough to share, and good enough for clients to pay us.

However, too much ego and we’d never iterate past our first draft of any design work, we’d never pay attention to client requirements, and we’d never allow anyone to tell us if we’re wrong. In my experience, my best work has been done when I’ve set my ego aside and worked collaboratively with clients and others.

Read the original post, ‘Design Feast Designer’s Quest(ionnaire)’.

Mentoring a project: finding the right people

Mon, 11 Feb 2013 10:54:24 +0000

We’ve got a project! I’ll elaborate on the details of the project in a future post, but the importance of having a project was that it’s allowed me to choose the designers/developers who could get something out of being mentees. I didn’t want to do this before securing the right project as I needed to know what I was looking for in a mentee.

Finding the right mentee for the job

This has been one of the hardest decisions I’ve ever had to make. After my idea gained significant (kind) exposure, I’ve also felt the pressure to make sure I get it right. What’s made it even harder is that every designer/developer that sent me an email about the project was sweet, enthusiastic and incredibly willing. I had thirty-two candidates and no idea how best to continue.

Shortlisting

Early on

Payment

I cut down into short list whilst I was looking into the original project idea. I knew that it wouldn’t be a high-paying project; I wanted the majority of the value to be in the learning experience, and I made that clear in my first email to everyone who had contacted me. This meant a couple of candidates who were already serious freelancers, looking for a well-paid project, withdrew themselves. It’s always good to talk money up front! A few people didn’t reply at all, and that was fine.

First stage

Team work

Next, I needed to work out the best way to eventually reduce my list of now thirteen to just a few. I was wary that nobody could take on a low-paying project, dedicate a huge amount of time to it and deliver great results; I asked which candidates were willing to work in small teams. As I knew all the candidates already had other work or studies, I thought it unrealistic to expect one person to do all the work. It would also require a hybrid designer-developer who was capable in front-end and back-end development. Now these people are rare in the industry, and would be almost impossible to find in anyone just starting out.

This made my short list even shorter. There were a few people who would prefer to work solo and so this project wouldn’t be the right match for them.

Specialism

At this first stage I also asked whether the candidates preferred to work in design, front-end development, back-end development, or a combination of two or three skill areas. I was concerned I might end up with a surplus of one skill area, but actually it was a fairly even spread of all three, with most expressing interest in at least two areas. Hoorah for hybrids!

Enthusiasm vs talent

One thing I was keen to emphasise at this point was interest in skill areas, not experience and not ability. If I’m asking to mentor people who are starting out in the industry, I can’t possibly expect them to have a wealth of experience in all the relevant areas. And those areas that they do have experience in may not be those they enjoy. Likewise, I can’t expect anyone to be fully proficient in their skill of choice. I can always advise them the best place to learn relevant new knowledge. All I need is for them to know the basics and really want to learn.

Favourite work

This is a fairly typical interview-style question. You could ask someone what their “best” piece of work was, and you may get their favourite piece of work, but you’re equally likely to get their most technically-proficient piece of work, or that which they think is most impressive, even if they hated the project and don’t like the result.

So I asked for the candidate’s favourite project and why it was their favourite. I think this got me more of an insight into what they really cared about, and what holds the most value for them in a project.

Too early for this information

Whilst it was good to know I had an even coverage of skill areas at this stage, and what their favourite project was, it was too soon to use this information. Without knowing the project we were going to work on, how was I to judge how well the project would suit them?

Second stage

Once I knew what the project was going to be, there was more purpose in my questions. I sent another email to the remaining eight candidates. At this point I became sure that I was looking for three mentees to work as a team. I thought that this wouldn’t be too many people to make communication difficult, but enough to cope with the project in a way that would give them time to enjoy what they were doing.

Still interested?

I asked again if they were still interested. I wanted to make sure nobody felt like they’d committed to the project just through expressing their interest over a week ago.

WordPress experience

Our project brief states that the website needs to be based on WordPress. Without going too much into the project or client (yet!) I knew that this was an appropriate solution for the project, so I really needed to find at least one candidate with some WordPress experience to lead that part of the development. Everybody showed willingness to learn even if they didn’t have any experience (love them).

Blogging the process

After realising that a lot of people were talking about the project on Twitter, and I’d promised to blog about it, I realised that I’d have to make sure that any mentees were happy with me doing this, and trusted me to do the right thing. So, lastly I asked if they were happy with me writing about them. I emphasised that this wasn’t really about me picking the right match, I was just wondering how much to blog and how much to mention them. Obviously I would never post anything that just pointed out flaws in somebody’s work, but if we learn from our mistakes through constructive criticism, I think that’s a positive experience that we can collectively share and use to help other people learn.

Everybody was happy with me blogging; I was starting to worry as their supportiveness was making it harder to choose!

Third stage

At this point I was desperately trying to work out the best ways to narrow down the list. I decided that it would be most sensible to ask what everybody’s weekly availability was, and which timezones/locations they were based in. I was fully expecting remote working, but it was important that the mentees were able to work together in a team and communicate easily. This helped me find three people whose availability suited each other, and whose skills complemented each other.

The final decision

Something I didn’t anticipate was deciding that a couple of candidates were over-qualified for working in these teams. Looking at their experience, I was concerned that if they worked in a team, they would end up picking up too much of the slack because they had a significantly broader knowledge in web design and development.

The dream team

I’ve got my team down to the following three:

Sibylle –; Lead on WordPress and Content Strategy
Yago –; Lead on Front-end Development
Phil –; Lead on Design

Another benefit to team work would be that roles needn’t be fixed, I expect the team to work together as closely as possible. Still, I thought I’d recommend that each mentee has their area to lead so they know how valuable they are to the project’s success.

Onwards

This week we will have our first client meeting and get started on the project. I’ll have another update then.

4 comments

Prisca
at 11:06am

Laura,
thanks for this write-up –; nice to read about how you made your decision, bet it wasn’t an easy task :) Curious to follow this project now and see how it will work out—good luck to you all :)
PS: from my perspective as their tutor, I am so very happy that your final selection included Yago and Sibylle ~ they’re both lovely as well as talented and will contribute some great work ;)
John J. Locke
at 11:22am

I think this is a really wonderful thing that you are doing, Laura. In order to make the future of the Web better, we need to start with the people. One of my goals for this year is to find a mentor as well. I realize that I have many areas that I need to improve, but I also believe I have a lot to offer to the right team somewhere.
I look forward to seeing how your mentees progress over the coming weeks and months. Keep making the web a better place. :)
Shaun Dunne
at 15:38pm

Laura,
This is such an inspiring thing to do, made me consider how I might go about mentoring more people and helping them build skills. Looking forward to seeing this work and how we can all help usher in new designers and developers onto the web.
andy
at 07:05am

I was disappointed not to be picked for this, but I’d like to wish you the best of luck for the project!
Can’t wait to see how it turns out, it’s such a nice thing to do for folks.

Read the original post, ‘Mentoring a project: finding the right people’.

Using emoji in Mail.app to make better visual indicators

Sun, 10 Feb 2013 15:31:54 +0000

After reading this brilliant Mac App Storm post on Turning Mail.app Into the Best Mac Email App, I was inspired to follow a lot of the tips to make my emails easier to handle.

I made three Smart Mailboxes, following the tips I chose:

‘Follow Up’ which contains emails flagged with a green flag, using the shortcut of ⌘⇧g
‘Needs Reply’ which contains emails flagged with a blue flag, using the shortcut of ⌘⇧b
‘Needs Attention’ which contains emails flagged with a red flag, using the shortcut of ⌘⇧r

The benefit of using the red flag for ‘Needs Attention’ as a way of noting emails which need organising into either of the other smart mailboxes is that Mail.app on the iPhone only supports the red flag. This means I can easily flag something for later with a red flag on my phone, and deal with it properly when I get to my laptop.

The problem

However, I have a terrible memory for shortcut keys. I couldn’t remember which colours related to which mailboxes, and so couldn’t remember the relevant keyboard shortcuts (as these used the first letter of the name of the colour).

Mail.app smart mailboxes in the Favourites bar

The solution

I knew Mail.app wasn’t hugely customisable, but I thought I could try using emoji characters in the names of the smart mailboxes as you can have coloured characters, rather than the one-colour characters in most fonts.

Getting Emoji

After some quick web searches, I couldn’t find any sites or apps that allowed me to grab the emoji I wanted. So I just wrote myself an iMessage with the emoji characters I thought might worked and send it to myself. With iMessage’s unreliability, I didn’t get it for ages, so in the meantime I copied and pasted the emoji into an email and sent it to myself.

Emailing myself emoji characters

As you can see, a few of the characters didn’t quite work as they’re mapped to other characters in OSX.

Copy, paste and ta-da

I then just copied and pasted the characters into the smart mailbox names.

It worked exactly as I wanted. I now have little coloured visual indicators that show me which shortcuts I need to use to send mail into those mailboxes.

2 comments

Evan Lovely
at 19:24pm

Nice job! I like it! The human mind works better (and faster) with imagery than words as words still need to get processed over to their meaning whereas imagery can have inherent meaning. Thanks for sharing the good idea!
Evan Lovely
at 21:09pm

So I was implementing this and found an easier way: Put your cursor in the name field, then go to Edit > Special Characters > Emoji then double click the one you want.

Read the original post, ‘Using emoji in Mail.app to make better visual indicators’.

The East Wing podcast

Wed, 06 Feb 2013 09:23:20 +0000

Yesterday I was a guest on Tim Smith‘s The East Wing podcast. It was a pre-recorded conversation and it was great fun. You can listen to it on the East Wing website, and it’ll be up on iTunes soon.

We discussed how I got started in the industry (really sorry traditional Graphic Design people, I may have generalised a bit…), speaking at conferences, women in the industry and mentoring.

As I said last night on Twitter, Tim Smith is such a great guy. I really had my heart warmed and faith in humanity boosted by our conversation. His thoughts on women in the industry made me proud to be part of the web community.

And if you don’t already subscribe to The East Wing podcast, do it! It’s full of great, and inspiring, insight on the people behind the work in the web industry.

Read the original post, ‘The East Wing podcast’.

Women and conferences

Mon, 04 Feb 2013 21:39:47 +0000

I used to not understand the fuss around women at conferences, I thought that we should all just carry on with what we were doing well already and not get caught up in needless controversy. I even wrote a blog post saying exactly that a couple of years ago. I’d never experienced (to my knowledge) any difficulties because I was a woman.

A bit uncomfortable

But then I started hearing more about/was exposed to women who did have bad experiences. And I attended a few events where I just didn’t feel comfortable. It took me a while to pinpoint why I didn’t feel right. I didn’t realise right away that it was the lack of diversity that made me feel singled out. I realised that it was also the reason I felt uncomfortable when I was invited to women-only events. It wasn’t because I want to be surrounded by women, it’s because I want to be surrounded by diversity. It’s unique perspectives that bring more interesting solutions to problems and promote innovation.

It’s hard to know if you’re not being welcoming

At these events where I felt uncomfortable, I didn’t have any bad experiences, it was more that I felt people didn’t expect me to be there; I wasn’t the target audience. So rarely in these situations is there gender-based discrimination, it’s usually just ignorant comments based on stereotypes like “I didn’t think you’d be a developer, I thought girls were usually designers.” It was always the case that the men making the comments or featuring scantily-clad women in their presentations didn’t realise the effect these things might have on the audience, or that they might be alienating people. This is half of the problem, when you’re someone who’s rarely on the receiving end of these things, it’s hard to understand the effect they could have on others.

Feeling special

Something I think I was trying to protect in my defensive blog post was that sometimes I could see the upsides of being singled out. It made me feel special in my uniqueness, like I had something that no one else had, and I got more attention because of it. I’m a bit ashamed, but I’m not too angry at my former self because I think that’s a fairly normal thing to feel, everybody wants to feel like one in a million.

I was also a bit nervous, I didn’t want to have the spotlight put on me for the wrong reasons. I’d done a couple of talks at bar camps, and I quite liked the idea of doing more in the future. I didn’t want to be cast as “the token girl” speaker.

Why it’s worth effecting change

The big deal now is about the amount of women speakers at conferences, and it’s kind of an extension of the “women attending conferences”, “women in the industry”, “women studying computing” problems. The thing is, this is a point where we can actually make a difference.

It’d be very difficult for most of us to effect change in education, but it’s much easier for us to get more women representing the industry at conferences. This could hopefully then encourage more women to attend conferences, which would lead to more women in the industry, women studying computing subjects etc, and the same goes for other minority groups. I don’t think many people would argue that this is a bad thing.

Quotas at conferences, they’re not the only possible solution…

The next big controversy is about how we can manage this. Without resorting to quotas or all women speakers reluctant to accept speaking invitations without wondering “am I only here because I’m a girl?”

There’s currently a big problem with conference organisers who just aren’t that bothered about diversity in the industry. I can understand their hiding away from the issue, because actively trying to improve it is very very hard. There have been a few posts written about how conferences have done this, but the main point is that organisers have been forced to look inside themselves and consider whether they pick their speakers objectively, without bias against minorities. Many organisers ask their friends to speak. It must be an awkward thing if you suddenly realise that, totally unintentionally, all your friends are white men.

Examining ourselves

This is a problem because most people couldn’t possibly identify this in themselves, and then those that do wouldn’t want to admit it anyway. It’s difficult to understand that we (society) tend to favour white men in authority roles (such as speaking at conferences) because that’s what our culture has taught us to want. You don’t have to be a white man to feel this way towards white men in authority either.

Fighting our biases

The way to combat these biases (whether they’re known or unknown, and whether we acknowledge them or not) is to ask conference organisers to review their speaker selection process. Especially if it seems to result in featuring one type of person. Nothing more than that. Quotas don’t help, because that just results in “token” speakers, but men pledging to not speak unless there’s a satisfactory representation of women is helpful, because it’s telling the organisers that diversity is important to them, and that you believe the current lineup isn’t representative of a fair speaker selection process.

Acknowledging what’s going on

It’s not always a problem if organisers used a fair process and it still resulted in an all white male lineup. The important part is that they acknowledge there’s a problem and try to explain why. We all know that there’s not as many women in the industry as men, what we want to know is that people are trying to improve upon the situation, rather than promoting an environment where minorities don’t feel comfortable. Without even acknowledging that a problem exists, the imbalance in the industry will inevitably continue.

Standing up

Campaigning for diversity is the final controversy. It’s not a fun topic to discuss, and people are very easily hurt if they feel as though they’re being attacked or accused of gender discrimination. Unfortunately this results in all sorts of people reacting in ways that aim to shut up those who are trying to address the imbalance:

1.Both men and women have said that men’s opinions on the matter aren’t as valid as women’s opinions. This is sad. While men may not have been able to experience the bias against women first-hand, that shouldn’t mean that they’re not allowed to fight for the equality that they believe in.

A great analogy from Martin Pilkington “…But you’re not allowed to speak out on women’s rights as you’re not a woman! Nor animal rights as you’re not a pigeon!” (https://twitter.com/pilky/status/294468887246938115)

2. I’ve seen a few women on Twitter imply that it’s not a problem because they haven’t had bad experiences themselves. This is the camp I used to fall into. Because it wasn’t affecting me, I didn’t want to draw negative attention to myself. It’s ok if you haven’t experienced something and so you feel uncomfortable standing up for it, but to deny that something exists because it hasn’t affected you seems very self-centred.

This is the one that I had feared for so long, and it finally happened to me a couple of weeks ago:

“Well she certainly wasn’t a ‘token girl’ at our second event, but she appears to want to be branded as one” (https://twitter.com/leydon/status/294457218114408448)

The best way to shut women up about equal rights is to suggest that they’re only doing it for selfish reasons.*

Nobody wants to be the token speaker

I enjoy speaking occasionally, but I’m really more of a fan of attending conferences. I don’t want token women speakers to exist, let alone have people suggest that I am one, and that I was only asked to speak to fulfil a quota.

Keeping on standing up

I’m still going to fight this one out, though. I want to make the industry a more diverse, interesting and inviting place, and I want to set a good example for those that come after us. I know that I’m quite a confident person, and I feel like I’m in a better position to stand up for us than many others, and I don’t want to waste my opportunity to do so.

Note

There are people who write about this subject in a far more analytical, less emotional, way. If you want to know more, I particularly recommend Aral Balkan’s, Faruk Ateş’s and Sara Wachter-Boettcher’s posts. I’ve included some that I’ve found very useful below:

15 comments

Anselm
at 09:18am

I really like this article much. You mention the most valid points and problems we currently have (won’t limit that to our industry as this appears in many more industries the same way).
Just to add one thing to your personal experience: I am sorry about this, this tweet is unnecessary. But as a male (it just doesn’t matter I want to say with that) speaker who is not known very much and new to speaking you get such comments regardless of your gender. I also got some very disappointing comments on some talks of me. I do think this is very unpleasant to people who speak because they want to share something. People are taking ones self-confidence with such statements.
Spoken for most speakers (I am assuming here) I don’t think they want to be speakers because they wanna be rock-stars but because they want to share something. Criticize them by just tweeting / writing such crappy statements just shows how poor-minded the person is who writes or says this.
btw: Can you set line-height in textarea back to normal? hard to write here ;-)
Mark Glover
at 09:30am

Traditionally, I’ve always leaned towards the school of thought that says “The population is evenly split along gender lines, women are just as talented as men, therefore the number of women in the industry/on boards of directors/speaking at conferences should automatically balance themselves, without any need to do anything about it.” That works well enough in theory, but if, as seems to be the case, it isn’t balancing well, then I’m happy to do what I can to adjust the situation. For reasons that I don’t entirely understand, having not experienced them myself, (some) women seem to need, or at least appreciate, female role models. Therefore, it seems to me that for the tech industry (conference speakers etc) to balance properly, we first need to reach a critical mass of female role models. If this is something that can only be achieved by actively considering the gender of speakers, then so be it.
Regarding your point about male views not being as valid as female ones: I think a lot of men (myself included) feel that expressing opinions on this subject is a little bit like a rich MP talking about what life is like for the poor. Many of us would quite like to take more of a stand on the issue, but I think we need to be invited to do so by women first. Otherwise we feel like we’re barging in on a conversation of which we’re not currently a part.
- Sophie Dennis
  at 11:50am
  
  Mark, please do speak up. We need all the good men like yourself to take a stand on this –; otherwise we’re too easily dismissed in some quarters as “those shrill women”.
  
  I agree with Amber that it’s easy to be insulated from this even as a woman. I’ve never been threatened or publicly insulted like many women I hear from. To be honest I’m fairly thick-skinned and when I’m aware of sexist behaviour towards myself, tend just to find it hilarious.
  
  It’s something, as you can imagine, that Andy and I are grappling with with [Digpen](http://digpen.com" rel=“nofollow). Part of me can’t imagine anyone behaving like this at one of our conferences. I’m tempted to say that the atmosphere here in the South West is quite different, and we’re wary of making a big deal of “zero tolerance” in case that makes people think we do have a problem. At the same time, we want to make it clear that if there is ever this kind of behaviour at a Digpen event, or we hear of anyone treating our speakers badly (whatever their gender), we won’t stand for it.
  - Mark Glover
    at 15:55pm
    
    As you can imagine, Sophie, I’ve been thinking a lot about DigPen in this context, not least because it forms the bulk of my recent conference experience. I’ve certainly never witnessed any sexism there, and I wonder if that is down to the crowd or the history of the event. Obviously DigPen has never set out to be female-orientated, but between being founded by Frankie and now steered by you, it’s always had a strong female presence on the stage. I have two ideas about why this may have made a difference. 1) An event that has a strong female presence from the outset might be less likely to attract the sort of men who don’t respect and value women in technology, and 2) (more importantly) the presence of women standing on that stage from day one has provided exactly the sort of role model for women that I was talking about above. This may have given other women confidence to both attend and speak at the events, without worrying that they won’t be received well. Of course it could simply be that everyone connected to DigPen is just so damn lovely ;-)
  - Thierry D.W.
    at 09:51am
    
    Hi Laura,
    I must say, I’m at a loss for words, partially because (kind of like yourself) I never really was exposed to any bad behaviour on conferences. But more importantly, and I cannot stress this enough, because I am stunned by the braveness you have to keep fighting despite the fact you’ve never had any real setback during conferences. Don’t get this the wrong way though, I’m sure nobody wants to be called out as a token, I’m sure, but I’ve seen people write crazy stuff on the internet as well, and yours seems still bareable compared to them. Yet, despite this, you still fight back, even if it was just to defend those whom are truely being bullied. Now that.. that’s a noble thing. It’s why I’m proud to know you.
    
    Keep fighting Laura, we’re behind you ;)
    PS Hope I didn’t say/write anything offensive here? Sorry if I did.
  - Ian
    at 10:05am
    
    You say “we all tend to favour white men in authority roles (such as speaking at conferences) because that’s what our society and culture has taught us to want” –; do you really believe this sweeping, generalisation of a statement?
    - neil manuell
      at 18:14pm
      
      @ian there are some very elegant recent studies that confirm this. I will try and dig out a link.
    - neil manuell
      at 10:46am
      
      @mark As for me, I would not think of it along those lines –; some of my best friends are women, or gay, or have a disability. I live with a woman and a baby daughter. All these people are part of my life and are what shapes me. I would never deign to fight for their rights (apart from my son and daughter as they do not have a voice as yet). However I will fight for *my* right to be surrounded by diversity. I will fight for *my* right not to be surrounded by hatefulness, or labeled as hateful because my neighbour is.
      - Mark Glover
        at 16:15pm
        
        Hi Neil, that’s an interesting idea. I’d never thought about having a right to diversity around me. Kind of makes sense in a way though, if you accept the argument (as I do) that diversification results in an enriching experience.
      - Matt Smith
        at 15:20pm
        
        Thanks for sharing this. You have some good insight about this. It’s just a shame that our community is filled with this crap. We’re supposed to support one another, have passion for what we do and share it to grow the community. These old-world views about gender have no place. Lea Verou made a comment to me recently that she saw (in Europe, at least) that the southern part of Europe was more sexist than the northern part. We have to put a kabash on ignorance and make it well known that the community won’t tolerate it.
      - Debbie Carr
        at 01:39am
        
        Having started my first speaker bureau in 2004, I realised a number of years later that most of my speakers were male. Nothing wrong with that, except I found I was always shortlisting men. Only solution was to form a women’s speaker agency which I did. Voxy Lady Women’s Speaker Bureau. And..no I don’t discriminate I also represent men on my now re-branded original bureau.
        What amazes me the most about having a women’s speaker bureau is how many requests I get for my speakers to speak for FREE!!! And yes, even from corporations who could easily afford a speaker. We don’t do free because our speakers are all seasoned professionals who need a fair exchange for their expertise.
      - Peter
        at 02:17am
        
        Nice reading you’re taking a negative and making it into a positive, not just for your self, but also for people who would in a similar way feel left out.
        Additionally, I am prepared to take one for the team, reviewing the appropriateness of the scantily clad women images.
        
        Best Regards,
        Peter

Read the original post, ‘Women and conferences’.

Live-designing WordPress Admin Icons

Sat, 02 Feb 2013 13:09:26 +0000

A while ago I wrote a post about how I was going to do a talk at WordPress London where I would try to design a WordPress admin icon live. Well, I did it, and it didn’t go too badly. In fact, I was very lucky as the first suggestion for what I should design was a calendar icon. That’s mostly squares, so not too tricky!

The final calendar icons (as designed quickly in 30 minutes or so)

The WordPress London guys kindly filmed my talk and I’ve included it below. The audio quality isn’t great, and the screen is quite hard to see, particularly during the live demo. (This is mostly a problem with the un-dimmable room lighting rather than the distance and angle of the camera).

You can also find my Icons slides on Speaker Deck.

Sketch

I know I rave about the wonderful Mac app Sketch non-stop on Twitter, but this was a chance for me to show people how easy Sketch is to use on a particular project. In the screenshot below you can see how I made use of their multiple artboards (canvases) among other features. As explained in the talk, I design my icons side-by-side with the existing icons to achieve a consistent feel.

Using multiple artboards for WordPress admin icons in Sketch

If you’re already a lucky owner of Sketch, and want to have a closer look at how the icons were made, you can download the .sketch file (it’s about 670kb.)

And the book I recommended…

There’s one book that really is the ultimate icons resource, and I only mentioned it briefly in my talk. I recommend you buy The Icon Handbook by Jon Hicks. It’s both beautiful and useful.

5 comments

Keith Devon
at 14:49pm

Hi Laura,
Thanks for the post! It was great to have you at WordPress London. The talk was really useful and I’ve already designed my own custom admin icons, using Sketch of course!

Read the original post, ‘Live-designing WordPress Admin Icons’.

Mentoring a project: the right project

Fri, 01 Feb 2013 15:59:34 +0000

This post is an update on my mentoring project idea.

Finding the right project

If you follow me on Twitter, you might have seen that I’m now looking for a different project to work on. Whilst the previous project I had in mind would have been great fun, the client had a very tight deadline. I didn’t want to push that pressure on to students and freelancers who are likely to have other work they need to do in order to pass their studies or pay the bills.

It’s that typical situation where the client can have it two of three ways “fast, cheap, good quality.” Working on a project that doesn’t allow time for good quality isn’t going to help anyone get worthwhile experience.

What would be the right project?

I’m trying to think about what would make the ideal project in this kind of situation. This is what I came up with:

A website project where the end goal would be to launch the site
A new website or a complete redesign, so new ideas can be generated and developed
A project where every element (design, development, hosting) is entirely in the freelancer’s hands, so they can get a wide experience
A project with one or two stakeholders (clients) so that communication is fairly straight-forward (but still of utmost importance!)
A modest budget. I want everyone to gain something, so there may not be a huge budget for the project, but I want there to be some budget. Of course, the experience is supposed to be the valuable part of this project, but I wouldn’t work for free so I wouldn’t encourage anyone else to do it either.

Do you have a project that we could use?

This means I’m now looking for a more suitable project. If you’re in need of a small(ish) website, and don’t have the budget for a fulltime professional web designer or developer, please get in touch with me.

2 comments

Read the original post, ‘Mentoring a project: the right project’.

Mentoring a project: the idea

Wed, 30 Jan 2013 09:31:00 +0000

A couple of days ago, a potential project turned up in my inbox. An old school friend wants a website, needs it soon and doesn’t have a huge budget.

Me and freelancing

I’m lucky, I get offered a lot of projects, and usually I don’t have any availability for a few months. Little projects like this generally can’t pay the bills for me. It’s a lot of time (particularly admin) for a fairly small return.

I have a very small list of trusted designers that I’ll happily pass these projects. The thing is, when I do this, it’s a risk for me too. If I recommend someone who turns out to be unreliable, it makes me look bad too.

The inspiration

After listening to Unfinished Business with Anna Debenham and Andy Clarke, I’ve been inspired to be more open about how I work. I’ve never been one to keep secrets, I’m always happy to discuss my rates and how I work with anyone, but I’ve never actively shared this information. And after talking to loads of students recently, I’ve realised that one of the hardest things, after landing a project in the first place, is knowing how to run a project and talk to clients.

The idea

These thoughts and this project collided in my mind.

I want to help “de-mystify” these elements of freelancing. I wouldn’t call myself an expert, I’m not sure many people could. But after around four years of freelancing, I feel like I am successful; I make enough money to support myself, living and working by myself.

It strikes me that the transition from student to freelancer is particularly hard, and so I’m looking for students/graduates/new freelancers to work on this project. Here’s the tweet that I sent out:

Tweet I’ve already had more than twenty replies, my next goal is to make sure I find one or two people who can gain as much as possible from this project. If you’re interested, please email me. I’ll hopefully be sending out an email to everyone who’s interested later on today.

I’m hoping to blog the process as much as possible, so other people can share in our experience. My next post will cover how I’m going to try to find a good match to work on the project.

8 comments

Oliver
at 09:38am

Great idea!
Best of luck to all the other candidates :)
Prisca
at 09:43am

Laura :)
just wanted to repeat that I think this is such a brilliant idea, one which all parties will benefit from for sure :)

Working with real clients is something that teaches so much, having a mentor / expert at hand to run to for help and advise is invaluable. As a student or newcomer to the field, it is often scary—though it does not need to be.

This is one of the reasons why I get my students to work with a [ real client project ](http://webeyedea.info/wp/real-client-sites/" rel=“nofollow) during my course. Tends to be quite time-consuming for me, to manage it all (number of students = number of clients)—but… it is really worth it: happy, grateful clients & happy, more informed newbies & one happy tutor :-)
Your idea of doing this is fabulous –; hope you will find a good match :) and really hope this will inspire more web peeps to follow suit :)
Steve
at 20:19pm

This is fantastic, Laura. If only more folks in more fields applied this kind of attitude. Imagine how awesome we would all be?
Dan Farrow
at 16:11pm

This is a great idea Laura. I’ve had a couple of “those” kind of job requests recently and this seems a much more constructive approach than taking on the job directly and potentially spoiling a friendship :)
I tend to forget how hard-won my 10 years of accumulated web knowledge has been and how valuable it could be to new designers & developers.
Neil
at 15:29pm

This is such a great idea, don’t know of many others who’ve done something like this but it sounds like it’d be really helpful to someone trying to get experience.

Read the original post, ‘Mentoring a project: the idea’.

The Sharers on The Branch

Wed, 23 Jan 2013 09:44:38 +0000

I’ve written a post over on The Branch.

Read the original post, ‘The Sharers on The Branch’.

A loveletter

Tue, 15 Jan 2013 12:04:03 +0000

Note: I wrote this a while ago when I was thinking about the things that made me want to work on the web. Of course, it’s not exclusively women that inspire me, but as a girl who continually questions the value she is bringing to a project, I often find the women of the web had the greatest effect on my self assurance. I wrote this in my notebook in a fit of fury after witnessing some upsetting trolling towards a couple of women on Twitter.

---

To the women of the web (and those who support them),

You inspire me. I don’t just mean that in a throwaway hero-worship kindof way.

Your bravery and determination give me the belief and desire to stand up and talk about what I care about.

And that’s not because you’re women, or despite that you’re women. You share what you believe in because you don’t want to keep things selfishly to yourselves. You want to help others learn.

Sometimes the fact that you are women can get in the way for others. It’s their problem.

You, however, carry on with dignity. You don’t pretend that words don’t hurt, or that you don’t feel emotional. There’s no dishonesty.

Instead, you set an outstanding example to the rest of us. That we can, and should, try.

Whilst you should never bear the responsibility of my admiration, please be aware that I will always be grateful that you were there.

Laura x

10 comments

Sadaf Chohan
at 13:29pm

Dear Laura
I appreciate your this post, as well as your postings … though am a developer but i always remained inspired by you since i came across your blog … your posts not only helps regarding field things but it motivates me in terms of working hard .. stay fit … going on daily walks … working properly in professional ways and i also appreciate being such a busy lady you replied my emails and help in possible way u can by your suggestions … Thankx for being an inspiration .. stay blessed

Regards
Robin Winslow
at 13:45pm

Bravo.
I love your blog design by the way. Very bold.
dtgreen
at 14:26pm

I think you’ll find that you’ll have others writing web loveletters to you in the future, as you’re clearly on the road to becoming a bit of an inspiration yourself! ;)
Mark Glover
at 15:13pm

I find it interesting that you find more kinship with women in this supposedly gender neutral age. Is that to do with women sticking together in a male dominated industry, or is it perhaps a reflection of differences between how men and women view gender? I ask because, as a man, I feel no particular kinship towards other men over women, nor do I find them more supportive or inspiring. Perhaps women are just more awesome?
For what it’s worth, I consider you a source of inspiration.
Laura
at 16:02pm

Thank you, you lot :)
@Mark It’s not that I find more kinship with women, I just find them particularly inspiring in this way. That’s why I tried to emphasise at the beginning that they certainly aren’t my only inspiration. And why I mentioned that those who support these people are equally included.

There are so many people I love and respect, and I’m sure that most of them are men, because there are just so many more men in the industry. It’s this difficulty of being one type of minority that makes it so easy to feel slighted or disheartened, and those who get past that are often under-appreciated or suffer extra scrutiny for their trouble. It’s also so important to for these groups of people to have people they can look up to and take assurance from. Of course, they don’t have to be the same minority, but sometimes it just helps.
- Mark Glover
  at 17:45pm
  
  Thank you for taking the trouble to reply Laura, much appreciated. As a young, white male of average height, weight and build, I realise I don’t have any idea of what it is like to be in a minority of any kind, especially not in this industry. Whilst there are some people who go out of their way to victimise or over scrutinise minorities, I think most people in the majority either do it accidentally or are completely unaware that it is happening. Whilst it’s great that you can find people to support and inspire you, I wonder if you have any thoughts on how to improve the situation for/awareness of minorities? Most of us believe strongly in equality and diversity of all kinds and see the benefits of it every day, but perhaps there is more we can do to ensure it happens, or at least get out of the way if we are stopping it?
  - shannon
    at 21:16pm
    
    Great post, Laura. You’re lovely.
    
    @Mark, being aware of your privilege is one way. For instance, as a white male, you have the highest privilege. In Laura’s particular industry (not to mention everywhere else), women fight to receive the same amount of respect and credibility that is handed to you. Perhaps some of her kinship with women is due that common experience, knowing that a successful woman’s journey looks very different from a man’s.
    
    Acknowledge that you have privilege, know what it is, stop to consider it, point it out to others, and be an ally. Those are all great places to start.
    - Mark Glover
      at 10:35am
      
      Great point @Shannon (and apologies for taking so long to reply). It is a privilege to be in my position, and I try never to forget that. Being from the younger generation and having been brought up to believe that everyone is equal, it still shocks me to see that women aren’t treated with the same respect and given the same opportunities as men, when it seems completely absurd to act as though they aren’t as capable. I know that men and women often have different skill sets and outlooks, but I’ve always taken this to be a strength, not a weakness, as the differences seem to complement each other well. I work with a number of women in the tech industry, and I admire their skills and dedication just as much as the men I work with. I’m not naturally inclined to admire women more, simply for being women, as I’ve always thought the gender distinction to be completely unnecessary, but perhaps I will do in the future, given what I’m reading here about how much harder women are having to work for the respect that they deserve. Every day I meet people who are technologically literate and those that aren’t, but I’ve never seen a correlation between ability and gender. It just doesn’t exist.
    - Robin Winslow
      at 11:56am
      
      There is been a lot of discussion about this recently. This is a particularly good post: [http://aralbalkan.com/notes/on-false-dichotomies-and-diversity/](http://aralbalkan.com/notes/on-false-dichotomies-and-diversity/" rel=“nofollow). It’s not about people intentionally being discriminative (although there is way too much online bullying/harassment) it’s more about systemic bias and a lack of acknowledgement or a concerted effort to subvert it.
      
      Regarding efforts to subvert it, this is a great resource: [http://geekfeminism.wikia.com/wiki/FLOSS#How_to_encourage_women_in_FLOSS](http://geekfeminism.wikia.com/wiki/FLOSS#How_to_encourage_women_in_FLOSS" rel=“nofollow)
    - Ida
      at 22:53pm
      
      That’s a great letter. Thank you!

Read the original post, ‘A loveletter’.

New To Design

Thu, 03 Jan 2013 15:47:58 +0000

Following my learning design post, I’ve started a little project called “new to design.” At the moment it just consists of a learn-design tag on my Pinboard bookmarks and a Twitter account @newtodesign so that I can share useful design resources (especially for those new to design.)

In the future, I hope it can be useful in other ways. Any suggestions or anything you want to see? You know how to get in touch…

Read the original post, ‘New To Design’.

Grid Frameworks and why I’m not keen on them…

Tue, 01 Jan 2013 19:01:59 +0000

I’ve written a post for 12 Devs of Xmas on Grid Frameworks.

After spending months whining about grid frameworks, 960.gs and Bootstrap, I’ve finally backed up my tweet-sized complaints with some context and examples.

I knew it would be contentious and that some people would feel antagonised by my saying that developers who don’t consider accessibility shouldn’t be on the web. And possibly also that I suggest some developers lazily fail to customise frameworks to appropriately suit their needs. So far, the reasons behind these feelings seem to be a lack of control over their own work, blaming clients or bosses. I don’t know what to say to be helpful in these situations

Me, I would refuse to do a job that wouldn’t fit my idea of quality development. If there’s not enough time to make a site accessible (the idea of this still baffles me as I consider accessibility part of core development) then there’s not enough time to finish the project. It does feel rather unhelpful telling someone that, if their boss/client is forcing them to do things in the wrong way, they should quit their job, and I probably care about these things a lot harder than many, but honestly, that’s what I’d do.

Anyway, I’m sure I’ll be dealing with more accessibility-related issues in the future. It’s far too easy for me to go off on a rant and a ramble, I just want more people to care.

7 comments

Craig McPheat
at 15:26pm
I appreciate and agree with your sentiment about semantic markup, and accessibility, but I think you may have jumped the gun in [Day 7: Grid Frameworks](http://12devsofxmas.co.uk/post/2013-01-01-day-7-grid-frameworks" rel="nofollow) by implying grid frameworks are inherently inaccessible.
I argue against front end frameworks in my day to day job. The reasons I cite are:

1) developers need to learn the framework, not the underlying technology
1. our web standards require semantic markup, which frameworks often lack out the box
2. frameworks look like a framework –; sometimes as much work is required to theme it as there would be to build from scratch
3. frameworks often mean extra bytes –; superfluous markup contradicts my requirements for mobile first / every byte counts
  I get where you’re coming from and agree in most parts. I’m not saying I’ll never use a front end framework, but I do campaign for refining and building our own internal boilerplates.
It’s important to be careful when choosing arguments to protect accessibility. To say using a grid framework would introduce a risk to the accessibility of the site would be careless if not untrue, thus risking the importance of the accessibility argument. Like all things, the devil is in the detail. If those grids had semantic class names rather than grid_whatever they’d be no more accessible. You rightly point out some basic semantics required for a good accessible build –; lists, heading levels, good anchor text –; but these are separate from the structure provided by a grid framework. (Of course, all this goes without mention of landmark areas, aria, skip to main content etc)

(As an aside, is it terrible to use a grid as the structure and object orientate the theme with semantic classnames alongside the grid_whatevers?)

I agree accessibility and semantics are both important, but I think there’s a lot of detail missing to get from point A to point B in your post and subsequent comments, which is very dangerous when promoting the cause to senior stakeholders and those who need to understand the cold hard facts without emotion.
- Laura
  at 17:06pm
  
  Thanks Craig, there’s some great points in there, and I think you’re right in saying that I was making a bit of leap, here’s my explanation why:
  
  I was really trying to create an argument around your point 2. “Our web standards require semantic markup, which frameworks often lack out of the box.” But then I came to ask myself: why do semantics matter? Why bother making anything semantic? I know that I think that semantics are important, but how do you explain it to someone who just thinks that semantics are about being fussy?
  
  So I went one level deeper. Why are semantics so important to me? Chiefly, accessibility. Then reusability, maintenance etc. Thus my post became about these things, brushing over the semantics that people often disregard as purist.
  
  I’m sorry if I didn’t convey the point well enough, and you’ve definitely given me some food for thought in terms of how I represent accessibility.
  - Craig McPheat
    at 17:57pm
    
    No apology necessary Laura, any constructive discussion on accessibility is good discussion.
    
    I too am incredibly passionate about semantic markup and accessibility, but the reason I need to be careful is there’s always someone ready with a counter; a supplier, external developers, project managers… I push back on poorly structured content all the time. As you mention, the basic but big ticket items like heading levels, form inputs, lists, good anchor text are all essential –; but would I push back on someone for using a grid framework? Probably not, as the site can be completely accessible whilst using a grid system, just as much as a more semantic site can be inaccessible.
    
    If I’m honest, I would actually have to pay more attention if a supplier uses HTML5 sectioning elements to structure the document “semantically”, as these cause problems with the document outline when not implemented correctly:
    
    [HTML5 sectioning elements, headings, and document outlines](http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/" rel=“nofollow)
    
    [HTML5 document outline revisited](http://www.456bereastreet.com/archive/201104/html5_document_outline_revisited/" rel=“nofollow)
  - Marc
    at 08:10am
    
    I largely agree with your opinion on inaccessible, non-semantic grid systems. However, your post would have been more balanced if you had paid some attention to the existing alternatives. More semantic grid systems, such as [Susy](http://susy.oddbird.net/" rel="nofollow), [Singularity](http://singularity.gs/" rel="nofollow) and [Zen Grids](http://zengrids.com/" rel="nofollow) make it very easy to apply a custom grid to your own semantic HTML structure.
    - Laura
      at 08:44am
      
      I would if I were more familiar with the alternatives! That’s why I cautiously tweeted that Sass is probably the answer. And whilst I do use Sass, I still write all my grids from scratch. This might be foolish, or because I’m a creature of habit having done that with CSS since I started out……I’m not sure which!
      - Marc
        at 09:04am
        
        OK, I didn’t see that tweet. I’d say just give Susy a try and keep an eye on [Susy Next](http://oddbird.net/2013/01/01/susy-next/" rel="nofollow)!

Read the original post, ‘Grid Frameworks and why I’m not keen on them…’.

My 2012

Mon, 31 Dec 2012 23:12:16 +0000

2012 has been a massive year for me. It was a year of saying yes to things that scared me. It was the first time I spoke at a conference (and I went on to speak at a further seven events.) I found the first house I’ve lived in by myself. I travelled to as many countries in one year as I had done in my whole life so far. It was the end of a long relationship and a completely unexpected falling head-over-heels into a new one. And I got this tiny little puppy who didn’t just become enormous, but became one of the biggest and best things in my life.

I started writing a long post detailing each month and realised I have too many highlights and I’d be here all night. However this year was the year I started taking lots of photos. So I thought I’d share the few that mean the most to me.

Bringing a baby Osky home in January

The little Osky who prevented me from working most of February whilst I was trying to keep him out of trouble

Oskar at four months old during the few weeks we lived with my parents

My new home and new independence, the only place I have lived alone.

I began an obsession with vegetable boxes, buying a pot luck box every couple of weeks and trying to cook as many new healthy dishes as possible.

One of a few sunrises I experienced whilst extremely jetlagged at Future Insights Live in Vegas

Oskar enduring a week of hell after his operation at six months

The photo booth at the Critters, a very silly night

Some of the lovely friends and family keeping my house warm this year

The Spartan Race where I did 5k and obstacles in the burning sun and lots of mud

One of the many lovely views of Istanbul

My frequent view in Istanbul after I ask the native-speaking Aral to pick something good off the menu for me.

One of the many times I came back to a living room destroyed by Oskar

Nutella ice cream whilst on holiday in Madeira

When I realised Osky had really gotten that big

My wonderful family who have been further apart but so much closer in the last year

My first ever workshop with seasoned workshop veteran, Aral. In the beautiful Bologna.

Seven puddings at an amazing restaurant with lovely people in Bologna

Rooftops of Bologna

Seb Lee-Delisle’s amazing digital fireworks display at Brighton Digital Festival.

Tongue tattoos in Brighton, one of many visits

My sprained ankle which made November very difficult

A very big Oskar under the tree at Christmas

Goals for 2013

I didn’t make any goals this year, but seeing everyone commenting on theirs has inspired me to set some for 2013.

Keep saying yes to things that scare me
Get a better balance of more client work and be more fussy about the conferences I attend (19 events in one year is too many!)
Be more efficient with my time

They’re the loose and achievable kind of goals I can get behind…

Happy New Year everyone!

One comment

Chris
at 00:57am

Great re-view of 2012. My takeaway: Do more things I am scared of.
Thx for that one.

Chris

Read the original post, ‘My 2012’.

Learning Design

Mon, 31 Dec 2012 14:57:05 +0000

Every now and again someone will email me asking how they should go about learning design. After reading Aral Balkan’s fantastic post on how design is not veneer, a few developers also expressed frustration at there not being many resources telling you how to get started with design. So I thought I’d post a few of my favourite links, books and ways of approaching design.

First off, read Aral’s post. It might seem intimidating. Aral emphasises the importance of considering every tiny design decision you make. There’s no easy-in. But really there’s no easy-in to doing anything well. Development might appear to be something with a low barrier to entry, but in order to do development with web standards, or to any level of efficiency, you need to take the time to learn the best techniques and working processes.

Considering every tiny design decision might also make design seem like a much more arduous process than it needs to be. In truth, if you are considering your users, their experience, and your overall design vision in the back of your mind, every decision you make whilst designing will be considered. It can feel somewhat subconscious at times. If you have the ‘feeling’ that your choice of typography suits the project, then chances are, if you analyse the cognitive and emotional impact on the user, you’ll find your subconscious actually made those decisions for a reason. Design isn’t instinct. This ‘instinct’ is really something that we’ve built up from the experience of millions of different design decisions, and evaluating their success and failure.

Learning how to design

Design is a pretty tricky thing to just ‘learn’; it doesn’t happen overnight. Following a tutorial on how to create a photo-realistic SLR camera in Photoshop is about as useful as following a tutorial on how to create an SLR camera in CSS; it teaches you how to use the tools but not about why you’d want to use an SLR camera illustration in your design. The best thing is to try as many different design tasks as possible to test yourself and gain experience on what does and doesn’t work. I also find looking at other people’s design work and considering its effectiveness really helps develop an understanding of design principles in relation to your own personal taste. This is what a lot of art and design education is built around; interpreting and understanding the work of other people. Blog posts where people tell you about their inspiration and how they designed their sites are the best sources for this kind of learning as you get real insight into the decisions of the designer.

The opposite of this are sites that showcase trends, ‘beautiful’ websites or lists of a particular type of site as ‘inspiration.’ These tend to be examples of what are very aesthetically-pleasing designs, but not necessarily successful designs in terms of a good user experience. Of course convention can be a trend of sorts. If one designer establishes a really easy-to-use type of navigation, then it’s inevitable that those working on similar projects may use that standard as a basis for their own navigation, but only similar projects. It’s so easy to mimic a lovely visual aesthetic to make your project look good, but you really need to consider if that’s an appropriate aesthetic style.

Resources

Blogs

Blog-wise, I prefer the more ideasy and critical thinking blogs, as I find ‘how to design xyz’ is never terribly useful unless you’re working on an identical project.

A List Apart design category

Very few magazine sites curate design content so well. It’s all too easy to fall into posts that are just lists of ‘inspiration.’ A List Apart is one of the most tightly-curated and edited magazines around, and their design articles are always worth a read.

Paul Robert Lloyd

If you’re looking to learn more about design thinking, especially a focus on how responsiveness fits into design, Paul Robert Lloyd’s posts are must-reads.

UsabilityPost

A very insightful blog focused on usability, often discussing design in terms of successful user experiences.

Sidebar.io

Sidebar.io is crowd-sourced by a select group, so has a slightly curated more zeitgeist-y feel to it. The links aren’t always long-form articles on design, but if there’s a good post going around, they’ll pick up on it.

Mark Boulton

Mark has always been talking about more traditional design theory as a part of web design, and his approach has always inspired me.

People

Twitter is a great way to keep up with good designers. I find these snippets of insight can often provide bite-size inspiration when I really need it.

Books

I’m always disappointed that there aren’t more design theory books with a focus on web design. The few I’ve found are here, but also books on usability and graphic design where you can combine the knowledge to create a great design background.

A Practical Guide to Designing the Invisible by Robert Mills

Understanding design as a language, and how design is more than just the visual decoration. I’ve reviewed Rob’s book in more depth.

A Practical Guide to Designing for the Web by Mark Boulton

A great grounding in many of the different areas of design theory in relation to the web. I’m very eagerly awaiting Mark’s next book on grid theory.

Ordering Disorder: Grid Principles for Web Design by Khoi Vinh

Pre-dating responsive design, but still a very valuable book for learning about applying grids to web design in a practical way.

The Elements of User Experience by Jesse James Garrett

An oldie but a goodie. These founding principles really molded the way I view design for the web.

Designing for Emotion by Aarron Walter

Considering not just the user experience, but the user emotions. A quick but brilliant read which I’ve reviewed in more depth.

[Edit: How could I forget this first time round?!] Elements of Typographic Style by Robert Bringhurst

An incredibly in-depth guide to typography, giving you all the basic principles you need and more.[/edit]

[Edit 2:] 8faces Magazine

Not quite a book, but a beautiful typography magazine with new releases a few times a year. 8faces introduces you to great quality typefaces and provides plenty of insight into design with its feature interviews.[/edit]

I’ll try to keep them coming

Resources on learning design aren’t necessarily those I keep a lookout for, but I’m going to make a conscious effort to do so from now on. I’ll post on Twitter and maybe do a round-up post later on, so let me know if you know of any good resources I should check out.

7 comments

natalie
at 15:28pm

Thank you Laura! This is fantastic :). Happy New Year!
Tushar
at 19:44pm

Awesome, Resourceful
Thanks Laura !!
Sibylle
at 17:34pm

Very useful, Laura, thanks! Know/have read most of the books but need to look at some of those online resources and people :)
Charles BH
at 23:20pm

What do you think about the Smashing Magazine books, especially volume 1&2?
- Laura
  at 08:45am
  
  I’m afraid I’ve not read them. I shamefully only own Volume 3, and haven’t read much of it yet.
- Janna Hagan
  at 21:51pm
  
  Hi Laura, Love what you’re doing here. I myself am a college student and I created [Student Guide Web Design](http://www.studentguidewebdesign.com" rel="nofollow) simply out of frustration with the material I was being presented during my design education. I love helping others because it’s a great way for me to learn myself, but also helps others out who are also trying to overcome the same challenges (because I was there at one point!).
  Cheers from Canada :)

Read the original post, ‘Learning Design’.

Sass for Designers — The Setup

Fri, 28 Dec 2012 17:51:36 +0000

As an accompaniment to my post on Sass for Designers (why and how you should use Sass) I thought I’d better include a quick writeup on my setup for working with Sass in the hope that it’ll help you get started. I’m afraid I work on a OS X, so my instructions will only be good for Macs.

Of course, all of this can be done with the command line and other terrifying tools. I’m very impressed by those who can remember all the commands and quickly get everything working silently in the background. I don’t find this very easy, and prefer to use apps to help me out.

Codekit

Codekit does all the processing for you. It takes your Sass and spits it out into fully-working CSS. It does loads of other clever things too, but I mostly just use it for Sass. Go download it and give it a go. I think you’ll find it’s definitely worth paying for.

In order to get started with Codekit and Sass, you’ll need a /sass folder in your project where you keep all your Sass files. Sass files can contain plain old CSS or Sass-style CSS but they must have the extension .scss.

Read the original post, ‘Sass for Designers — The Setup’.

Sass for Designers

Fri, 28 Dec 2012 17:51:04 +0000

Despite saying that I wanted to avoid writing post about development, I wanted to write something about Sass.

Excuse me, what is Sass?

Sass is a CSS pre-processing language; it’s a slightly different way of writing CSS which can then be processed by a tool that spits out fully-working CSS. It’s like a kind of short-hand that adds in some handy features that aren’t available in CSS. If you want to know how to use Sass in your workflow, try my post on Sass for Designers — The Setup.

Why am I writing this?

Sass still isn’t particularly easy for designers to pick up straight away. The documentation isn’t easy to understand, The way it’s written is really aimed at those more familiar with programming. The tutorial isn’t too bad, but it doesn’t tell you about the advantages from a designer’s point of view.

I want to just cover a few simple principles. I’m no Sass expert, I use mostly it in its simplest form, but I’ve found it incredibly useful.

So what are these advantages? It’s all about efficiency. It makes your markup quicker to write, less repetitive and easier to maintain. That might sound a bit performance-related, but I promise that it’s something that designers (we who use markup to support our design work, rather than being super-programmers) can use to make development much more straight-forward.

Variables

The best and most basic example is variables. We tend to use the same colours throughout the document. This result in us writing the same hex code or RGB value over and over again. If we want to change that colour, we need to do a Find-and-Replace to pick through all of our markup, making sure we don’t accidentally change the wrong value. You might have a few rules that each need your dark red brand colour:

a {
  color: #822733;
}

.summary {
  color: #822733;
}

.copyright {
  color: #822733;
}

Using variables, we can give that particular red hex colour a variable name of $brand-colour at the beginning of our stylesheet, and then just use that variable throughout the stylesheet where we’d usually use the hex colour. Then, if you suddenly decide that the shade of red isn’t quite right, you just need to change where you declared $brand-colour: #822733; at the top, and it will be changed for every rule that uses the variable throughout the whole stylesheet.

// My Sass colour library

$brand-colour: #822733;

a {
  color: $brand-colour;
}

.summary {
  color: $brand-colour;
}

.copyright {
  color: $brand-colour;
}

Numbers as variables

Variables don’t just have to be strings of text, they can also be numbers which you can manipulate. If you use some kind of baseline grid idea, modular scale, or just a pattern of numbers to keep your design proportional, chances are you’re frequently repeating the same values throughout your stylesheet. If you were using 10px measurements all over the place, you might create ‘unit variable’ with $unit = 10;. This unit could then be repeated:

$unit = 10px;

h1, h2, h3 {
  margin-bottom: $unit;
}

p {
  margin-bottom: $unit;
}

But how about when you want that unit to be doubled? You want exactly twice the margin on another element, because then it will still keep the rhythm in your design. With Sass, you can add simple maths (+, -, *, /, %) to do this very simply:

$unit = 10px;

h1, h2, h3 {
  margin-bottom: $unit;
}

p {
  margin-bottom: $unit;
}

aside {
  margin-bottom: $unit*2; /* 20px */
}

footer {
  margin-top: $unit*4; /* 40px */
}

Then if you decide, one day, that multiples of 10px aren’t big enough for your design (need MOAR WHITESPACE) then you can just change your $unit variable to something bigger, such as $unit = 15; and all of your measurements will be changed accordingly, preserving those proportions throughout your stylesheet.

Mixins

Mixins are reusable collections of rules. These are perfect for design patterns that you might use throughout the site. These also stop you repeating yourself in your CSS but in a way that’s more semantic than using the same class name on every HTML element.

For example, you might have particular divider style that you use all over your site. You use it below all sorts of elements; <article>s, <header>s and even the odd <p>. It’s got a certain amount of padding between the border line and the content above, and a certain margin below. It’s just a grey border but it has a fancy shadow on it.

an example of what your divider with a subtle border might look like

Then you might apply the following CSS class of .shadow-border to any HTML element you want to have the divider. It’s not very semantic, but it does the job:

.shadow-border {
  border-bottom: 1px solid #a4a4a4; 
  
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

If you wanted to be more semantic, you might go applying all those rules to all the relevant HTML elements, but this can make for an awkwardly-organised stylesheet.

header, article, p.intro {
  border-bottom: 1px solid #a4a4a4;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

With mixins, you can give this collection a name using @mixin. This name doesn’t have to relate in any way to your HTML:

@mixin shadow-border {
  border-bottom: 1px solid #a4a4a4; 
  
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

Then, to apply that mixin to any element, you just include its name @include shadow-border; like you would any other rule in CSS.

@mixin shadow-border {
  border-bottom: 1px solid #a4a4a4; 
  
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);

  padding-bottom: 20px;
  margin-bottom: 40px;
}

article {
  @include shadow-border;
}

header {
  @include shadow-border;
}

p.intro {
  @include shadow-border;
}

Doesn’t that look neat and tidy?!

Nesting mixins

Even better, you can nest your mixins inside other mixins. We might want to apply that same type of shadow to lots of elements, so that our design appears to have a consistent light source throughout the site. So we then make a mixin especially for that shadow too. This has the added bonus of keeping all the prefixed CSS (-webkit, -moz, -o, -ms etc.) tucked away in one place too.

// A few variables thrown in for good measure
$border-colour: #a4a4a4;
$unit: 10px;

@mixin subtle-shadow {
  -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
  box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
}

@mixin shadow-border {
  @include subtle-shadow;
  border-bottom: $unit/10 solid $border-colour; /* Base unit divided by 10 = 1px */

  padding-bottom: $unit*2; /* Base unit multipled by 2 = 20px */ 
  margin-bottom: $unit*4; /* Base unit multipled by 4 = 40px */
}

article {
  @include shadow-border;
}

header {
  @include shadow-border;
}

p.intro {
  @include shadow-border;
}

Nesting

Mixins aren’t the only thing you can nest in Sass. You could nest tags within each other if you wanted, which makes your CSS less repetitive and easier to read as you can see which selectors are related:

/* written in plain old CSS */

.module h3 {
  font-weight: bold;
}

.module p {
  padding-bottom: 10px;
}

/* written in Sass */

.module {
  
  h3 {
    font-weight: bold;
  }

  p {
    padding-bottom: 10px;
  }

}

But let’s face it, that’s getting really nit-picky about the neatness of your CSS.

Nesting @media

Where nesting becomes incredibly useful is with media queries.

If you follow SMACSS or any other school of thinking where you’re trying to base your media queries around the optimum display of your content, rather than the viewport width of various popular devices, then chances are your stylesheets are filled with different media queries trying to keep your site looking tidy at every possible width.

Nesting media queries can help with this. Where previous you may have felt like you needed to keep all your media queries in separate files (one for 320px and up, one for 768px and up and so on…) Group all selectors using the same media query width together or list all your media queries relevant to a selector one after the other. Sass allows you to nest your media queries within the selector so you can easily spot where those breaking points are and where they need to be changed.

For example, I have an article which has a changing width, line-height and font-size depending on the width of the viewport. I want the text of my article to be as legible as possible across all devices. In CSS, this might look like this:

/* initial rule for all viewports, including browsers that don't support @media */
article {
  font-size: 14px;
  line-height: 25px;
}

article h2 {
  font-size: 18px;
  padding-bottom: 15px;
}

/* for 300px viewports and wider (mobile first) */
@media only screen and (min-width: 300px) {
  article {
    line-height: 20px;
    width: 90%;
  }

  article h2 {
    padding-bottom: 10px; 
  }
}

/* for 600px viewports and wider */
@media only screen and (min-width: 600px) {
  article {
    line-height: 25px;
    width: 80%;
  }

  article h2 {
    padding-bottom: 15px; 
  }
}

/* for 900px viewports and wider */
@media only screen and (min-width: 900px) {
  article {
    width: 60%;
  }
}

/* for 1200px viewports and wider */
@media only screen and (min-width: 1200px) {
  article {
    font-size: 16px;
    line-height: 30px;
    width: 50%;
  }

  article h2 {
    font-size: 21px;
    line-height: 35px;
    padding-bottom: 20px; 
  }
}

When you can include the media query within the selector, it suddenly becomes a lot easier to find those rules that you’re so likely to tweak in the future.

article {
  font-size: 14px;
  line-height: 25px;

  h2 {
    font-size: 18px;
    padding-bottom: 15px;
  }
  
  @media only screen and (min-width: 300px) {
    line-height: 20px;
    width: 90%;
  
    h2 {
      padding-bottom: 10px; 
    }
  }

  @media only screen and (min-width: 600px) {
    line-height: 25px;
    width: 80%;

    h2 {
      padding-bottom: 15px; 
    }
  }

  @media only screen and (min-width: 900px) {
    width: 60%;
  }

  @media only screen and (min-width: 1200px) {
    font-size: 16px;
    line-height: 30px;
    width: 50%;

    h2 {
      font-size: 21px;
      line-height: 35px;
      padding-bottom: 20px; 
    }
  }
}

Give it a go?

There are so many clever, time-saving, efficient things you can do with Sass, and I certainly don’t know them all. The benefit of writing Sass is that you can just write everything in plain old CSS, and just use Sass on the few selectors that could really benefit from it. That’s how I got started, and on every new project I work on, I learn another handy tip and make my CSS that much quicker to write.

If you’ve got any tips, please let me know in the comments as I find it really hard to discover what might be useful when you’re writing markup with a designer’s perspective!

9 comments

Forrest Tanaka
at 22:38pm

Nested media queries just about brought me to tears… Hey, you have `$unit = 10;` That should be `$unit: 10`? I couldn’t find anything in Sass nor SCSS that looks quite like that.
John Harrington
at 22:45pm
Nice article, but I don’t like that use of mixins very much, that style is just being duplicated everywhere and I really think you’d be better with a class for it, to reduce the bloat in CSS.
Mixins are best used when you need to calculate things, for instance I use this little mixin to quickly set font sizes and line heights:
```
=fontsize($size)font-size: $size + em@if ($size &gt;= 2)	line-height: 1.5em	@media screen and (min-width: 30em)		line-height: 3em@else	line-height: 1.5em
```
(also, I use the Sass syntax, rather than SCSS, because I love the whitespace)
John Harrington
at 23:33pm

For mixins you would actually be better off doing the example where the CSS was badly organised because Sass won’t recognise that the same styles are being applied on each, so your CSS will end up bloated.
Eric Eggert
at 00:56am

Funny enough, it was this article by Nathan Smith with the same name as this article here that convinced me about using SASS in the first place: [http://sonspring.com/journal/sass-for-designers](http://sonspring.com/journal/sass-for-designers" rel="nofollow)
(And I have a programming background :-)
Thomas Park
at 21:43pm

A useful complement to `@include` is `@extend`. While `@include` duplicates the mixin rules for each class, `@extend` has the classes share a single instance of the rules. This helps with the CSS bloat that John mentions.
Thomas Park
at 17:44pm

A useful complement to `@include` is `@extend`. While `@include` duplicates the rules for each class, `@extend` causes them to share the rules they have in common. Helps with the CSS bloat.
dtgreen
at 00:10am

Brilliant read Laura. I’ve been trying to find the time to jump into SASS lately, and this article has pretty much made up my mind: I’m going to dive in this weekend! :)

Read the original post, ‘Sass for Designers’.

We read with our own contexts

Tue, 18 Dec 2012 14:40:40 +0000

Oh Twitter. Yesterday was another day where I accidentally incited another riot with a poorly-worded tweet. Nobody is perfect, but it’s starting to happen with alarming frequency, and I wanted to understand why I keep doing this.

The ever-present ego

We read everything through our own ego filter. It’s how we apply new knowledge to our own situations. Whenever we read a tweet, blog post, article, book, watch a TV show, a film, a play, we take in what we’re reading and hearing and apply it to ourselves. How does this affect me? What do I think of this? Does this mean that what I do is right or what I do is wrong? It’s not that we’re entirely intentionally selfish, it’s just how we comprehend the world around us.

Specifically, if we’re working on the web, we tend to filter what we read through our own specialisms. If an article doesn’t mention what we think is incredibly important, we deride it as thoughtless. If a tweet doesn’t include that exception that we feel makes all the difference, we jump around, compulsively feeling the need to add our own opinions or defend our own positions.

Forgetting over and over

Somehow we manage to forget over and over what we’re constantly saying to each other: 140 characters is not enough for context. A blog post or article is just one facet of a topic, or a facet of a facet of a fragment of a subject. To always include every detail would take forever (and would make for a dull read) and, you know what, you don’t have to always be right.

I don’t introduce my blog posts saying “I am speaking from a position of authority here…” Because that would be a lie. In fact, I often do the opposite, but it’s still not necessary. Who is anyone to decide what is ‘right’ and what is ‘wrong’? All we can advise are the widely-accepted standards, and even those won’t be right forever.

One person’s point of view is exactly that. The wonder of the web is that we can put our ideas out there and others can help us refine them. We have creative and journeying discussions. We make progress. A lot can be learned and shared from something written about a controversial subject. If we don’t discuss these subjects, how do we expect people to learn? Even if we’re sure we’re “right,” how better can we help others to see our points of view? I value every comment left on my blog. If you look back through my posts, almost every one has a comment that has taught me something new, even if it’s just how other people approach things from a different angle.

Criticism comes in two forms

When we disagree with something that someone else has written, we must take the most care to express ourselves possible. Here I’m providing myself as an example of what not to do:

We write with our own contexts too

Now if you’ve never read another one of my tweets, that does come across as a rather unpleasant criticism of the author, 24ways and Bootstrap. And for that I’m really sorry and I’ve been regretting it ever since. Enveloped in my ego, I wrote it as if all my previous tweets about Bootstrap (from days and weeks and months ago, not prior to that tweet) were context. Not only does that assume that people will read all my tweets, but also that they’d remember them.

We must remember that we write with our contexts shut up in our own heads, and we should really provide them where possible. Linking to something that you’ve written on that topic, or just writing with a little more consideration, you can prevent yourself coming across as unkind when you really didn’t mean to appear that way.

I went on to write twelve follow-up tweets. Each trying to clarify, yet back-pedalling, on the last. And that doesn’t even include the multitude of @replies. I just made a big mess.

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Constructive criticism is aware of context

Constructive criticism is when you may be negative about something, but your criticism explains why you think something isn’t right, and what could be done to resolve it. You don’t have to have the solutions to everything in order to criticise, but it shows respect to show that your opinion is relevant and considered rather than just a knee-jerk reaction.

If it’s not constructive, then it’s the other thing

If your criticism isn’t constructive, then chances are it’ll come across as personal, rude, unkind and possibly even trolling. There’s no wry smiles at the end of tweets, no sarcasm tags, and for all we try with emoticons and expressive animated GIFs, the nuances of face-to-face communication are completely lost on the web.

Play nice

Of course criticism is important, if we all just go around telling each other how fantastic we are, we probably wouldn’t try anything new. The web community is a caring and protective place, but we need to make sure we’re contributing in a positive way.

5 comments

Lee Griffin
at 14:53pm

The problem yesterday wasn’t your views, whether they were “right” or “wrong”, it was that people have entrenched views. In the web world, as I’m sure it is for many other professions and industries, we find ourselves wedded to techniques and ways of working. When someone questions these things we don’t see it as “Oh, someone doesn’t see this as useful”, we take it to mean “They think it’s a stupid thing to do, and by proxy that I’m stupid for doing it…but I’m not stupid!”
I think I agreed with the feelings you seemed to project, and discussion around these things is positive. Who knows how many people read about the spat not knowing about bootstrap, or even grid systems, and left with a more balanced view of the pro’s and con’s of how to approach a site?

I think Bootstrap is a crappy way to work, but then I also hate WordPress too, I’d never recommend to people like me to use those things…but that doesn’t mean I don’t regularly recommend them to people that have different backgrounds and requirements. I think maybe that’s what we should all have in our mind when we read something…

“This isn’t them saying my way, and my beliefs, are wrong…just that they have a (probably) valid reason why it’s not always suitable”

As long as we try to be respectful, and I hope no-one truly fell out with each other over this (it’s all to easy to think people have got fully annoyed with you when really they just have passionate views!), then these kinds of things are good for the community, because everyone taking part is a slightly different flavour of developer, with a little bit more or less designer in them, or designer with a little bit more or less developer in them.

It’s this spectrum that can really help us focus on best practices, plural, that apply dependent on our situation and skills.
James Brooks
at 15:01pm

Hi Laura, recently I’ve seen a couple of designers, Paul Adam Davis, Amber Weinberg and yourself criticising Bootstrap. Coming from a development only backgrounds seems to have left me with whitenoise when it comes to design. Whilst I’m capable of deciding if something looks good or not, I’m unable to design myself, so I rely on design frameworks such as Bootstrap and Foundation to give me a head start. My blog for example is built on Bootstrap however I paid for a theme via WrapBootstrap to take the standard Bootstrap theme and change it into something beautiful and different. I don’t see the harm in doing that? It’s like you taking a website structure you use on every site and applying custom colours on top. Is that just as bad?
I know we’re coming to a point with bootstrapped websites where a lot of developers are leaving them as the default styles, but many of us work by shipping function over design. With you, perhaps that’s different.

I have a lot of respect for you Laura –; this comment isn’t meant as a stab at yourself or anybody mentioned above. :)
Dean
at 17:12pm

Hey Laura,
Don’t beat yourself up. I think it is also important to realise that everybody is in the same 140char limit as you, and many can (and do) read between the lines. I saw your tweet and wrongly or rightly put 2+2 together, and drew my own conclusion, as I’m sure other people will have. My personal opinion is that frameworks are fantastic for quick prototypes and putting ideas together, but I still prefer to start with a blank template when it comes down to it…. so yes, those few characters you wrote will always say something different to the reader, wrong or right.
Louis Bullock
at 03:01am

Fantastic article, Laura, I’ve now re-evaluated how I talk to others online, when to give critique and constructive criticism etc.
I don’t know about you, but one my favourite things in this community is when a dev or designer takes on something I’ve suggested or improves after listening to my criticism, or even respects it and acknowledges it. It’s an absolute delight, and what makes this community a wonderful place; I hope that it will continue to be a place of positivity, and supportiveness.
Michael.
at 13:30pm

Thanks for the interesting and thoughtful post. I think you make some good points about criticism and context. It is not just about our personal context. It is also our culture, our society and so on. People forget or don’t realise that knowledge they take for granted is often not there in other people.
Also, I think you provide a good example of some of what I don’t like about Twitter.

Read the original post, ‘We read with our own contexts’.

Speaking at the WordPress London January meetup

Mon, 17 Dec 2012 11:56:56 +0000

I’m speaking at the WordPress London January meetup on the 17th of January 2013.

I’ve been using WordPress for years, for my own site and for client sites, and I really love it. I had absolutely no idea what to talk about though. I tend to create custom themes for clients, but these are very different from themes designed for use by many different sites, and so I wasn’t sure whether my experience would be relevant to many people. I also don’t feel very confident speaking about code.

A mad idea

Thinking about the different things I do that are related to WordPress, I decided to go very niche. WordPress admin icons are something I’ve been doing a lot of lately, and they combine the skills of icon design with the skills of fitting icons in with an existing set. My talk is going to be:

Designing WordPress Admin Icons

The WordPress admin has really evolved into something lovely over the last few years. So when you create plugins and custom post types, you want custom icons that feel at home in the interface. Laura is going to discuss her top tips for creating icons, and attempt to live-design a WordPress admin icon to show you step-by-step how she does it.

Live-designing…eek

It might go all horribly wrong, but I thought the best way to describe how I design these icons isn’t just to show pictures, but to show the process. It’s often tricky to describe our processes as so many of the steps we do have become second-nature, we barely think about what we’re doing. So hopefully, designing live will help me do a better job of explaining the tools and techniques that I use.

I’d love to see you there!

If you’re going to be there, do say hello! At the moment it looks as though there’s no space left, but more spots will open up before the event.

2 comments

Read the original post, ‘Speaking at the WordPress London January meetup’.

24 Ways: Design Systems

Wed, 12 Dec 2012 10:45:08 +0000

I’ve been thinking a lot about the design in ‘responsive’ design lately. My post on 24ways is where I started to get some of my thoughts and ideas out. Here I talk about design systems and how thinking in this way, and basing our processes around this concept, can help us create more flexible future-proof responsive designs.

Read the original post, ‘24 Ways: Design Systems’.

Bardowl: The Big One

Mon, 10 Dec 2012 21:23:00 +0000

For the last few years, I’ve been working with a great team of people on our iPhone app, Bardowl, an app for streaming unlimited audiobooks for £9.99 a month (think Spotify but for audiobooks.)

It’s not been a quick and easy. Getting publishers to come round to the idea, and securing good audiobooks, has been a lengthy process but we’ve been lucky to have people who really know what they’re talking about behind the scenes. Our CEO, Chris Book and CTO, Neil Chapman, have bootstrapped the business and have worked incredibly hard, taking a big risk, because they really believe in bringing good audiobooks to the iPhone without massive subscription costs or limited listening choices. They’re the reason I was first interested in being involved, and the reason I’ve stuck at it for so long.

Why only blog about it now?

I wanted to wait until there was a version of the app that you’d want to try. Previously, we launched with ‘business books.’ These are wonderful if you’re into management techniques, deals, finances and all these audiobooks that I find, quite honestly, dull.

Now the catalogue has got so much awesome

But now, the catalogue has some serious awesome with biographies and memoirs, childrens books, classic, contemporary and modern fiction, non-fiction, poetry and drama. Roald Dahl’s Revolting Rhymes, Cormac McCarthy’s No Country For Old Men, loads of Dickens and Sherlock Holmes. I really think you’ll like it. Oh yes, and you can try it for free for 7 days.

What have I done then?

I am the sole designer. I do all the design; branding, app design and web design/development. It’s really the first product I’ve ever worked with, and I enjoy having something I get to stick with and iterate over time. I’m still not sure if I’d want to do this full time, I really love the variety that comes with client work, but it’s very rewarding feeling like you’re constantly improving one product.

Working for almost-free

I also work almost solely for a small share (I’ve had a few payments for work when we had some investment.) Since I started time-tracking the project in March 2010, I’ve put 430 hours into the project, around half of that being on the website, which has had three or four full redesigns. This working for almost-free is definitely not something I would do again, which I will elaborate on below.

Learning

It’s been a complete learning experience. It was my first app design work, I created the logo long before I started working professionally as a designer, and I’ve never worked as part of a startup before, in fact I’ve never really worked as part of another company before (as a designer.) Starting before I graduated from university, it’s been a project that has spanned the whole of my freelance/professional career. As I’ve learned new things, I’ve been able to experiment, and put my new knowledge straight into the app and the website. It was my first mobile website design (pre-“Responsive Web Design”,) my first foray into web fonts, my first “Responsive Web Design” and my first experience with CSS pre-processors.

Designing and developing

I’ve learned a huge amount about designing for apps. Unlike designing for the web, where I usually write the markup and sometimes the code, I can’t develop iOS apps. I don’t think this is a good thing, it really emphasises why I think that you must be able to write markup in order to design for the web. Designing for iOS apps, with fairly minimal knowledge of the development process is really hard. I make a complete pain out of myself, constantly asking Kieran questions about how things work, what’s possible, what’s native, and what would be easiest to create from a development point-of-view.

While I’ve learned loads from Kieran, I still want to know more about the development process. In the new year, I’ve resolved to attend Aral Balkan‘s Modern iOS Development Workshop (I’ve heard so many good things.) But I don’t really see myself developing apps for a living, I find programming very difficult and not terribly rewarding, I just think my design decisions can be more well-informed as a result.

Designing for free

Above I said I wouldn’t work for free (shares) again. As a general rule, I wouldn’t recommend it, it’s a huge risk and chances are you’ll never make a return on the hours you put into the project.

However, my specific reason I wouldn’t work for free is that I believe people can often struggle to understand and appreciate the value in design if they’re not paying for it. They’ve not got an interest in getting the best value for money, so they don’t necessarily feel as though they should listen to what you say. In a way, the developer will always have the final say, as whatever they make is what gets released.

When you’ve worked for free, and you’ve put so much time and effort into a project, you’re less likely to leave. The more time you spend, the more reluctant you’ll be to leave that all behind. It’s like the Stockholm Syndrome of working for free. I still completely believe in Bardowl as a concept, and I have a huge amount of respect and love for our CEO and CTO, and that’s why I persist in trying to make my app design live up to the idea, but I’d be lying if I said I didn’t have frustrated times where a loss of control and startup politics infuriated me.

Working with good people

Despite the occasional hiccups, I’ve found working with Bardowl immensely rewarding. There’s so much to be said about working for people who really believe and care about what they’re doing. It’s not just about doing design and development right, or business right, but about working with people right. Our CEO Chris Book is an example of somebody who cares about the people he works with. His role as CEO has often mean placating, convincing and cajoling, but he doesn’t just do this as a means to getting his app finished, he genuinely believes in providing value for those working on the project. And doing it all with honesty and transparency. Honesty and transparency are massively underrated.

2 comments

Russ
at 22:18pm

Great, open and honest post, I can sympathise with some of the long hours/low rewards just because you either love what you are building, or love the learning process of doing it :)
Ola Ringdahl
at 14:03pm

Hi!
I´m Ola, a swedish male voicetalent who loves audiobooks. I have looked at Bardowl and it seems great but there is one questionmark: why aren´t the books listed on the website?

There is a swedish company with exactly the same concept called Storytel.se, and the show all of their books and you can also manage your books on the site which is really handy.

Best

Ola

Read the original post, ‘Bardowl: The Big One’.

Reinvention and Building Ourselves — Build 2012

Wed, 05 Dec 2012 18:10:23 +0000

I’ve posted a writeup of Build conference 2012 on ubelly.

Oddly, I’ve not found any other writeups from Build, which may be because (as I mention in my post) the talks weren’t those sound-bite talks that give quick take away tips. If anyone does come across any, please point me in the right direction as I’d love to see how other people approached the wide-ranging stories!

Read the original post, ‘Reinvention and Building Ourselves — Build 2012’.

Insites Xmas Special—Integrity and Polarity

Tue, 04 Dec 2012 08:45:27 +0000

Yesterday was Insites: The Xmas Special, a brilliant event put on by the lovely Keir Whitaker and Elliot Jay Stocks. After being well fed, everybody in the room gave a six minute(ish) talk about something they’ve learned in 2012.

It was a personal, open and incredibly meaningful set of talks. There were no slides, and nobody in the room was sat behind a laptop or Twitter. The conversations that ensued afterwards were greater than anything you’d get at any big conference. We had all shared our experiences equally and honestly. As Rachel Andrew put so well, it was almost group therapy.

One of the rules of the day was that what happened in the School Of Life stayed in the School Of Life, so far be it for me to report the personal stories of other people. However, I’m happy to share what I spoke about, so I thought I’d share it here…

Not picking sides

I’m the eldest of five children in my family. It’s a big family and none of us are shy. However, I’m usually referred to as the “sensible one” or the “calm one”. I’m all about diplomacy and trying to keep the peace if there’s any upset or argyments. It’s not that I’m afraid of conflict, I think arguments can be healthy and constructive, but I really don’t like picking sides.

Yet for so many years I didn’t take this approach when I was working on the web. CSS layouts were good, tables were bad. Semantic web was good, Flash was bad. To me, these were facts and exceptions were begrudgingly accepted as freak edge-cases.

When there’s so much to learn on the web, it’s much easier to follow than to lead, or even just make up your own mind. As humans we seem to be drawn to polarity; picking sides. Which football team do you support? Which political party are you aligned to? Which religion do you believe in? But it’s such an unhelpful way to live. Polarity lacks subtlety, it leads to blind acceptance of everything you’re told.

If you think about it in terms of politics, you feel forced to toe the party line. This kind of politics is damaging in itself; if everyone in a group is made to believe exactly the same thing, unquestioningly, it’s very hard to accept any new ideas or change your mind. You can’t back-track. And because you feel as though you must “stick to your side”, you blindly defend you side’s beliefs at a risk to your own integrity.

Integrity

Integrity is something that has always meant a lot to me. But I feel like sometimes I’ve been guilty of risking my own integrity in order to fit in. It’s hard to go against the group, nobody wants to feel like an outsider.

But life’s too short to do things that don’t make you feel proud. Of course we all do those projects that are good for cashflow or good for your profile, and hopefully these don’t run completely contrary to your personal beliefs, but even if we can own a tiny little part of these projects; do something good and something that we’re proud of, we can make that project worthwhile in terms of our integrity.

We need to continually question what we’re doing and why we bother. I think I’m right in saying that most of what we do isn’t just “a job.” We do this because we care and we want to make better experiences for everyone.

One comment

Dan Blundell
at 09:25am

“We need to continually question what we’re doing and why we bother. I think I’m right in saying that most of what we do isn’t just “a job.” We do this because we care and we want to make better experiences for everyone.” –; This just nailed exactly why I’m feeling the way I am at the minute, good to know that there’s others that feel the same way!
It can be really difficult when you’re surrounded by people that consider a job simply a job but I whole heartedly agree, if you can do even one tiny thing that you’re proud of, even in the toughest of projects, you can stay happy because our work means something.

Read the original post, ‘Insites Xmas Special—Integrity and Polarity’.

display: none;

Tue, 06 Nov 2012 08:45:02 +0000

Or The things you think are common knowledge but really they aren’t.

I was on the ShopTalk show a few weeks ago, and a few people have asked me what I meant when I said “display: none; naughties.” I foolishly thought that people would understand what I meant, (and I’ll come to that later) so I thought I’d better explain myself.

`display: none;` in responsive web design

When we’re changing out layouts based on viewport sizes, using media queries, we tend to switch page elements about a bit. We might make our images display one-on-top-of-the-other for narrower layouts, we might make our text super big to take advantage of bigger spaces.

There can be a lot of content on one web page, and often there’s a temptation to hide some of it on narrower viewports. This walks hand-in-hand with the assumptions that narrow viewports are mobile devices and people using mobile devices are roving the planet using the web ‘on the go.’

Assumptions

But those assumptions are exactly that, you’re just assuming that’s what the user is doing, you’re not basing that on real research or user testing. Why are you hiding so much of your content if you’re assuming it’s also useful to those browsing your site with a wider viewport?

Don’t be lazy

Just hiding content is a lazy design solution. Yes, it’s hard designing for smaller screens, but maybe that will help you ensure that every little piece of content you’re putting on that site is worthwhile. Responsive design should be about rearranging, not changing, your page elements.

And then you’re actually just loading it anyway…

When you’re putting content into your page, and then hiding it with CSS, it’s still there, it’s just not visible. So if you’re using this ‘technique’ across your site in numerous places, you’re likely taking a performance hit. And potentially, for narrower viewports/possible mobile devices, in the one place that a slow-loading page is likely to irritate a user. It’s just not worth that risk.

Changing the display, not hiding the display

One solution I’ve been using is changing the display of the content. It is a real problem that CSS can’t easily manipulate all types of content into a readable fashion on all devices. This is particularly true for navigation that needs to be displayed in a significantly different way, and often tables need to be reinterpreted into a more digestible format for narrow viewports. And in these cases, javascript can be your friend.

Mobile first

I always start mobile first, that’s not just in markup, it’s in content too. We don’t want to load up unnecessary HTML that creates performance problems, or javascript that may not working consistently on mobile devices.

If I’ve got a data table, and I think it would be better off displayed as a list of data, I would write the list of data into the HTML. This way it’ll load quickly, and those without javascript (or enough bandwidth to load javascript) will get a decent experience.

Progressively enhancing with javascript

Then, I would use media queries, or some kind of clever javascript, to load in the fancy content for particular viewport widths. I’ve done this to load in tables of data, replacing data lists, and also for navigation, replacing a vertical list of links with a show/hide button that reveals the menu when tapped (as on this site.) None of this requires display: none;. No markup is wasted.

[Edit]: Accessibility

The good Steve Marshall has pointed out that there are also accessbility issues related to `display: none;`. I didn’t want to cover too much in the post, but in case you want to know more about that too, I recommend Aaron Gustafson’s ‘Now You See Me’ on A List Apart and Chris Coyier’s ‘Places It’s Tempting To Use Display: None; But Don’t on CSS Tricks. [/edit]

Writing about markup

I’m a little bit scared of writing about markup. I’m sure there are loads of front-end developers out there who know a huge amount more than me, and I’m worried I’ll get it wrong or make myself look stupid.

I also shy away from writing about the ‘easy’ stuff. This post about display: none; is a fairly simple principle and I really don’t want to patronise anyone.

People do want to hear about the ‘simple’ stuff

Making these assumptions about it being a simple principle, and that everybody would know about it already, was daft. I was quickly proved wrong when people started asking me about it and then I realised how silly it was to think that we all have the same sources of information.

Scattered learning

The web is a big and varied place. To assume that someone else has read something just because you’ve read it is foolish. How do we learn about these resources? When do we all decide that we’re all going to read these particular sites and articles so that we’re all equally informed?

Even on Twitter, the resources we hear from, and learn from, are wildly different. We may follow completely different individuals and so the resources we learn from are curated by these individuals, and these may not ever crossover. Even if we do follow the same people on Twitter, noone can be expected to read every tweet, and inevitably you’ll miss some, and then you may not know about this other new thing that everybody else has been doing for years.

Where I get to the point…

The point I’m trying to make is that we shouldn’t be fearful of writing about what we know. Even if you write from the most basic point of view, about something which has been ‘around for ages’, you’ll likely be saying something new to someone. They might be new to the industry, you might just be filling in the holes in someone’s knowledge.

Every week I have a revelation on app.net or Twitter where I wonder how I didn’t know about this old technique or tool before… but we can’t be expected to keep up with everything. I hope this post does that for some people. It’s good to share what we know. You needn’t be the first, you’ll just help if you’re the first that somebody finds.

63 comments

Mark Glover
at 09:55am

Thanks for blogging this Laura, that’s really cleared up the podcast for me. I wasn’t really convinced about starting with mobile first, but using javascript to turn the mobile markup into the desktop markup makes far more sense than using display: none; or, worse, using javascript to turn desktop markup into mobile.
Regarding what people know, I’ve been worrying about the same thing for ages and avoiding writing about things that seem simple to me. I concluded a little while ago that what I’ve learnt so far comes mostly from other people writing about things that seem simple to them. As you say, we all look at different parts of the internet, and not everyone has been doing this job for years. I’m a pretty experienced PHP developer, but I’m perhaps still a little behind the recent changes in frontend development. Other people are probably in the reverse position.

Keep blogging the simple stuff, there will always be someone who needs that piece of knowledge :-) P.S I’d be interested to read a post from you on semantic HTML sometime. I know it’s one of your things, and I feel like I could be doing it a lot better (I still div a lot).
Jason Bradberry
at 10:12am

Thanks, definitely a helpful post!
I’ve been working using a desktop first approach, and am considering switching to looking at ‘mobile’ first for my next project. One thing I’d like to hear more about – in the podcast you talked about loading content conditionally as browser window size is increased (using the example of the large illustration on the right hand side of your site). Can you recommend any good articles/links for further reading on this?
Rémy
at 10:17am

The last half of this article has really struck a chord with me. In the past, I’ve shelved so many potential blog posts because I think they’re too basic when they might actually have been useful to somebody.
There’s also a lot to be said for how easy something is to Google. Before posting on something, try doing a quick search for what you’re thinking of writing about. I think more often than not, you’ll find that what you want to post about either hasn’t been covered at all, is not visible enough using the search terms you used (which anyone else might easily have searched for as well), or you do it slightly differently. Either way, sharing even the smallest bit of knowledge only makes the web community stronger.

Thanks for the great thoughts (and inspiration) Laura!
Richard Lewis
at 10:26am

very informative laura, no one should assume that everyone knows a certain piece of info. Something that I have learned though is if you have an image for example and display :none on that then yes it still renders, however if you wrap that element in a div and then display none on that parent element the img doesn’t actually load… thought it may help
- Sara
  at 06:36am
  
  This is a great tip! thanks for mentioning it :)
- Jason
  at 18:01pm
  
  I’d be cautious with this approach as from my testing the images still get loaded.
  [http://jsfiddle.net/jlaeser/pCbav/](http://jsfiddle.net/jlaeser/pCbav/" rel=“nofollow)
  This could potentially make for a larger initial page load.
  - James
    at 15:37pm
    
    Yes I tested this also and it does indeed load. Shame though as this could have been an ideal solution.
  - Prisca
    at 10:42am
    
    Laura :)
    thanks for this post –; well explained :)
    
    Also, just wanted to say that I agree: writing about what might simple is always a good idea. Teaching webdesign is changing all the time and there’s so much out there that it can be a tricky endeavour to point students to good resources. By now, I recommend people and high quality sites as good resources to follow ~ which essentially means that you writing about something simple will always have an audience, from students starting out with learning webdesign to the students of the web who we all are :)
  - Ian
    at 14:26pm
    
    Hold on. “display: none;” is naughty? In all situations?
    Then you Laura, are very naughty. For that’s exactly how you display your top menu at lower resolutions, no?
    - Laura
      at 14:42pm
      
      Heh. Only in the form of a good old dropdown menu. So whilst display: none; is used to temporarily hide the sub navigation, it is visible on hover.
      
      To be fair, I’m sure there are a lot of use cases where display: none; has its uses. As with every rule, there are always exceptions :)
      - Ian
        at 14:57pm
        
        Well, actually at lower resolutions, both menus are only available on click :)
        
        I agree there are many use cases –; but this isn’t what’s implied here. I actually believe for performant web apps, using “display:none;” and modifying markup through js absolutely essential.
        
        Harry Mansworth
        at 16:04pm
        
        Using display:none has other disadvantages. In the (rare) case that javascript has been turned off or the device has insufficient resources to run the script, using something like $('#element').hide(); will ensure that, should JS be turned off the elements will still be visible. Essentialfor things like navigation!
        
        Cristian Garner
        at 16:37pm
        
        I don’t think she meant on all situations, display:none is a useful tool, if it were really bad no one would use it, I believe what Laura wants to explain is that it must be used only in what it is needed and to stop over using it.
        
        Dean
        at 20:45pm
        
        Most people in this industry seem to fear that they will be found out and ridiculed by those with more experience. I am thankful that there are some of those people who write blog posts, and put themselves in the ‘firing line’ for us unassured types to lap up. I’m yet to see the ridiculing of anybody though, and that’s another thing to be thankful for! :)
        
        Chris
        at 00:09am
        
        Nice article :)
        Like Jason mentioned in the comments I too would like to hear more about how you approach using JS for conditionally loading content.
        
        Cheers
        
        Anthony Young
        at 21:43pm
        
        Great post :) Very encouraging for me as I want to start blogging about little bits like this, although I doubt it will be as good as yours! Keep up the great articles
        
        Mark Dixon
        at 22:58pm
        
        I agree. It is fine to write about web design and front-end stuff even if you are not an “expert”. I have recently launched my new portfolio website and have included a blog section where I plan on writing about web design.
        While doing client work we straddle a lot of areas and cannot be expected to know everything about everything.
        
        Mea Culpa –; on my first responsive design I did a fair amount of display:none.
        
        Cheers from Montreal,
        
        Mark
        
        John Jacobsen
        at 16:55pm
        
        Excellent post. Very applicable across design, dev, and content creation. Thanks!
        
        Carl Hallberg
        at 09:46am
        
        Love the part on ‘Scattered learning’! Very important insight that not many of us think of from day to day. I feel safe to say that i’m learning new stuff each and every day, even the most basic tech but also on completely different topics that in hindsight definitely could have been worth blogging about.
        Great post!
        
        Fredrik Christensson
        at 08:27am
        
        Hey Laura, and thx for the post. I feel when we designing we dont get enough test time to see how the user are using the site. This is one of the biggest problems that I have encountered when iam design a responsive site.
        
        Skweekah
        at 23:29pm
        
        Very interesting article. I guess there’s always a better way of doing things, and if you can incorporate a little bit of better in each of the projects you are working on, you are challenging yourself and growing as a designer/developer.
        
        Tim
        at 20:51pm
        
        How about a concrete example workaround?
        
        Hai Web
        at 15:36pm
        
        Thanks bro.
        
        Søren Maarbjerg
        at 00:46am
        
        Thanks for your encouragement.
        Hiding images by display none is a big issue, because they load anyway. The following research breaks the ice by documenting that “background images attached to elements that are inside a element with display none are NOT loaded”: [http://timkadlec.com/2012/04/media-query-asset-downloading-results](http://timkadlec.com/2012/04/media-query-asset-downloading-results" rel=“nofollow)
        
        Loading images with a common 1x1px src (because the attribute cannot be empty) AND inline styling its background-image to the ‘original’ src you are able to control the load by conditionally replacing the src with the background-image src – and showing the parent element. Only then will the image load.
        
        Rob
        at 22:57pm
        
        Good post, but I don’t see a concrete alternative solution here. An example would be beneficial.
        
        Søren Maarbjerg
        at 11:51am
        
        Thanks Rob. Please see my replied suggestion on how to avoid caching images for a slideshow if viewport < 480, on [http://timkadlec.com/2012/04/media-query-asset-downloading-results](http://timkadlec.com/2012/04/media-query-asset-downloading-results" rel="nofollow)
        
        Dayana
        at 16:45pm
        
        Great post, I always thought the same to myself about posting about things that should be “common knowledge” when indeed there can be several layers of knowledge to uncover. Loading mobile first is a great tip! Thanks for the post
        
        Michael Mahemoff
        at 03:46am
        
        Very familiar with this issue as I’ve strived to do RWD without having to customise much of the server-side or the JS. And doing so means display: none; is almost a necessity.
        In an upcoming iteration, I’ve resorted to using more Ajax requests with checks for the user-agent. It’s arguably more naughty than just “display: none;”, because now there’s a bit of JS coupled to the stylesheet, but since it improves performance, it’s a net gain.
        
        Benjamin Lupton
        at 05:08am
        
        The last part raises a very interesting point, and is definitely something I find myself falling into a lot. Although, my train of thought feels that writing another blog post is just adding more noise to an already saturated library of good content –; if I figured it out already, then the answer is already there, what help does it do myself adding yet another article about it?
        Perhaps the difference is how people get their learnings in the first place. A pre-supposition of this article appears that learning primarily occurs via blog posts and other forms of subscription based learning. I wonder how this mode of transport contrasts against learning when one encounters a problem then seeks an answer via google and stack overflow.
        
        For instance, stack overflow is a fantastic place to ensure the content that is posted is of top notch quality, whereas with blog posts you do not have that guarantee that what you are reading is correct. However, with blog posts, you do get the subscription benefit.
        
        Perhaps the solution to this dilemma is figuring out a way of combining stack exchange’s peer review and archival for searching abilities with blog posts careful curation, subscription and celebrity benefits.
        
        Thoughts?
        
        Laura
        at 07:19am
        
        While I think places like Stack Overflow are very useful and important, you really have to know the question that you want to ask. What if you just want to know tips and tricks?
        
        I agree that me writing this on a blog doesn’t necessarily mean I’m right, or that I know what I’m talking about, but neither do I have that guarantee when I read blog posts written by other people. The ‘peer review’ element seems to come via social networks. If someone that I respect posts a link to a blog post, then they give that post credibility.
        
        I think that learning on the web means we all need to doubt the credibility of what we read. We build up knowledge by reading a lot around these topics and then making judgments on what we choose to believe. These aren’t always black-and-white facts, there are a lot of grey areas where we rely on ‘opinion’ pieces to understand the ‘why’s to help us make more informed decisions about our work.
        
        Chris Heilmann
        at 06:42am
        
        Excellent points! What fascinates me more is that people are not taking advantage of matchmedia() enough –; it is the JS equivalent of mediaqueries. This means you can happily use the same query in CSS and JS to lazy-load content only when it is applicable. [https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/](https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/" rel=“nofollow)
        
        Elliot Lewis
        at 17:22pm
        
        That is a great little function. But I didn’t think it worked in IE? I’m sure I tried it before and ended up using work arounds to stop IE exploding at unknown function.
        
        Dave Andrew
        at 09:05am
        
        Great points Laura about sharing. IMO the more info the better. If think the more we share the more kudos you’ll gain and that respect may hopefully turn into business.
        
        Felicia Fortes
        at 16:31pm
        
        I like your thoughts and I’ve decided to share more of my newbie learnings.
        I think every project has an individual path. For me blogging about things I’ve learnt during a project is a way to remember what I did and at the same time being able to learn new stuff through the comments.
        Just look at all the new knowledge coming through this blog posts comments.
        
        Chatman R.
        at 12:55pm
        
        I haven’t actually been using `display: none;` very often on its own. I’ve mainly used JavaScript to hide elements I manipulate through a situational `.hide` class. I’ve gotten into a habit of using temporary classes for states to applied through JavaScript. This way, if something effs up, I won’t be hiding critical information from the user.
        If I ever find I’m hiding an element indefinitely, it usually means it’s time to figure out if it’s needed at all. And I liked your last point over not being afraid to contribute something to the pool of knowledge. My reluctance to write blog posts comes from the fact that I’m entirely self-taught, so I have a tendency to assume everything I know IS common knowledge and I have nothing to add. I may have to rethink that.
        
        John Locke
        at 09:26am
        
        Best practices are made up of all these little bits of information that we collect from people we trust in web development, and we don’t always listen the first time we hear things. But when we keep seeing the same things written over and over, then those standards and best practices begin to take hold in our own workflows.
        I’m always looking for better ways to do things on the front-end, to make things faster loading, or smoother for the user.
        
        Thanks for being one of the voices of reason and being a mentor to many in the web industry.
        
        Paul
        at 18:04pm
        
        Really well written post! Was looking into the use of display none to hide some elements on a responsive design and you’ve persuaded me to think otherwise!
        An article on how to do the JavaScript side of things would be great! Thanks.
        
        Kintoweb
        at 01:48am
        
        It may be also possible to use iFrame and display:none on that to stop data downloading
        
        Greg Smith
        at 00:38am
        
        “I’m a little bit scared of writing about markup. I’m sure there are loads of front-end developers out there who know a huge amount more than me, and I’m worried I’ll get it wrong or make myself look stupid.”
        I bet most people feel the same way, so don’t worry. I’ve been designing & (front-end) coding for more than 10 years, and I still read about & play with the fundamentals all the time. I think it’s always important to keep re-visiting the basics, not just the very difficult stuff. Well done. Keep up the great work!
        
        Kalina
        at 13:45pm
        
        Most browsers like Chrome and Firefox doesn’t actually spend time on the display none content on page load. In other words the load time it about the same as if the content isn’t there.The only browsers that have this issues are IE<11
        
        korosheh
        at 21:13pm
        
        Is nice article thanks

Read the original post, ‘display: none;’.

SMACSS –; Scalable and Modular Architecture for CSS

Wed, 31 Oct 2012 08:45:52 +0000

I bought Jonathan Snook’s Scalable and Modular Architecture for CSS five months ago and, embarrassingly, I’ve only just read it. As a “flexible guide to developing sites small and large”, it’s fantastic.

Last month I was lucky enough to see Jonathan speak about State-Based Design (a concept which he covers in SMACSS) at the FromTheFront conference and it reminded me to put the book at the top of my to-read pile. It’s not a long book, it’s about the same easy-to-digest length as the A Book Apart series, which meant I got through it (whilst taking notes) in a couple of hours. I also love that there’s a mailing list that keeps you updated with the latest methods and other relevant news.

I’m an HTML and CSS girl

As a front-end developer, I’ve long been obsessed about writing really good clean and semantic HTML and CSS. Frameworks and boilerplates tend to make me cringe. Accessibility and progressive enhancement are what I value the most. It was lovely to read a book about CSS that was from a practical point of view but still held those ideals. The SMACSS core goals are:

Increase the semantic value of a section of HTML and content
Decrease the expectation of a specific HTML structure

Jonathan walks you through the way that he lays out his stylesheets, informs you the reasons behind his decisions and backs these up with solid examples. There’s no “you must do this” or “you’re not standards-based if you don’t do that.” Jonathan reiterates throughout that his way isn’t the only way, but it works for him.

This is the exact opposite of what frameworks do. Frameworks tend to do the thinking for you, and encourage lazy blanket usage (perhaps not intentionally, but that’s what they tend to result in.) Jonathan teaches you the background that you need in order to make your own informed decisions.

Throughout the book, Jonathan also refers to how this structuring of CSS affects older browsers, and how it works with newer development techniques such as those using media queries.

Really thinking about your CSS

One thing that really stood out for me in SMACSS is the importance of process when structuring your CSS:

With a module-based system, it is important to consider state-based design as applied to each of the modules. When you actively ask yourself “what us the default state,” then you’ll find yourself thinking proactively about progressive enhancement. It also can have you approaching issues slightly differently.

This systems-based way of thinking really appeals to me as I’ve been thinking a lot about design systems as part of responsive design. It’s great to read about the usefulness of patterns in both development and design, making our planning a lot smarter and considering future use to create maintainable stylesheets.

Starting from the beginning

The structure of the book works really well and should help someone fairly new to CSS as well as more advanced masters of markup. It starts with the basics of structuring (ordering) your CSS, then moves on to more advanced details with selectors and performance. After the main SMACSS principles are covered, Jonathan goes on to explain the role of pre-processors and how they could work with the SMACSS principles. His explanation of Sass actually helped me understand how to use it more efficiently (and I already use Sass on all my projects) and would do well as a primer for someone who is completely new to pre-processors.

Finding the balance

Whilst reading SMACSS I’ve managed to pinpoint the biggest problem in my CSS; I have a tendency to use overly qualified selectors (such as body.home div#content h3.entry-title.) I’m not sure why I do it, though I suspect it’s because it looks more visually balanced than .entry-title. And also I’m an idiot.

Jonathan points out that structuring your selectors in this way is tying your CSS behaviour to your HTML structure (and hierarchy.) Of course, as someone obsessed with semantics and hell-bent on avoiding ‘classitis,’ I’ve tended to rely heavily on the structure of my HTML (and the unique nature of HTML5 elements) to hook my CSS but it does not make for modular or scalable CSS.

I’ve learnt a great deal from SMACSS and I believe that writing good CSS is about finding that balance between writing clean, reusable HTML (written independently of CSS) and clean, reusable CSS (making use of HTML element classnames.) I feel like this book has made me understand a lot more about CSS and I really recommend it if you’re striving to be more efficient. I don’t often collaborate on markup, but I can imagine that SMACSS could help make team projects considerably easier.

9 comments

Abbaty Kori
at 09:40am

Great! :D Sounds like what I’ve been looking for…
I’m definitely getting a copy soon :)
Danny Baggs
at 09:55am

Thanks for the reminder… just bought for my train ride.
Nice review.
Mark Glover
at 09:58am

Hey Laura,
Thanks for posting this great review. There are a lot of CSS books out there and I’m not often tempted to buy one, but your writeup has pushed all my CSS buttons, so now I might have to…

Cheers
Pankaj Parashar
at 09:58am

Wow! Even i tend to use overly qualified selectors most of the time, but never realized that I am actually making my css dependent on the HTML structure.
Thanks for this article!
Michael Woodruff
at 12:56pm

“I have a tendency to use overly qualified selectors (such as body.home div#content h3.entry-title.) I’m not sure why I do it, though I suspect it’s because it looks more visually balanced than .entry-title.”
My exact feeling as well.
Rachel
at 13:15pm

Like you, I’ve had SMACSS for quite a while now but have never got around to reading it. Reading this really just tells me that I need to *make* the time and get reading it. I’m sure it’ll help my process with CSS massively. Thanks :)
hannes
at 09:42am

‘And also I’m an idiot.’ :D
no, you’re not! great shoptalkshop btw. keep it up!
Martin Underhill
at 22:31pm

Great article! I’ve just gone to Mr. Snook’s site and bought the ebook– now to get stuck in! Thanks :)
Dan Robert
at 23:16pm

Great review! I’ve also purchased the book quite a while back and still haven’t read it. This post prompted me to put it next on my list! :)

Read the original post, ‘SMACSS –; Scalable and Modular Architecture for CSS’.

My favourite apps—fit for purpose

Thu, 25 Oct 2012 16:37:48 +0000

After sitting and waiting for Photoshop to open for five minutes, just to edit an old file, I went off on a bit of a rant about Adobe software.

Tweet A few people asked what I thought the alternatives are, so I thought it might be time to write a post about it.

Photoshop and Illustrator, why not?

I’ve been suffering Adobe software for a long time. Since [Adobe Photoshop](http://www.photoshop.com/products/photoshop" rel=“nofollow) was introduced to me as ‘the industry standard’ when I was at college learning basic photo manipulation, it’s been in my life. Where I may have started out using Photoshop for the right reasons (it does photo manipulation well) I wonder why I bothered using it for web and app design for so long.

Monopolising

This isn’t really Adobe’s fault. I’d say they’re victims of their own success but I think they’re making plenty of money. The idea that an app designed for photo manipulation is the industry standard for web design is ludicrous. And the problem is that it’s perpetuated because people are too scared (often a nice way of saying lazy) to try any alternatives.

We also attach ourselves to these tools. He or she who doesn’t use the right ‘professional’ tool isn’t professional. We seem to value using the same tool over using the right tool. Fine, Photoshop used to be the best tool for creating web graphics, but it isn’t necessarily the best tool anymore. But because people are caught up in this ‘industry standard’ nonsense, they’re allowing their jobs to be so much more difficult, and involve so much more hacking to work with modern design workflows.

Not fit for purpose

I’m not sure anybody is under the illusion that Photoshop is a good app for web design? A significant amount of web design is focused around typography. Does the type in Photoshop resemble the rendering in any of the browsers? No. You can’t create scalable graphics (useful for responsiveness and retina displays,) multiple shadows or even square-cornered borders on the outside of shapes without hacking about (you know…like in CSS.)

We really need tools that are created with designing for the web and apps in mind. Tools that are sympathetic to the constraints and flexibilities of our mediums. Of course there’s never going to be One Magic App To Fulfill All Our Dreams, but something that actually acknowledges modern ways of working would be a start…

Side note: design in the browser?

Designing in the browser is perhaps a discussion for another time…I think whilst this would be ideal, I find it very difficult to work creatively in markup. I’m not saying it’s the wrong way, I’m just saying it’s the way my brain was made.

Buggy

The problem with being the ‘industry standard’ is that you can rest a while on your laurels. No matter that your app takes an age to open itself, an age to open a file, an age to save a file, freezes frequently, crashes regularly or requires Force-Quit to close. Every new version of the Adobe Creative suite comes with a load of fancy features that you probably won’t use and no fixes for bugs we’ve been attempting to work around for ages.

Horrendously overpriced

No matter the bugs, when you’re considered the ‘industry standard’ you seem to be able to charge the earth and everyone in the industry. Everyone from freelancers just starting out, to developers who only use it so they can work out what on earth the designers are thinking, are expected to pay a minimum of [£660*](#asterisk) for just Photoshop.

I certainly think it’s worthwhile paying for good apps which you use regularly. I truly value the work of good app creators. I just want the price to more accurately reflect my usage, and the actual value in my work. I don’t want to have to add a Photoshop tax to my hourly rate so that I can afford to always have the latest Adobe apps at my clients’ expense.

(* *That’s downloadable, not subscription; the subscription makes it harder to work out the relative value as it depends on if/how often you upgrade your apps.*)

## It’s hard to switch apps

Yes, it’s very difficult to switch away from an app you’ve been using for years. Often we confuse this as the newer app being ‘bad’ but really it’s because our workflows have become molded around the other apps. There’s no quick and easy tool to create a button in Photoshop that you’ll be able to accurately replicate in CSS, but we’ve hacked our working processes to ensure that we can do it with relative speed.

If you’re to start using a new app, you need to get over that expectation hurdle that it’s going to work in exactly the same way as the app you previously used. It’s not fair, especially when the new app may be better designed to suit the workflow of a modern designer.

And maybe there’s not going to be one app for everything

One thing I’ve been realising is that I shouldn’t want one app to do everything. As web designers, we’re often very cross-disciplinary. I design for web, mobile apps, print, icons and illustration. It’s mad to expect one app to do each of those very specialist formats. I’ve started to embrace apps that do their one job very well, and value their ability to work with other formats (even if they don’t create them) above all else.

What I use

Photoshop and Illustrator graphics replacement: Sketch

Sketch is brilliant. And unlike other apps, it’s not trying to be Photoshop. From their homepage: “We set out to build a better app for graphic designers. Not to copy, but rather to improve.” Being a vector-based app, it’s very easy to create scalable graphics that will export well for responsive design and retina displays, as well as being generally reusable design elements. The only downside to this is that it’s not so easy to create small pixel icons where you need to work on hinting. But, as I said above, that’s probably something I should look for in another specialist app.

Sketch features a lot of tools designed around the graphics we create for the web. Even featuring good CSS generation for individual shape styles. The export tools are also very helpful, allowing you to create multiple artboards and ‘slices’ within a document and then allowing you to choose which layers are exported, even including an automated @2x option.

Sketch Export options

There are a few little bugs here and there in Sketch, but it is in constant rapid development. Whilst slightly crippled by the (slow) speed of Apple’s App Store update approval process, I use the Beta version of the app and am greeted by a huge changelog almost daily.

Photoshop photo editing replacement: Pixelmator

Pixelmator is a great photo editor. It has many of the photo manipulation tools that Photoshop has at a very affordable price. The interface is pretty, though slightly low in contrast and a bit tiny in places (great if you like squinting!) It also has basic save-for-web capabilities, which are slightly hidden within the ‘slice’ tool.

And the rest…

A few people asked about the other apps I used (for development etc.) so I thought I’d give a quick rundown of what’s in my dock (my most used apps):

screenshot of the apps in my Mac OSX dock

**Finder. **(Mac OSX default)

Mail.app. (Mac OSX default) I want my email available offline and on my iPhone. Mail does that. It may not be feature-filled, but at least Google isn’t snooping around in there…

Calendar. (Mac OSX default) For calendaring things. Shared calendars is handy.
**The Hit List. **The best to-do list app I’ve used. It’s quick to open and has some of the best keyboard shortcuts ever to make it really quick to use. I’ve never managed to get the syncing with the iPhone app working quite right though…
Reeder. Nice app for reading your RSS feeds. I think my Reeder might be a bit dusty, as I don’t often get time to read my feeds, but it sits in my dock reminding me that I should catch up.
Google Chrome. The browser I wish I didn’t have to use but do. It has the best developer tools asides from Firefox…
Firefox. I really really want to use Firefox as my main browser but it’s so sluggish I think it gives Photoshop competition. In the dock for cross-browser testing.
Opera. For cross-browser testing.
Safari. (Mac OSX default) For cross-browser testing.
VMWare. For opening up Windows and cross-browser testing.
Coda. My development text editor of choice. It has some handy features and is prettier than a plain text editor. I don’t really use the FTP very much so sometimes wonder if I should try something new.
**GitHub For Mac. **The main way I interact with GitHub. I’m still a little bit fearful of Terminal, so GitHub For Mac provides me with an interface that helps me understand what I’m really doing with Git.
**Codekit. **A brilliant brilliant app for compiling pre-processors (and other things.) I use it with Sass which I write in Coda and commit in GitHub for Mac. Dream team.
MAMP Pro. Makes managing your local server environment (especially if you’re working with virtual machines) a lot easier. I use the Pro version because the the non-pro version is intimidating.
Snippely. I changed the dock icon because the original scissors icon was too ugly! A code snippet app where I keep all the super-repetitive stuff like CSS resets and WordPress loops.
Pixa. A new app I’m trying out for organising all the ‘resources’ folders I have for files like icons. So far it’s pretty nice.
Sketch. The vector graphics app (see above!)
Pixelmator. The photo editing app (see above!)
[Photoshop](http://www.photoshop.com/products/photoshop" rel=“nofollow). Because even if I don’t want to use it, I still have to use it for legacy files and working with other developers.
Illustrator. As above, I only use Illustrator for legacy files. And saving vector files in formats that I can open in Sketch.
Transmit. I use Transmit occasionally for FTP and SSH, but more as a Finder for hidden files!
Fontcase. A great app for activating and organising your fonts. Tagging and collections makes it easy to organise in a way that suits you.
iTunes. (Mac OSX default) Like most people, I don’t really like using iTunes. But I love CDs (yeah, so what? I’m old-school) and obtaining music in a legal way. iTunes makes this easy enough.
Spotify. For when I want to listen to something new, or something that’s too embarrassing to buy… ;)
Tweetbot. I believe in paying for good apps. Tweetbot has so many features and makes multi-column use of Twitter a delight.
Wedge. One of the more polished app.net apps for desktop.
1Password. The only way I’ll ever be able to have secure passwords is by having an app that acts as my memory for all those secure passwords. 1Password is great, and syncs to an iPhone version.
ImageOptim. Can usually cut at least 15% off an image’s size without losing quality. Useful for anything you’re putting on the web, and doubly-useful if the graphics apps you’re working with don’t have a Save For Web functionality.

We need to question our tools

‘Industry standard’ and ‘not worth paying for’ are both blights on our industry. Everybody has different needs and different budgets. The apps I use might not be right for you, I’m not telling you that you must use them, and you shouldn’t do that either.

If we keep an open mind, a willingness to try new apps that might better suit our workflows, and the understanding that a good app is worth buying, maybe we’ll finally get a bit closer to those dream apps that can solve all our problems.

15 comments

Aral Balkan
at 16:57pm

Great write up, Laura. I caved in and bought a year’s subscription to Creative Cloud but feel dirty for doing it. It’s mostly because I’m so at home with Photoshop. I definitely need to invest more time in Sketch (it is a beautiful app that I already love more than Illustrator), keep trying to love Pixelmator, and keep my eye on the growing list of next generation of design tools. I sincerely hope that come this time next year, I won’t feel the need to renew my Creative Cloud subscription.
Steve Rydz
at 16:59pm

Nice post. It’s always good to see what other designers/developers are using. I noticed you said you use Transmit for finding hidden files. You should check out Total Finder ([http://totalfinder.binaryage.com/](http://totalfinder.binaryage.com/" rel="nofollow)). It adds tabs to Finder and you can also view hidden files with a keyboard short cut.
Jack
at 17:14pm

An interesting article –; amazed that I have never even questioned the validity of PS as a web design tool but now that I do it seems ludicrous! I would say however that I use Adobe software, not as a tool to design the eventual layout of a page but rather to mock it up: I don’t mind that the typography tools in PS are not as sophisticated (or shall we say different) when compared to the styling options available in the browser because I know that I can tweak the leading etc when i come to write my CSS (in the same way i am happy to use lorum text in a psd and then swap it out when i write my code). Obviously that isn’t ideal –; an exact PSD would be preferable but it’s a small sacrifice to make when you take into consideration the power that PS has to edit raster images. That is the real advantage of the program and it is those elements that you slice up and export to be used in your HTML document.
Mark Glover
at 17:27pm

Like the above commenters, I always like to see what tools other people use. I’ve made many work-life changing discoveries over the years and am always looking to improve my tool set. What I could really do with, if you (or anyone else commenting) knows of such a thing, is a PSD viewer that renders layouts, layers, colours etc accurately. I’m one of the developers you talk about in the post who keeps Photoshop in order to view work sent to me by designers. My copy is very old (and not entirely legal) and it’s beginning to struggle with newer formats, so if I don’t find anything else that’ll do the job well (i.e. better than The GIMP) I’ll be forced empty my bank account into Adobe’s :-(
Andy Davies
at 22:06pm

I’d add Jpegmini as an optimiser, it does a really good job.
- Laura
  at 07:40am
  
  Thanks Andy. [It looks great too](https://itunes.apple.com/us/app/jpegmini-lite/id525742250?mt=12" rel="nofollow)!
- Niclas
  at 03:00am
  
  Thank you very much for this really helpful list. I will definitely give Sketch a try.
- kyle
  at 09:36am
  
  Great list, you might have convinced me to switch to Sketch and Pixelmator from Adobe. For a code editing I use Sublime Text 2, but I haven’t tried Coda. Have you tried ST2? If so, do you still prefer Coda?
  - Laura
    at 07:45am
    
    I’ve tried Sublime Text 2, but not enough to give a proper verdict on it. All the clever keyboard shortcuts do appeal to me, but then again the way preferences are handled, and the way features are added through ‘Packages’ intimidate me a bit!
  - Weyert
    at 20:08pm
    
    Why do you think you need to be up-to-date with the latest versions of the Adobe software? I don’t see any reason to update my CS5.5/6 copy in the future. I mean bug fixing as you mentioned is nearly non-existent…
    I would like to thank you for mentioning Sketch, though. Looks promising, keeps the Fireworks way of thought going ;)
    - Laura
      at 07:47am
      
      True. I’m now only using Photoshop CS3 and Illustrator CS3. Unfortunately it can result in compatibility problems if you’re working with other people who have newer versions. Also, if you’re just going to use the even-worse old versions of these Adobe apps, you may as well try the alternatives!
    - Christophe Franco
      at 16:19pm
      
      Have you heard of Ormr ? Looks like a promising image editor, with unlimited modifiable action history. I tend to think it could allow for a much more “natural” creative process, especially for folks who aren’t very keen on creating and tweaking tons of “utilitarian” layers (and I am one of these folks myself…)
      
      They seem to be still lacking momentum on their Kickstarter project, but from $15 a license, it looks like a cheap bet into the future.
      [http://www.kickstarter.com/projects/928340467/ormr-the-smart-image-editor](http://www.kickstarter.com/projects/928340467/ormr-the-smart-image-editor" rel=“nofollow)
      - Laura
        at 11:50am
        
        Ooh, I haven’t. Thanks Christophe, I’ll check that out.
      - Mickey
        at 08:32am
        
        So no browser is great? :) I’d like to use chrome but don’t like the developer tools as much as firebug…
      - Matt
        at 16:37pm
        
        Chrome’s developer tools are well worth further investigation (imho they are in a different league to Firebug / Firefox extensions), and there are some great tutorials on the, such as this introduction from [Majd Taby](http://jtaby.com/2012/04/23/modern-web-development-part-1.html" rel="nofollow) (which has a slant towards mobile devices) and one focussed on performance from [one by Addy Osmani](http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/" rel="nofollow).
        +1 for Sublime Text 2; I started using it about six months ago and would never go back. Don’t be put off by the Preferences settings; there are plenty of easy-to-follow examples on StackOverflow etc of how to change things that you need to.

Read the original post, ‘My favourite apps—fit for purpose’.

CreativeJS for non-coders workshop with Seb Lee-Delisle

Sat, 20 Oct 2012 13:11:08 +0000

Programming block

I’m a bit scared of JavaScript. Since I started learning front-end development about seven years ago, I’ve pretty much stayed away from it. That aside from some pretty dodgy jQuery where I can usually bodge something together but would never rely on it. I’ve always said it’s because I wanted to be really really good at HTML first, and then CSS and then JavaScript, but I somehow always stopped short of actually learning JavaScript properly.

This is because I was scared of it. I might be able to put together some basic PHP when working with WordPress, but I really wouldn’t consider myself a programmer. The less that the code I’m writing has an instant visual output, the more I get confused by it. I’ve tried to learn all sorts of different languages but they always go in one ear and out the other. I had just settled for knowing enough to be able to know what the right solution should be and finding someone clever to help me.

There’s a lot of JavaScript on the web

The problem was, that in doing this, I was really limiting myself. There’s a lot of JavaScript on the web. Even if you’re not using it to do something fancy on a site, if you’re a modern developer using progressive enhancement then chances are you’re using some kind of shiv or polyfill that relies on JavaScript. It’s pretty hypocritical of me if I go around saying I don’t use HTML and CSS frameworks, because writing all my own markup from scratch means I understand every little bit of it, when I don’t really understand the shivs and polyfills I’m using to help me use elements of HTML5 and CSS3.

CreativeJS for non-coders workshop

Seb Lee-Delisle was putting on another couple of workshops teaching CreativeJS. Everyone I’d known that had been to one of Seb’s workshops had said it was incredibly worthwhile and good fun. I didn’t have an excuse to put off learning JavaScript. And whilst I go to a lot of conferences, I’d not been to a proper two day workshop before so I wasn’t really sure what to expect.

If you look really closely, you might be able to make out Seb’s twitter username projected on his jumper

CreativeJS

Seb has a creative angle on JavaScript as he’s really an artist who uses programming as one of his tools rather than a stereotypical ‘coder’. The whole workshop is based around learning how to create cool visual effects, interactive elements and animations rather than tedious examples of toggle menus and form validation. This really helped me get my head around the JavaScript we were using as it all had very visible, visual results. There was a practical use for all the code that we were taught, but we could play with it in more creative ways. Seb showed us loads of cool, complex examples of what other artists were doing with programming right at the beginning of the workshop and this helped deliver a good dose of inspiration into our heads.

Non-coder

I opted for the non-coder workshop (Seb also runs a more advanced CreativeJS and HTML5 2D workshop) as I really knew very little code. Whilst I could copy and paste a few things into something that vaguely works on the web, I didn’t really understand any of the core concepts of programming. This was the right choice for me as I continually felt challenged by the exercises set by Seb without feeling completely out of my depth.

So what did I make?

Over the course of two days, we played with a lot of fun demos and exercises, coding along with Seb and then being challenged to try new tasks out for ourselves. The part I’m most proud of is the Pong-like game that I created. I wrote every bit of this code by myself, some whilst following Seb’s instructions, and some by testing my knowledge of what I’d just been taught. This feels like a massive achievement for me, I don’t just feel like I’ve parroted a load of code, I feel like I actually understand it.

View it on the CreativeJS graphics playground

And another thing I learnt

I’d previously always consider coding as something you did after design, but Seb’s workshop showed me that you can actually come up with new ideas just playing with the code. Just like in painting, drawing or designing, where you can have ‘happy accidents’, we seemed to frequently have these same serendipitous moments just mucking about with JavaScript.

If you want to learn JavaScript, or learn more creative ways to use your knowledge, I couldn’t recommend Seb’s workshops more. You can find out more on the training section of Seb’s site, and I’ve just noticed he’s got another CreativeJS for non-coders workshop on in December (that’d be a great early Christmas present!)

And even if you don’t end up going to a workshop, you should check out Seb’s mad fun projects.

2 comments

Ted Goas
at 15:41pm

I’ve been a designer and front-end developer for more than a few years and, like you, JavaScript confuses me. I’ve survived using many of the techniques you described above, but I have to admit that I don’t really know how the code I copy/paste is actually working. I’ve come to grips that I’ll likely never be ‘good’ at any programming language like PHP, but as a responsible front-ender I should at least be proficient at JavaScript.
I’ve been doing Codecademy and tinkering with JS more. You’ve completely sold me on Seb’s workshops! I’ll keep an eye out for next time he’ll be on my side of the pond.

Thanks for posting this. I feel less alone seeing someone like you going through some of the same things. Cheers!
Andressa
at 13:53pm

really nice and motivational post Laura! I live far from Sebs workshops, so i’m still waiting for the online version, but your comments made me really curious about it and a lot more hopefully about the js learning, thankss!

Read the original post, ‘CreativeJS for non-coders workshop with Seb Lee-Delisle’.

Grids, flexibility and responsiveness

Fri, 12 Oct 2012 21:39:30 +0000

First steps: choosing a typeface

The first step in my grid design was to choose an appropriate typeface. I knew this would be everything on such a text-heavy site, and I really struggled because, as with all the elements on my personal site, I wanted it to reflect “me”. I wanted a typeface that felt friendly and not too formal whilst still appearing clean, readable and professional. I sunk money on a few lesser-known typefaces (everybody wants to be different and original, right?!) before completely falling for Avenir. Avenir was only available (with the delivery method I preferred) as a web font from fonts.com so that made choosing the font service much easier.

Avenir typeface sample

Basic setting of the typeface

Playing with Avenir in Typecast gave me an idea of the size I wanted to use it. Making it pretty big allowed its character to show whilst maximising readability. I’m also keen on a bigger line height on rounded sans serif type faces as their spacious counters can make their lines harder to distinguish if the leading is tighter.

Playing with content set in Avenir in Typecast

Base units and vertical rhythm

It was then time to decide on the base unit I was going to use as the foundation for my grid. Admittedly, I did this somewhat arbitrarily; I tend to go with multiples of 10 (occasionally using 5) as it makes the maths easier, so this time I challenged my maths with multiples of 12 (using 6 for detail.) Another justification I had was that it would be more harmonious working with what would probably become a three column grid, thus roughly using “thirds” as a concept. To create a consistent vertical rhythm I used multiples of my base unit on all vertical measurements, including line-heights, margins and padding.

Horizontal grids

When I was creating the grid design for this site I was dying to play more with Gridset. My content was fairly flexible; most pages consisted of a large amount of body text, which just needed to be as readable and digestible as possible, and some meta information which could sit to one side or above the content depending on the space available in the viewport.

Having this flexibility in my content meant the fancy grids in Gridset were mine to try out. I chose grid A as my primary grid to stick to for as many of the layouts as suited the content, and B as my secondary grid when the content better fitted to points between the grid A’s columns. Using the grids overlaid in this way gave me consistency whilst still maintaining a level of flexibility.

Grid A and Grid B overlaid on my base unit grid

Grids A and B overlaid

Flexible grids

Now I don’t really believe in creating a fully (often based entirely on percentages) horizontal grid along with a fixed vertical grid (usually described through line-heights and vertical margins/padding.) If you do this, the ratio/proportions relating the horizontals and verticals change every time the page is loaded in a different width viewport. This can have far less than harmonious results.

Instead, as my viewport reduces in width, I remove the columns from the right end of the grid and re-distribute the content where relevant in order to achieve readable content and consistent, structured feel. So this might be me as designer ‘not letting go’ of fixed constraints or embracing fluidity as much as I possibly can, but I believe that it’s this structure that allows us to maintain a level of control over the measure (line length) necessary for pleasurable reading experience. If you’re going to create breakpoints at arbitrary positions in order to keep your text readable, why not fit it around a balanced grid layout instead?

Wide About page, utilising the full grid

Wide Blog page, utilising the full grid

Medium-width About page, moved one column to the left

Medium-width blog page, with meta content shown below the main content rather than in left column

Smaller-width About page, not using the grid structure but using padding based on the base unit size

Smaller-width Blog page, not using the grid structure but using padding based on the base unit size

Paddings and margins

Just like in my vertical rhythm my column padding, and with any horizontal margins in the layout, I stuck to multiples of my base unit. This helps keep the balance between the horizontal and vertical elements of the layout and prevents it from feeling stretched or condensed in some viewports, which I think is often an unfortunate side effect of a truly fluid layout with a stingy lack of breakpoints.

Breaking the grid (content comes first)

There were points at which I broke from my grid structure in order to better serve my content: project archive pages. These are more optimised for the viewport width to keep the images big enough to identify their subject but small enough that they’re not creating excessive page length (or indeed weight.) But these image/column widths are still multiples of the base unit grid, so subtly remain consistent and true to my grid design.

Past projects page breaks the grid by having a more content-appropriate layout

Left-aligning the grid

For a long time, I had centred my page layouts in the browser window, believing that it was the most optimal use of space (or rather broke up large expanses of white space!) However, for this design I decided that I’d left-align the grid to the viewport. This kept my grid looking structured as it didn’t leave an infinitely resizable column on the left side of the browser, and also preserved the rigidity of that left-aligned grid as I removed right-hand columns as the viewport width was reduced.

Often the whitespace resulting from a left-aligned page layout would could feel gaping, so I decided (on pages that didn’t otherwise have much imagery) I would use that space for a background illustration that I hoped would be better use of otherwise redundant space.

Very wide About page showing the background illustration

Tweaks

A few days after the launch of my site I made a few tweaks. The most significant to my grid being adjusting the main content font size and line height on narrower viewports. I didn’t want to go with that awful trend of shrinking text to an unreadable size just because the screen is smaller. As Simon Foster said in his great Responsive Designer talk at Web Expo Guildford just today; it’s about balancing measure with a readable font size and a readable font size should always win. I shrunk the font size by only 1 (1/12) unit , but shrunk the line-height by 6 (1/2) units. This made the measure a little better whilst still preserving a (hopefully) readable font size, but also fitted considerably more text into smaller viewports making it a little less distracting to read.

Evaluating

This approach to grid design works for me. I’m not saying I will use it for every project in the future, but at the moment it feels like it has the right balance of flexibility and control with content- and experienced-based priorities. Perhaps I could make my base unit em-based, or even percentage based (that’s got to be one hell of a Sass mixin) to make it even more ‘responsively’ flexible, I’m still exploring what’s possible.

15 comments

Clinton
at 18:10pm

Nice insight into your workflow when considering grids in a responsive sight. Great final product!
- Laura
  at 09:41am
  
  Thank you Clinton!
- Chris
  at 21:06pm
  
  I like your thinking there. Comment form fields butt against the right of the container for me, btw. Firefox/Android/800*480 portrait. Shamefully unsure of logical pixels, sorry.
  - Laura
    at 09:42am
    
    Thanks for the heads-up, Chris. It was on my radar but your comment finally pushed me to deploy a fix!
  - Steve
    at 14:14pm
    
    Really great article…one of the best I’ve seen on the subject this year.
  - Daniel
    at 13:09pm
    
    A great article Laura, I’ve always wanted to try using grids and after reading about your workflow am certain to give it a try. I love seeing how other people approach their layouts. :)
    P.S. I’m still a sucker for centre aligning! :D
    
    Thank you for the insight. :)
  - Wayne
    at 20:32pm
    
    Brilliant to read about your thought process! Thanks so much. One of your image captions confused me –; “Medium-width blog page, with meta content shown above the main content rather than in left column”.
    It appears that the meta content is shown below the main content, actually b/w the main content and the comments.
    
    I also see you fixed the Menu bounce problem on iOS 4 (at least it now works on my iPhone 4). Are you going to write about that as well?
    - Laura
      at 18:59pm
      
      Thanks Wayne, I’ve now fixed that caption.
      
      And yes, I fixed the menu bounce problem. It was actually thanks to the lovely [Berklee](http://alpha.app.net/berklee" title=“Berklee on app.net” rel=“nofollow), who rewrote my function slightly and had the ability to test it on iOS5 (something I was struggling with!)
    - Reinier Kaper
      at 18:27pm
      
      Thanks for this insightful article, it’s always good to see how other approach it.
      
      One thing I have noticed recently is that using ’em’s for media queries seems to be working a little better than pixel values. You can view what happens when you zoom in to the page with the browser (CTRL + usually) and see that the media query ‘breaks’. By using ’em’s, which are relative, they will keep working, which is great if content should decide the breakpoints and you value your users settings.
      
      My 2 cents on this subject!
      - Laura
        at 11:52am
        
        I completely agree. I just find it really hard to work in ems, the maths breaks my brain. I use rems based on a root % value, but all the while I’m falling back to px, it’s not quite the same.
      - Lucas
        at 20:12pm
        
        Great article, Laura :)
        
        I really like the design of you site, so simple and beautiful.

Read the original post, ‘Grids, flexibility and responsiveness’.

Really, a redesign? This can’t be real…

Tue, 09 Oct 2012 07:00:43 +0000

It’s about time…

So finally I’ve redesigned my website. It’s been about three and a half years since the last version of laurakalbag.wpengine.com (still around at http://2009.laurakalbag.wpengine.com) and that’s a site I designed before I finished university, before I even started freelancing full time. To be fair, it took a while for me to hate it (not that usual kind of as-soon-as-it’s-launched-I-hate-it problem us designers often have) but that’s far too long for a portfolio site to be hanging around. Since then we’ve had a huge shift to mobile design, then web fonts, then responsive design, and I wasn’t practicing what I was preaching on my own site.

I’d done a little update when I got hold of a Typekit account, got some fancy fonts on there, which temporarily quenched my thirst for a redesign, but it was downhill from there. I kept updating the portfolio in the hope that people would see it for the work, not the site, and I added a WordPress blog with a default theme to house my ramblings, albeit in a brandless design. Then I starting being embarrassed about it, the grunge textures and simplified layout. So I had the genius idea that I’d stop updating it. If I did that then I’d be bound to redesign it so I could add more projects…but no, a lack of time and inspiration left the site stagnating for nearly another year.

Designing for yourself is really hard

Here’s the thing. I’m a client designer. I love the challenges and variety brought to me by clients, and working on new projects, and at that distance it’s much easier to understand how to best represent them. Designing for yourself is completely different. You want to accurately portray yourself and you want a site that showcases what you do. That’s pretty intimidating in an industry where your friends will judge every pixel!

My ideas

I struggled with the idea that I needed to showcase work. In theory, the best way to do that is to have a very neutral, simple design where the work does the talking. The problem is, a very clean and minimal site could never accurately represent me. I love colour and decoration and striking design. I had to find a way to balance the two. I had this little idea where each page would be themed to fit the colours of the project (or subject of the blog post.) This would result in a site that had a huge variety of strong colour. I knew that this meant I had to reign in the other design elements (typography, layout, texture, shapes), making them simple and letting the colour show through without seeming too overwhelming. Whether I’ve achieved this, I’m still not sure…

And of course it’s not perfect

Since I started the redesign process, I knew that I’d have to let go early on. To be fair, I’m used to doing this on client projects; you can’t be fiddling around perfecting every pixel forever. There’s not enough time or money in the world to pay for that. So there will be parts of this site that are a bit wonky around the edges. There’s some dodgy hover styles and a half-baked attempt at retina support that I’d like to improve upon, but I fancied that I could iterate upon these things once they’re live, and benefit from the wisdom of my friends.

Now to get on with it

I could go on forever about my decisions and choices and ifbutsmaybes so I’ll cut it short here. I might write some more posts about the design at some point, but I wouldn’t want to bore you to death…

11 comments

Matt Berridge
at 09:53am

Very nice Laura, certainly gets across a lot of your personality starting with the typeface and then on to the illustrations and colours! It’s great, and everything you’ve written is so honest and upfront.
If I were to make comment it would be I’m never keen on underlined links (if you need to underline, use border-bottom so you don’t interfere with descenders).

Also, your (amazing) work doesn’t seem to take centre stage! Perhaps that’s what you wanted, but it’s like the 5th link on your navigation? I’d bring it to the fore and make your screenshots larger, and maybe cross-sell between sections a bit.

Other than that, awesome :)
- Laura
  at 17:24pm
  
  Thanks Matt! Funnily enough, I used to always use border-bottom for exactly that reason, but eventually I found it too distracting having lines hanging so far away from the main shape of the characters. It took away that skimmable uniformity.
  
  You’re very kind about my work, and I really appreciate the constructive criticism. I did think hard about how I wanted to represent myself, and really my primary goal for the site was to be as useful as possible for potential clients. Of course I want to be judged on my previous work, but I think it’s important that I provide other information about the kind of designer I am and what I’m like to work with.
- Jonic
  at 11:19am
  
  I know I said yesterday, but you’ve done a bloody good job with this. You should be dead proud of yourself, and you’ve inspired me to maybe finally get round to finishing mine off too!
  
  …after I’ve helped you with that jQuery, of course ;)
  - Laura
    at 17:24pm
    
    Cheers Jonic. And thanks for all your help so far (on this site and in general!) :)
  - mustafa
    at 17:16pm
    
    Hey Laura
    
    I was wondering why you didn’t just tweak the original site instead of a full redesign? Not that I dont like the new one, its pretty cool :)
    - Laura
      at 17:27pm
      
      There was too much I wanted to change. The way I’d configured WordPress before was quite awkward to maintain (there was a lot of HTML required when adding new projects) and I wanted to make use of the newer CMS-like features that WordPress offered (like custom post types and custom taxonomies.) Also, when designing a responsive site, it’s much cleaner to rewrite from mobile CSS first which would have meant refactoring all the markup!
      
      And then there’s the fact that I was just sick of the old design. I know this one isn’t exactly ‘modern’, but the old version was definitely ‘old school’… ;)
    - Dave
      at 17:33pm
      
      Looks great. I agree that you should move your work to the forefront, however. Clients, or at least the ones I’ve worked with, can tell a lot about you by the work you do –; not necessarily a block of text about you.
      
      Just a thought. :)
    - Ben
      at 17:54pm
      
      Glad to see it finally live Laura –; as I said on Twitter, amazing work. Really love the eye to detail you have put into this, and having known you for a while now, I really feel your personally comes through.
      It’s never easy working on your own website, and you can spend every hour under and over the sun tweaking it, but like you said, it is live and it works (beautifully). Now you can tweak and iterate when the time arises.
    - Michael
      at 15:53pm
      
      Really like the new design, Laura. Especially impressed with your texts. I always struggle to have my text reflect my way of working and thinking, so I end up deleting it and still have the old gibberish on my site (that I haven’t touched in over a year). It’s like you said so hard to design and develop for yourself.
      So you should be really proud of this site, it looks and feels super!
      
      Cheers,
      
      Michael
      
      PS: what’s with the favicon, are there tiny hands growing out of your chin ;-)
    - Michael
      at 05:38am
      
      I really like the simplicity of the design and absolutely love all the colors! If your personality is anything like your picture (cheerful & smiley), then your personality shines throughout this site and through your writing. Keep up the awesome work!
    - Nicole
      at 17:39pm
      
      Thank you for this post! I too, have been neglecting my own site, I even took my whole old site down and just put a “I am working on my site” temporary page, but that still wasn’t enough motivation. I am still stuck between 0 and 1. You totally verbalized what I think some of my blocks are, and it was really nice to feel like other designers struggle in some of the same ways I do. I think it’s hard when you take doing good work seriously. Your site is awesome, great work. You have inspired me to get to work, maybe :)

Read the original post, ‘Really, a redesign? This can’t be real…’.

A Practical Guide to Designing with Data

Mon, 02 Jul 2012 10:51:29 +0000

Another ubelly post from me, this time a review. Much like my other reviews of books on this blog, just in another location!

A Practical Guide to Designing with Data

Read the original post, ‘A Practical Guide to Designing with Data’.

Six months of the Fitbit (and the new Fitbit Aria)

Fri, 29 Jun 2012 16:39:58 +0000

Skip to the main review!

The backstory

I’m a fit and healthy person. Probably not your typical work-from-home desk-based screen-faced designer. I go to the gym 4 to 6 times a week, walk my dog every day, I eat fairly healthily and I’m a good weight.

I wasn’t always though. I’m not pretending I was massively fat, but after leaving university three years ago, I’d got some really bad habits (two cans of Relentless a day, anyone?!) and, whilst I’d been chubby since I was about 11 years old, I was actually pretty overweight. Being subject to the predictable insecurities of a 22 year old girl, I was incredibly insecure about my body, obviously I wanted to do something about it, but that doesn’t mean I went about it in the right way.

What followed was about a year and a half of dieting. It was horrible. I’m only 5’2, and without doing any exercise, I cut myself down to a miserable 900 calories per day and lost around 2 stone (about 30lbs) in those 18 horrible months. That’s really slowly. I was a misery and obsessively counting calories, keeping a food diary, beating myself up whenever I had a bad day and ate chocolate or burgers. I can’t have been much fun to live with either. Whilst I understood more about the effects that food had on my body than ever before, it was psychologically damaging. I might have lost weight but I still felt awful.

Discovering a gym

Once I’d lost the weight, I wanted to help fix my aching back, which was caused by my sitting at a computer all day. (Chris Comben was telling me to do it for ages, I finally did.) Now I was slim, I finally had the confidence to wear loose-fitting clothes to the classes and exercise in front of other people. So I tried Pilates. And I loved it, I’m sure a huge part of this was the classes I went to and the incredibly encouraging trainers there.

So then I started going to the gym, and then tried spin classes, and then more and more classes until I was completely addicted. The adrenaline, the way I suddenly felt so much better about myself, all incredibly addictive.

Learning How to push myself

I had an epiphany in a spin class. I realised that just going along and doing what I was told wasn’t going to get me anywhere. I had to want to be there, and I had to really push myself. Without actually pushing my body, as someone who was already healthy-ish, I wasn’t going to make any difference whatsoever. And after that revelation, and over a year where my weight has stayed the same, but my body shape has improved massively, I am still loving the gym and finding it has an enormous effect on me psychologically more than anything else.

Working from home

It’s lonely freelancing from home. Especially when you live by yourself. Working out has a few more benefits, I get to see and speak to real human beings (rather than magical beings on Twitter) and I am forced to leave my desk by 6pm in order to be at the classes by 6.30pm most weekday evenings. I’m usually far too exhausted to work after the gym, which also results in me having lovely, proper sleep as my body is now physically exhausted rather than just mentally-frustrated from a day in front of the computer.

Get on with the review of Fitbit!

Ok, so here’s where the Fitbit comes in. I got a Jawbone Up band for Christmas, but it went the way of all the other bands and was kaput within two weeks. Frustrated by the experience (they’ve still not got new hardware in stock!) I decided to buy a Fitbit on impulse.

The Fitbit bit

The Fitbit is a small plastic pedometer that you wear on your person. I favour the waistband or pocket, as I tend to mostly wear trousers, though I have occasionally worn it on my underwear when wearing dresses or trying to stop it spoiling the line of my clothes (that’s a rather girly power-user tip right there.)

My Fitbit on my waistband

The amount of stuff it records is pretty cool. It will record your steps, distance travelled, floors climbed (with the help of an altimeter,) calories burned and activity score. The activity score is a rating of how active you’ve been throughout the day, which gives you a nice goal to aim towards if you don’t want to obsess over steps, floors or calories.

It is a thing of beauty. It has a seamless display which shows you your pedometer statistics in clear blue text, which you can cycle through using the single button. You can also hold the button down to start/stop recording an activity session which allows you to record periods of sleep or specific periods of activity (it records all activity by default, but activity records can be handy if you want to know how far you travelled when you walked to the shops or similar.)

Fitbit gives me encouraging messages and greetings too

The Fitbit syncs wirelessly to a small dock which works with OS software to sync its stats to the web app. The dock also acts as a charger, which you rarely have to use as the Fitbit seems to have weeks of battery life at a time and charges up to full battery within an hour or so.

Sleeping with the Fitbit

The sleep recording functionality is pretty cool. Usually you’d move a lot less during your sleep, so you need to wear your Fitbit around your wrist. I found the provided wristband a little bit uncomfortable, the band itself is soft but the velcro fastening is a little bit abrasive round the edges. I made my own Fitbit wristband out of a tennis sweatband. I cut a hole in the sweatband, and stitched a Fitbit shape into it to stop it from getting stuck inside the band. This is much more comfortable and works just as well as the admittedly-slightly-slicker provided wristband.

Fitbit wristband (left) and my homemade wristband (right)

You start the sleep function by holding down the button. The Fitbit is smart enough to know that you’re sleeping by the amount of movement you’re (not) making.

The Fitbit web app

Now by itself, you could argue that the Fitbit is just a rather fancy, slightly expensive sleep-recording pedometer. Really, it’s the addition of the web app that makes it so incredibly valuable.

The Fitbit dashboard

Sleep log

Starting with the sleep log, the Fitbit will tell you how long you slept for, how often you woke up and use that to judge your quality of sleep. This is pretty handy if you want to improve your sleep quality, especially as you can see your sleep history, comparing each night.

one night’s sleep with the Fitbit

My sleep history

Activity Log

This is my favourite part. There is no better way to motivate yourself than seeing how much exercise you’ve been doing in statistic form. And if you’re competitive? You can also share your information with friends (this allows you to lock down or make public as much or as little info as you’d like) to compete and motivate yourself to beat the other people in your group with daily, weekly or lifetime scores.

Friends’ leaderboard

And, as with all good apps, you can earn badges for your achievements (I love badges!) I’m doing fairly well with mine. It’s actually really lovely when you get a little notification email telling you you’ve earned a new badge. The achievements seem to be infrequent enough that they actually feel meaningful (you don’t get a badge for just anything) but not so rare that they feel like hard work.

My Fitbit badges

I’d say that the Fitbit is really best if you’re a walker or a runner, as it really is just a pedometer. You can easily record other types of exercise through their Activity Log but these are just basing a lot of the values on averages, rather than the actual calories you are likely to have burnt, actual steps taken etc. This doesn’t mean that the Fitbit is useless though. The majority of exercise I do (asides from walking) isn’t something that the Fitbit records itself, activities like biking or lifting weights. It will pick up that you’re doing some kind of activity, but won’t necessarily reflect the intensity. I actually find this just pushes me harder to do more exercise that the Fitbit does record.

a graph of my calories burnt so far today

Food Log

I truly believe that the best way to lose weight is to keep a food and drink diary. It really makes you realise what you’re putting into your body. The Fitbit food log helps with this as you can quickly enter in your foods from its extensive database, in whatever quantities suit you best. Like other food databases, it tends to mostly feature food from the US, but you can easily add new foods yourself, and they’ve got a much better database of raw ingredients (fruit, veg etc.) than any other web app I’ve used.

Fitbit food log

My main criticism of the Fitbit web app is the focus on calories in the food log. Their food plans allow you to set reasonable goals based around calorie consumption, but this isn’t necessarily the healthiest way to lose weight. Whilst you do get an indication of how much Fat, Carbs and Protein you’re consuming, the emphasis is still on losing calories when an emphasis on less fat and carbs would probably be more beneficial to people looking for a healthy diet. Apps like Daily Burn do this better.

Fitbit food goals

Weight Log

The weight log is handy and has become even more so since I got the Fitbit Aria scales two weeks ago (prior to that you had to enter your weight and body fat statistics directly into the app yourself.) These beautiful scales look lovely in the bathroom and sync wirelessly to the Fitbit web app via WiFi. This means there’s no tricking the scales by rounding up or down when you enter your values into the app, it’s all completely automatic, and that really adds to the motivation to lose weight!

Fitbit Aria scales

You can also manually input your body measurements, which is great because it helps defeat that myth that appearance and body shape is all about weight, and you’re presented with some lovely graphs and charts of your body data to help you see how you’re doing and where you want to be.

My weight as recorded by the Aria scales

A lovely lean vs fat graph

Other logs

There’s also a whole host of other logs that you can use to keep an eye on your body. In case you couldn’t tell by now, I’m loving these stats. Nothing makes me feel quite so much like a future person than looking at graphs about my own body. I feel like an android (the cool robot, not the rubbish phone.)

I make use of the Mood log a fair bit. I think it’s healthy to assess your mood from time to time, understand yourself better and try to get to the root of what’s making you feel happy or sad.

Mood history

Custom trackers

I’ve also made use of the one custom tracker you’re allowed on the free plan (unlimited on Premium) to record how many fruits and vegetables I eat in a day. This is a great motivation for me to eat more!

my custom fruit and veg tracker

Email Motivations

A lovely little addition to the Fitbit web app is the weekly stats you get sent via email. A nice little reminder of how you’re doing compared to last week, and a kick up the bum if you’ve been lazy.

Weekly stats email

Extensibility

Fitbit seems to work with about a million different web apps, which is great if you want it to work with something else you use, and also has its own API. Elliott Kember has made the genius FitBit Racing where a load of us have a weekly race to the most steps or floors (great for competitive people!) and I’m sure if you’re a smarter developer than me, you can make a lot of cool stuff with your data.

Overall

I love my Fitbit. I love it to the point where I actually go back for it if I leave it at home when I go out. I’ve got to the point where I wonder what’s the point of walking if I’ve not got my Fitbit on? Maybe that’s not healthy…but maybe it’s actually a sign of a gadget that has become so completely a part of my life that I’d really feel like I was missing out without it.

With the motivation my Fitbit provides, the confidence it’s given me in my ability to keep myself healthy and multiple ways to track myself that goes so far beyond miserably standing on the scales and counting calories, I really couldn’t recommend it more.

And if you do get one, be my friend! I share all my data with my friends by default (there’s no obligation to do that though!) it keeps me in check…

35 comments

Robin Cannon
at 17:19pm

Hmmm, you should have an affiliate program. I just went and ordered one.
- Laura
  at 17:20pm
  
  Heh. I probably should! But I’m not really in it for the money… ;)
- Craig
  at 18:35pm
  
  Got mine today.
  Like you, I used a Jawbone UP for a while until it borked. I loved my UP an I am hoping the Fitbit will be just as much of a motivator for me.
  
  Fitbit users, add me as a friend. I think I need the competition to motivate me : craiglockwood@me.com
- Ralph Corderoy
  at 12:00pm
  
  Nice detailed post, thanks. Is that an upside-down waistband?
  - Laura
    at 17:06pm
    
    It is: my waistband from above :)
  - Bri
    at 01:16am
    
    Just ordered one!
  - Peter Michie (@hamleypaw)
    at 13:35pm
    
    Great review, thanks. I’m currently waiting for Amazon to deliver my Ultra.
    I wanted to ask how you go about adding meals to the food log. Do you add the ingredients or try to find something that approximates in the database?
    
    Thanks for sharing your experience.
  - Paul Beelaerts
    at 09:11am
    
    Great Review, bought mine this weekend, thx for adding me as a fitbit friend, I can use it! :-)
  - Lee
    at 19:58pm
    
    Excellent review!
    I love my Fitbit too –; I’ve always struggled with my weight but the simple combination of motivation, accountibility and a dash of competitiveness has help me get my 70lbs weightloss badge today, still a way to go but it’s so easy!
    - Laura
      at 07:51am
      
      Nice one, Lee, that’s a huge achievement :)
    - Christine
      at 03:24am
      
      Hi Lee, How long did it take you to lose 70lbs and what combination of calories consumed and burned did you use?
    - Ben
      at 17:10pm
      
      Been using my flex and I love it. Wonder if aria syncs to the IPad or Samsung S4?
      - Ian
        at 03:33am
        
        @Ben, yes it does so with both. My wife has it auto-sync with her laptop any time she walks into the room though.
      - Carl
        at 00:54am
        
        Excellent post and responses everyone. I use both the fitbit ultra and aria scale and they are awesome! I also have myfitnesspal linked to my fitbit to track my meals and calories and I use endomondo to track my exercise (runs). I love all this technology!
      - Courtney C.
        at 13:40pm
        
        This is a great review! I liked how detailed it was and I also didn’t know about the one free custom report, which I’m going to have to use. I found your site after Googling the fitbit.
        I’ve had mine over a year after my company bought them for us. I didn’t really actually get motivated with mine until this summer though. I’ve already lost 9 lbs with it, which is amazing. I was the laziest person ever before and when I first started using it, I would average 3-5,000 steps. Now I compete with myself everyday to see how well I can do. I just recently earned the 30,000 step badge the other day and I was so proud! I feel like they should pay me to be their spokesperson :)
      - Darren
        at 05:14am
        
        Thanks Laura, nice review. Been using the Flex and Aria for a month now. Two weeks in I stopped logging food, as (a) it was driving me mental and (b) I’d switched to a slow carb diet, which is always around 1200 calories a day anyway.
        Used the extra tracker to count kettlebell swings, so now the focus is on steps, swings and weight.
        
        The morning weigh-in is hugely motivational as I’m usually down 2-300g a day.
        
        The only annoyance for me is that the extra tracker does not show up on the dashboard or iPhone app. Otherwise, one happy chappy.
        
        Darren
        at 00:31am
        
        Quick update .. Aria ‘crashed’ this morning. Would not even show my weight. Apparently this is fairly common as I found a blog with hundreds of posts with the same issue. No phone support, it’s all (very slow) email support. Would not recommend the Aria based on this, seems they still need to get the kinks out of it. Flex still fine tho.
        
        Jacqui
        at 11:42am
        
        Great review! Have now bought an ultra and, after initial hitches in setting up an account –; it is great and I LOVE IT!! Have had weight issues for a long time now, and I think that this may be a really useful tool in getting me to up my exercise…….
        
        Amy
        at 01:51am
        
        Hi Laura. Great post! I just got a Fitbit Flex today so we’ll see how it goes.
        
        Jenner
        at 16:47pm
        
        Just letting you know that the bodyfat measurements and even the weights recorded with the Aria scale are most likely completely inaccurate. Fitbit send estimated numbers to your app due to how inaccurate the actual scale device is.
        
        Keyna Nuoffer
        at 03:22am
        
        I’m sure you’ve found it by now, but in case you haven’t, you can manually enter physical activities w/time done through the apps. =]
        
        Tara
        at 18:15pm
        
        I spin every day and in addition to steps and sleep I would like my fitbit force to be able to track calories burned during class. I’ve read that since it only tracks “steps” it’s won’t accurately calculate that type of activity. Any suggestions? I bought one for me and my husband and haven’t opened mine (he has) until I can figure this out. Thanks!
        
        Jackie
        at 16:52pm
        
        Hi Tara I have the Fitbit one which I love, but like you I spin and do Pilates I have found an app that will sync with the Fitbit app and record your spin class, Pilates and much more.
        The name of the app is digifit
        
        And it syncs perfectly.
        
        I hope this helped
        
        Stay healthy and fit
        
        Bruno
        at 12:19pm
        
        I really liked your article, it’s really complete. I like you tips to monitor veggies and fruit, it’s a good one… It remember me the health challenge we have here in montreal and quebec ([http://www.healthchallenge.ca/en/home](http://www.healthchallenge.ca/en/home" rel=“nofollow)).
        
        I’m a fitbit user since one week and I’m really getting addicted to it…
        Thanks for adding me! ([https://www.fitbit.com/user/2GTS3H](https://www.fitbit.com/user/2GTS3H" rel=“nofollow)).
        
        vicki
        at 16:58pm
        
        I just got one around a month and a half ago. Love your review! It totally changed my life, I also am lost if I get to work without it. Dang all those steps not getting recorded!!!! It has really inspired me to do more. I’m going to try some of the features that you covered, I had not been using all of them.
        Thanks, great review
        
        Vicki
        
        John Shum
        at 02:30am
        
        Great review! I play tennis and wanted to know if you think it would track all the movement on the court better than anything else out there. I’m more interested in analyzing the performance during the sport more than for overall activity/health tracking.
        
        DanielleV
        at 03:18am
        
        It isn’t meant for what you are wanting. It is meant more for overall daily activity related to steps –; walking and running. It doesn’t record anything else.
        
        Teresa
        at 20:55pm
        
        It would be great if you could tell us how to get to the features you are describing!
        I just got a FitBit this Saturday and would love to learn more.
        
        There was no manual with it, so I researched set up and the simple things on YouTube, but I have no idea on how to get to the advanced features you are describing here.
        
        Thanks so much,
        Teresa
        
        Sherry
        at 18:22pm
        
        If you go to fitbit.com ther are instructions for setting up your dashboard and using the device. You can click around for what you are looking for or enter it in the search box. Really very easy.
        
        ERRICK PRESLEY
        at 13:03pm
        
        Hey I was interesting in knowing how much is the fitbit wristband???
        
        Fran Leishman
        at 11:26am
        
        Hi. I received the Fitbit Flex for Christmas & love it so I bought the Aria scales too. However the scales weigh me at one weight but sync one pound higher? Have you experienced this at all?
        
        Larry Cerny
        at 22:26pm
        
        How do I program spin class three times a week rather than entering it each time!
        
        Clarissa
        at 00:04am
        
        This review is so spot on. When I first got my nike+ band I ran 4-7 miles a day (on top of high school activities, man I miss that energy…)
        But…mi went to college… Got kind of lazy… My nike+ band died…. And then I got pregnant… And running was nearly impossible. I had gone right back to square one where it was unpleasant, difficult, and I wasn’t able to motivate myself.
        
        Until I got the Fitbit surge, which I’ve become obsessed with. The food diary function is awesome. I’ve never actually done that, but lately I’ve become aware that I don’t process sugar well. The problem is… I LOVE mini Reese’s. But after keeping my surge on for even a few days I was no longer motivated to eat them, because I hate adding high calorie snack binges, it’s just disappointing to watch all your work go down the drain, and when you see it on a screen it’s more difficult to deny than just knowing you’re consuming a meals worth of chocolate.
        
        I also love that the app encourages you to drink water, because I need that reminder typically!
        
        Melissa
        at 23:57pm
        
        Hi guys can anyone tell me how to understand the calories in vs calories out. Do you follow what the program says or just the calories you would normally eat ???
        
        linda gross
        at 23:24pm
        
        can you use the COMMUNITY feature, ie find random people on the net to compete with, for the Aria scale?
        (I know you can do this with steps. Can you compete with weight loss?) Thanks!
        
        Linda

Read the original post, ‘Six months of the Fitbit (and the new Fitbit Aria)’.

Typography and the web at Ampersand Conference

Mon, 25 Jun 2012 12:06:43 +0000

I’ve written a big old writeup for ubelly from my notes at Ampersand conference earlier in the month.

This was an event I decided not to live-tweet, as the content is usually more involved and in-depth, making for a better big writeup and less tweetable quotes.

Typography and the web at Ampersand conference

Read the original post, ‘Typography and the web at Ampersand Conference’.

Don’t let the technical processes of web development stifle your imagination

Sun, 10 Jun 2012 18:17:14 +0000

A new post from me, this time at .net magazine. Keep it creative! There’s some pretty cool comments over there too.

Read the original post, ‘Don’t let the technical processes of web development stifle your imagination’.

Will understanding the mainstream affect me as a designer?

Fri, 01 Jun 2012 21:51:38 +0000

I’ve been contemplating how designers can identify better with more mainstream users.

I had a thought last week. What if, by rejecting Facebook, I’m actually missing out on design patterns that are so influential on the mainstream user that it affects their perception on the rest of the web?

And the same goes for Google Chrome. I’ve been going through a rebellious anti-Google phase, but now Chrome has taken over as the world’s most popular browser, am I making life harder for myself by developing sites in Safari first?

As designers (and in the creative and tech industries generally) I think we might err on the side of the hipster. We can start to reject brands and products because we’re “too cool for that mainstream stuff the average user falls for…” Or maybe we’re just acutely aware of the downsides, hitches and ill-intentions web services might have because we work in the industry.

Could it be positive that we arrive at mainstream products, when we need to do research, with the fresh eye of a new user? Or are we tainted by the fact we know too much? We could be saving ourselves from being inspired by standards and conventions that might be poor, but are we better informed for knowing as many potential solutions to common problems as possible?

Well I think I’m going to try being more of a mainstream user. I want to understand the web better as other people see it. I’m switching to Google Chrome for now, and I’ve signed up to Facebook again.

I’d say I’ll post in a month’s time and write about whether I’ve noticed a change, but I’m not sure it’ll be as conscious as that. We’ll have to wait and see…

Note: throughout this post I keep saying ‘mainstream.’ This is because I feel that ‘average’ or ‘normal’ aren’t really the right words. I’m trying to talk about that majority of users who are consumers, rather than makers or builders, of the web.

13 comments

James Young (@welcomebrand)
at 21:59pm

It’s something I do with ads ([http://www.welcomebrand.co.uk/thoughts/browsing-an-uglier-web-on-purpose/](http://www.welcomebrand.co.uk/thoughts/browsing-an-uglier-web-on-purpose/" rel="nofollow)) and I do recommend everyone do it from time to time for the reasons you mention.
As designers, we’re a million miles away from how many “average” users operate on the net and if you work on any sort of larger scale projects and get the change to watch video tests of users it’ll open your eyes just how differently they use the web.

It’s also worth reminding mac toting designers everywhere to check what their work looks like on a windows machine, you’d be amazed how many sites (designers portfolios in particular) I see on daily basis that are unreadable due to the differences in font rendering etc.

J.
- Laura
  at 22:00pm
  
  That’s a great post, and totally the same way of thinking.
  
  You’re right about Windows. I always test on Windows, but probably not taking as much into account as I should. I tend to look for broken things rather than beautiful things.
- Gulben
  at 23:09pm
  
  I’m very much interested hearing about your adventure. I can’t seem to get out of my anti-Google phase :-)
  - Laura
    at 22:56pm
    
    Oh I still won’t touch Gmail with a barge pole, don’t get me wrong ;-)
  - Jonic
    at 14:33pm
    
    That’s a very good point. I’ve avoided Google+ because I don’t need it in my life, but perhaps I should take another look.
    
    Incidentally, I’ve just started using a Windows phone (won it at Reasons to be Appy). It’s probably going to be beneficial to me to simply use something that isn’t iOS for a little while, although when I can get my company phone I’ll be getting an iPhone :)
    
    But yeah, I think we could do more to be less immediately dismissive of certain things. I’ve avoided Pinterest because it looks a bit like a Tumblr clone, and I already have one of those. Maybe I should have a look since it’s important to just see what’s currently going on in modern site/app design.
    
    Bit of a crap comment, that. I haven’t properly woken up, give me a break!
    - Laura
      at 22:56pm
      
      No it’s a great comment, don’t be daft! That’s a good point about Google+ and Pinterest too, but now I’m starting to wonder where it stops. If we’re using everything, can we be paying attention to many things?
    - Dan Woods
      at 21:43pm
      
      @jonic In my opinion, Microsoft really nailed it with Windows Mobile. They have taken a simpler-is-better approach to their UI which has finally made it something that is user friendly and downright interesting to use. I’m not a Windows user in the real world, but I’ve already taken some inspiration from their mobile platform for UI.
    - Katy Watkins
      at 00:24am
      
      Great post! I worry about this as well, trying to find a balance between what I want to use and what everyone in the world seems to be using. My initial reason for joining Twitter was just to understand what the rest of the world was doing, but I’m avoiding Pintrest because I can’t afford another time-suck, and I don’t see a real need for it in my life. And I have an Android phone instead of an iPhone because I want to know how “the other half” lives.
      But, I feel like a general awareness of other technologies we don’t personally use can often be enough… as long as you know it exists, there’s always the opportunity to find and talk to someone who does use it.
      
      On an unrelated note, tell me more about your Gmail hatred! Is it because it’s Google, or the service itself? And can I ask what you use instead? I’m trying to wean myself off it, but it’s proving difficult.
      - Laura
        at 20:13pm
        
        I find Gmail a bit odd, but I think it has improved recently. It’s Google themselves, I don’t like the idea of being the product, and I just get this overwhelming creepy feeling from them that it’s not in our favour to be used like this…
      - Davin Wilfrid
        at 16:42pm
        
        Great post, Laura. I signed up for Google + when it was first announced, then ditched it for about a year. Only recently have I started looking into it again, and only because of the business reasons (SEO nonsense, etc). I’m glad I did, because I think it could be a smarter, more engaging version of Facebook if everyone gave it a chance. I’m now embarrassed for “erring on the side of hipsters” and being so dismissive for so long.
      - Robin Cannon
        at 17:30pm
        
        Good to see such a self-aware post.
        It’s definitely true that designers and front-end developers interact with the web in a very different way from the “average” user. We’re certainly likely to be more informed, quicker to pick up on new trends and products. And, yes, often frustratingly hipster-ish in our ability to avoid things that are mainstream.
        
        But you’re absolutely right that to continue to simply behave in that way isn’t the most productive way to go about things. Except in the most specialized or niche projects, we’re all designing and developing for the average user. We need to be aware of that benchmark, and how best to address it.
        
        Certainly we can still try to push the boundaries while acknowledging the mainstream. That’s what the most successful products and services do. So many great successes occurred not because of market research and addressing a need or desire, but by making a cool product which created a market demand. That requires an understanding of the mainstream, definitely, but it also involves a desire not merely to remain generic.
        
        That’s the balance I want to keep. So much web design is self-referential and generic, and that’s bad. But understanding what works for the mainstream audience is vital in terms of pushing the boundaries in an effective way.
      - Jake Giltsoff
        at 18:29pm
        
        Nice and well thought out post.
        One of the biggest things I’ve learnt as a design student, is that its all well and good following trends and being hipster as such, however at the end of the day as designers we need to primarily design for non-designers.
        
        Obviously its more than okay to put in extra things that only people with a certain eye will pick out, typographic niceties and such like. But it’s all to easy to forget that the average user of the end product may well have a slowish computer, run windows and mainly use the internet for Facebook. Design decisions definitely need to be informed by these ‘mainstream’ scenarios.
      - David Hickox
        at 21:51pm
        
        Took me a while to learn this one myself. It’s our job to be well-versed in the norm in spite of the preferences we develop as experts. If we want to pull experiences in new and exciting directions, we need to know what the average case is in order for that direction to make sense. The real magic is when you can make well-designed experiences effortless and intuitive, almost invisible. It takes knowing the environment of the norm to do that.
        It’s like when you go back and watch a really good kids show and realize how much they put in to satisfy the adults that would also have to watch. In a way, our craft is like creating that kids show. In order to do it well, you have to know the psychology of children and how to appeal to them. And web literacy is still in its infancy. So we have to create for that environment, but with the depth and experience that we hold as specialists.

Read the original post, ‘Will understanding the mainstream affect me as a designer?’.

Craft and Care: Future Of Web Design 2012

Tue, 22 May 2012 09:28:41 +0000

I’ve written up my digest of Future Of Web Design 2012 over at the ubelly blog.

For those who want more of a blow-by-blow account of the day, I’ve compiled all of my live tweets (and retweets) from the day in a Storify feed.

http://storify.com/laurakalbag/laura-kalbag-s-fowd-tweets

Read the original post, ‘Craft and Care: Future Of Web Design 2012’.

Critiques, giving and receiving useful feedback

Mon, 14 May 2012 09:09:10 +0000

Funnily enough, a couple of days before Mark Boulton said and wrote his piece on design critiques, I’d been thinking about that same topic. I’ve been struggling through an iPhone app icon design, and had asked Twitter for help. Knowing that the 160 character limit wasn’t going to help me much, I emailed everyone who offered me assistance and sat back waiting for the criticism.

I wasn’t expecting in-depth critique. I wasn’t quite sure where I was going wrong, and some gut reactions on what might be the problem was the kind of feedback I really wanted.

What I was surprised to receive was quite a few responses just telling me exactly what to do. This wasn’t ‘feedback’, it was direction. There is a great difference between someone asking ‘why’ and someone asking ‘how’. Design critiques aim to give the receiver a wider understanding of their work, and design in general, there really are no magic rules in design whereby you follow them and your project becomes an instant ‘success.’

How I encouraged poor feedback

A critique isn’t all in what the other side says to you. In order to allow the ‘giver’ to deliver useful feedback, you need to explain the context of the work. Very rarely does design work stand without requiring any explanation. The more the giver understands about your work, the greater insight they are likely to give you.

There are numerous elements that may have affected your outcome and will need explaining to the giver so that they might understand your decisions (and these are just a few!):

the client
the audience
your task as a designer
your role within the team (if any)
any constraints
what you aim to achieve

Also, when presenting your work it may help to give your justification behind the design of particular elements that stand out. If you think someone is likely to comment on it, and you can see the problem, then explain it so that people can help you with that problem rather than just telling you something you already know.

This doesn’t mean start with a load of excuses! Often I’m inclined to say “the client told me to do this, and I don’t really want to argue with them…” which is really an excuse for me not standing up for my design work or my principles.

Giving useful feedback

Most important when giving useful feedback is trying to understand the context of the project. It’s ok to ask questions before giving any advice! If someone has asked for your opinion, then they are likely to value it, but this does not mean that you should blindly give feedback without understanding the work.

The design is the designer’s project. They may be sharing their work with you, but they ask for feedback in the hope of understanding better how to improve their work, not to be told what to do. The key to this is really trying to concentrate on understanding the problems together as best you possibly can, rather than offering quick solutions.

However this doesn’t mean that it’s bad to help the designer with ideas. Try to give examples to help illustrate potential solutions, but always back these up with rationalisation, and the reason why you think this would work.

Always be honest, but polite. Egos are no use in critiques, but you don’t want to upset people. Those cruel art school scenarios may be good for destroying the ego that is overly protective of their work, but in a working situation we’re not out to hurt each other. If you find it difficult to honestly convey negative opinions, for fear of hurting a sensitive person, try sandwiching the negative between positive feedback. Negative feedback is definitely more useful, but it can be heartening for a struggling designer to hear the elements of their work that are successful.

Receiving feedback

Listen listen listen. Forget that ego in the back of your mind that is automatically coming up with defensive excuses and try to learn from the experience. People are taking the time to help you, it is only polite to listen to what they have to say.

Take note of everything they tell you, even if you don’t understand it or think it is right. You may come to understand later, and it’s not necessarily the comment that is useful, but the interpretation of your work that helps you understand how potential users may see your designs.

If you keep getting the same comments over and over again, don’t dismiss the additional comments as unhelpful. One person may have further insight, and the fact that so many people are reinforcing the same point should really hammer home any improvements you need to make.

Not having an art education isn’t the end of the world

If you know me, then chances are you’ll have heard me rant about my experiences in formal art/design education. Needless to say, it isn’t always a positive way to start your design career, and I fear it is often a source of snobbery in the design/web design industry.

This kind of education may give people a head-start in critiques because they’ve taken part before, but that really is the only head-start. How does anyone get experience asides from trying something for themselves?

I love Martin’s idea of meeting up for group critiques. I think it would be something that could benefit a lot of designers if we do it regularly, and get an opportunity to understand each other and our ways of working better. So if anyone is local-ish to the Surrey area (and I’m willing to travel for this kind of interaction!) please let me know. For those of us who are also frequent conference attendees, maybe we should have post-conference crits together?! Let’s get on with it!

One comment

Kim
at 22:10pm

I’ve been thinking about this since Mark’s talk too. I’d be up for a meetup group to critique work, although I don’t do much design at the moment, but I do work as a usability consultant so I guess I critique people’s work everyday! I’ve been having occasional thoughts about an online critiquing platform for a while since somebody on an e-campaigning list I subscribe to mentioned it but with the focus on critiquing digital campaigns. I started scribbling down more ideas on this during Mark’s talk. What do you think of a website where people could submit designs and ask for honest feedback? I’ve seen people do it on other forums, but nothing specific. Would you use such a site? (and maybe be interested in a little collaboration project on it :) )

Read the original post, ‘Critiques, giving and receiving useful feedback’.

Solving problems with naïvety

Mon, 07 May 2012 14:46:30 +0000

Last week I was at the wonderful Future Insights Live conference in Las Vegas. Annoyingly as I was speaking twice (that bit wasn’t annoying, it was fun!) I missed a load of talks, but had some fantastic discussions around some particularly interesting topics.

The topic of naïvety in user experience first came up in Aral Balkan’s brilliant opening keynote, but using it as an approach it was an ongoing theme through the week, summed up by Josh Clark:

Tweet Aral spoke about staying naïve in order to identify with a user who comes to your product afresh. It’s hard for somebody working on user experience to un-learn everything they know, but in order to create an experience that will be useful, and preferably enjoyable, for the user requires fresh eyes.

Thinking around this, I was considering another ongoing discussion that’s really been around for ages. Web vs. native, apps vs. sites. The evolution of the discussion in itself is definitely a blog post for sometime soon, but it was frequently the approaches of those involved in the conversation that made me consider the value of naïvety.

Now I’m not claiming to be objective in the argument of web vs. native, I work with the web, and therein lies my natural bias. It’s very difficult as a creator to not favour the tool that you work with the most. Both web developers and native app developers are frequently guilty of considering each new project as a nail because they’ve got a web or native hammer that’s particularly comfortable to use.

As problem solvers, we need step back from our tools of choice, often also being what will make us money, and try to objectively decide what will solve the problem most effectively and efficiently. We need a naïvety that makes us untainted by our previous experiences.

Ultimately we need to learn the separation between what are really standards and conventions that can assist the user in their learning process, and understanding our own experience that is clouding our judgment and making us expect the user to think in the same way that we do.

Being open-minded is difficult, we’re constantly faced with our own experiences on which we can base grudges, evangelism and every possible opinion in between. But this discussion on web vs. native has made me think that, whilst experience can work in our favour, we must be careful that it doesn’t work against us. Next time we’re arguing for or against a platform/approach/ideology, we need to consider whether we’re using our experience to judge or if it’s just bias.

5 comments

Robin Cannon
at 14:55pm

It’s a great point. I had my eyes opened to a lot of great practices at Future Insights Live, and spent a lot of time thinking “that sounds awesome for project x”. On the other hand, also spent a lot of time thinking “hell, that’s another new thing I’ve got to learn”. I think therein lies some of the problem –; it’s a combination of comfort with the tools we already use, and an assessment of the learning time needed to learn a new tool.
Obviously in the long run having a wider skillset and more choices will benefit me, and my work. It’s sometimes difficult to take that long view on a day to day basis when there’s pressure to simply get things done, and less sympathy with the desire to take time to explore different options.

Incidentally, really sorry I didn’t get to your talks at the event. I kept seeing tweets about how awesome your presentations were when I was sitting in different ones!
- Laura
  at 14:59pm
  
  Yet in the same way, we don’t want to become workers with generalist skills who don’t have time to know enough about anything in depth. It’s part of that T-shaped skills idea, and really knowing enough (and being honest enough!) to tell a client/boss that you’re not the right person, or don’t have the right tool, for the job.
  
  (And no worries, the other talks looked great. There’ll always be the videos!)
- James Cryer
  at 15:11pm
  
  Great post! Can’t agree more with the above point. Each project should be treated with an open-mind.
  
  At the end of the project, the designer / developer / consultant isn’t the end user in most cases and therefore the user should be put first. Whether a project should be developed as an app, site or hybrid solution should be a decision taken on a project by project basis.
- David Hickox
  at 15:43pm
  
  My girlfriend says I’m dense. But FILive taught me that I’m just a good designer. The world is honestly pretty confusing once you start expecting good UX and design, and Aral’s talk made me feel OK about being genuinely confused by a lot of it.
  - Aral Balkan
    at 16:59pm
    
    David,
    That’s the best feedback I could hope to read on my talk; so happy to hear it :)

Read the original post, ‘Solving problems with naïvety’.

New Adventures in Web Design 2012

Mon, 23 Jan 2012 10:47:35 +0000

My digest post about New Adventures in Web Design conference –; The Job, The Process and Creativity –; NAConf 2012 is now up on uBelly.

I’m now on board with uBelly to cover conferences and other webby stuff. This post is very much the same style as my previous digest posts, but on a different site.

Read the original post, ‘New Adventures in Web Design 2012’.

Mobile First

Mon, 12 Dec 2011 09:14:54 +0000

Continuing on with my chapter-a-day, last week I finished reading the brilliant Mobile First by Luke Wroblewski.

Mobile design and development has gained momentum over the last few years; with responsive design and designers regularly going giddy over iPhone app UIs, it’s surprising how little the industry discusses the design issues. We seem to prefer to get caught up in the more technical and development-based conversations (or the infuriatingly dull native vs web, but I’ll get back to that!)

Luke Wroblewski’s Mobile First makes for a refreshing change. Luke talks about designing for mobile experiences. He shares case studies and ideas behind UI design, including loads of concepts that had never even crossed my (admittedly slightly limited) mind. (Should the navigation be moved to the bottom of the page on mobile screens so it doesn’t get in the way of the main page content?!)

If you work for a company or clients who are reluctant to consider mobile solutions, this book is perfect for you. Luke arms you with stats aplenty to back up why the mobile experience is a very current issue and the immense gains that can be had by paying attention to smaller screens. I’m lucky to work with clients who consider mobile as important as the desktop experience, but I still found these statistics valuable in reminding me why I bother!

As a (perhaps-overly) frequent attendee of conferences, I’m sick of the “native vs web” debate (panel go-to question where the answer is always ‘it depends on the context!’) Fortunately, Luke is very much agnostic to web or device in this book, discussing the merits of both in depth, but then showing design approaches that would work equally well on the web or in a native app.

And of course, there is the very important concept of Mobile First. A principle I had first learnt about on the W3C Mobile Web Best Practices course, which has such a positive impact on design with minimal negatives. The ideas that making your content suitable for mobile consumption will make it a better experience for desktop users, and that mobile first results in lightweight (both visually and technically) pages that are easy to download and browse are impossible to argue against. You’ll come out of this book feeling as much an evangelist of the mobile first approach as Luke himself.

As with other A Book Apart Books, Mobile First is written in a light, readable style with a good dose of humour. Even with all the stats and graphs, each chapter is a breeze and I really enjoyed the whole book.

Read the original post, ‘Mobile First’.

Designing For Emotion

Tue, 15 Nov 2011 09:43:18 +0000

I bought Designing For Emotion as part of the A Book Apart deal, alongside Mobile First. After listening to Jeffery Zeldman talking about the release of these books with Dan Benjamin on The Big Web Show, and hearing how they were perfect books to read before a redesign (my site is in a constant state of awaiting redesign) I was really eager to get stuck in. Oddly, I decided to read Mobile First second.

Designing For Emotion is the third book I’ve read in my read-a-chapter-a-day-for-inspiration series. I write this on a train journey after greedily guzzling the last three chapters in one go as I just couldn’t stop reading.

Aarron Walter writes in an incredibly easy style. His warm, friendly tone helps enthuse you about emotional design and gives you so much to think about beyond the old basic idea that 404 pages should be cute and funny to make your users more forgiving.

Arguably, this book is a lighter read than previous A Book Apart books which is really down to its subject matter. You’re given a real overview of designing for emotion and deeper case studies into how it has been practically applied to different sites but, as Aarron points out in Chapter 4:

The examples…are not meant to be emulated, only to get you thinking about how you can convey your brand personality in your interfaces in a way that resonates with your audience.

This means that, if you’re anything like me, you spend the whole book studying the ideas and working out how you can use similar approaches in your own projects.

Each chapter in Designing For Emotion takes you through a principle of emotional design:

Emotional Design (Intro/Overview)
Designing For Humans
Personality
Emotional Engagement
Overcoming Obstacles
Forgiveness
Risk & Reward

The Forgiveness chapter is more specific than others, focusing on evoking a particular emotion, but the content comes across as equally important as those in other chapters as it is such a necessary emotion to consider on the web where errors and poor performance can easily tempt users to look elsewhere.

Overall I found this book insanely inspirational. Partly because it’s a subject rarely covered in such depth and with so much consideration, but also because it’s almost exciting in its enthusiasm, making it easy to read quickly.

2 comments

Nik (aMixedmedia)
at 10:09am

Brilliant review. Emotions and design are two favourite subjects of mine –; I’ll be getting this book when I can ! :)
Damian Herrington
at 10:25am

Great post. I am fan of the A Book Apart series, may give this one a read after Responsive Web Design.

Read the original post, ‘Designing For Emotion’.

A Practical Guide to Designing the invisible

Tue, 01 Nov 2011 08:27:28 +0000

After reading Mark Boulton’s A Practical Guide to Designing For The Web and Andy Clarke’s Hardboiled Web Design, I was keen to read another Five Simple Steps’ design book. Robert Mills’ A Practical Guide to Designing the invisible definitely didn’t disappoint.

It took me a few reads to start getting into it. I haven’t been dedicating enough time to reading lately, so when I did it was stop-start and not concentrating properly, so I’ve decided to read a chapter a day. The idea behind this is to inspire me and set me up for the day’s work. It also allows me to catch up on my huge pile of unread books and learn a little on the way.

A Practical Guide to Designing the invisible was my first book to read in this way. It is perfectly divided into five parts, which allowed me to read it one-part-a-day each weekday last week. It took me around twenty to twenty-five minutes to read each part. These are:

Invisible communication 101
Following the right signs
Using the right palette
Using the correct language
Telling the best story

Each part is well-crafted; starting with a overview explaining why that area is an important part of designing a website, followed by more in-depth principles and examples, finished off with a real-life case study allowing the reader to see how those principles can be applied. The abstract-to-real-life structure combines theoretical and more practical information in an easy-to-digest way.

A Practical Guide to Designing the invisible is sold as a book aimed at beginners and non-designers:

This book is for design beginners. If you’re not a designer but sometimes are asked to do design, then this book is for you.

I’d agree that it is perfect for this audience, but Robert Mills doesn’t write in a basic way, and it certainly isn’t patronising. I was actually surprised at the amount of detail that Robert went into on some of the theory. For example, the section on semiotics was probably about as much depth as I learnt in my first year at university studying Digital Design/Graphic Communication. This continued through the book, it frequently reminded me of Graphic Design at university and college, but with that vital web context and angle. I think this book would be a perfect read for any designers looking to catch up on the theory they might have missed by not studying design, and any developers or business people wanting to better understand design from a designer’s point of view.

As a fairly experienced designer, and has had a more formal ‘design education’, I still found it valuable. It reminded me of the reasoning behind my design work. I think it gets to a point where some of your own design work can be on a subconscious ‘invisible’ level, and this helped me identify some of the principles I use every day, and how best I can explain and justify my design choices.

The only slight downside to A Practical Guide to Designing the invisible was the digital format. I can find it tricky to concentrate when reading on my desktop screen, as I get easily distracted by background tasks, but you can easily read this book across devices in the formats provided. The only downside to trying to read on other devices, particularly those with smaller screens, is that the layout of the book is very much designed for print. As a digital-only book, I feel it could have benefited from less margin space and a slightly larger x-height with a more hierarchical layout (fewer pull-outs), making the images more directly follow the relevant text to optimise for a screen-based reading experience.

In conclusion, it’s a good one, buy it! A book that covers web design well and doesn’t mention HTML and CSS is a rare find (this can date a book quickly and design principles can get lost in the markup) and I’ll definitely be recommending it to any future person who asks me what to read if they want to be a designer. ## 3 comments

Justin Avery
at 01:01am

Bought (you should get referrals)
- Laura
  at 09:07am
  
  I hope you like it as much as I did :)
- Jeff Lau
  at 01:11am
  
  I just read Hardboiled Web Design. I was going to pick this up to, but I have this thing about buying books and not actually getting a ‘book’. Maybe I’ll give it a read after this review!

Read the original post, ‘A Practical Guide to Designing the invisible’.

dConstruct 2011 — My Digest

Mon, 12 Sep 2011 10:56:45 +0000

It was another inspiring day at dConstruct, the best abstract thought-inducing conference around.

The abstract nature of the conference is part of the appeal for most people. It’s hard to get enthusiastic about a talk that is teaching you more practical techniques, such as writing HTML, when you can so easily learn about it on the web in your own time. Conferences that inspire your passion for the industry, exploring other disciplines and encouraging you to approach your everyday work from a different angle.

This does mean that the talks at dConstruct weren’t a straight-forward formula of “here’s a problem, here’s the answer.” Most talks were more a commentary, or train of thought, more about trying to identify ideas and issues, working towards solutions, than the “perfect fix” for all our problems.

Digital Products

The main theme of dConstruct this year was Designing Digital Products. For me, this seemed to be mostly covering digital products and our experiences with them, working on how to go beyond the usable (which is fortunately fast becoming the standard) to make these products truly personal, engaging and immersive.

The talks weren’t necessarily connected, but I found a lot of common threads throughout. This (slightly long!) post covers what I felt were the most prominent and meaningful themes. It’s about 15 minutes reading time, I think I should warn you!

Beyond experiences

In his opening talk, Don Norman spoke of how our products have evolved to be mostly about emotion and experience. Stephanie and Bryan Rieger expanded on that by discussing how we have to bear in mind that we are creating more than *just experiences *and that what we create now will define our future. On one hand, you may have no impact, but on the other hand you may have a huge impact and thus a huge responsibility.

Delight became a big part of describing how to go beyond a usable experience. Don Norman used an example from the OSX interface. The way that Safari scrolling gathers momentum and bounces when you hit the top or the bottom of the window at speed isn’t about function and usefulness, it’s just about fun. It’s the details creating fun and elegance that make the experience.

The emotional

Kelly Goto gave a fantastic talk from her position as a researcher, explaining how understanding the users/consumers’ lives is so important when creating products. Kelly spoke of she tries to understand what’s behind when someone says ‘I love it’ and how understanding people’s rituals can help you understand their priorities and how their experiences are connected.

Kelly’s company does research through contextual interviews, also known as ‘deep hanging out’ where they spend time with people to understand how products make them feel and how it helps them complete their tasks. It’s all about the context of people’s experiences and how understanding a situation can give you a completely different connection to an experience. She explained how these observations are one of the most effective forms of research and acts as the opposite of relying on statistical research such as analytics (and to a degree, focus groups.) Analytics and focus groups as forms of research can lack context and have results skewed as what people say is rarely what they actually do.

Kelly gave an example of a product that understands lifestyle; Withings’ scales aren’t ordinary scales, they tweet a user’s weight. This can help motivate the user and give them an experience that actually affects their life rather than just providing a utility service.

Unfortunately Kelly ran out of time so she had to very briefly cover some interesting topics that I would have loved to have heard in more depth. She started to talk about Kansei engineering, and how it ties in with creating more emotion-based product experiences through mixing sensory aspects with a logical experience.

Memories and augmented reality

Kelly Goto and Don Norman both spoke about making products addictive. Part of making products addictive, making the user want to return, is through making good memories of that product’s experience. Memories are actually more important than experiences because where experiences are brief, memories can last forever.

Design memories not experiences. Don Norman

Don Norman explained that the importance of memories is why we buy souvenirs and other memory-triggers such as photos, but the interesting part is that a memory isn’t necessarily true to reality. A memory can be like augmented reality, a skewed version of actually happened.

Kevin Slavin spoke about augmented reality and how it isn’t yet working as a genuine experience in the real world. Kevin’s main interest is in why we’re so desperate to create augmented reality and what it says about us.

Kevin explained how the working concept of augmented reality was created to assist workers in cabling to cable diagrams when working on Boeing planes. Having the cable diagrams mapped against the workers’ eyes allowed them to see where cables needed to be laid in real-space. This created the layer-like concept of augmented reality that we’re familiar with today in apps such as Layar.

The downside of layering replicant worlds to create augmented reality is that it makes the entire world feel less real and less immersive. It requires pointers in the augmented world to show users where to interact; this loses the magic compared to how everything is interactive in our real world.

Kevin pointed out that this is because we are confusing replication, looking like the real world, with immersion. This is particularly a problem as we as a species tend to find complete replication unsettling, which seems to be the case with human-replica robots. We forget that it isn’t looking human that makes something feel human. The brilliant examples that Kevin gave to explain this point was the Muppets or Tamagotchis. The Muppets are puppets that mostly don’t look like humans, but it’s their actions and their human-like personalities that make them seem real. Tamagotchis are just a few pixels, but they became like real pets to children. It wasn’t through good graphics or looking like real creatures, but by the way their behaved real, through having needs, desires and vulnerability. These attributions gave Tamagotchis a deeper sense of being alive.

Kevin summarised by saying that reality can be augmented, but not by adding a layer, and not through obsessing about optics. He likened augmented reality to porn, just a thin veneer of reality to fool the eyes.

Possessions and the personal, empowering users

Don Norman spoke about how digital products are changing to become more about co-creation and doing things yourself. This is changing the way products are made as people can easily make their own products as amateurs. The freedom of this technology and these platforms create infinite opportunities for creation, as well as giving people the power to do things for themselves that they couldn’t before. An example of this is blog platforms, where users can now publish for themselves.

Kelly Goto pointed out that customisation is a huge part of creating a good experience, being able to personalise what your possession does to express yourself. An example of this is in how huge the custom ringtone market is, where people strive to find the right ringtone to represent themselves or their friends.

Stephanie and Bryan Rieger suggested that user customisation and creation also reduce the requirements for a polished product. You can create something ‘perfect’ for your users, but it will only ever be perfect for that average, homogenised user. Many users would prefer something non-linear and ragged around the edges that they can refine and make suitable for themselves. This lack of perfection also allows users to mold and create their own experiences.

This idea of creating customised experiences has extended to whole services being based around the experiences of others’ products. Examples of these services are Readability and Instapaper, both apps making the reading of other people’s content a better experience.

The Riegers described how Apple spend a lot of time controlling experiences where other platforms, such as blogs and Twitter, are giving more freedom to users to publish their own content.

The best designs will set the stage, but stop short of fully defining the experience. Adam Silver

This breaking down of ownership has been enabled by the web. The Riegers explained how the web allows an idea to grow, almost organically or virus-like, independently from the original creator. Especially through open source projects, this transference of ownership can enable new voices and propel change (both positive and negative) beyond what could be achieved by the originator.

In a lovely and engaging talk by Matthew Sheret he spoke of totems. Totems are a concept recently brilliantly described through the film Inception, where a pocketable object you carry with you reminds you of the real world, reality and your home no matter where you are.

Matthew went on to talk about how you can learn a lot about a person from their pocket possessions. They are intimate, meaningful objects who show off who you are, and this representation should be at the forefront of designers’ minds when creating products.

Despite the increasing importance of the personal, and its expression through possessions, Kelly Goto made a point that really made me think; we don’t really love our technological possessions (such as our phones) as an object, we love the experience they provide. We don’t love out phone if it’s broken, we can just move our experience, along with our data, to another device.

Matthew Sheret also spoke about this when he explained that the problem is that data-holding objects don’t have a huge life span, even though the data within it has the potential to live on. This means that there can be more meaning in the data than in the object, as throwaway consumer products aren’t the heirlooms they once were. They no longer have a chance to age or carry memories themselves.

The value of systems

Don Norman discussed how there’s no longer a distinction between the internet at home/work and the internet in your pocket. You can move from one device to another seamlessly reading the same book or watching the same film. This means that design has become about learning how to create great *systems* as they create great experiences across all of these devices.

Stephanie and Bryan Rieger explained how controlled environments don’t necessarily encourage growth. Proprietary systems, such as the pod-based coffee machines, use controlled factors which reduce a product’s ability to react to change. If there is a shortage of the materials to make the proprietary product, the whole system must change to accommodate a new material, whereas more flexible systems (such as the traditional French coffee press) are already created to work with different materials. This means that often the simplest and more flexible products are the most likely to succeed, withstanding the tests of time.

The diversity of systems

Craig Mod described how we tend to veer towards a small concentrated area of knowledge and often forget to have perspective. He emphasised the importance of working across disciplines, explaining that the further we travel from our specialist areas of experience, the better an idea we can gain of the frontiers and unknowns of our knowledge.

Don Norman also spoke about how new inter-disciplinary skills are needed to cope with the crossover of products (apps/sites) that our systems cover as the systems themselves are more representative of the brand, and are more enduring, than the products and devices which carry these systems. The ease of a system will resonate beyond a fancy product. As the Riegers pointed out, our most valued systems are designed to live beyond the device.

Don gave the example of this being why Apple are scrapping the standards and creating a new consistency across all their devices, making scrolling on OSX Lion consistent with gestural scrolling on iOS. It’s not about what we already understood as standard on OSX, it’s about establishing a new system that works across multiple products and platforms.

Narratives

The one concept in experience that we don’t think much about is time. Time is what makes the experience of films, books and games successful. Don Norman believes that this is why educational systems will likely move into the gaming sphere, as it’s a way to make learning more immersive.

Dan Hon’s talk was focused around storytelling on the web. Dan gave examples of the easy way and the complicated way to create stories on the web. The example of the complicated way was to create fictional alternate universes/futures with characters who have their own sites and profiles. The easy example was how people create parody accounts on social networks such as Twitter. Both can be a great source of entertainment but rely on the humour of the platform. For instance, Twitter is home to many parody accounts whereas Dan gave an example of how silliness and parodies aren’t welcome on Quora, and can be met with a dismissive lack of humour.

Platforms were key to Dan’s talk about storytelling. He pointed out that we don’t have specialist narrative-creation tools (or even for experiencing the narratives), and the platforms we do have aren’t ideal for story telling. There aren’t holodecks for holonovels as idealised in Star Trek, and there’s generally little room for free narrative discoveries. This is partly down to our platforms being so focused around ‘real’ people. Facebook and Google Plus make it near possible to create narratives as you’re only supposed to create accounts in your ‘real’ name.

The difficulty in choosing platforms to create stories is that each platform varies in attention. Youtube has a fairly high chance of discovery as users tend to click from one related video to another, but there is a huge amount of videos to be found within. Other platforms have a very low amount of attention but more niche communities, heightening your chance of discovery.

Kars Alfrink spoke about how game narratives could be used as test beds for societal situations, helping make a difference by creating simulations that encourage players to act responsively towards society. It did seem like a fairly radical approach and response to the UK riots, but Kars pointed out that it wasn’t just about rewarding positive behaviour, as incentivising and promoting rewards instead of rules isn’t the right way to encourage people to take moral responsibility.

Kars spoke about how games, particularly folk games such as chess, can bring together cultures (although they can also create mono cultures) and how he believes that, through fitting games into our daily routines, they could have more value and affect more of our lives.

The speed of technology

Kars Alfrink talked about how technology can amplify the speed and intensity of societal events. Stephanie and Bryan Rieger also spoke about how the rapid speed at which technology is developing, and is adopted, means that time is a luxury and striving for perfection can result in being left behind.

Historically market penetration took a long time, allowing the creators of a product to establish models slowly, make mistakes and correct them, but now time is a luxury and products can become completely established or totally obsolete very quickly. This means there are no longer generations experiencing the same products, and no generation gap, as a few years makes an enormous difference in the products we use and our experiences of them. This has made users much harder to understand and control as well as meaning we must now be constantly creating new mental models for the way we create.

Stephanie and Bryan Rieger explained that with the addition of portable devices, the distribution of ideas has been amplified in a storm of connectedness. Ideas very rapidly converge and create new ideas and events.

Our digital past

Frank Chimero discussed how we’ve actually started to get to the point on the web where we have a history. In our personal digital histories we have huge silos of saved ‘Likes’ and ‘Favourites’. Frank gave the example that these collections that are reminiscent of the old-fashioned common place books, where people would copy their favourite text from other books into their own personal book. He pointed out that this was a type of curation, and that there’s a huge potential in our similar collections. The main value being in the collection as a whole, because of how the data can co-mingle.

The difference between our digital collections and the common place book is that in the digital world we can’t replicate that same architecture of serendipity. Where the common place book allows you to find the content as you browse, digital content allows you to search your content and it is brought to you. We miss this creative, curated style of browsing in our web experience.

Despite there not yet being any ideal web tools, collection and curation is changing the way we publish and consume as everyone can be a publisher and everyone can be a consumer. Don Norman pointed out that the trick now is discovering what is good content. And that this can be accomplished through curation.

Frank Chimero discussed how these differences between analogue and digital seem to define our ways to hold on to and remember the past. Digital is invisible, easy-to-forget and is rarely a physical presence but rather a phantom pile that is present but has no set parameters. There appears to be less value in the digital as you can give away copies many times whereas the analogue only has one copy that you can only give away once and thus embodies the associated history, memories and ownership.

Caring for our digital history

Frank spoke about unleashing the potential in our ‘Likes’, ‘Hearts’ and ‘Stars’ collections by curating, rather than just collecting. Using the curation second pass, we can create narratives, arranging our collections in more meaningful ways. Frank explained that there are restrictions in curating through the current tools/services we use to collect. It’s hard to discover patterns and *find* rather than just searching for what we’re looking for, and we limit the arrangement of our collections through blocky, spat-out layouts.

Creating better curated collections would require better digital services. These services would need to change the defaults that we usually arrange our data by, using more personal and natural parameters such as those of LATCH as described by Richard Saul Wurman:

L –; Location
A –; Arrangement
T –; Time
C –; Category
H –; Hierarchy (or continuum, best-worst, first-last)

Using these parameters would be complemented by our adoption of a more contemporary museum arrangement to encourage more exploratory browsing. Frank described how creating more spacious layouts, where a user can enter and exit at any point could help replicate that more serendipitous experience of the common place book.

Understanding the preservation of artefacts and not just data

Matthew Sheret spoke about how data and artefacts can complement each other in creating legacies. Attaching your totem personal possessions to RFID and similar trackers can create triggers for other services that can give you further connections. The example Matthew gave was using your Oyster London Transport card to associate locations with playlists you listen to whilst travelling. This can help you associate memories with places, giving meaning to your travel data, and allowing your totems to reflect your personal life back at you.

Even smart phones could be used as totems, as they go everywhere with you. As Matthew put it, these are the “prettiest sensors in the world.” Smart phones carry so much tracking information to help create more connective data describing your life. The more connections you create increases the value of the data and increases the value of the system.

The inverse can also apply. Matthew was using a hacked Doctor Who Sonic Screwdriver toy as a keynote remote. He suggested that hacking physical pocketable objects, such as toys, can create more useful objects that carry extra meaning through the function you have personally given to them. This can scratch the itch of the heirloom and potentially create the legacy personal possession.

In Summary

dConstruct really emphasised for me that technology isn’t the detached work computer in an office for most of us. It is becoming such an integrated part of our lives that we no longer see it as alien objects that are invading our time and distracting us from our loved ones. The products that people are creating are helping us enrich our lives, understand ourselves and our environments better.

This means that when making digital products, exploring the connection between the human and the machine is becoming more important. As we’re trying to improve on adequate, usable experiences, the focus is really shifting from the product and its functions over to the human and their behaviours, and how the technology works as an extension of human life.

It wasn’t a conference so much about ‘takeways’ but I took away a big sense of responsibility for the projects I work on. It’s pretty scary to think about the impact that you can potentially have on someone’s life through what you create, but massively thrilling at the same time!

5 comments

Andy W
at 12:17pm

Holy cow. That is one hella long post. I’m going to have to ‘read later’ on this one.
Might be worth doing each talk as an individual post and releasing them daily over a week… I would have been much more likely to read them all then. You could then link them all from a ‘master’ post :)

If you could bits that you would recommend I read?
- Laura
  at 12:22pm
  
  It’s tricky because I was trying to work across themes rather than writing per-talk, but I’ve tried to add some headers in there to break the themes up. Maybe I’ll do a quick skip-menu at the top!
- Dan W
  at 00:11am
  
  Thanks, that was good. I’d love to see more conference write ups like this than the TL;DR oriented per-speaker bullet point lists many produce.
  - Laura
    at 08:27am
    
    Thanks Dan :)

Read the original post, ‘dConstruct 2011 — My Digest’.

Insites Tour Brighton

Wed, 20 Jul 2011 11:56:25 +0000

Insites is a mini tour of four cities in the UK where Keir Whitaker and Elliot Jay Stocks present discussions with well-known people from the web/tech industry. I was lucky enough to go to the first evening in Brighton on Monday where Aral Balkan, Sarah Parmenter and Jeremy Keith were the guests.

The Format

The format of the evening was something unfamiliar to most of us. Each guest was interviewed by either Keir or Elliot and then there were questions from the audience. Except it was much less formal than that. There were breaks in between and a comfortably small amount of people (I’m rubbish at estimating amounts of people so I’ll save you the pain) so there was a really relaxed and casual environment where everybody seemed happy to chat about anything.

The genius was really in the way it was run. Keir and Elliot asked really interesting and leading questions and Aral, Sarah and Jeremy were all open and honest so they genuinely did provide insight into their lives in the web/tech industry. I don’t think it would have worked had the interviewers been unfamiliar with the guests, and with Keir and Elliot both working in the industry doing similar jobs to most people in the audience, their questions always felt appropriate and had something of the that’s-just-what-I-wanted-to-ask about them.

The Actual Insights

Education

The first thing that struck me about each of the guests (and a lot of people I spoke to) was that everybody was self-taught in some way. That’s really inspiring for anybody wanting to work with the web or iOS. Each of the guests hadn’t studied design or development formally yet they’re helping lead the way and set the standards in user experience, iOS design and development.

Funnily enough, despite not having formal education, Aral, Sarah and Jeremy each teach workshops. It goes to show how well they know their subject matter in order to host successful workshops, but also how the semi-formalisation of education can work and enough people seem to enjoy learning that way (rather than self-teaching through books or the web.) And a lot of people must prefer this way of learning as the amount of workshops seem to be on the up.

Client Work

One of the directions that a lot of web industry professionals seem to be taking lately is moving away from client work and towards making their own products. Aral was incredibly passionate about how much more he enjoyed working for himself in every sense, rather than having ever-changing clients for bosses.

Sarah provided some great advice on the warning signs when starting work with potential clients, as she’s had her fair share of painful client relationships, and relayed that she thinks she’s just* too* nice and so clients take advantage. As someone who completely identifies with the niceness approach, it was heartening to see that Sarah has found such great clients that she’s considering working for two exclusively. This is also interesting as it shows more of that same direction of moving away from working with different clients and towards maintaining products as a career.

Jeremy was honest in saying he preferred to just get on with the development, and is very fortunate to work as part of an agency where Andy Budd enjoys handling the clients and accounts sides of a project. I think many freelancers find the sales and admin are the worst part of the job so it made sense that forming an agency with like-minded people would be a good idea, but Jeremy pointed out that this does only really work if there is one individual who is happy to work on the ‘business’ side whilst the others work on the project itself.

Outlooks

What I took away in summary to these talks was really one big point, everybody there was following a career path based around what makes them happy and fulfilled over what might make them rich. And this really emphasises what I love so much about the industry. People are there because they enjoy it, people want to make a difference and make the web a really cool place.

And The Rest

Due to the nature of the Insites tour, people came with a willingness to discuss work, process and dealing with clients rather than focusing on the techniques and technologies that we go on about during the working day. This lead to a few good discussions outside of the talks with the guests where I felt my brain buzzing from finally starting to understand a bit more about how we work.

I am endlessly lucky with the clients I have

I assumed that most people had good clients. From the various discussions it does look like I am very lucky in having ended up with predominantly lovely, responsive, paying-on-time clients. After talking to the Croydon Creatives bunch (and also something Sarah mentioned,) we really seemed to conclude that having a top contract is one of the most important aspects of client work. Not necessarily a boring law-speak contract, but something that appealed to the client and showed that you’re a human who deserves to be paid for your hard work, as well as laying out some just-in-case terms.

Labels and Titles

And the final fascinating conversation that was really ongoing throughout the evening outside of the talks was about labelling. It stemmed from Aral and Andy Budd‘s disagreement on what makes a UX Designer, but lead to discussing how we describe ourselves to clients and each other.

I finally learnt the different between ‘indie‘ and ‘freelance‘ (indie means you produce work for yourself or customers, freelance means you work for clients) and that Jeremy Keith works somewhere between a rotating job title and none whatsoever because it’s the work that do that speaks for you, rather than what you call yourself.

The conclusion that I came to was that labels are a pain. Everybody is judged on what they call themselves and, within the industry, it doesn’t really matter as soon as you’re familiar with somebody’s work. What we do need labels and job titles for is accurately communicating what we do to potential clients. This means we should forget about the acronyms and jargon and sometimes the most appropriate description is ‘I make websites.’

So if you’re in Manchester or Bristol this week, go!

I took a day to write this post, so I’m a bit late in telling people to go to the London leg of the Insites tour, but Manchester is tonight and Bristol is tomorrow night.

It was definitely one of the best events I’ve attended in a while, and one that just gave me faith in how the industry and community is just brilliant (and probably the best ever.)

Note: please forgive my enthusiasm in this post, I hope it’s not too annoying, but I had a really good time!

3 comments

Anthony
at 13:20pm

Great write up Laura, and pretty much summed up the way I felt after the evening too!
@MrQwest
Simon Cox
at 17:07pm

Great write up Laura –; captured the essence very well. Excellent evening and a pleasure to meet you.
George Wiscombe
at 18:33pm

I couldn’t agree more with your thoughts on labels & titles, I think the same applies to CV’s (in the creative industries at least). A list of academic achievements or awesome companies you’ve worked at doesn’t matter to me, it’s all about the quality of work *you* produce and the way in which you can articulate your ideas.
The merits from working with great people & big brands definitely go some way to helping with that, but it’s not everything.

Great post, thanks for sharing –; sounds like a great evening! I’ll write the London night up when I get a chance to breathe :)

Read the original post, ‘Insites Tour Brighton’.

Responsive Web Design

Tue, 05 Jul 2011 19:05:02 +0000

I had ordered Responsive Web Design by Ethan Marcotte as soon as it came out, but being at Ampersand conference, and hearing so many people recommend it, really spurred me to take a few hours out to get on and read it.

My copy of Responsive Web Design, already featuring a 'much used' cover curl…

Responsive web design is a term summarising design that has a flexibility allowing it to be optimised for different browsing experiences. This might be low levels of detail for mobile devices, big readable layouts for massive projector screens or dumbed-down CSS for old-fashioned browsers. I’m so sure that Responsive Web Design will be our bible for flexible web design for years to come.

The reason why I say ‘for years to come‘ is that Responsive Web Design doesn’t just furnish you with markup examples but actual reasons to do it. Much like its predecessor, HTML5 For Web Designers by Jeremy Keith, Ethan Marcotte walks you through how to think responsively, integrating flexibility into the design and development processes, and what might trip you up on the way.

The book is split into five easily-digested chapters:

Our Responsive Web
The Flexible Grid
Flexible Images
Media Queries
Becoming Responsive

These make for great reading if you can only fit one in at a time, but I reckon you could get the whole book read in front of a computer, trying examples as you go, in an afternoon.

I can tell you how useful this book is from how it’s helped me on a recent site design. I have always struggled with creating fluid CSS layouts using percentages. The maths has always boggled my mind and I tend to give it a go then give up when everything falls to bits as soon as I resize my browser window. The thorough explanation of using the magical formula, target ÷ context = result, had me working out percentage-based margins and paddings with very little effort. Now my designs can be more than just ‘mobile version’ and ‘desktop version’!

Part of what makes this book so valuable is the Bot Blog example site walkthrough. Being able to see how you can apply an original fixed-width design to a fluid-width site really helped me understand the restraints and opportunities created by working responsively. The breakdown of media queries is incredibly handy, especially as they’re explained first from the position of starting with an average-width screen design, adapting down to small screens and up to larger screens using *max-width *rules, and then from the position of ‘mobile first,’ adding styles for gradually larger screens using *min-width *rules.

My favourite part of the book was where ‘Mobile First’ was introduced. This is the concept of developing first for a mobile browsing experience, then building upon that experience for bigger, more-advanced browsers. It’s pretty much a mobile-focused version of the progressive enhancement approach. It’s a great alternative to starting big and adjusting your CSS for small browsers as it means you’re not delivering huge long stylesheet files to phones that may have a slow or limited connection. Quite a few developers on the more mobile-side of the web industry have been talking about ‘mobile first’ for years, but it’s great to see it really pulled into mainstream consideration.

Ethan Marcotte writes in a style that is casual but smart and funny in sweet, geeky way. His writing makes you feel like you’re learning from the easy-going class assistant rather than the boring teacher. It’s definitely made me opt to buy the two titles in between HTML5 For Web Designers and Responsive Web Design, CSS3 For Web Designers and The Elements Of Content Strategy, as both books I’ve read so far are so informative and inspiring. There’s also Designing for Emotion and Mobile First to look forward to in the autumn!

4 comments

martcol
at 21:13pm

Thanks for this. It’s a title now on my most wanted list. I do think that building for the web is getting more complicated more quickly. Hopefully this will help stop me feeling I’m falling too far behind. d(>_<)b
Andy
at 22:13pm

I found the book really useful, but my biggest issue was that the entire book was written desktop first, and then the final chapter introduces mobile first, which means reversing not only all the logic, but also how you think and build in the first place. If mobile first is the way to go –; and I agree that it is, why didn’t Ethan introduce that from the start ?
- Laura
  at 08:51am
  
  I’m not sure if I’m right, but I’d think it was probably because it’s more useful to the majority of readers to introduce something that isn’t such a huge leap from their current process first. The non-mobile-first approach could be easily used on an existing site to enhance it, but you really need to be starting a project afresh to begin with mobile first.
- Charlie
  at 08:48am
  
  The book is a good, lightweight read. My only criticism of the book is that Ethan has already published most of chapters 1-4 via sites like a list apart, so there was nothing in there that isn’t freely available. That said its still a good read and his suggestions of how to incorporate responsive design into the design workflow with developers was useful.

Read the original post, ‘Responsive Web Design’.

Notes from Ampersand conference — My Digest

Wed, 22 Jun 2011 09:26:45 +0000

I’ve tried to condense my notes from Ampersand conference into a more useful digest. More than anything this, like my live-tweeting at past conferences, is really a selfish activity to help me absorb the ideas from Ampersand better by reflecting on the themes of the day.

And of course in the spirit of the web and all things good, I may as well share this digest so anyone who wasn’t there might get a taste of the event (albeit through my probably-twisted interpretation and slightly dodgy writing!)

Using typography

Typography is about context, context is about content

The web ‘industry’ is starting to focus more on content strategy, and that the whole reason our sites are there is generally to showcase content, and this was reflected in the importance of content being continually brought up throughout the day.

Vincent Connare was the first speaker of the conference. As the creator of Comic Sans, Vincent was the perfect person to explain the significance of fonts being created for a purpose, for a specific context.

Comic Sans was created for Microsoft Home software, when computers were starting to become used in the home. Its fun, casual, comic-book style was based on comics like Watchmen and Batman Returns and was successfully used in speech bubbles and children’s software. It’s the prolific abuse of Comic Sans in inappropriate signage, documents, and many other places that has made it so well-known and unpopular (or inappropriately popular!) As Jason Santa Maria said when talking about choosing an appropriate typeface:

No type is born evil, it’s the context that dictates if it works.

Jon Tan and Jonathan Hoefler both spoke about Bell Centennial, a font designed by Matthew Carter for phone books. The considerations in creating this font included environmental awareness, such as how the font is used and where it’s used. Matthew Carter made Bell Centennial easy to skim-read at 6pt and used ink traps for where the ink was likely to bleed on the texture of the phone book paper making the small text even harder to read.

a sample of Bell Centennial

Content first

Tim Brown and Jason Santa Maria both spoke about how the context of the content gives them meaning when choosing a suitable font and how vital it is to compose your design with accountability. Some points they focused on for selecting a suitable typeface were:

The content, its message, its reason for being
The audience, who will read it? and how? for how long?
The culture, the historical and cultural significance of the content, whether it will be read in other languages
The context of the typeface itself, its resumé, what it signifies to others, how its production affects its appearance

Content-out

Mark Boulton got us designers thinking around content in a new way which is less concentrated on the limitations of our canvas (the size of the browser, the device) and discussed possible solutions for designing from the content-outwards. Mark suggested that as designers became fixated on web standards, we started to take the separation of content and style too literally which meant we created meaningless designs separated from our content. The content-out route really involves knowing the content first, which prompted a brilliant quote from Mark:

If you don’t know your content or audience, go to the pub.

Admitting he didn’t yet know any solid solutions, but wanted to encourage discourse, Mark suggested processes such as working on the details first then assembling a modular design from the details. This process is one that complements the responsive web design approach which almost every speaker hailed as a new way of working on the web.

Responsive design

Jon Tan explained how typography is one of the elements we can keep consistent across responsive design that reconfigures itself to suit different scenarios. No matter what the layout, screen size or device, the typography (along with colour) can instantly identify a design.

Tim Brown explained his process for building responsive design systems around type. The web, with its inherent flexibility, resists the rigid traditional print frameworks using ratios and fixed grids that previously gave designers a structure to work within. Tim suggests creating a modular scale, with the layout and every other element following the type, allowing it to work consistently regardless of device. This is based on the principle that we need a constant to work from in our designs, and type is a perfect constant to use. This is a way of thinking that designers can easily practise and exercise without affecting any of our current processes.

Tim went on to describe how using a modular scale, rather than arbitrary numbers, we can create a design system that is visibly cleaner and more harmonious. He suggested choosing sizes and spaces, such as type, borders, margins, padding, based on a pattern or scale. A couple of examples of ratios that Tim provided were:

golden ration 1 : 1.618
musical fifth 1 : 1.5

A golden ratio modular scale created using Tim’s website modularscale.com

Different ratios traditionally have meaning or significance to different types of people, so these contexts can even be used to choose an *appropriate *scale. This also gives designers a reason and justification to backup our design decisions.

Typography is more than text

Jason Santa Maria talked about how typography has a dual life. It’s about both the aesthetic and the readability. As designers we can often get caught up in how the text looks as a whole, but in reality users see the whole as texture and they skim across it. Users are more likely to stop and fixate on a small area for a moment, and this is where they will notice the typography and if it makes the text difficult to read. Jason emphasised the well-known idea that good typography is invisible, it’s about not making the user think or struggle to read.

Jason also made the point that readability isn’t always *can I read it? *but also *do I want to read it? *It’s in these scenarios that good typography can help create emotional experiences.

Typography can create emotional experiences

Jon Tan really expanded on his New Adventures in Web Design talk about the lizard brain by emphasising how typography can influence the subconscious. A typeface can convey emotion beyond the words in the text. Jon Tan quoted Paul Rand saying:

A logo derives meaning from the quality of the thing it symbolizes […] what it represents is more important than what it looks like.

This is controlled by a part of our brain called the amygdala which can evoke emotional responses without verbal or linguistic input. Jon explained how this means as designers, we need to understand how the brain works, how we need to understand how design makes us feel.

Vincent Connare made an interesting point when speaking about the design of Tahoma as a replacement for MS Sans. Tahoma was designed by Matthew Carter who is a real type designer and he created a technically superior font compared to MS Sans which was created by an engineer. Still, many users complained that they preferred MS Sans. As people get an emotional attachment and loyalty to that which they know, MS Sans was generally considered the ‘better’ font even though it was technically inferior.

MS Sans (left) and Tahoma (right) samples

Typography is hard

As someone who often feels that typography can be overwhelming, and that it’s very difficult to know when you’re making the right decisions, it was great to hear Jason Santa Maria say that typography is hard. Jason went on to explain that a designer doesn’t need to know *absolutely everything *about typography to use it well, you just need to know how to estimate a font.

Guidelines for choosing and using type

Jason went into great depth on how to choose typefaces. He explained that there are no rules in typography, its imperfect precision where you can only be guided by basic principles and understanding the constraints. Some of the top tips that Jason gave were:

Choose workhorse typefaces. We shouldn’t feel obliged to choose a new typeface for every project. Create a personal palette of typeface families that work well in display as well as body text. Use different styles from the same family to save having to find multiple typefaces that work well together.
Avoid overly themed typefaces. These ready-mades show a lack of imagination. Subtle fonts can promote different emotions more effectively.
Make a list of attributes and feelings that you want to convey, then find typefaces that convey that feeling. This also works for looking for typefaces that are similar, but not the same, to a standard that you use (perhaps such as Helvetica or Georgia.)
**Test your fonts in context **and in the right space. Choose your font appropriately to the line height, line length and size required.

Web Fonts

The Benefits of Web Fonts

Everyone at Ampersand was evangelising web fonts. It’s impossible to not do so with all the exciting possibilities playing with lovely new fonts can bring.

Jon Tan described it as a time of renaissance considering we were previously forced to use such a minimal font palette, and we’re now being given a chance to prove our skills in design using these new tools. We can now choose type that’s *perfect *for purpose.

Jason Santa Maria echoed what I think everybody else was feeling in that it’s a good time to be a designer. Jason shot down the cynical idea that pople are misusing or abusing fonts and emphasised the benefits that we’re gaining in accessibility through no longer having to provide non-standard fonts through dodgy font replacement techniques.

Jon and Jason both spoke about how type can define a brand and how web fonts are helping unify the identity of brands across print and the web, helping convey a voice, facilitate an emotion, and create a relationship between the user and the design.

The Downside of Web Fonts

Along with the eagerness to try new web fonts, there was a lot of talk of the downside of web fonts, but with a positive outlook on how the awkward issues can be solved.

Looking back at font engineering

Metal typesetting, bitmap font creation and OS-safe fonts

David Berlow harked back to working in font engineering when fonts were first needed to look consistent from computer software to printer, explaining how this relates to the web fonts emerging today. One of David’s main considerations is how poor fonts can look at very small sizes. Bearing his experience with metal case type and bitmap fonts in mind, David focuses on how to make web fonts easier to read including basing them on specific size grids, using large x-heights with generally large amounts of whitespace and simplifying fiddly and complicated details.

Rendering

Rendering is a big issue, mentioned by most of the speakers. Jonathan Hoefler spoke about how the type designers at Hoefler and Frere-Jones are creating insane amounts of newly hinted glyphs in order to make their web fonts work as well as they possibly can across the web. Many web fonts are just bad translations of fonts created for print and consequently barely work on the web. A few speakers discussed the difficulties in the differences in fonts across Windows and OSX, with some users preferring Windows’ ‘crispness‘ and others preferring Apple’s ‘soft detail‘.

Museo Slab as seen in Safari on OSX and Internet Explorer on Windows (samples from Typekit)

Tim Brown emphasised how important it is to check your web font choices live, and repeating these checks across the different environments that will use those fonts.

John Daggett described the issues created by web browsers choosing their own fallbacks, such as creating awful synthesised bold fonts through smearing or drawing the letters twice, or obliqueing fonts to give them an italic appearance. Jonathan Hoefler expressed how the lack of being able to distinguish unusual font styles can be an issue, especially for those that have a back slant or are number-only fonts.

CSS Working Draft for Fonts

John Daggett’s talk was an intense look at the potential future of web fonts being controlled through CSS. It was at this point that I felt particularly hopeful. There’s something amazing about how quickly the web seems to have gone from a miserable collection of ‘web-safe’ fonts to being able to see how we can potentially use alternate glyphs and handle kerning.

I don’t think my notes cover all the fantastic features that John described, so for those I recommend you see the CSS Working Draft for Fonts, but here are some of the exciting tidbits I fancy:

Using opentype font features through ‘font-variant:’. This means having loads of different font features such as multiple glyphs per character in an easy-to-use package giving us fine-grain control all through CSS. At the moment font-variant is used predominantly to select small-caps (with limited success.) The potential in font-variant means we could eventually select font features such as petite caps and automatic fractions, have more control over fallbacks, kerning, ligatures, language support and numerals, as well as supplementing other CSS properties such as text-transform.
Security for web fonts. Rather than DRM, the idea is to restrict the origin of the font through http headers and the like, requiring a particular protocol, site or port. This could prevent other sites hot-linking your fonts or sniffing your font URLs.

A day listening to clever people talk about fonts

I think that me bothering to write a massive blog post about the themes of Ampersand conference really shows what an amazing day it was. I felt completely inspired, enthused and almost exhausted by the ideas and feelings being expressed by the speakers. I hope this rather disjointed digest might have helped bring some of this excitement to you lot who couldn’t be there on the day!

Read the original post, ‘Notes from Ampersand conference — My Digest’.

Notes from Ampersand conference — Actual Notes

Wed, 22 Jun 2011 09:26:08 +0000

For those who wanted my notes in an undigested, scatterbrained form, here’s images from my notebook. (My digest is available too.)

I’m a mind-mapping fiend, so I try to link with arrows where I can. Where new points were begun I just moved to another space on the page, so forgive the random appearance! There’s not much point apologising for my bad handwriting, I can’t really help that (all caps is a pretty dodgy habit) but there are some points, notably during Jonathan Hoefler’s talk, where the lights were low so it’s particularly illegible there…

If you want full-ish size, just click the image to open it in a new tab!

Read the original post, ‘Notes from Ampersand conference — Actual Notes’.

Labels in input fields aren’t such a good idea

Fri, 27 May 2011 17:52:37 +0000

There’s something that’s been bothering me lately. It seems to be some kind of form interface trend where the labels for text inputs are placed inside the fields themselves.

Example:

There might be some pros

Admittedly, this makes an interface slicker. It saves space where you’d usually have a label, then some padding, then the input field and probably a load of padding around the lot.

But what you’re gaining in a clean look, you’re completely losing through a total lack of usability.

So, I’m an interface idiot

You know the lowest common denominator, idiot users that we design easy interfaces for? The ones that need to be led by the hand, step by step, across your design to get to the call-to-action?

That’s me, that is. I am an incredibly naïve user. I skim read, I’m forgetful, I barely pay attention and when I do I’m easily confused.

This is what I see

Here’s an example from a site that is otherwise a shimmering beacon of awesomeness over the wasteland that is the web:

Project Noah

As part of Project Noah, you upload photos of nature. The aim is to identify the creature or plant in your photo, and part of that is providing the relevant links to that species’ page on Wikipedia and the Encyclopedia of Life.

It’s a beautiful interface, but I have an issue. I’ll go and paste in a URL, then I’ll select the other text box:

Read the original post, ‘Labels in input fields aren’t such a good idea’.

Future Of Web Design 2011 –; The Summary –; Day Two

Mon, 23 May 2011 15:05:51 +0000

Day Two

Ethan Marcotte –; Responsive Web Design

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Femi T Adesina –; Enhancing your Creativity

I mis-hastagged the first tweet!

Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Josh Clark –; Buttons Are a Hack: The New Rules of Designing for Touch

Tweet Tweet Tweet Tweet

My thoughts at this point:

Tweet Tweet Tweet Tweet

Josh Clark –; Buttons Are a Hack: The New Rules of Designing for Touch continued…

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

John McGarvey –; Copywriting is Design

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Martin Beeby –; IE9: The Story So Far

Tweet What developers think of Internet Explorer (The video mentioned in the above tweet)

Tweet Tweet Tweet

Abbey Tosic –; Standing Out and Moving Up In Web Design

Tweet Tweet Tweet Tweet Tweet

Sarah B Nelson –; Bullet Proof Communication Techniques: A UX Strategist’s Guide

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Josh Clark –; Cage Match: Mobile Web vs. Native App

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Read the original post, ‘Future Of Web Design 2011 –; The Summary –; Day Two’.

Future Of Web Design 2011 –; The Summary –; Day One

Mon, 23 May 2011 15:05:31 +0000

A few people have recommended that I post all the tweets summarising the great talks at Future Of Web Design in a blog post. So here it is!

Day One

Aarron Walter –; Transforming Ideas into Interfaces

I arrived late for Aarron’s talk so it took me a while to engage properly.

Tweet Tweet

Mike Kus –; Designing for Humans

Tweet Tweet Tweet Tweet Tweet Tweet

Ian Stewart –; Power Your Design With WordPress

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Robin Christopherson –; Accessibility and Inclusive Design –; What’s Hot and What’s Not

This was a short talk and FOWD get Robin to talk about accessibility every year. It’s always inspiring and shows you how easy it is to make browsing reasonable for everybody.

Tweet Tweet

Daniel Rhatigan –; Web Fonts: Type Choice & Type Use

This wasn’t at all the sales pitch talk that Monotype presented last year. Daniel Rhatigan was really knowledgeable about fonts on the screen and went way beyond the basics of web fonts that we’re used to hearing all over the web.

Tweet Tweet Tweet Tweet Tweet Tweet

Samuel Bowles –; Extreme Design — Secrets to Successful Design Pairing

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Ian Hamilton –; Demystifying Accessibility

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Dan James –; Open Business

Tweet Tweet Tweet Tweet Tweet Tweet Tweet Tweet

Read the original post, ‘Future Of Web Design 2011 –; The Summary –; Day One’.

Future Of Web Design 2011 –; The Review

Mon, 23 May 2011 15:00:01 +0000

Another great event from Carsonified, I really enjoyed Future Of Web Design this year.

The Cost

I was actually really lucky to get a ticket. I seriously couldn’t afford the £714 2-day conference pass, even at the super early bird rate (that was about £200 less, I can’t remember exactly.) My lovely friend Scott Coello had done the amazing motion graphics for the conference and very kindly gave me his spare ticket.

I think the price is actually a shame. Whilst there is no doubt that the FOWD and FOWA events are longer, with a better venue and far better food than most events, the price dictates a particular type of attendee. There seemed to be far more corporate and agency employees whose bosses can afford the mega £s. This seems to reflect in more attendees who are there because they’re told to be there, there’s less socialising, less enthusiasm and far more people working behind laptops than there have been at smaller, less expensive conferences I’ve attended over the last year or so.

The Talks

It was disappointing that there were talks that I’d seen versions of before. No doubt speakers vary and evolve their talks from one event to another, but I had seen a few of them at New Adventures back in January and the titles of their talks seemed similar so I ended up giving them a miss. I guess that’s the issue with living in a small country where speakers don’t have so far to tour!

Fortunately, the benefit of Future Of Web Design is the fantastic Track Two. Track Two features up-and-coming speakers who aren’t necessarily experienced at conferences but always bring fresh faces and ideas. It was on this Track Two that I first saw Aral Balkan speak last year (and it’s no surprise he was on the main track this year, he’s got presenting skills like nobody else.) This year I saw some great speakers including Ian Stewart, Ian Hamilton, Femi T Adesina and John McGarvey.

Running Themes

Whilst a wide breadth of topics is a great way to cover lots of areas in different talks, compared to other conferences such as dConstruct or New Adventures, which both had basic themes running throughout, FOWD felt a little disjointed and less cohesive. Some talks were high-level with conceptual themes whereas some were more hands-on instructional lectures.

This varied from feeling refreshing to jarring across the range of talks and I imagine this probably was a reflection on how comfortable I was with each subject. More ideas-based talks are informative and inspirational no matter how familiar you are with the topic as it’s always the fresh opinion of the presenter. On the other hand, I found talks that touched on actual code or ‘how to do this to be successful’ grew wearing when you feel like it’s something you already know.

The People

The more I go to conferences, the more I enjoy the company of the other attendees. As soon as you know a few people, it becomes much easier to be introduced to others and before long you feel like you know almost everybody. I think I’ve also gained confidence over the last couple of years, I’m happy to go and introduce myself to new people and this really makes a difference. Having people to discuss new ideas and socialise with in real life, rather than on Twitter, can be refreshing!

Will I go next year?

Unfortunately I don’t think I will. FOWD is a brilliant conference but the price is just too high. I can’t give up nearly the same amount that I pay myself for a month’s work on two days out where I’m earning no money.

I’ll definitely go to other conferences, and I’m all set for Ampersand next month, but I think I’ll keep £200 as my maximum ticket price per-day in future (well, until I’m making a fortune!)

2 comments

designjuju ('f.t.)
at 09:24am

Thanks for the great suggestion during my talk. It was great to have your input.
Should we try to patent supersonic websites? or should we donate it to the community? :D
- Laura
  at 17:54pm
  
  Donate to the community! That’s what the web is all about :)

Read the original post, ‘Future Of Web Design 2011 –; The Review’.

Yeah, so what if I live-tweet at conferences?

Wed, 18 May 2011 18:55:28 +0000

I’ve been at Future Of Web Design

The last two days were long, but fantastic, experiences at Future Of Web Design. The talks were high quality, loads of cool people were there and I learnt a lot.

Problem is, (from some people’s point of view) I tweeted a lot. I’m not going to stop, but I thought I should explain why live tweeting isn’t just “trying to make yourself look clever by tweeting everything you hear.” (Got that from a hilariously passive aggressive tweet that wasn’t directed at me.)

Taking conference notes

First off, there’s the selfish factor. I’m a serial note-taker. Some people learn by doing, some people learn by watching, I’m one of those people who mostly learns by writing it down. No idea why, it just goes in and gets stuck that way.

But why on Twitter?

I used to write pages of notes, but I’d rarely read them again, and nobody else could make use of them.

Not everybody can afford to go to conferences. As a freelancer, I certainly can’t afford to go to many (and I couldn’t have gone to FOWD without the awesome kindness of Scott Coello giving me his spare ticket..)

Since I started the occasional live tweet passing comment on points in talks around two years ago, I started getting a few people saying they liked keeping up with the main themes of the conference despite not being there, and asking if I was going to live tweet the next events. I love the idea of helping people out like this, it’s not cool missing out on fantastic ideas and knowledge.

Trust me, I am paying attention

The bizarrest tweets I’ve seen are those saying live-tweeters can’t be paying attention. How?! You’ve got to pay attention to be able to tweet. Today I managed to live-tweet a talk and be the most active member of the crowd in talking to the speaker at the same time…I’m spend my life constantly multitasking with technology, why would a conference be any different?

I’m not trying to look clever, or cool, or show off

Anybody that’s knows me well knows I don’t really care about being clever, coolness isn’t really my thing and I care more about people thinking I’m a nice person than anything else.

I don’t really think live-tweeting makes me look anything. Maybe noisy…yeah, noisy.

See, I wouldn’t just do it if it was annoying everybody

I can totally accept that some people don’t like tweets from conferences. To be honest, if most of my followers complained then I probably wouldn’t do it (reluctant as I am to be a slave to Twitter followers, ’cause that’s what the unfollow button is there for, right?) but I get so many more saying they find it handy.

I’m not keen on making followers grumpy but I’d much rather make some followers happy.

I try not to tweet everything

I’m only using a phone and I don’t have lightning fingers so I couldn’t possibly tweet everything that comes out of a speaker’s mouth. I try to pick the most interesting, vital to the theme of the talk, and (most importantly) points I understand. I’ll almost always put my own angle on it, as it’s how I interpret it, and to fit it into 140 characters!

I try as hard as possible to keep the tweets in context

It can be hard keeping in context. I’m in that environment, fully immersed, it can be tricky to distance yourself. I haven’t really had any complaints about them being confusing, but I guess people are more likely to ignore the tweets than complain that they’re nonsense.

It’s really just a conference in bitesize

I find it really useful when I’m writing up conference blog posts to go back through these chunks to remind what the talks were all about. At New Adventures, and now for FOWD, I check out ubelly’s tweets as well. Between us, I reckon we’ve got the live-tweeting covered!

But what if you hate the live tweets but you like me the rest of the time?

Get a decent desktop/iPhone Twitter app, such as Echofon, and use the mute user or mute hashtag feature. It’s a cool temporary way to hide me, conference tweets, and any other occasionally irritating tweeters, without going through the hassle/potentially embarrassing unfollow/refollow process.

And if all else fails…just unfollow me!

I don’t use Twitter directly to please other people. If you’re not keen on me then chances are we won’t get along! Whilst I might be sensitive if a real friend unfollows, I understand that my particular brand of babbling nonsense isn’t for everybody.

And to be honest, not using any unfollow trackers or paying too much attention to follower figures, I’ll probably never know…

3 comments

Nic Presley
at 20:43pm

Thought your live tweets were great! Really useful info –; thanks. [Enjoyed this blog post too!]
Jeff K
at 00:46am

Not many web related conferences in my area, so reading your live tweets is the closest I can get to being there.
Mike
at 14:03pm

I would like to know how many people have decided to go to a conference through reading about it on twitter. Keep doing what you do, if 1 person enjoys then that is all that matters. Thanks for the mention by the way :-)

Read the original post, ‘Yeah, so what if I live-tweet at conferences?’.

Notebooks and Getting Over Moleskine

Wed, 30 Mar 2011 12:37:11 +0000

I’m a notebook and sketchbook-aholic. Actually I’m addicted to stationery of any kind. Pens, pencils, post-it notes. It’s incredibly easy to convince myself I need these items when I mostly don’t.

Notebooks and sketchbooks (and maybe some nice accompanying pens), however, are an absolutely vital part of my working life.

Why bother with physical notebooks?

Evernote isn’t the same as writing by hand. Neither is any other note-making software. Balsamiq isn’t the same as wireframing by hand, or Photoshop for sketching. Neither is any other wireframing or design software. I don’t think I’m being books-have-to-be-paperback nostalgic here, but I can’t type rough notes or sketch rough drawings as quickly on the computer as I can by hand.

When email can’t be your record

I know a lot of us rely on email as a second memory. A lot of detail from various projects, discussions with clients, usernames and passwords are all findable by searching email. But what about those (horror horror) face-to-face meetings or phone calls? Notebooks are great for quickly jotting down the gist of things in an easy-to-interpret way.

You don’t have to worry about hierarchy as you would on note taking software (text mostly has to go from top to bottom, not laid out randomly across the page) and you can mix sketches and written notes without having to switch apps. (Fancy that! Old school!)

Random notes, post-its mixed in, who cares?!

It’s not about making it neat

One of the stigmas that I find are attached to Moleskines is the idea of the ‘perfect’ designer’s notebook. You envisage perfect neat pages of beautiful flowing joined handwriting or elaborate wall-worthy pen-and-ink drawings. I don’t know about everybody else, but my sketchbooks are filled with barely-legible scratchy notes and wireframes so wonky that you start to wonder whether browsers are available in parallelogram shapes.

(The “perfect” style Moleskine page, from Flickr)

It’s not about making it tidy, it’s about trying to get ideas out as quickly as possible without being held back by formatting. I can’t imagine most people show their sketchbooks to anybody else. For me it’s almost like a diary. You can see how many more rubbish ideas I come out with over good ones…

Probably rubbish ideas, straight lines not available…

What’s the perfect notebook?

There was a time when I was so anti-hipster that I wouldn’t buy a Moleskine. I think I’ve just about got over myself now, and a couple of years ago I indulged in my first overly expensive, but lovely, notebook. It was all about the squares. I couldn’t find another decent notebook with squared paper.

Why squares rock my world

Want to write along horizontal lines? You can do that with squares. Want to draw some quick wireframes that are slightly straight? Squares are perfect. The XLarge Moleskine squared notebook was my champion.

The new perfect notebook

Recently I decided I wanted to go for something different. I saw the Leuchtturm1917 (nope I’ve got no idea how to pronounce it, either) notebooks on The Paperie and I was wooed by the idea of a pretty coloured notebook.

So I bought myself a lime green large squared notebook. Along with a little pen holder, as I could get it in a matching colour. This notebook is lovely.

My Leuchtturm1917 Lime Notebook

The squares aren’t all the way up to the edges, like the Moleskine, it has margins at the top and bottom of each page and a space for the date. It has contents pages for you to fill in and comes with labels so you can index your notebooks. It isn’t quite as big as a XLarge Moleskine, but is a more manageable size than the larger Leuchtturm1917 notebooks and, being hardback, it makes it easier to handle.

Contents page in my Leuchtturm1917 notebook

Probably most importantly, the squares are more subtle. Moleskine squares are bold and black and you notice their presence. With the Leuchtturm1917, the squares are so subtle that once you’ve used a page, you barely notice them behind the contrast of ink pen. This would make it much better for pencil drawings as they’d definitely be harder to see on the Moleskine counterpart.

Subtle squares in my Leuchtturm1917 notebook

Noisy squares in the Moleskine squared notebook

What was this post?

This post was a love fest. I love my new notebook and I wanted to tell the world. Is it anti-linkbait to write a post that isn’t being hateful? I like that idea…

10 comments

Fraser Pearce
at 15:05pm

Nice choice… but what pen do you prefer?
- Laura
  at 16:30pm
  
  Ooh, that’s a good question.
  At the moment, my fave is the Mitsubishi Pencil Co’s uni-ball eye in fine black ink. I’m not keen on gel pens, as I find they’re too sticky. This one runs really well for writing and sketching as it’s very liquid.
  
  However, for drawing, I prefer any old cheap black biro. They’re lighter and scratchier, like a pencil, so you can get a lot more different textures out of it than you can with an inky pen.
- Fraser Pearce
  at 11:15am
  
  Where do you buy your pens from? I find thicker rollerballs (~1mm) work better for me, but I have trouble finding places that sell them.
  - Laura
    at 12:47pm
    
    Actually bought my most recent ones from Tesco! They’re the kind of thing that are tricky to buy online as you can’t test them before you buy.
    
    I find independent stationery shops or art shops tend to have the best range of pens. A lot of WHSmiths and other chain stores just do expensive fountain pens, biros, and girly-coloured gel pens with not much of any value in between!
  - Jonathan Nicol
    at 23:22pm
    
    Great post, it’s nice to find someone who’s willing to admit that their notebook is full of chaotic scribbles rather than portfolio-perfect doodles.
    
    I’ve always had an issue with the way that designers gush about Moleskine notebooks. There seems to be an elitist/consumerist agenda behind the love affair, as if owning a Molekine notebook somehow magically transforms one into a better designer and human being.
    
    But I think you may have won me over with your description of the Leuchtturm1917, it certainly sounds like a sexy notebook with all the trimmings.
  - Amy
    at 17:51pm
    
    Great posting! I like the header space and the subtle squares. Do you know if it’s available in a small size? Didn’t find it right away and didn’t want to give up on it if maybe you knew…
    - Laura
      at 17:53pm
      
      There is! It’s a [Pocket A6 size](http://www.thepaperie.co.uk/notebooks/leuchtturm1917-notebooks?paper_size=83" rel="nofollow)
      They’ve also recently got linen-covered Leuchtturm1917 notebooks in. So cool!
    - David
      at 09:32am
      
      You should try Arwey notebooks. [http://www.arweystore.com](http://www.arweystore.com" rel=“nofollow)
      
      My new perfect notebook! :)
    - Lyle
      at 10:38am
      
      Out of interest, have you seen the Rhodia notebooks? They come with a dot-grid style which is ace, like the best of both worlds. ( [http://www.bureaudirect.co.uk/rhodia-large-black-a5-webnotebook-dot-paper/p2539](http://www.bureaudirect.co.uk/rhodia-large-black-a5-webnotebook-dot-paper/p2539" rel="nofollow) )
      They’ve become my perfect notebook, although I may have to try out a Leuchtturm one at some point now too…
    - Jessica Yang
      at 20:35pm
      
      Oh goodness, yes. There’s immense pressure in the completely made-up concept of ‘perfect’ sketchbook pages –; it’s an expectation that is anathema to creativity. These days even when artists post pages from their own sketchbooks online they are more often than not curated –; you don’t see the messy exploration or idle drawings of the same thing over and over again because the artist was stuck and couldn’t move on. The false image of amazing creative genius flowing 24/7 is harmful and I’m glad you called it out.

Read the original post, ‘Notebooks and Getting Over Moleskine’.

The Big M

Fri, 25 Mar 2011 18:15:25 +0000

First off, let me declare my complete bias. I’ve been involved with the Big M conference from pretty early on, I was lucky enough to do all the design work and the organisers are lovely guys who I’m proud to call my friends. I’m still on a high from how much I enjoyed myself (and just about recovered from the surreal feeling of being in a place with my own design work everywhere) so this is really going to be the most biased event review you’ve ever read!

The Attendees

It was a complete mixture of attendees, ranging from business entrepreneurs to freelancers, mobile operators to web developers and UX experts. What really stuck out was that everybody seemed friendly, enthusiastic and engaged in the day. I didn’t spot any boring/bored looking ‘suits’ and it made for a fun atmosphere.

The Venue

A great point made in Adam Bird’s review was that Komedia in Bath made for a great conference day venue as it usually hosts comedy and music events. Such a good point. The venue being a slightly dark and very colourful room made for a relaxed and informal feel to the conference. It was the right size for about 200 people so it didn’t feel over-crowded or empty at any point. The chairs were a bit hard, but I don’t think I’ve ever been to an event where that wasn’t a problem…

The Speakers

As a designer, and a previous attendee of the openMIC events, I usually expect most of the talks to go over my head. I’m not a big business brain, never really worked in the mobile industry and mobile development is a lot more complicated than the majority of web markup/frontend development that I do. However, this wasn’t the case at all at The Big M.

The speakers were all experienced presenters. Often you’ll find one ‘dud’ talk at a conference, but there wasn’t one here. Whilst some of the speakers presented on more controversial topics that I wouldn’t necessarily agree on, each made their points well, engaging the audience and inspiring loads of discussion in the Q and As and breaks.

Here’s a brief rundown of some of the main points (and some of my terrible iPhone photos) I tweeted from the talks as well as some brilliant tweets from @bigmconf where all the talks were live-tweeted:

Raam Thakrar –; App distribution and monetisation –; the only things more important than lines of code

Thakrar: We need to think about why a consumer buys a phone, what part we play in the decision & how can we monetise this From @bigmconf

software and apps are now a deciding factor when people are buying handsets, so app devs should use this to work with operators

Thakrar: Specific lessons: develop an app that consumers love and thus influences their choice about what they do with their money From @bigmconf

Aral Balkan –; Beyond Usability on Mobile

The differentiating factor that allows Apple to charge more for phones, tablets, mp3 players and PCs is user experience

Usable is akin to being edible (credited to @Cennydd and @aarron)

Common sense is a dangerous myth

Panel: led by Dan Appelquist –; Openness: Open Standards/Source/Data in Mobile

Openness is about giving developers choice so they can come to one platform and create content they can use on other platforms From @bigmconf

Openness: At some point you are going to die and your work is going to live on, but the only way it can do that is to be locked in From @bigmconf

Openness often hits the barriers of brand protection and content protection From @bigmconf

Bruce Lawson –; Breaking out of the “Walled Garden”: HTML5 and open technology for mobile development

When using new web technologies, make use of them, but don’t rely on them. Always use progressive enhancement

Consider using <a href=”tel:xxx”> for linking phone numbers to be click-to-call on mobile

Accessibility isn’t just about being legal, it’s a moral obligation

Ewan MacLeod –; State of the Union –; Mobile Address

Apps being separate from the handsets and operators are barriers to the most useful mobile experiences. It needs to be seamless

Thakrar: Specific lessons: develop an app that consumers love and thus influences their choice about what they do with their money From @bigmconf

Paul Golding –; Future Innovations In Mobile

Golding: There is a myth that being first is really important. You want to be the first to win not the first to market From @bigmconf

Golding: Study what else has succeeded, what has failed, and what you can take and project out in order to innovate From @bigmconf

Golding: You need to conceive the product, choose the platform, develop the product, deliver the product and engage the market From @bigmconf

No Wifi!

For the conference day of The Big M there was no wifi and very little 3G or Edge signal (O2 isn’t much good in Bath!) This is the second conference I’ve been to this year without wifi (the other being New Adventures) and I think it’s a great choice that more conference organisers should make.

Mike quite rightly pointed out that even when organisers pay for expensive wifi, it usually gets overloaded, and is an additional cost that the attendees pay in their ticket price. I couldn’t agree more. Having so little signal meant people were talking to each other rather than being stuck to laptop screens. There was just about enough signal for the occasional tweet about the event but not enough for any anti-social so-and-sos to sit and work!

The Workshops

Day Two was a smaller affair, with about a quarter of Day One’s attendees returning for the workshops. I was really lucky to go to Aral Balkan’s iPhone Design Principles and half of Patrick Lauke’s *HTML5 and Mobile *before we had to head back home to Surrey.

Aral Balkan –; iPhone Design Principles

Aral really is a talented presenter. After a quick introduction of everybody in the room, he managed to pitch a perfect level workshop helping us to understand the different development choices you have when creating web apps and native apps for the iPhone. I wrote pages and pages of notes and feel like I understand the development process so much better now (and that’s considering I’m no programmer, just a designer!)

Patrick Lauke –; HTML5 and Mobile

The first half of this was a great intro to HTML5 and expanded on many of the points that Bruce made in his talk the day before. As someone who is already using HTML5 on most projects, I found a lot of the talk was probably better suited to those just getting to know HTML5 but the great explanations of concepts such as the viewport really helped cement what I already knew.

All in All

I knew Chris and Mike would run a fantastic event, and I hope this encourages more smaller and informal conferences. Conferences that freelancers can afford that enthuse, engage, feed, water and inspire. Here’s hoping there might be a Big M II…

(My favourite Big M photo, taken by the super talented Mark Power)

Read the original post, ‘The Big M’.

Who wants a ticket for The Big M?

Wed, 02 Mar 2011 15:36:25 +0000

I don’t know if you know, but I made the website for the upcoming super exciting mobile conference, The Big M.

As a result, I have 3 conference tickets worth £233.83 to give away to lovely people who want to learn more about mobile (covering topics such as innovation, usability, development, apps and mobile web.)

My 3 tickets are for the first day, the conference part of The Big M, which is on 21st March 2011 at Komedia in Bath (UK.) I’d love some friendly people to come along and keep me company (that’s not an obligation!)

What do I have to do to get a ticket?

So, all you have to do to win a ticket is tweet something with the hashtag **#sendmetothebigm **or just leave me a comment below before 12noon tomorrow (3rd March.) I’ll pick three people at random after that and let you know via this blog page and via Twitter.

What if I don’t get one?

There’s still some tickets left on The Big M website. With tickets as little as £199 +vat for a conference day pass and student conferences passes at just £50 +vat, you’d be mad to miss out on a fun new event in beautiful Bath.

The winners, as announced on Twitter were @NicPresley, @chrsgrrtt and @richquick.

Read the original post, ‘Who wants a ticket for The Big M?’.

Women in…

Wed, 02 Mar 2011 13:57:05 +0000

I’ve changed my mind about this subject!

To read about why and how I don’t believe this anymore, please read Women and conferences.

Business…Tech…Conferences…

Every time I hear these dreaded phrases, “Women in business”, “Women in tech”, “Women at conferences” I just groan. It’s really boring.

Examples. “There’s only x% of women at this conference” or “There’s no female speakers at this conference.” Not just as observations (there’s nothing wrong in stating the obvious,) but saying it’s a negative point. I couldn’t care less how many other girls there are at a conference.

Asides from it being a complete bonus when there’s no queue for the Ladies, I’d rather a conference was full of eager people who bought their tickets because they were interested and wanted to engage with other attendees. Would you rather there were 100% enthusiastic, participatory attendees or a conference where there was 50/50 male/female attendees where 30% were just there to make up the numbers and weren’t bothered about being there?

As for speakers, maybe there are more male leaders (not exclusively, there are some brilliant female speakers) in the industry. The quality of a conference shouldn’t be compromised just in order to get some female speakers. Get the best speakers you can, and just don’t discriminate against having great women when they do emerge.

Don’t get me wrong, I do understand people who are working for female equality. I appreciate it. I’m not really a feminist, as nowadays feminism seems to mean that men can’t say or do anything and women can act like female-equivalent of chauvinists as they like (See Loose Women and other embarrassing examples.)

I find being singled out as female isn’t the same as being equal. Reverse discrimination isn’t as positive as it often seems. Gender is completely irrelevant in the tech industry, certainly at conferences and definitely in business. We’re not talking about manual labour or track running here, where women and men are clearly different. Why should women be remarkable just for existing in these industries?

As a designer, I don’t think my design work reflects my gender. Certainly cultural and environmental factors must impact on my work, but design work is about context. Design work reflects the context of the project and the context of the client. I don’t like pink because I’m female but I might use pink on a site if I think it’s appropriate. I don’t think you could tell I’m a girl just by looking at my work (though correct me if I’m wrong, because if you can then I’m doing something wrong!)

There’s issues with most industries being male or female-dominated. That’s not going to change overnight. But in the same way, I really can’t say that anything in business, tech or conferences have ever put me off being a part of it. There are so many factors affecting genders in work, be it education, culture, or actual discrimination. Let’s just get rid of the discrimination part, and when it’s not a problem, let’s not make it an issue.

And finally, let me be completely honest. If anybody talks about me as being a “woman in business”, a “woman in tech” or a “woman at a conference”, not only is it weird being referred to as a woman (I’m not that old!) but I also find it pretty fucking patronising.

5 comments

pilky
at 14:26pm

@laurakalbag Heh. Well the best way to increase the number of women in a field is to improve education and reduce discrimination
Andy W
at 14:44pm

I suppose now would probably be a *really* inappropriate time to tell you “not to worry your pretty little head about it” ? ;-)
Peter
at 19:47pm

I agree. It makes it seem like it’s especially hard for women to succeed in business, but really it’s down to the person, not their sex.
alaric
at 00:27am

@laurakalbag I always thought “this tech conferences has women” was a bit like clubs that let women in free, so that horny men will pay.

Read the original post, ‘Women in…’.

New Adventures 2011

Fri, 04 Feb 2011 00:21:27 +0000

As I go to more conferences, I meet more lovely people and get to see friends I’d only ever talk to on Twitter otherwise. In the last two years, I’ve been to about three a year and it feels about the right amount that you rarely see the same talk twice and it’s not just the same topics going round.

Again, I met loads of great people at New Adventures, but unfortunately missed more people than I meant to catch up with. It was such a packed-out venue that it was easy to lose people in the crowds!

The location and venue

It didn’t take too long to get to Nottingham from Surrey. We were lucky that the motorways were reasonably clear and we spent most of our time trying to navigate Nottingham’s one way systems when we got there! It was good to go to a conference outside London but the resulting hotel and petrol costs for me (I can commute to London easily) made it almost as expensive as attending more expensive conferences in London.

The venue, Albert Hall, looked beautiful and made it easy to hear and see the speakers wherever you were sat. For me, the downside to the venue was that I was really cold for most of the day. I know I feel the cold more than most, but it was a bit uncomfortable sitting there in a scarf and gloves. Often conferences are warm environments due to the amount of people in one room so I admit I was probably under-prepared for the wintry day!

The talks

Twitter

There wasn’t any wi-fi at the conference, which was great because there were less faces hidden behind laptops (it’s really distracting when you’re sitting behind someone writing code!) However, this did mean there was less back channel discussion on Twitter, it was mostly people quoting favourite quotes. It was a bit of a shame as I like the back channel. It gives people the confidence to bring up issues and questions that they wouldn’t necessary ask the speakers in front of the crowd.

I made use of the 3G signal on my phone to make notes on Twitter about the conference, it’s the way I learn and helps me digest ideas (I’m a complete fidget.) I know I’m likely to irritate people by doing it, but a few said they liked to hear some of what was going on so I think it’s much more worthwhile than keeping it to myself. These notes, along with the great tweets from the brilliant @ubelly, helped me form some connections between the ideas and help me understand them better.

(You might want to click the image to see it larger so you can read the really dinky text.)

My notes from New Adventures in Web Design (click to view full size)

Unlike my notes on dConstruct, I wanted to connect the different themes running through the talks as they made the day so much more than just random talks.

Running themes

So many of the talks felt as though they were revolving around connected themes. This made the day feel as though you were getting different sides of the story which suited the half hour slots which might have otherwise felt brief. Particular themes such as user experiences, emotional design, narratives and content-aware design made me feel very grown up. Much like dConstruct, it seems like the conference circuit is moving on from the slightly patronising show-and-tell and instructional talks to more inspiring, motivating and thoughtful discussions on how we can be better and make the industry move forward.

My favourite talk: The New Language of Web Design

I’d say my favourite talk (though I enjoyed them all) of the day was Dan Rubin‘s. The topics of language, communication and terms in the industry felt just right for the audience and the maturity of the conference. Dan is a consistently fantastic speaker and his was the one talk that really stood out as being the perfect amount of exploration into the subjects for the half hour slot.

I’ll be looking out for New Adventures next year…

One thing can be sure, Simon Collison put on a great conference. There was a really friendly, we’re-all-in-it-together, casual atmosphere that was fun and in no way intimidating to new conference goers.

As a lot of the bigger conferences are becoming more expensive with little added value, less expensive conferences like New Adventures are in competition to provide a great time at a freelancer’s price tag. It definitely achieved that, feeling like a premium conference on a very affordable budget.

If there’s a New Adventures next year, I’ll definitely try to be there.

6 comments

alpower
at 10:21am

@laurakalbag great set of notes!
Ben Everard
at 10:26am

Great write-up Laura, the conference notes are pretty damn cool, great for recapping the points made throughout the day!
Damian Herrington
at 11:58am

Great synopsis and the conference notes image is very useful thanks!
gicela
at 11:58am

@laurakalbag I love your notes on your new adventures post :)
johanbakken
at 20:41pm

@laurakalbag Your conference notes from #naconf and #deconstruct are supreme. So beautiful.

Read the original post, ‘New Adventures 2011’.

Hardboiled Web Design and Transcending CSS

Tue, 18 Jan 2011 16:28:19 +0000

My history with Transcending CSS

In 2006/early 2007 I read this amazing book. I was half way through my first year studying Digital Design, and I’d only been experimenting with standards-based web design for about six months after reading Web Standards Solutions.

I was already well on my way to being a standards fiend, but Transcending CSS by Andy Clarke did, literally, transcend the standards and made me utterly mad about pushing the boundaries of CSS.

Transcending CSS covered properties I’d never heard of before, like z-index, and Andy Clarke wrote it with such complete conviction that you couldn’t argue with his points for progressive enhancement. I read it twice over and kept it on my desk for about two years. My only issue was that there wasn’t any index, so I wrote my own contents for the frequently-referenced pages in the front of the book in pencil.

Anticipating Hardboiled Web Design

In the early days of Transcending CSS, I wasn’t on Twitter and I didn’t much follow the ‘industry’ around web design. I wasn’t really sure who Andy Clarke was, I just knew that he wrote this book I really liked.

Three years later and I’m a full time freelance designer, always on Twitter, and always trying to keep up with the latest and greatest in the most practical way possible. When Hardboiled Web Design was announced by Five Simple Steps, I’ll admit I was pretty excited. I loved A Practical Guide to Designing For The Web (also by Five Simple Steps) which only made me keener.

I followed all of Andy’s tweets about #hardboiledwebdesign so I knew what to expect from the book. As I’m now following the goings-on of HTML5 and CSS3 a lot closer, I knew it probably wouldn’t have the same appeal as my wow-this-is-what-the-web-can-really-do awe of Transcending CSS, but it still didn’t disappoint.

Hardboiled Web Design

The book is predictably well-written. It’s not too formal, not overly-instructional and very friendly. That’s already an improvement on the majority of books about web development. Sometimes the tone is a bit scary-in-a-good-way, you can really tell how much Andy cares about pushing the web forward.

The book is themed around detective stories. I found the detective novel references a bit much at times, but that’s because I’ve never read any (not that I wouldn’t, I just haven’t!) It started to feel a bit like an in-joke I wasn’t a part of, but did make for lovely illustrations and content examples.

Beautiful front cover illustration

Worth it for the inspiration alone

The first quarter of the book is dedicated to telling you why you bother with new innovations in web development. You’re loaded with ways to persuade your clients or bosses to go along with it too. If you’ve been um-ing and ah-ing about using HTML5 or CSS3 then this chapter is for you. Even if you haven’t, like I hadn’t, it’s really valuable to have someone else put forward the arguments in an easy-to-understand way.

HTML5, CSS3 and the rest

The HTML5 and CSS3 examples are great. I found some of the CSS a bit hard to follow through reading alone, as not every code example had an accompanying image to illustrate it, but it was great to read in front of a text editor. As soon as you try out the examples in the book yourself, it all becomes much clearer.

What really was the big thing for me was the inclusion of microformats. I’ve been working with microformats for a couple of years and I’m smitten. Anything that helps me write better, more semantic, more useful markup is my thing. It’s really good to see microformats getting the attention and explanation they deserve. Andy does them justice and gives some really useful examples, especially on combining different specifications.

Different formats

I bought the bundle package from Five Simple Steps that included the book itself, a PDF version (available for instant download) and a poster.

I liked the idea of having the PDF for reading using iBooks on my iPhone and iPad. This was a bit of an issue, as the PDF has the same layout as the book itself, including very wide margins. This made for easy reading at full size on my mac, slightly eye-straining use on my iPad and a right nightmare on the iPhone. To read the text on iPhone, you have to zoom about a lot. Alongside constant scrolling to read the full width in the page, it’s not the most comfortable reading experience.

reading a sidenote from Hardboiled Web Design using iBooks on the iPhone 4

I don’t necessarily think it should have been designed for these small devices! I’m just saying that I wouldn’t buy the PDF if iPhone usage (or even iPad, really) was what you had in mind.

No index again!

Again, the biggest issue for me was the absence of an index. With a book so full of useful examples, I’m constantly flicking through trying to find the example I remembered from the first read. Having the PDF is useful, as you can use a search function to find what you’re looking for, but fiddling about opening PDF files isn’t really for me when I could just grab the book from next to my desk. So, I’ve gone back to the old-school and have started sticking postits in as bookmarks. I like the idea that it looks like a much-loved textbook!

old-school postit bookmarks

Should you buy Hardboiled Web Design?

Absolutely, without a doubt, yes.

Alongside HTML5 For Web Designers, I think that Hardboiled Web Design would go a very long way to prepare a web designer (designer-developer) for all these amazing new technologies.

Not only do you get the low-down on how to use it, you get the most important arguments of why and when that seem to be holding so many designers back.

Hardboiled Web Design by Andy Clarke

11 comments

Jack Franklin
at 16:32pm

My copy has been sitting on my desk for 2 weeks now…whilst I have to revise for this bloody exam *mumbles*. And the poster is right on the wall just to remind me! I will have to find time for this, great review Laura.
juliancheal
at 16:34pm

@laurakalbag Thinking you should read some Philip Marlowe books :)
Luke Jones
at 16:38pm

Definitely going to grab it once I’ve finished reading my pile of books. In fact, the only reason I haven’t is because my pile of books has grown over the past few months rather than shrunk. I still have A Practical Guide to Information Architecture waiting to be read from August.
Thanks for the nice little review Laura — I prefer reading things like this rather than from the “in-group”. For example, guys like Mark Boulton, Jeremy Keith etc, I’m sure they’d be more biased.
Steve Lacey
at 17:34pm

Thanks for sharing this, I was considering purchasing a copy a few weeks ago, and you may have swayed me.
Having had a flick through a friends copy, I feel it’s mostly the more obscure content such as the hcard/hlisting/hevent use-case examples and improving mark-up semantics/accessibility with the role attribute that I’d find useful. That, and more complex CSS3 animations / explanations of how border images and multiple backgrounds work.

Do you feel the book goes into enough depth? I’ve only toyed with HTML5 and CSS3- and I found the basics i.e. the new structural elements, shadows and border-radius pretty easy to get to grips within a couple of minutes of Googling. Having skimmed the book I found a lot of this being seemingly laboured. Whilst I understand that this is beneficial to some, I’d have thought the kinds of people buying the book would have at least had a bit of a play with the various new technologies emerging.

I guess what I’m trying to assess is how much new content I’m getting for my buck and whether I’d keep referring back to it or would it inevitably join the pile of books propping up my monitor?
- Laura
  at 17:42pm
  
  I agree that some developers will already know a lot about HTML5 and CSS3 and how to use them, there’s loads of generators and references out there.
  
  However I’d say the value is more in the inspiration of what you can do with these new technologies. You can be given the tools but if you haven’t got a good idea of how to use them tastefully, all sorts of hideous stuff can come about (like the wide misuse of text-shadow!!)
- Steve Lacey
  at 17:47pm
  
  A good point, well made.
  I figure I’m not the only one fed up of seeing text-shadow: 1px 1px 1px #FFF then, I mean, yawn.
  
  I think I’ll be forking out for the book in the near future.
- Rares
  at 20:55pm
  
  100 pages to go ;-)
  
  Priceless information on microformats.
- Sean O'Grady
  at 20:56pm
  
  You’ve written my exact sentiments towards Hardboiled Web Design. Its a great book so far, I think I may have to read it again as soon as I finish it.
- David B.
  at 22:00pm
  
  It’s such a good book. I’ve only read the pdf and can’t wait to get my printed copy. I ordered it on day one and still nothing :(
  Once I get it I’ll go through another read through and will probably have it on my desk most of the time.
- Damian Herrington
  at 15:10pm
  
  Great write-up Laura. I’m currently reading through it now and finding it really enjoyable and “scary-in-a-good-way” too. It has really got me thinking how I can better my code semantically and design more creatively for advanced browsers and not worry about the latter. I really want a cool project come my way where I can put this new knowledge to use!

Read the original post, ‘Hardboiled Web Design and Transcending CSS’.

Design work is 50% visual, 50% justification

Tue, 23 Nov 2010 16:31:50 +0000

After I finished my last post about Design Tips for Developers, it really struck me how much I wrote to justify my design. I wasn’t just writing tips saying “do this, it’s good“, “don’t do this, it’s bad.” I put time and effort into explaining why I made these decisions and why I didn’t do it another way.

When I send a design to a client via e-mail, I usually spend around 45 minutes –; 1 hour writing an accompanying ‘justification’. I really have no idea if I’m the only one that does this? I assume not. I know a lot of people don’t, they just send static images. Does this mean it’s not worthwhile?

How I do justifications

Here’s an excerpt from my last post, giving a classic example of how I write justifications:

I’ve limited the ‘Latest Happenings’ to only five events on my design. My reasoning being that if you have many more than that, they’re not really ‘latest’ anymore. This way we can ensure that the amount of happenings are well-balanced with the content on the left side of the page. Although the ‘What is Lift?’ content is liable to changing, I imagine that it wouldn’t increase too much more in length, as any further information and you’re going into the depths of documentation that probably isn’t suitable for a home page.

I try to cover all the basics of the design. I explain my choices regarding layout, typography, colour and imagery. I summarise any other methods or angles I tried that didn’t work, and explain why I thought they didn’t work. If I’m not actually sure why I did something on impulse, I’ll really think about it, analyse my decision and explain it to the client.

Why I write justifications

Not all design work can speak for itself

Clients aren’t design specialists so you can’t expect them to ‘get’ your thinking behind a design just by looking at it (And you probably couldn’t expect most other designers to ‘get’ it either!)

I don’t often get to speak to the client in person

It’s fairly easy to quickly summarise your design when you can look at a person’s face and see if they understand you. When you’re lacking face-to-face communication, you really have to make up for it in writing.

Even if I do see a client face-to-face, I’ll often forget something

Sitting down and writing a proper explanation helps me look over the design from top to bottom and take it apart. It also takes a while for a client to mull over a design. They might be unsure of part of it later on at home. Having your justification there to reassure them can be helpful.

I was also taught how

Every now and again I realise the huge value in being taught art and graphics at school, college and university. From secondary school art lessons onwards, one-third of the work was research, one-third was the practical application and the final third was evaluation. Even if the rest of the work wasn’t perfect, if the evaluation was good then you’d be on to a winner. It wasn’t about being skilled with a pencil or paintbrush, it was about being able to reflect, evaluate and actually understand what you were trying to achieve.

Being able to give a reason

I believe a huge part of your ability as a designer is understanding why you do what you do. In order to create an appropriate and usable design, you’ve got to be able to do better than ‘pretty.’

I think a designer should be able to tell a client the reasoning behind their design decisions. There’s nothing worse than the ‘professional’ who says “I like it best like this and I’m the professional so you should respect my opinion.” Of course, everybody has their own preferences, theories and leanings, but if you can’t come up with a reason beyond “I like it” or “everybody’s doing it”, then what service are you actually providing?

Value for a client

Reading a description about your design decisions lets a client know you’ve really thought their design through. I’m hoping I show my clients that I spend a long time considering my design work and trying to make something that will work for them. When you’re providing a service, rather than a physical product, it’s good to remind people that you’re good value for money.

Value for a designer

After sending a justification I find there are fewer arguments. Full stop. As I’ve got better at writing them, I’ve found more clients agree with my decisions. I hope I’m also improving as a designer, but it’s also incredibly difficult to disagree with a design element when someone has given you a very good logical reason why it works.

I don’t get “make my logo bigger”, “can you do another version?” or “I want it in Papyrus”. I know I’m fantastically fortunate to work with lovely people, but I reckon explaining yourself (and maybe being a bit persuasive) might also have something to do with it.

Read the original post, ‘Design work is 50% visual, 50% justification’.

Design Tips For Developers

Thu, 04 Nov 2010 16:26:24 +0000

This little post is based around the talk I gave at Bathcamp. Rich Quick came up with the great idea that, whilst Bathcamp attendees are mostly developers, a talk on design for developers was probably appropriate.

And you might have seen on my post from last week, I was looking for a case study to use in my talk. As happens with everything, I just didn’t have time to include the case study in the talk, so I thought I would blog it here as a follow-up from Bathcamp.

The original

Tim Perrett had been asking me for a while to help redesign liftweb.net. Even though the design isn’t awful, and I’m not even sure whether it was done by a developer, it did need some designery love.

My redesign

I wasn’t aiming for a full-on redesign, more of a re-alignment of the existing design. I tried to take all the elements that I thought were successful, and continue using those, and try to improve on the areas that I thought had issues.

I’ll explain my decisions below, based on my design tips for developers. I’m only including the most relevant tips from my talk, as very few designs would cover all of them!

My Design Tips For Developers

Design isn’t all about having an ‘eye’

A lot of people just have an ‘eye’ for design. Knowing what looks good to the masses comes fairly easily. This doesn’t mean that if you don’t have that ‘eye’, you can’t design. A lot of design principles are based on simple theories and rules that anybody can follow.

All good designers know the rules, the best designers know how to break them effectively.

Colour

Contrast is the most important aspect of colour when you’re trying to make text readable

The inconsistency in colour contrast was fairly noticeable on the original Lift page. In some places, it was dark on light and in some places it was light on dark, this makes sense.

However, in the ‘Taking Off’, ‘Flying in Formation’, ‘Team’ and ‘Wiki’ pages, the descriptions are black on a dark gradient background. This makes the text harder to read, as well as drawing attention to this part of the text as it’s significantly different from the contrast patterns on the rest of the page.

Black on a coloured gradient is quite hard to read

Contrast is something that loads of designers get wrong, as well as developers. Silly things like light grey text on a white background, a big hit with print designers. Screens are incredibly inconsistent, and our eyesight is better saved for more important things than squinting at text on a screen.

I really recommend using Jonathan Snook’s Colour Contrast Check. This analyses the contrast between your foreground and background colours against the WCAG guidelines. Everybody knows that guidelines are just for guidance, so I wouldn’t stress if you’re colours aren’t AAA compliant (this produces very extreme contrasts that are pretty hard on the eyes) but if you make sure your colours are AAA compliant at 18pt+ then you should be on to a readable winner.

Checking my redesign colour contrast on the quotes section

If you’re going to use a strong colour, just use one

With a lot of purples and blues teamed with white, the Lift page was suffering from a bit of a 90s colour scheme. The trick is to stay away from using multiple strong colours (the dark blue and purpley blue) together.

To calm a design like this down, I tried using less of the extreme colour contrasts (dark blue and white) and more of the in-between, softer and more muted colours. Where I felt the purpley blues and dark blues were a bit harsh, I just toned them down to a slightly greyer version.

I then used these colours to help differentiate between areas of content. The original Lift design did a good job of emphasising the quotes at the top of the page through using dark text on a light background, where the rest of the page used the inverse. I took this theory further.

On the original design, you can see how the quote area stands out

Whilst I thought it was good to keep the quotes at the top of the page, as they’re vital to helping sell the benefits of Lift to potential high-profile groups, they’re not really as valuable as the four links below to ‘Get Started’, ‘Lift community’ etc.

As this content, and the content immediately below is most useful to the page visitors, I used the dark-on-light contrast to draw the user to those areas. It stands out more than the light-on-dark areas above as it is a greater contrast against the overall page background.

At this small size, you can see how my redesign colours draw the eye to the most important content

Layout

When you look at the original design, what really jumps out is the huge amount of space in the middle of the page. This is caused by the amount of ‘Latest Happenings’ appearing down the right hand column. Obviously, this wouldn’t have been originally designed like this, but it emphasises the importance of imagining how the content on a page may evolve.

the main page content on the original Lift page

I’ve limited the ‘Latest Happenings’ to only five events on my design. My reasoning being that if you have many more than that, they’re not really ‘latest’ anymore. This way we can ensure that the amount of happenings are well-balanced with the content on the left side of the page. Although the ‘What is Lift?’ content is liable to changing, I imagine that it wouldn’t increase too much more in length, as any further information and you’re going into the depths of documentation that probably isn’t suitable for a home page.

my redesigned main content area

I felt that the ‘What is Scala?’ and ‘Lift Books’ information was also a little hidden-away at the bottom of the ‘Latest Happenings’ sidebar. I brought this out into its own area underneath the main content and gave it a light-on-dark contrast to clearly separate it from the content above. This also makes the text look less intimidating. As the areas are clearly separated, it doesn’t look like a huge amount to read.

Try to base your design around a grid

With some large areas of white space and some slightly squashed looking text in boxes, the structure of the original page design doesn’t look like it is based on a grid. However it is fairly simply laid-out and does have gridded elements to it.

Using a grid makes a lot of the design decisions less of a decision, as your grid will help dictate where the elements belong. Little details like having all the bottom of the text line up against a base grid, and main content areas having the same proportions, make a design look a lot cleaner and much classier.

The grid I used for my redesign

Above you can see how I used a grid to line up all of my elements. I started with a main content area width of 960px. This is a useful value as it’s divisible by many different multiples, giving you nice round numbers to work with. It doesn’t really matter if you’re using pixels, ems or percentages, it’s just working from one value to get your proportions that helps.

The yellow grid lines are where I started, I divided my main content area into four, as this suited the four main calls-to-action (‘Get Started’, ‘Lift Community’) well. Usually, I’d probably design around three columns as this corresponds well with the golden section which creates a very harmonious balance in your design. You can combine three and four column grids in one, but this is probably a bit complicated for this post!

All of my main content areas sit within these yellow columns. The logo is in the first column, the navigation in the next three columns. The testimonials sit in all four columns, and the calls-to-action each sit in their own column. The main content areas are split into two sets of two columns.

What might stand out to you is that the ‘Demo’ and ‘Download’ buttons don’t sit entirely comfortably into columns. This is intentional. By moving some elements out of the column structure, it creates a tension against those that are within the columns, and draws attention to them.

The orange lines are an example of how I divided the columns further to decide where the margins should be. Each column of about 240px is divided by 4 and then those columns are divided by 2 again to get 30px, which is the width of the margin.

For areas like the width of the selected testimonial link, I just split the column by two as I needed a wider space to hold that text.

I also used the yellow grid lines for rows. It’s hard designing with rows on a web design as the content is always liable to change and no longer fit within those rows if there’s more or less text or an image gets put in. You can see that the content roughly sits on these rows by not completely.

I actually work on all web designs with a 10px square grid underneath as a baseline for all content, especially text. As most of the text has a line-height of 25px, every other line of text sits on the 10px grid. Below is what a small segment of the design looks like sitting on a 10px grid.

my redesign on 10px grid

And that’s where the bananas go. Just seeing if you’re still here!

Imagery

Avoid generic stock photography

I know the original page didn’t have any stock photography. In fact, I think that was the problem. There wasn’t any kind of imagery to break up the text. The closest it came was quote marks and gradients.

So first off I found some appropriate images to illustrate the content. A quick bit of Googling and I located the book covers for the Lift books. This will make the books easier to identify in passing, and really work to break up that text-heavy area at the bottom.

Book information with book images on my redesigned page

The difficulty in sites about web development and other non-visual subjects is there isn’t much in the way of obvious imagery you can use to illustrate your pages. But stay away from the stock photos! These are never the solution as they mostly look generic, cheesy and cheap.

Illustrations can be expensive, though stock illustrations are often better than stock photos. However there are a lot of high quality free icon sets out there. If you find icons relevant to the content, they can serve to break up a very text-heavy site and act as signifiers to help the user understand what the text, call-to-action or button is for.

the icons I used to illustrate my redesign

I had a look through my icon collections and found some Shine icons that suited the content and were the right sizes for button links and bigger calls-to-action.

Use subtle patterns and textures to add depth to a page

I’d almost completed my design, and it felt like it was looking a bit flat. This is usually the way when you’re using a different solid colours. To combat this effect, I added some subtle noise and shadows to give it a more ‘real’ feeling.

the background of my redesign without (above) and with (below) noise textured background

I know I’d usually say that something like ‘noise’ is possibly a current trend, but I think it’s more of a recent discovery. It’s all very well using grungy textures if it’s appropriate to your site, but it really wouldn’t be for most software, corporate or family sites. Subtle noise is a great way to add some texture and definition without theming a site. Just make sure it’s very gentle. It looks best when not instantly visible, it should be that subtle.

Light

Choose one imaginary light source, and make the shadows follow that source

The thing that people forget when they use gradients, box shadows and text shadows on websites is that these elements are all used to recreate the illusion of light. Having light and dark on a site imitates real life, it makes your design more ‘real’, it makes it easier for your users to identify with it.

The incoming problems with CSS3 is that people are using shadows willy-nilly, chucking them in to make their design look fancy without thinking about the effect they’re creating. This is visible on the random text-shadow on the original Lift design.

Random text-shadow on the Lift original design

If you want to use gradients and shadows to make your site feel more real, and give it more depth, the trick is to choose a natural-style imaginary light source, and make all your shadows follow that.

There could be two light sources, though that could quickly get complicated, and beyond the realms of CSS, so I just went with the simplest possible for my design–;top-down. I imagined there was a light behind/above me and so it was projecting shadows that were equal sizes on each side of the boxes. It might not be completely scientifically sound, but it’s close-enough to feel real.

Light shadows visible around the boxes

Colour is also important. Since when have you seen a white shadow? Pure black shadows are also very rare unless it’s very very dark. A shadow is usually just a darker shade of the surface it’s casting on to, follow that principle and you’ll have realism in no time.

Make your light source subtle

The other issue with the text shadow on the original Lift design is that it’s really screamingly obvious. From day-to-day we don’t really notice or comment on shadows much, even though they’re used everywhere, occurring in real life and almost every piece of software. The reason we barely notice is them is because they’re so subtle. I know I’ve used the ‘subtle’ word about a million times now but it really is the key to making a design look sophisticated.

If in doubt, keep it simple

Less looks more sophisticated

There’s no crime in creating a site with a white background, and no crime in being ‘basic.’ All the best sites are noted for their simplicity and how clean they look and not how garish and full-of-stuff (my particular design weakness) they are.

I really hope these tips and this sort-of walkthrough has been helpful. I’ll be happy to do more in the future if anybody wants them, or further explain any more elements of this design if anybody asks.

6 comments

Matt
at 16:34pm

first.
x
Jack Franklin
at 16:38pm

I think Lift should get in touch with you! I loved your talk and this follow up is superb. I'm loving your blog more and more every time I visit!
@jamienewman
at 16:41pm

Great post. Love the new design and some very useful tips here!
Mike
at 16:54pm

Thanks great article!! Shame I missed your talk at BathCamp.
Levi
at 20:39pm

I totally agree with the other comments (except for that first one). Very good summary of handy tips!

Read the original post, ‘Design Tips For Developers’.

Bathcamp plea for bad designs by developers

Mon, 25 Oct 2010 19:21:06 +0000

I’ve got a talk for Bathcamp 2010 in the works! Thanks to the ever-helpful Rich Quick for the idea, I’m going to do a talk on Design Tips for Developers.

However, alongside a bit of time, effort and available slot on the day, this is subject to some help from a kind developer. I’m looking for a bad design created by a developer to use as a case study.

I need a design by a developer

What I need

A single page design (can be part of a larger site) that was designed by a developer. It doesn’t have to be flashing-gif awful, but in need of some love and care. You know the phrase “looks like it was designed by a developer.” Something that looks like that!

What I’m going to do with it

The plan is I’ll do a quick run-through of some easy-to-use tips, and then we can work together on improving an existing design using those tips. If the page is already in HTML and CSS, then I’ll toy with the idea of doing it live. If it’s not (or if I’m feeling doubtful about my live-typing abilities) then I’ll just pre-prepare some changes to the design that illustrate the points.

What you (as the generous donator of the design) will get

My eternal appreciation
A free redesign of that page
A full justification of all the design changes on that page, so they can be applied elsewhere if needed

What you (as the generous donator of the design) won’t get

Cruelty or embarrassment. I’m doing this as friendly tips and don’t have any interest in being mean to people. This will be constructive criticism only.

Willing to help?

E-mail me at bathcampdesign@laurakalbag.com, tweet me @laurakalbag or leave a comment below.

If more than one design is volunteered, I will choose the best (that can be most improved using the tips) and possibly use more than one if there’s some good ‘uns and I have the time. ## 8 comments

iamdanw
at 19:28pm

@laurakalbag oh dear. I'm tempted but also terrified..
- laurakalbag
  at 18:29pm
  
  @iamdanw I’m intending on being 100% kind and 0% mean, if that helps. Constructive criticism only!
- bobbyshaw
  at 19:28pm
  
  @laurakalbag does my site count :P
  - laurakalbag
    at 18:29pm
    
    @bobbyshaw I don’t think your site is bad!
  - russbuelt
    at 19:31pm
    
    @laurakalbag check [http://www.abstracture.de](http://www.abstracture.de" rel="nofollow) –; done by devs ;)
  - ronaldpoi
    at 20:56pm
    
    @laurakalbag Take a look at this one. Is it bad enough? [http://orientacionvocacional.pe/](http://orientacionvocacional.pe/" rel="nofollow)
  - Dan W
    at 22:52pm
    
    You're welcome to use [http://twookie.heroku.com/](http://twookie.heroku.com/" rel="nofollow). It's a hack I built at Chirp. It takes tweets and lets you print them inside fortune cookies that then get shipped to you for eating. The design is awful and the app itself is incomplete (there are plenty of places in SF that do custom fortune cookies, not so much in the UK).
  - dansketchpad
    at 09:11am
    
    @laurakalbag another point when developers design is less than helpful error messages eg. Form fields –; “No illegal characters!”… aarrg

Read the original post, ‘Bathcamp plea for bad designs by developers’.

Stuck on a design

Fri, 15 Oct 2010 16:59:29 +0000

After discussing Dribbble and Forrst, and my latest post that looked at criticism in design, I’ve been thinking a lot more about how feedback features in my design process.

Getting stuck

When I used to get stuck on a design, from ‘creative block’ or a complete lack of inspiration, I would frantically brainstorm, then browse inspiration sites, then ask the opinions of other designers. Usually the feedback from other designers would form the basis of my amendments, I’d gain inspiration from those changes and continue work from there.

Somehow it didn’t feel right though, I didn’t feel like I was working for myself, asking other designers could feel a bit like cheating. I didn’t like how detached it made me feel from the design when I started to follow the ideas of other designers that have completely different approaches and styles from my own. I decided I don’t feel comfortable sharing work in those stages with other designers as they can be a negative influence on me. Not because they make bad suggestions, but because I work to satisfy them.

No longer craving that kind of approval, I’ve realised that I make extensive use of two new types of feedback, client feedback and ‘boyfriend’ feedback.

Client Feedback

So it might sound totally obvious. Inevitably, you will always get feedback from the client at some point. However I’ve found myself doing this at earlier and earlier stages since I starting working freelance.

Lately I’ve been going straight into talking to the client as soon as the design slows down or is coming suspiciously quickly (usually a sign that I’ve jumped on a bandwagon or just acted on my first, badly thought-out idea.) I came to the conclusion that there’s no point searching for answers so far away from the problem. The client is the one person who set the brief and will approve the results, they’re the beginning and the end, so why not involve them more in the middle as well?

Feedback now, polish later

Number one newbie mistake is showing a client a 100% complete mockup (or even live) page design. I’ve done it, and kicked myself for it. Chances are you’ll have really jumped on an idea and run with it. The problem is that the client might not like your angle or approach. You’ve just wasted a huge amount of hours on something that is rejected outright.

You’re designing for the client

There’s no need to be fearful of showing something incomplete. Clients aren’t stupid, and if you explain that the work is unfinished but you’re looking for their input on what you’ve done so far, they’re likely to be grateful that you’re keeping them in the loop.

Unfinished work doesn’t necessarily mean bad work either. You’re not posting your work online for the world to see, you’re sharing progress and developing designs.

The benefits of feedback now

If the client is finding it hard to understand your approach, or flatly hates it, you’ve got time to discuss, justify, rework and whatever else is needed to create something that your client loves and you know will work for the user.

Design is just creative problem solving. If the client isn’t keen on what you’ve shown them and you’ve got some useful criticism, you’re further refining the problem which will help get you closer to the answer.

Boyfriend Feedback

As a freelance designer, I’m very lucky to have another person around me while I work. My boyfriend Matt works in the same room at home and is an honest critic of everything I do, whether I want his opinion or not!

Non-client and non-designer feedback

Matt is great at giving me reactionary critiques. In this way, he’s far more like a client or a user. He’ll tell me he thinks it’s rubbish, and give a vague idea of why, usually based on reactions and associations such as “it reminds me of X.” Matt’s reasons are never because it’s not on trend, or it doesn’t make use of available technologies. In fact, he often hates the fashionable styles and can convince me to be more reasonable and not succumb to “but this looks pretty.”

One thing that struck me about the discussions about criticism on Dribbble, and the Gap logo, is that the type of feedback a designer gives is totally unlike the thoughts and opinions of clients and users. Those thoughts and opinions are exactly that. They’re not necessarily put in context or very constructive but they are the emotions and associations which are so hard to put into words but have a huge impact on your design’s effectiveness.

Community helps and hinders

I love the amount of apps and tools showing up to help designers communicate more effectively with other designers. It’s fun to share, and it’s fun to have a bit of mutual-appreciation going on. However I think I’m likely to fall into the trap of designing for these communities, for approval of other designers and developers, and totally forgetting the blindingly obvious user needs and client necessities.

Am I the only one? I think it’s hard to tell from the outside. Some people are very capable of creating work that is incredibly satisfying to users, clients, other designers and themselves. The order in which they aimed to please isn’t obvious!

2 comments

Dennis Kardys
at 19:44pm

Hi Laura,
I also find it challenging to ask for feedback early on since there are so many different directions a design might take. For me, changing the way in which I frame my request for feedback has been a big help, both when talking to clients and with other designers. Instead of an entirely open invitation for critique (which may come later when the design is more complete), I usually try to pose very direct questions that identify the problems as opposed to recommending the solution. "Do you think the call to action should be more prominent?" or "What type of feeling does this color scheme evoke", etc.

Your post also made me think about ownership of a design, and how there is a pride that goes along with coming up with the ideas and inventing the solutions. I think it�s important to be aware of times when that sense of pride may conflict with the best interest of the project. Does that make sense?

I also totally agree that it�s helpful to have someone who is not the client or another designer, but who can be brutally honest to tell you what they think.
damilare
at 00:06am

@laurakalbag I think a huge difference between client feedback and designer feedback is aesthetic vs business goals, the latter, the better.

Read the original post, ‘Stuck on a design’.

Good old designer snobbery is alive and kicking

Wed, 06 Oct 2010 10:38:28 +0000

There’s one thing that I hate about being a designer and that’s the snobbery. Most, if not all, designers are a little bit guilty of looking down on other people’s work. Comments such as “Pah! They used Comic Sans” or “Ergh! Don’t they know reflections are so out of date now?”

These are comments I’m 100% guilty of saying, but I think the problem is the outlet. If it’s a quick chatter between friends then there’s not much lost except making yourself look like a bit of an arse, but start broadcasting these harsh judgements to the world and you’ll rapidly give the impression of a big ego, huge mouth and tiny brain.

Dribbble Egos

I’ve been feeling the need to unfollow people recently, when their Dribbble ego has been massively over-inflated. Dribbble is an exclusive community in its nature of being invite-only. However, far too many people see it as owning an invite means you are in some way superior to anybody that doesn’t have an invite. As seen on Twitter:

Hey everybody, I’ve got a Dribbble invite. Send me a link to your portfolio and I’ll give my invite away to the best one.

What baffles me is that not many other people seem to think this is wrong.

What’s the point in a community of elite designers?

To sit and caress each other’s egos, posting shots mimicking each other and establishing trends, and to gawk at ‘weblebrities’ and instantly hit ‘Like’ on anything they produce without even looking at it first.

Unfortunately, this is what a large part of Dribbble has become, partly due to the attitudes of those that send out tweets like above. There’s no value in a community where everybody is doing the same thing, adhering to the same rules and spending all day telling people how lovely they are. The best and most useful comments on Dribbble are those that offer constructive criticism. The most interesting shots are from previously unheard-of people because we’re being introduced to a new way of thinking, not the same old rut that the ‘weblebrities’ are stuck in.

And who are you to judge?

One of the things that irritates upsets me the most is that the aforementioned tweet comes with the assumption that the tweeter is better than those who are sending them their portfolios. Who are they to judge the quality of somebody’s work?

And even if the work is undeniably poor. Who are you to prevent these people from growing? One of the premises of the Dribbble community that really appealed to me was sharing criticisms with people you don’t know. Having your work critiqued by somebody else helps you learn how other people see your work, introduces you to alternatives that you may never consider, and occasionally gives you a boost in self-confidence.

It works the other way round too. By constructively criticising other people’s work, you challenge your own perspective on design. By trying to come up with helpful suggestions and interpretations, you’re learning to understand more than ‘like this,’ ‘hate that.’ This is how designers grow. Whether the criticism comes from clients or other designers, it’s all of value, and who is the tweeter above to deny other people the opportunity to indulge in such creative and useful practices.

The Gap Logo

Late last night the furore over the Gap logo redesign came about.

Scrivs puts it way better than I could but it seems like madness. The logo isn’t that bad. It’s average, and thus an improvement on 99% of logos in the world. Get some perspective!

So quick to be rude about other people’s work

Matt coined a great term for these type of people, ‘keyboard heroes.’ The kind of people who are all full of bravado and aggression when they’re hiding behind a keyboard, but would stay quiet when talking to somebody’s face.

Again, we’re all guilty of this from time to time. Twitter is perfect for getting your snap judgements out there and having 140 character tantrums. None of these tweets said “it would look better if they’d put some spacing between the letters” or “a solid blue square would have tied in better with the old branding.” It was straight to spitting vitriol.

Could you do any better?

This is the classic. That the majority of people slating the Gap logo could certainly not do any better. How do you know what the brief was and whether the logo fits it? These people don’t understand the context so it would be very difficult to understand whether it delivers the desired effect. I don’t think it’s a great logo, but I don’t think I could do much better without knowing what Gap were going for. I believe that unless you can do better, then maybe you should use your keen eye to help improve your own work.

35 comments

neil_berry
at 10:09am

@laurakalbag totally agree with your dribbble/gap post!
Jack_Franklin
at 10:52am

@laurakalbag when I find some time I'll write a response to that post, a few things sprung to mind when reading!
mixn
at 11:29am

@laurakalbag One of the best articles I've read in a while.. Kudos.
Mark S
at 11:55am

Hi,
I wholeheartedly agree with everything you said about dribbble, keyboard heroes and the like.
However I feel that commenting on a brands redesign (however negative the comments are) is not a bad thing, after all, it is not about doing better than them, or feeling that you are a better designer, it is about the confusion caused by the release of these redesigns.

If GAP's logo brief was set, and this ticked all the boxes, then the brief in my opinion was a poor one (but who am I to judge?!)
They seem to have implemented a lot of techniques that would benefit different logos, but the GAP logo, with all 3 letters of it, does not need to be more legibility, it is still constrained by the orientation you could place it in, it uses gradients which I haven�t looked at in grayscale but I imagine don�t look as clean as the original logo etc. etc.
So in my opinion all the bad mouthing of the new design is not about other designers being better, or the logo being un-usable, it is about the confusion how they got from the original logo to the new logo without seeing the brief (after all we will never see it)
- Laura
  at 11:58am
  
  If you�ve got constructive criticisms (like yours above) then I think negative opinions are perfectly valid. It�s when people say things like "It�s rubbish", "looks like it was designed by an idiot" that they come across as unnecessary.
- Bevan
  at 11:55am
  
  Here Here! I love Cederholm to �bits� but there is definitely something wrong with building a competitive themed design community with your own name at the top of the �Leaderboard�.
  
  I call them cewebrity�s btw.
  - Laura
    at 12:12pm
    
    Maybe most �Likes� would be more constructive for a leaderboard, rather than most �Followers�?
  - Bastian Allgeier
    at 11:57am
    
    Great article Laura!! I feel exactly the same about the whole Dribbble thing and the "weblebrities". What really bothers me the most is that criticizing people has become so easy on the web. Writing harsh things is so much easier than telling someone the design he or she�s been working on is crap from face to face and criticizing without adding constructive thoughts about how to do it better is even easier. On the other hand all those "You are so fucking great and I love everything you do" comments are bullshit as well. I guess those comments are a part of the success of Dribbble because everybody loves to be told what a great designer he is. But it�s a total waste of time when those comments get so unrelated to the real quality of the submitted designs.
    - Laura
      at 12:10pm
      
      That�s exactly the problem! We all love to hear we�re amazing so we�re less likely to see it as an issue.
    - Jonic
      at 12:19pm
      
      It�s the iTunes icon all over again.. I�m beginning to wonder whether or not I ever want to join Dribbble –; you seem to see a lot of this behaviour there, and it�s not healthy for anyone to immerse themselves in that kind of atmosphere.. And honestly, who really gives a crap what Gap do with their branding?
    - David Bushell
      at 12:20pm
      
      Great post Laura!
      On personalities: I think the idea of designer "ego" in communities like Dribbble stems more from outside perception than any inside "celebrity" culture. The very nature of the site is exclusivity, but that�s purely for moderation and advertisement purposes. I see no problem with your example tweet, it�s a product of the system rather than elitism from the tweeter. I often think those suggesting the idea of "celebrity designers" are the only ones who are labelling people celebrities in the first place.
      
      Most people enjoy discussing and sharing great design for networking and self promotion. When congregating together they share trends, form a hierarchy, and sometimes disagree. It�s socialising, not elitism, though that can manifest is tiny amounts.
      
      Saying that, I haven�t been on Dribbble in a while so perhaps I�m wrong ;)
      - Laura
        at 12:24pm
        
        I don�t think that it�s just Dribbble that has examples of the designer ego. And these egos aren�t necessary those of the most popular Dribbblers, I�d say most are actually incredibly humble. You�re totally right in that it�s the hero-worshippers that propel them on to pedestals. In fact, in my experience, �graphic� design has far more dangerous egos than web design.
        
        However, I still believe reviewing other people�s portfolios in such a way is arrogant. By all means, let people know you have invites, but why not invite somebody who is new and could do with some help rather than the best designer you know?
      - David Bushell
        at 12:50pm
        
        Maybe I'm optimistic, but I genuinely don't believe most people giving away invites in such a manner actually consider themselves judges or an authority. That would be arrogant as you say. I'd imagine just any many (if not more) people give away invites to friends, randomly, and with other considered choices. Choosing someone because you feel they need help is also judging them is it not? I don't think any reasons are done in an arrogant manner, at least most of the time. The shortness of a tweet often results in more ambiguities and implications than intended.
        Actually I�m being to half-full here. My point would be that the few arrogant eggs over shadow the humble lovely designers.
        
        Laura
        at 13:00pm
        
        You�re right. It�s much easier to notice the bad than the good.
        
        Mark S
        at 14:40pm
        
        I was "refused" (understandably as I�m sure the person had been told to) a dribbble invite when it was locked from public view as I have no work on-line. Regardless of my �skillz� (or lack of) the person couldn�t give me one if I didn�t have a high standard of work… and as he couldn�t see my work…
        
        Laura
        at 14:51pm
        
        I can understand refusing somebody on the grounds of not knowing somebody, not knowing if they’re just going to post stuff that is irrelevant to design (ads, aforementioned photos of cats.) However, I’m still disappointed for your predicament, it must have been hard to be refused just for that.
        
        Aaron Russell
        at 12:36pm
        
        Nice read Laura :)
        I absolutely despise Dribbble –; always have. I am a member, but not because I jumped through my own backside to prove my worth, just because a friend invited me. There are some very talented people posting some very good work in Dribbble –; that can�t be denied –; but it�s also actively encourages and harbours the kind of elitist attitudes that you�ve described above (much more politely than I would have) by the way it�s invite only system works.
        
        As for the Gap logo, well it is very average. Just like the iTunes logo is pretty average. Neither are that bad. But I think it�s just human nature to react negatively to change, especially with something they are so familiar with. In my time I don�t think I�ve ever witnessed a single big name rebranding that hasn�t been met with more negative than positive reaction. I think it�s the nature of the beast. You need to be tough-skinned to be a logo designer.
        
        RyanDownie
        at 13:27pm
        
        Laura,
        As being on dribbble from a very early start, nearly a year I think its worth a comment. I don�t agree with a lot of what has been said. I know a lot of designers not just on dribbble but from the community.
        
        Where as I can not talk about other designers as everyone is unique I can talk about myself. Regarding the tweets for invites, I myself do this where people who want in can send me their portfolio to look at. I do turn away the ones that at the moment are not up to standard. The reason for this is not elitism to massage my "EGO" but for the good of the community. People with sub standard work would in fact find it hard to associate with the community in general as if their work is not of a high standard how can they comment on things that they do not know?
        
        However I do understand that there is a problem with snobbery in the community, this is not to do with the "weblebrities" its more of the jealous people who think that they should be. The type of person who gets Photoshop but not design in general. The same person will visit gallery sites time and time again and be "inspired from x and y design", when in fact they should only visit them for the planning stage at all.
        
        Also think about the people who are "weblebrities" they do not chose this, it is the same in any area of life. The people who are marketed well at being good at something will always attract people who want to be them. I have talked to a lot of these "weblebrities" and they are some of the most nicest and humble people you can talk to. Just imagine for a second that your workload is putting you under a lot of stress and then a stranger asks a question that will take 20mins of your already busy schedule you wont be able to answer straight away and it sadly gets pushed back to the que. I am no means a "weblebrities" but I get emails daily asking things from "How can I get better", "What books do you recommend", "can you look over my work" etc and it gets tiring but sadly that is life.
        
        Paul Randall
        at 13:51pm
        
        Guilty as charged. On both counts.
        This is the only reason I may ask for work when giving out an invite is down to this piece of text on the site:
        
        <blockquote cite="[http://dribbble.com/account/invitations">Help](http://dribbble.com/account/invitations%22%3EHelp" rel=“nofollow) keep the league clean. Resist the urge to send invites to folks who enjoy uploading photos of their cat.
        
        Also! The players you draft will show up in your “drafted list” so we’ll know who to blame for the aforementioned cat photos.
        
        Re: the Gap logo –; yes. It looks bad, but yeah, what the hell would we do when someone like the Gap asks us to redesign? ISO50 is trying to get the �keyboard heroes� to come up with something better: [](http://blog.iso50.com/2010/10/05/gap-redesign-contest/" rel=“nofollow)[http://blog.iso50.com/2010/10/05/gap-redesign-con](http://blog.iso50.com/2010/10/05/gap-redesign-con" rel=“nofollow)… but is this spec work. And that, is a whole other matter…
        
        Laura
        at 15:46pm
        
        It�s cleverly worded. It doesn�t at any point say "don�t invite inferior work." It�s saying no LOLcats. However, it implies that you shouldn�t invite anybody whose posts would make you feel ashamed. If you�re ashamed of inviting somebody because their work isn�t of a professional level, maybe that is more significant of your feelings?
        
        Paul Randall
        at 16:30pm
        
        At the end of the day, it doesn't really matter does it? It's just a website.
        
        Russell Poulter
        at 14:21pm
        
        Great article Laura! I've been guilty of jumping on the GAP logo bandwagon my self, its very easy to fire something of on Twitter without stopping to think it through first. As for Dribbble I'm not a member nor am I going to jump through hoops to become one but any site that helps with the creative process can only be a good thing in the end. In any community you're going to get good eggs and bad eggs.
        PS Anyone got a dribbble invite? :-)
        
        Gabe
        at 14:29pm
        
        Thanks for a great post Laura. For those designers that are so busy they can't be bothered here's an idea: put together a canned response with links to your favorite resources, then as you are inundated with questions from strangers aspiring to produce work of a "high standard", you can quickly reply to them and welcome them into the community. Just sayin…
        
        brett bergeron
        at 16:09pm
        
        The word on the street is that Gap's new logo was not designed under a brief, but was unexpectedly plucked from a presentation by a corporate chieftan who resides outside the marketing department. Essentially, the design & marketing team had no voice.
        Critiques become elitist and petty when people begin claim they can (or have) produced better work. While this may be true, it ignores the reality of the design process as a collaboration between designer and client. When the collaboration fails, the work fails. The Gap logo is a great example of a non-existent collaboration between art and commerce that could cost the company significant brand equity.
        
        So I think it�s fair to criticize Gap�s move as a misunderstanding of design. "New" isn�t enough. The logo itself lacked a substantive discovery phase, so they ended up with an ill conceived mark for the brand. As designers, I think it�s important that we voice critiques of new work as a means of validating (or invalidating) the decisions made by all parties involved.
        
        Martin Bean
        at 17:47pm
        
        This web celebrity thing is getting out of hand. I find it implausible people are referring to themselves as rock stars and ninjas when we're essentially a service industry.
        I don�t see plumbers putting each other on a pedestal, or stepping out and calling themselves rock stars, ninjas and the like. I don�t see mechanics putting together Top Trumps-style cards (any one remember Type Faces?).
        
        It�s all, for want of a better term, a load of bollocks. I joined Dribbble earlier this year, and as soon as the novelty wore off grew dissatisfied with it. There�s no community feel to the website, but more so establishing trends and a breeding ground for iTunes 10 replacement logos, or GAP replacement logos, or whatever will come along next week that the community at large decide isn�t worthy.
        
        Damian Herrington
        at 18:40pm
        
        Another great post Laura! I've always thought Dribbble was or seems elitist. Yes granted the work on there is exceptional but wanting to keep the bar high is for who's benefit, is it just for the purpose of having comments filled with "awesome"? I'm a member on Forrst and its audience is a bit more wider than Dribbble I see good and great designs as well as not so good design and I am sure people may have made that assumption with my own work too. But the "not so great" designs aren't bad they've just lacked direction, same with my own but its the critiquing that what makes somebody better, being able to see somebody's point that you've not seen and improving ones self. Thus being able to then help others. We've all read on blogs about partnering up with somebody or learning from somebody is great and all about a community environment, well these places are the perfect opportunity yet Dribbble users go a little quiet when drafting somebody new or upcoming. If you give somebody a chance they will prove they are good enough.
        
        Kie
        at 21:14pm
        
        Nice Post Laura,
        this seems to confirm your point that a majority "could certainly not do any better?"
        
        well there�s the evidence….
        
        [](http://blog.iso50.com/2010/10/06/gap-redesign-contest/" rel=“nofollow)[http://blog.iso50.com/2010/10/06/gap-redesign-con](http://blog.iso50.com/2010/10/06/gap-redesign-con" rel=“nofollow)…
        
        Stephen Clark Jr.
        at 01:17am
        
        Most "social networks" are (in function) online popularity contests… pretty much the same thing that occurs in many real-life social situations. The main problem that I see people with Dribbble is that of expectations.
        As a non-Dribbbler, I use the site mainly for inspiration, and I usually come away with fresh ideas or approaches. I also enjoy discovering (for myself) other designers and their work through the site.
        
        I almost never read the comments, by the way (I agree that the dialog on the site is almost comically one-dimensional).
        
        Susan Engel
        at 12:51pm
        
        Laura, good post and a very valid point :) i agree about the snobbery, didn't really see much point to dribble as you said there's not much criticism there.. but the gap logo –; i'm one of those that think it's not an improvement. and i'm not criticising the designers. it was probably design by committee anyway :) just think that it's really awkward and somehow a step down from what they had…
        
        Jordan Moore
        at 13:15pm
        
        I wholeheartedly agree. I have been thinking the exact same thing for some time now, I have just never been able to express it as well as you have.
        My thoughts on Dribbble –; I use it the odd time to publish snippets of work for feedback (which is what it should be used for) but rarely receive any –; probably because I�m not a weblebrity and even if I was I�d imagine I would just receive a bunch of back-pats and well dones.
        
        My main issue is that the real sheep mentality of following our weblebrity leaders not only filters down into comments and follows, it appears in the actual work. People quickly lose their own identity and uniqueness on Dribbble to produce work like their newfound idols. The debuts and popular pages contain the same tall-white-sans-serif-noise-backgrounds images as the day before and the day before that. All because of this follow-the-leader mentality.
        
        Now I feel like a bit of a hypocrite for releasing my own tirade of design snobbery on the designs of most of the Dribbble community, although it comes from a concerned place for fear of a global design trend discouraging individuality.
        
        kat neville
        at 13:20pm
        
        I've got two dribbble invites… send me your portfolio so I can decide if I want to be associated with you.
        hehehe!
        
        I�m a bit torn about the whole situation, but, at the same time, there�s still a lot of rubbish designers on dribbble anyway (sorry, let me rephrase that as designers who are first starting out who need a lot of help to improve), and while I�m not a regular user the system, I think it�s good to have a place to show things off to your peers. Snobbery in design is not a new thing (I hung out with some architects recently and oh do they think web design is not a very noble profession!), and while you can claim you don�t like it, you�re not going to stop it.
        
        When I�m excited about something cool I�ve done, what�s wrong with showing it to the type of people who might give you compliments?
        
        Des
        at 13:37pm
        
        Hey Laura,
        Great post. What irritates me most about the keyboard heroes tweeting one-line criticisms is that they just don�t know enough about what they�re criticizing.
        
        To criticize a creation properly you need to know the designer, the contract, and the client.
        It takes three to tango [http://www.contrast.ie/blog/three-to-tango/](http://www.contrast.ie/blog/three-to-tango/" rel=“nofollow)
        
        Thanks for writing,
        Des
        
        Vukašin
        at 18:34pm
        
        The beauty and uniqueness of Dribbble is exactly in the fact that it is a hand-picked and a 'gated' community. Aren't there a lot of different places that are open for all, like DeviantArt.
        While elitism sounds like a curse word it can be beneficial like I think it is in this case, we could also call it with a name that I find more appropriate in this case –; peer review.
        
        Snobbery is a sad and stupid trait and should be (IMHO) ignored when it springs up, but let�s not associate it directly with peer review.
        
        Nate
        at 17:35pm
        
        Holy crap I love this post. Thanks.
        
        Karl Francisco Fernandes
        at 07:00am
        
        Excellent article Laura! You have a new admirer…

Read the original post, ‘Good old designer snobbery is alive and kicking’.

Using Dribbble and Forrst for feedback on a client project

Tue, 14 Sep 2010 20:06:38 +0000

A couple of weeks ago I created a quickie logo for Andy Warburton’s mobile stock photography service Stockyoo. Andy was really keen on the idea of using Forrst and Dribbble for posting the progress of the project to get the opinions of potential users of a stock photography service and do some early promo for Stockyoo itself.

Dribbble and Forrst

Dribbble and Forrst are part of a new wave of sites aimed at (mostly web) designers and developers. Dribbble allows its users to post 300 x 400px teaser snapshots of their work. Forrst has wider options of posting any image, URL, piece of code or question. Both encourage feedback from other users in the form of comments. Dribbble also encourages ‘rebounds’ where users can rework an existing snapshot and repost it.

I’ve been a member on Dribbble since January and on Forrst since the beginning of August, and I was happy to post my work in progress. I’m not too much of an ego to have my work critiqued, and I thought it’d be a fun experiment.

The Process

I didn’t post every tiny iteration of the Stockyoo logo online as I thought it’d drive people mad. I had twelve images in total (all posted to Forrst) which covered four or five major iterations of the design. As soon as I felt ready to send something to Andy for feedback, that was when I felt ready to post the images online.

My first Stockyoo post on Dribbble

I posted as much identical information as I could to both Dribbble and Forrst. Generally, I could include a larger, more detailed image on Forrst as there’s no size limitation. I also posted more frequently to Forrst as it has no limit on posts, whereas Dribbble limits the amount of posts over a month (usually around twenty if you use them all.)

The Stats

Forrst

Posts –; 12
Views –; 80*
Likes –; 34
Comments –; 13

** I get the feeling this stat might be wrong, as on some posts I have more likes than views.*

Dribbble

Posts –; 7
Views –; 842
Likes –; 14
Comments –; 16

As you can see, the Dribbblers seemed more likely to give their opinion, but much less likely to ‘like’ the post!

How Dribbble and Forrst feedback helped

Overall, there was a lot of approval and a positive reaction to my design. This was great as it made me feel as though I was heading in the right direction, and let Andy know that potential users of the site were keen on the logo.

More positive feedback from Dribbble

Improving the lens

My first detailed lens design

One aspect I had trouble with initially was the design of the lens. I hadn’t done anything quite like it before so needed some help with getting it right. Luckily, the lovely people on Forrst and Dribbble were willing to give me a hand!

Lens design feedback from Dribbble

Lens design feedback from Forrst

Next draft of the lens design

lowercase, CamelCase or Other?

The original name for Stockyoo was ‘StockYoo’ with the uppercase S and Y. When I did my first draft of the logo design, I just went straight for all lowercase as I found it easier on the eye. Andy (quite rightly!) pointed out that it needed some uppercase for consistency when showing the name without the logo, but said he’d be ok with just the uppercase S, so we put it to the vote on Dribbble and Forrst and got 100% preference for the lowercase ‘y’.

The different logo text options

Feedback for the different logo text options on Forrst

Dropshadows

One area where the users of Forrst and Dribbble didn’t really help was on whether I used a strong drop-shadow behind the lens or not. A small detail, but opinion was divided so I really just had to weigh up the opinions and make the decision for myself. (Serves me right for being so lazy!)

A bit too much drop-shadow behind the lens?

Feedback from Dribbble on the shadow

Benefits of using Dribbble and Forrst for feedback

There are a lot of benefits for using Dribbble and Forrst for feedback if you’re not overly sensitive to criticism.

Affirmation for a client

If a client is unsure of their feelings, or needs an outside opinion, they can see the reactions of others and use those reactions to help affirm their own beliefs.

If other designers (especially if they’re part of the target audience) have positive feelings towards your work then it can help convince a client that you’re heading in the right direction, even if the client feels otherwise.

Thoughtful opinions and inspiration

If you’re struggling with some design (or code on Forrst) other users might have that valuable insight or piece of inspiration to help you on your way.

Early promotion

This is likely to be especially effective where the users of Dribbble or Forrst are your target audience. Getting an idea of how these users feel towards your brand is very valuable. You’ll make them feel more important for asking them how they think, and giving them a part to play in the creation of the brand is likely to create a feeling of ownership and loyalty.

The negative side

Time

It takes a reasonable amount of time to post to Dribbble and Forrst. Making sure the screenshot shows enough, uploading everything and adding tags can take half an hour or so, especially when you’re doing a few images at a time. This isn’t a reflection on either site’s experience, they’re both very easy to use, but if you’re trying to add a useful description to your post it can take a pretty long time which brings me to…

It’s hard to provide context

The users viewing, liking and commenting on your images haven’t seen the brief, the communication between you and the client or tried other ideas out already. A small description isn’t really enough to give much context so a lot of the opinions you’ll get on your work is little more than “that’s pretty” or “that’s ugly”.

Subjective and unhelpful opinions

Somebody saying “that’s great” is all very lovely and ego-soothing, but doesn’t have much depth. An overall positive response is definitely better than negative, but without reasons and justifications in comments, it’s not going to help you better your work.

The conclusion

I think the benefits and negatives above apply to the overall usage of Dribbble and Forrst. It’s great for popularity contests and making yourself feel big and clever, but helpful feedback is often rare (especially if you don’t ask for it!)

I’d like to try using Dribbble and Forrst for feedback on a longer-term project. I can imagine they’re potentially useful for the in-house designers of web apps, creating a buzz around teaser shots and getting feedback on visual elements, especially if they’re used regularly.

The final Stockyoo logo

By the way, if anybody could give me guidance on the proper pronunciation of ‘Forrst’, I’d really appreciate it. I can’t say it aloud without sounding ridiculous.

7 comments

dave
at 20:45pm

“forced” is kinda how I pronounce it.
AndyW
at 09:39am

Awesome, I imagine Forrst is pronounced like Forrest Gump pronounces his name. So just say forrest with a deep south accent and you should be there ;-)
As the customer it was great seeing other peoples feedback (although only only on Dribbble as Forrst hides the comments for non-members). It was just a shame there was no way for me to actually get involved –; I just got to be a bystander while other people spoke about my brand.

That said, we had some great talks via email and were able to get some great feedback along the way, so it all worked out well in the end (I wonder if people would respond differently if the "client" was able to be involved in the communities?).

Anyway. I�m really happy with the final product and can�t wait to start putting it to use!
Andrew Follett
at 01:32am

Hi Laura,
Very interesting and thorough look at both sites! You should also come over and try out [Concept Feedback](http://www.conceptfeedback.com" rel=“nofollow) too –; I think you may not get the quantity of comments, but you will definitely receive more detailed feedback. Let me know what you think!

Andrew
Damian Herrington
at 11:43am

Great post Laura very informative. I've not got a Dribbble account, but Forrst has been great for me in making the work I produce better, not only from receiving feedback and improving but looking at other peoples work and critiquing myself.
Enon Avital
at 22:01pm

Funny you’re having difficulty determining the pronunciation of Forrst (I say “Foerced”).
Personally I find Dribbble more difficult to translate into speech. Is it “dribble,” “dribable” or “dri-bib-ble”?
PeterWooster
at 18:15pm

There was a discussion on Forrst a few months ago about the pronunciation. The consensus was that most people pronounce it “forced” but the official pronunciation is “forest”, cf. the little tree logo and the “Error Bear”.

Read the original post, ‘Using Dribbble and Forrst for feedback on a client project’.

dConstruct 2010

Sun, 05 Sep 2010 12:58:54 +0000

I was a bit skeptical about dConstruct at first. The idea of a conference based on ‘creativity and ideas’ made me worry it might be a bit pretentious but I was convinced by a lot of friends on Twitter that it’d be worthwhile, and they were so right.

I went with a notebook and an open mind. I didn’t want to go all reverse-snob on the pretentious (something I’m generally pretty guilty of being) and be ignorant of learning when I’d paid ££s for the pleasure.

And I ended up writing reams. Well, seven sides of a scruffy notebook, so here are the best bits I remember from each talk for the benefit of my friends who couldn’t be there.

Summaries

I’ve tried to summarise the main ideas from the talks. If I totally missed the point or didn’t do it justice, I’m really sorry!

Marty Neumeier — The Designful Company

Branding is about how the consumer feels about your product. To differentiate your brand from others, you must be good and different.

Brendan Dawes — Boil, Simmer, Reduce

Collect as much inspiration and information as possible, consider it all and the reduce it down until there’s nothing left to take away.

David McCandless — Information Is Beautiful

Infographics can be used to help us understand and relate to the huge amount of information and data we’re drowning in.

Samantha Warren — The Power and Beauty of Typography

Letters can say more than the words they spell. Picking fonts for a project is like picking shoes for an outfit, you must pick the most contextually appropriate font.

John Gruber — The Auteur Theory Of Design

Much like in film production, collaborative web projects can benefit from an auteur who acts as an arbiter of taste and strives for high quality.

Hannah Donovan — Jam Session: What Improvisation Can Teach Us About Design

We can learn about improvisation in design from improvisation in music. Making sure tools don’t get in the way, we have a structure to follow and roles to keep, to help us free our self-expression.

James Bridle — The Value Of Ruins

We need to make sure information is being kept, given history, value and versions to help us understand its context, the world and protect the information from cultural destruction.

Tom Coates — Everything The Network Touches

The future is in the connectivity of data, up to huge scales such a cities

Merlin Mann — Kerning, Orgasms & Those Goddamned Japanese Toothpicks

Nerd are cool because they really care about something. It’s great to be a nerd because you suck up huge quantities of information. It’s important to ensure you keep the information up-to-date and relevant.

Various points and ideas

I’ve tried to capture some of the ideas from my notes in this mind map thing, in addition/support to the summaries. If you can read my writing, you might find it interesting. I just did it to help cement the ideas in my head as I’m one of those people who has to write something down a million times to get it to stick.

Overall conference thoughts

The more people I know, the better conferences always are. It can be pretty hard to get chatting to somebody you don’t know in a room full of people who are stereotypically shy (especially when you’re in a minority of girls and so stick out like a sore thumb!)

I loved Brighton as a destination (pretty easy travel for me) and the venue was very smart. It was a bit tricky to write notes in the darker parts of the theatre but wouldn’t be so hard on back-lit devices (I opted for paper as I’m still really slow on iPad.) It would have been great to charge my iPhone/iPad during the talks as most of my break times were spent out of the venue trying to find non-coffee/tea refreshments.

What I noticed in particular was that there weren’t any questions at the end of the talks. In a way this was good because it prevented the awkward silence that is often heralded with ‘Any questions?’ at other conferences. However, it did give you the feeling of one-way communication. Much more like being at a lecture than being in a lesson.

It was good to see speakers I hadn’t seen before too. I think I’d already seen a variation of Brendan Dawes’ talk at Future Of Web Design, but otherwise the talks and speakers were totally new to me. This was refreshing over some of the conference veterans, because how much do you practice what you preach when you spend your whole time touring a talk?!

7 comments

crispinheath
at 11:26am

@laurakalbag love the mindmap
Tom
at 12:20pm

The big question… will you go again next year!?
- Laura
  at 13:41pm
  
  Definitely! It's such good value for money.
- timhastings
  at 12:31pm
  
  @laurakalbag your #dConstruct mind map is awesome, great job!
- Andy Hume
  at 14:43pm
  
  Justin and Laura,
  These are exactly the goals of dConstruct –; always have been. There are workshops alongside the conference which teach more practical skills-based stuff, but the conference day itself is all about getting people to think outside of their day-to-day work: to inspire, to excite, and (perhaps most of all) to motivate.
  
  So glad you enjoyed it –; and see you next year!
- Justin
  at 14:56pm
  
  I was a little bit dubious about the conference at first as well.
  By lunch time I was thinking that the Web Directions conference in London was much better. At Web Directions they were talking about technologies that we could use now and running through real life examples, something that gave the dev side of me some excitement to get home and straight to work.
  
  At the end of dConstruct I met up with my girlfriend who was eager to hear about the day. I started with "Actually the last conference I went to was much better, but…."
  
  What followed from that "but…." was 90 minutes of explaining my thoughts and ideas and the concepts the speakers discussed during the conference.
  
  I realised it was an awesome conference, and I think you�re descriptions and mind map are great examples of that.
  - Laura
    at 15:14pm
    
    Couldn�t agree more! When there are so many technique-driven talks out there, it can be easy to judge the more ideas-based talks as pretentious when they�re actually really valuable fuel for the brain!

Read the original post, ‘dConstruct 2010’.

Me vs We

Thu, 02 Sep 2010 10:42:49 +0000

There’s something that’s been niggling at me for ages. The way people act as if they’re a multi-person company when they’re really just one individual. This whole ‘we’ syndrome.

We have a great new client now working with us at Just Little Old Me Ltd.

Sometimes it makes me giggle when I know somebody is an individual ‘me’ and they’re saying ‘we’ as if they’re some kind of medieval queen. I just can’t help feeling it’s a little bit deceptive to act in this way.

Why bother?

I can see there’s a couple of reasons why people feel the need to pretend to be bigger than they really are:

It makes them look big and official to others, making them look more trustworthy. That company won’t run away with my money, but that single cowboy there might do.
It seems to give them some kind of prestige over that teenage kid working in his bedroom. Oh, it’s not just a student, they’re a proper company.

But really, why do we do this?

The web is still young, and it’s incredibly difficult to tell the hardworking souls from the shady characters. If most of your communication is web-based, without meeting face-to-face or even speaking on the phone, it’s hard for a client to pick up on those gut instincts and little signs that tells you somebody can’t be trusted.

We’ve come to inherently trust bigger companies. People will eat in a chain restaurant because they know what to expect. Companies made up of multiple people appear to be more stable because there’s more people to get the work done.

I can understand why it looks good to be big company.

It’s just being deceptive

What I really don’t understand about people who create this façade of a multiple person company is that they’re losing all the benefits of appearing to be trustworthy and stable. If you’re lying (however well-intended that lie is,) you’re no-longer credible. I have an immediate distrust of anybody who claims who says ‘we’ when they’re really just a ‘me’ as I wonder what other truths they’re bending.

Saying ‘we’ and talking as a company and not an individual also makes you seem detached. Is your company persona all that different from your individual persona? If it is, then why? Why do you have to pretend to be a different person to do business?

It’s really not all that bad being a ‘me’

I’m Laura Kalbag, I’m a sole trader and my company is called ‘Laura Kalbag’. What you see really is what you get. Sometimes I sense a lack of trust in me because I’m not an agency or a big company. You know what, I don’t care. I’d rather not work with somebody who suspects I might not be reliable. If we’re starting out with some big fat negative preconceptions, it’s going to be harder to get positive feelings from that person.

As an individual, people can be assured that:

I’m the one doing all the work. They will talk to me and I will execute the designs, development etc all based on our direct conversation. There’s less room for misinterpretation if there’s only one link in the chain.
I’m as vulnerable as them. Weakness isn’t always negative. I’ve got to directly make money to have food and shelter, so have my clients. It’s much more personal when you’re not throwing somebody else’s money around.
I don’t have to check that what I’m saying is the right thing on behalf of my company and/or employer. Ditch all the legalese, I’m talking to you man-to-man (or girl-to-man or girl-to-girl, you see what I mean!)

I feel like I’m good enough

There’s upsides and downsides to hiring a freelancer or an agency but the important thing is that I’m happy with what I am. If you’ve got no confidence in yourself as an individual freelancer, then go find yourself some like-minds and form an agency!

It’s not arrogance to say I feel like I’m good enough to speak as myself. I’ve got as many insecurities as the next person but I enjoy being a human, friendly face in a sea of (often) faceless companies.

So next time you’re thinking of saying ‘we’ when you just mean ‘me’, think about how much that little word means. I think it’d be better if everybody was a little bit more honest.

36 comments

ibernat
at 09:49am

@laurakalbag This is funny when people write “Our work” on personal pages
Jem
at 10:51am

Well said. It’s almost like some sole traders are ashamed to work by themselves, for themselves & I don’t understand why.
Craig Hawker
at 10:53am

One reason small companies do this is when they are –; sometimes –; a ‘we’. As an example, I know a small company that is legally a ‘me’, but they subcontract where needed to become a ‘we’.
Therefore, going to a company and stating that ‘we’ can accomplish something, even though that company only has one employee, is accurate; they become a ‘we’ as and when needed.

I know you’re not necessarily pointing the finger at these type of companies, but they are often the ones who you’ll find out later are a ‘me’ but call themselves a ‘we’. From an investigatory perspective they’re a ‘me’, but work with them and you’ll find they become a ‘we’ as needed.
- Laura
  at 11:59am
  
  I was really talking about individuals who are genuinely individuals but I get your point.
  
  Seems like a fairly confusing situation becoming a �we� as and when. I frequently work with other people but don�t hire them myself or speak for them, so that�s why I�m always a �me�.
  - christopher
    at 11:07am
    
    Good point –; i’m a designer, but i get customers wanting dev work.
    
    I have 3 or 4 other freelancers i use for code, i have a couple of printing companies i use who are almost part of my team.
    
    The student argument is also valid in this case. I AM a student, and i am running a business, but i’ve been doing both for the past 5 years, all my customers are aware of that and none of them have a problem with it…
    
    So yes, maybe I should put ‘I’, but a lot of the things I offer, i personally do not do..
    
    A toughie.
  - Craig Hawker
    at 12:09pm
    
    I guess and you're right –; from your statement, you're a 'me'.
    I�m talking more about single-owner companies with no full-time employees, but they have other companies or self-employed people that they consistently subcontract work to.
    
    As an example, a web designer may be asked to implement a website that requires some technical skill, some development/integration work, some copywriting, etc. Under these circumstances, provided there�s money for it, that designer may decide to subcontract elements out (get an engineer in for a couple of hours for the technical work, subcontract development and copyrighting work to third parties…). Would it be wrong to refer to the web designer�s company as a �me� in a tender? It certainly would not be a �me� who completed the work. However, if all the work is whitelabelled (done under the web designer�s brand, all paid to the web designer then paid on as appropriate), why shouldn�t they call themselves �we�?
    
    I�m playing devil�s advocate to a degree. It doesn�t affect where I work (we�re definitely a �we�) but we provide technical resources to companies who are �me�s, but promote themselves as �we�s. Do I think it ever really makes a difference when we go up against them? Not really. And, from the customer�s perspective, as long as they�re getting what they asked for and are happy with the service, why should they mind?
    - Laura
      at 12:17pm
      
      If it�s �we� doing the work then �we� should get the credit, it would be wrong to claim that �me� is doing the work when it�s really more than one person. I�d be pretty annoyed if I hired someone to do work for me and found out that they�d outsourced it.
      
      I just think that everybody should make it perfectly clear who is doing what in those cases. You don�t have to confuse a client with the technicalities, but there�s no harm in saying �I don�t do this, but so-and-so does so I pay them to do it for me. Is that cool with you?�
      - Craig Hawker
        at 12:32pm
        
        Well, yes and no.
        
        Yes, I believe that honesty is the best policy in most things (work matters in particular), but I understand why people aren�t up-front about it. As I said, if the customer is getting what they want, for the price they want, and they�re happy with the service, why does it matter? All you�re doing is actively highlighting that you�re a one-man-band to the customer and that can be a negative.
        
        That�s before you get into larger organisations with approved supplier lists etc. For those, actively pushing the fact that you don�t do the work yourself can cause problems.
        
        That said, would this be an issue with web design? I have had issues where major additional design work/modification was needed quickly (I worked with an organisation deeply affected by foot and mouth a few years ago). If the design agency was unavailable, or not able to react because of resource issues, that would have been a problem. So much that it�s now part of risk assessments for suppliers.
        
        Coming across as a �we�, even though that �we� may be a collective of �me�s, would put a tick in a box.
        
        Now, I feel like I�m arguing myself into a corner and –; as I said –; I�m playing devil�s advocate to a degree. I do believe that you�re better off being honest. We have won a large number of tenders, I believe, because we have had the confidence to stand up in front of people and say "look, that�s not exactly possible, how about this alternative…". People accept that honesty over a quick-fire sales-response of "yes, sure, no problem".
        
        That said, I just don�t have a problem with �me�s masquerading as �we�s. And, from the customer�s perspective, I�m not sure they do either.
      - roni
        at 17:45pm
        
        Why would you be annoyed if you find out it has been outsourced ?
        This is kind of silly, if I may !
        
        Why silly ?
        
        –; You can outsource some part of a job in order to get higher quality. (for same money)
        –; You can outsource to have lower cost. (with same quality)
        
        –; You can outsource to speed up production in order to meet deadline. (bcs you are late since you are dead busy but don�t want to pay penalties)
        So? What�d be your call ?
        
        I don�t get the idea of been against outsourcing because.. .well… "because I am against !!"
        
        You can build up a team of expert and manage that team, produce high quality work. Who's going to suffer ?
        Now indeed, you hit another field of job, more project management than "design" or however you want to call it; but when you got your own business, and hopefully got to get a few clients at the same time, search for the future at the same time etc… well, doesn�t it comes to a few hours of PM a day ?
        And when you business is so packed with orders for 1 month or so… what are you going to do ? Turn down clients ? sleep 2 hours a night ? hire someone for 1 month ? Or outsource a couple of tasks ?
        
        Many companies do, I agree, outsource with only in mind the idea of profit, pay less charge more, but that�s not everything behind outsourcing and this eventually fails as quality is missing.
        
        You can outsource as well, with great outcome, for 1 million good reasons !
        
        Note : I am an outsourcer. The money is ok in the country I live in, would not allow to survive in yours, for sure.
        The only pride I have & take is in the quality of the apps I deliver to my clients. I have no credits, not recognition or all that, only the satisfaction of quality work.
      - Ewan
        at 11:04am
        
        Hi Laura
        while I agree with the sentiments, I can also see why some people may choose to use “we” instead of “I”. For example, I’m sure many of us often rely on the services of others, whether that be outsourcing, or employing someone to do our books once a month. It’s not a team of staff as such, but should the worst happen to the sole trader, there is a confidence instilled that they are not totally locked down to that person.
        
        There is perhaps a small sense of arrogance as well as to saying “I can do this, this, this, that, and this too”. I think by using “we” you can kind of overcome this.
        
        I don’t think it would be particularly difficult to use “we” and not portray yourself as a big company. It should be quite possible through the rest of your copy not to give this impression while still using “we”.
        
        Laura
        at 12:11pm
        
        Couldn�t all this be said on a site? I�m not sure that employing somebody to do your books (which aren�t necessarily relevant to the services that you�re providing) would make you a �we�.
        
        As I said to Craig, I�m not so much getting about who you work with or who employs who, it�s about being honest about who you are and what you do.
        
        There�s nothing arrogant about saying you do it all when you really do do it all! That�s just honesty!
        
        Laura
        at 12:12pm
        
        (Although it could come across as arrogant depending on how you say it.)
        
        giles
        at 12:07pm
        
        *Applause*
        I�ve held the same view for years; thank you for expressing it so clearly.
        
        mealybar
        at 11:14am
        
        @laurakalbag great post, we/me been on my mind a lot lately. It’s deceitful perhaps without meaning to be.
        
        Jonic
        at 12:19pm
        
        Great post, Laura..
        I�ve always found this a little annoying too.. Like there�s some shame in being small and adaptable..
        
        Anyway, is this the blog you said you might not set up because no one would read it? Looks like you were wrong there!
        
        Stephen Lang
        at 12:20pm
        
        An honest and encouraging article. Thanks for the read.
        
        Dan Palmer
        at 12:22pm
        
        I know someone who runs a business out of his study in his house. It used to be run out of the spare bedroom. However, if the large banks, government departments, or other large businesses he does consulting work for found out this, I doubt they would use him.
        If you are asked by your boss to spend money and hire a consultant, do you go for a consulting company or the guy in his bedroom. It is a fairly obvious choice, if only to appear better to your boss.
        
        The person I know uses rented office rooms when needed, he has a phone answering service who will answer the phone at a call centre, record the caller and email him so he can call them back. All of this creates an illusion, but one that is certainly necessary.
        
        Laura
        at 12:32pm
        
        It�s a shame that it�s seen as necessary. I know I�m in a very different position, in that I haven�t done work for huge corporations, but I�d like to think that the fact I work from home doesn�t make any difference to the quality of the work I do and so shouldn�t affect somebody�s judgment of me.
        
        But I�m an incredibly wishful thinker.
        
        Rich Quick
        at 13:24pm
        
        Dan,
        I can�t speak for your friend�s clients –; but all my clients know the truth about our operation.
        
        You�d be surprised.
        
        We (and it is a we in my case) do work for clients like Waitrose, John Lewis and WWE.
        
        All of them know:
        
        a) We don't have office
        b) I work from a room in my house
        
        c) So do all my staff
        There are advantages to this:
        
        1) Lower overheads, which we pass on to them
        
        We work late when needed .. and it makes that easier
        
        They know where I live
        
        If they call me at 5.35 I haven�t left the office
        Also, people that work for large companies are people –; first and foremost.
        
        They get why you�d want to work from home. Some of them are even jealous!
        
        "God, I�d love not to have to commute for an hour each morning. How wonderful. Lucky you!"
        
        I had one client who used to work in the City and gave that up once she saw I was doing fine working from (what was then) a house with a sea view in Cornwall.
        
        She took a job working for a chain of hotels as marketing manager, which had head offices closer to her home.
        
        Rich Quick
        at 13:58pm
        
        Note: My staff work from their own houses .. they don�t all come to mine every day!
        
        Matt Hinchliffe
        at 12:39pm
        
        I really liked reading this article, points you raise match my experiences and opinions. As a teenager I did this to make myself appear difference from other web kids and it certainly worked.
        
        Kris Noble
        at 12:39pm
        
        Hmm… this post has made me re-evaluate my own copy.
        I use "Simian Studios" as my business name, so it seems natural for a company named in such a way to be a "we", saying "me" or "I" doesn�t feel right to me somehow. Maybe that�s just me though.
        
        Like Ewan and Craig, I chose my current stance based on the intention to grow as needed –; perhaps temporarily in the form of hiring in others, or perhaps permanently in the form of becoming a fully-fledged agency further down the line.
        
        Perhaps I should go back and change that though –; I can do everything I advertise, but I guess in the case that I get too busy it won�t hurt me either way to just own up to that fact. If/when Simian Studios does become an agency, then the collective terminology can come out to play again :)
        
        Rich Quick
        at 13:17pm
        
        Totally agree with you on that. It's also counter productive. Your biggest advantage is that you're an individual. I hired Laura Kalbag .. not Laura Kalbag Inc.
        If I wanted a company with large overheads and lots of staff then I wouldn�t go to you anyway!!!
        
        A lot of small businesses like dealing with a single person, because they feel they�ll get better service and not just be just another customer in a queue.
        
        Or because they really like something that individual has to offer –; be it their talent, their understanding of business, or their winning personality.
        
        The only exception, I�d say, is if you don�t consider yourself a freelancer and are aiming to build up a company with lots of staff. In that case I�d say it�s forgivable .. just about.
        
        But to be honest, what�s the difference between you pretending you have staff and you pretending you�re an 33 year old bloke with stubble and a bit of a spare tyre?
        
        They�re both dishonest, essentially. And stupid!
        
        Also, it might surprise a lot of freelancers to know that the biggest problem I have as a company owner is that people buy into me .. and then they are actually concerned that it�s not me doing the work on their site.
        
        I imagine Headscape or Clear Left might have the same issue. You choose them because of Jeremy Keith or Paul Boag .. but that�s not actually who you get.
        
        Craig Hawker
        at 13:49pm
        
        But to be honest, what’s the difference between you pretending you have staff and you pretending you’re an 33 year old bloke with stubble and a bit of a spare tyre?
        
        Hey, I resemble that remark!
        Not quite the age, but it’s close enough to hit hard… ;-)
        
        Matt Hill
        at 13:20pm
        
        I�m struggling with this very issue right now. I�m a self-employed web designer and currently market myself as "I". However, I�m rebranding and considering going down the "we" route, for several reasons:
        
        1) I want to get bigger clients, and like it or not, they won't use individuals for big complex projects
        
        I intend to outsource the development side going forward as it�s the part I�m less good at and don�t enjoy
        
        I�m considering offering hosting to future clients (I currently don�t) — and the hosting company offer free white label support to my clients, so they would appear to be my employees
        
        "We" gives you the scope to expand in the future. "I" doesn�t. I don�t want to be seen as some cheap freelancer when I�m 50 (assuming I�m still doing this!) — I want to be seen as a respectable provider and however you cut it, "I" just doesn�t have the same weight in that regard.
        So I�m erring towards "we", but I do have some reservations over it. Mainly because I agree with your points that being honest and upfront with people about being "I" is admirable, professional and well, just plain good old fashioned personal service.
        
        I�m torn!
        
        Rich Quick
        at 13:43pm
        
        1) I want to get bigger clients, and like it or not, they won’t use individuals for big complex projects
        
        Nonsense.
        
        They�ll use an individual. It�s all in your head.
        
        You don�t believe they�d want you .. and so you probably never asked.
        
        It�s like saying "that stunning girl would never go our with an bloke like me."
        
        Actually, she probably would. I�ve seen stunning girls with ugly blokes (that aren�t rich) .. it�s probably at least partly down to the fact the ugly bloke she�s with actually asked her out .. and partly down to the confidence he had.
        
        It�s the same with a big company. If you don�t ask them .. or you don�t put across the plus points of being an individual, sure they won�t hire you. But that�s your fault for not selling yourself well enough.
        
        Plus points of being an individual:
        
        –; you�re a big client to me. Not like some big ad agency where you�re just another number to invoice. I�ll pull out all the stops for you.
        
        –; I�m cheaper, because I have lower overheads
        
        –; You spend less money and get a better developer to boot! An ad agency charges you £100/hr and in return you get a £10/hr developer. The rest goes on overheads and profit. I charge you £35/hr and you get a £35/hr developer. My overheads are lower, and I�m not passing the work on to some junior who�s not that good.
        
        –; I don�t mean to be rude, but I�m better than the agency. They can�t afford me –; that�s why I�m freelance. They have to hire somebody cheaper.
        
        Etc etc etc
        
        As for the "for complex projects" bit. You shouldn�t take on projects that are too complex for you anyway, so if that�s an issue you�re pitching for the wrong work.
        
        Matt Hill
        at 12:59pm
        
        Hi Rich, wise words. You’re right, I need to be more confident. Regarding my point #1, you’ve definitely convinced me to go with “I” :-)
        
        I’d be interested to hear your opinion on using “We” vs. “I” for the other three points I listed.
        
        Rich Quick
        at 13:14pm
        
        2) I intend to outsource the development side going forward as it’s the part I’m less good at and don’t enjoy.
        
        I do the design. And when I feel like it, I do the coding too. But sometimes, I get someone else to do that stuff. It means I can concentrate on the bits I’m good and it means I can make sure I don’t miss the deadlines I’ve agree with you.
        
        That means you’re happy and I am happy.
        
        I’m considering offering hosting to future clients (I currently don’t) — and the hosting company offer free white label support to my clients, so they would appear to be my employees.
        
        I offer hosting to you.
        
        I use a company which can offer you extra support on your hosting, so if you ever have a problem they can help you fix it.
        
        That’s better for you, because it means you can phone them out of hours and –; to be honest –; they deal with hosting all day long so know much more about it than me.
        
        “We” gives you the scope to expand in the future. “I” doesn’t. I don’t want to be seen as some cheap freelancer when I’m 50 (assuming I’m still doing this!) — I want to be seen as a respectable provider and however you cut it, “I” just doesn’t have the same weight in that regard.
        
        OK, I think I’ve already said where I stand on “I” vs “we” in terms of credibility.
        
        When you decide to expand, start off by saying “I’ve just take on a guy called Paul (it should always be a Paul BTW!) to help me out with some of the coding work.”
        
        Then, at some stage, once that’s been going on for a while and you decide to take on another person then you can move to being “we”. Then it’ll be genuine, and will make you and your clients much happier.
        
        1 point –; make sure once you start trading as “we” that you don’t use your own name. Don’t be Matt Hill Design. Be Hillybilly Design, or something. It’ll make it clear to your clients that it’s now a company, not just one person.
        
        Brian Rinaldi
        at 13:38pm
        
        Great post. I actually had a similar revelation a while back related to my work running a conference in Boston ([RIA Unleashed](http://riaunleashed.com" rel="nofollow)). For the longest time I always said "we" until one day I decided it was just silly since it was only me. Since then, I often have to catch myself reverting to "we" but always go back and correct it. For me, a large part of it is is selfish in that I deserve credit for the work if I do it. We seems to disperse credit to unnamed persons.
        
        Rich Quick
        at 13:54pm
        
        [http://elliotjaystocks.com/](http://elliotjaystocks.com/" rel="nofollow)
        Microsoft, Virgin
        
        [http://hicksdesign.co.uk/](http://hicksdesign.co.uk/" rel=“nofollow)
        
        Opera, Linotype, Firefox
        
        Honestly, it�s a myth and an excuse that big companies won�t work with individuals.
        
        And before you say "but I�m not Elliot Jay Stocks" then that doesn�t change anything!
        
        Who�s fault is that? If the reason you�re not getting work is because you�re not as good as someone who is then deal with it. Either get better or accept you�re gonna deal with smaller clients.
        
        But don�t think for a second that not being able to say "we" is the issue.
        
        Big companies don�t want 2 sh*t people over 1 talented one!
        
        Just another point .. do you honestly think big companies don�t check up on you first?
        
        ErisDS
        at 14:03pm
        
        Seems like you’ve caused a bit of controversy! I totally agree with you though, “me”s who outright just pretend they’re “we”s are twisting at least one fact, so how do you know they’re not twisting others?
        It makes me feel really really uncomfortable.
        
        Laura
        at 18:09pm
        
        @roni I'm not at all against outsourcing as a rule, I just think that freelancers should be honest and make their clients aware of the fact they outsource their work.
        
        roni
        at 20:50pm
        
        Let's take as a parallel construction: You call an architect then building company.
        What guarantee do you have that this building company does all the work in-house ? Any ?
        
        They will sub-contract some parts (99% of time): roofing, electricity, water, whatever…, to some specialist in that field… It�s not "pure outsourcing" since it local real life… but same process.
        
        Let's take another example : GM, the car maker… Do you think they build in house all the parts of your car ? Do you even think what's sub-contracted is 100% produced in the US ?
        Are you aware of where your car�s brakes are made? lights? seats?gear-box ? and by whom ?
        
        No, because you buy a GM made car. And anyway, you don�t care, bcs you buy a GM car. And GM is responsible for the quality !
        
        I don't think freelancers should say "btw, I outsource this part" when this does not apply for any other company !
        If a client has done basic research he should have a ruff idea of what he is buying and how much it costs. Then to him to ask "Why so cheaper ?" or "How come you are expert everywhere?"
        
        pronebird
        at 21:18pm
        
        I think when individuals are saying �we� it means the one thing only — they want to seem more than they are.

Read the original post, ‘Me vs We’.

Year One

Tue, 31 Aug 2010 10:00:04 +0000

It’s been a whole year since I officially started working as a freelance designer last August. I graduated from uni, had a brief fling with some full-time remote working, had an awkward interview with a recruiter and then decided that I’d rather give it a go by myself.

Getting Started

I felt pretty ready for freelancing full-time, I’d had a lot of experience on projects whilst I was at university. I knew I could run a project and I knew I could do the work. I’d done a one-day course at uni in freelance accounting and got myself a business account and subscription to FreeAgent so I felt like I could stay on top of the finance side.

The first month started pretty slowly, but that was only the first month. With the help of two lovely people in particular, Chris Book and Simon Wheatley, I got to know a few people and started getting a few projects under my belt. I really couldn’t thank these two guys enough for recommending me to their friends and giving me great opportunities.

I’ve found that meeting people (I don’t like networking, it’s too false) is incredibly important when you’re starting out. After that, my network seemed to grow itself!

The Stats

I can’t believe how much I’ve done. I’ve just worked these out:

Projects completed –; 27
Current projects –; 6
WordPress themes created –; 13
Logos designed –; 10
iPhone app designs –; 3
Static website designs –; 6
Illustration projects –; 2
Website maintenance projects –; 3
HTML e-mail designs –; 1

Getting Work

From the stats above, you can see that I’ve been busy! Thanks to Chris and Simon and a lot of really great clients, I’ve managed to be constantly booked up and busy since last October. I’m now booking up around two/three months in advance.

It’s been difficult. Learning to not stress and cope with a big workload is one of the many things I’ve tried to get my head around.

Trying to learn

Not necessarily things I’ve already learnt, but things I’m in the process of learning!

Scheduling projects is all well and good but nothing ever stays on schedule.

Feedback isn’t instant, work takes much longer or nowhere near as long as estimated. It’s not a nightmare if I don’t stress about it, but I’m getting good at frequently reorganising and juggling projects.

Desk space is important.

Work got miles easier when I had my own working area set up. Matt built me a great custom desk, shelf unit and wall-mounted my second screen. When I’m at my desk, I’m working. The division between working at home and just being at home makes a big difference.

My desk area (if anybody knows a good way to keep those cables tidy, I’d love to hear it!!)

Read the original post, ‘Year One’.

Girlguides UK Anti-airbrushing Campaign

Wed, 04 Aug 2010 10:32:18 +0000

I don’t like to say it, but I think the Girlguides UK campaign (#gukforrealimages) call for labelling all airbrushed images of women is unrealistic.

Our girls and young women are demanding action from the Prime Minister to introduce compulsory labelling to distinguish between airbrushed and natural imagesin order to ‘shape a generation of self-confident girls and young women.

(Tell us the truth –; Girls call for honesty over airbrushing. Girlguiding website)

I’m a girl, and I’ve had all the usual confidence issues growing up that are no doubt in-part created by the unhealthy portrayal of women in the media. Many girls (and boys) would certainly benefit from there being more natural body shapes being shown in advertising and the media in general. If it’s going to be aspirational, then it should give people aspirations of realistic, achievable goals.

However, I’m not sure that the lines between air brushing (by which I assume they mean altering the appearance of a model) and post-production are clear enough. I think it is probably near-impossible to find a commercial image out there that hasn’t had some kind of post-production applied. It could be anything from changing the colouring and exposure all the way to placing a model into an artificial environment. In post production the artist is designing the image to suit the advertising campaign in every possible way, this will inevitably mean changes from the very raw basic image shot in a studio. If all the images used in commercial campaigns looked like our holiday snaps, they wouldn’t have the desired effect. Commercial campaigns are designed to make us want to be like the people in the photos, be it richer, slimmer or just happier.

There’s already been labelling in TV ads. All the mascara advertisements now have a ‘enhanced in post production’ label at some point. It’s obvious that nobody could get eyelashes a mile long with a plain old high street mascara so it’s false advertising. Does this labelling work? Do children understand what post production is? Does everybody read the small text on TV adverts? I don’t really think so. It just means nobody’s going to sue the cosmetics companies.

How do the Girlguides propose these images should be labelled? If there’s an image where nothing has been done except the smoothing of a girl’s skin and applying some extra eye makeup, how is that distinguished by a label from an image where they’ve given her somebody else’s breasts, trimmed her waist by six inches, changed the colour of her hair, the colour of her skin and lengthened her eyelashes. Does each image then have to come with a list of everything the digital artist did to perfect the photo? I’d imagine on most campaigns there’d be more label than photo!

Where then do they draw the line at what needs to be labelled? TV adverts, magazines, billboards, clothes catalogues so also clothes store websites, packaging, DVD, CD and book covers. You can see where I’m going with this…

Rather than going guns blazing into a campaign to label as many commercial images as possible ‘fake’, I think it would be far more productive to try to tackle these problems at the root. Why do we aspire to be ridiculously thin? Who are the role models that make us this way? Can we change the attitudes of the influencers, the magazines and advertisers that insist on these bizarre body images being what we should aspire to?

I think it’s great that the Girlguides are drawing attention to these issues but there’s much more to them than dodgy photos and a bit of small print to fix the perceptions of young girls.

5 comments

richquick
at 10:25am

@laurakalbag as ever I agree with you. Please stand as an MP so I can vote for you!
richquick
at 10:25am

@laurakalbag I do think Photoshopping out wrinkles in an anti-wrinkle cream ad was beyond the pale, though.
AndyW
at 11:27am

Don’t forget, Girl Guiders is a bunch of nut cases ;)
I’m not kidding, my wife is involved with them and there are some absolute loonies involved in the organisation. I mean… who in their right mind would want to hang out with a bunch of squealing girls for a couple of hours a week?

As for the image labelling, I think it’s a nice thought, but everything is “airbrushed” these days. It would basically mean putting a compulsory notice on every advertisement, which is quite frankly a waste of time.

What would be cooler would be to encourage companies NOT to tart up their pics in post-production and announce that fact in the adverts. I think that would gain a lot more respect from purchasers.
Pearly
at 22:47pm

@Andy W
I think really the point is to make people aware how many images really are airbrushed. If people can see groups of images are airbrushed then a response might persuade companies that they could become more popular and save millions of pounds by not airbrushing images and showing the subject in their natural beauty. People would trust and appreciate the company more.

It’s making the small steps to getting companies to CHOOSE not to airbrush images. To use the phrase “all guns blazing” would be to persuade/ force companies not airbrush. Perhaps once images are labelled then companies could be persuaded.

I don’t believe it is a waste of time if it can produce a result. It is the images that are part of the reason people especially girls want to be thin etc.
I do agree though that there would need to be some conditions on which images should be labelled. Perhaps a traffic light system?
As a girl guide I think it shows we are still being a movement and trying to improve the possibilities for women. :D.

Read the original post, ‘Girlguides UK Anti-airbrushing Campaign’.

How the iPad is saving my sanity

Sun, 01 Aug 2010 18:54:56 +0000

Fan girl

I’ve had an iPad since the day it was released in the UK. I bought it because I’m a fan girl. I admit it. I could pretend that I wanted it to take to conferences or use for testing or when I didn’t need a laptop when I went to visit clients. In truth, I only go to one or two conferences per year, I’ve not yet made a site that needed an iPad-specific site and when I go to visit clients I always need my laptop. I was simply justifying my desire to have something shiny.

When my iPad arrived I was in love with the glossy screen, the simple gestures and the idea of all the tasks I could now complete without using my laptop. Thing is, it doesn’t run Photoshop or Coda or any of the apps I actually need for working. It may suit other people who just need a word processor, spreadsheet or presentation software, but when it comes to specialist tools the iPad isn’t the device.

Workaholic

Yet more and more I’m finding that the iPad is stopping me from going mad. Being a freelancer that works from home, it’s very difficult to switch off. I often have days where I sit at my desk til six, then just move my laptop to the TV and carry on working until it’s time to sleep. This is a really bad habit and just leads to all-work-and-no-play and a big fat stress-face. Many wise people talk about keeping normal office hours and being equally productive and there’s a lot of truth in that.

Now I leave my laptop when I’m finished working, turn it off and engage iPad. I can’t work with the iPad, so I won’t. I can read e-mails, but if I reply from my iPad I won’t have a record of the reply on my laptop for reference (so I rarely do that.) I can visit as many websites as I like, but I won’t be writing any HTML or CSS. I can sketch and doodle ideas and even make brainstorms but I won’t be creating any graphics.

The result is a total separation of work and play. The iPad fulfils all my casual browsing needs and I’m a more sociable and less stressed being.

Playtime

There’s added bonuses to this too. There are plenty of cool apps on the iPad to keep me entertained.

iBooks

A couple of weeks ago I read my first full book (albeit a reasonably short 200-page one) using iBooks. To all those saying it doesn’t beat a real book, I say stop being so old-fashioned. If you’re used to staring at a screen for 12 hours a day, your eyes won’t particularly complain. I set the settings to large-ish text, changed the colouring to sepia and turned the brightness down. My eyes were very happy.

The Prince of Mist on iBooks

The books are a little bit pricey, being a few pounds more than their paperback friends, and there’s certainly not everything in the store. It’s not much of a problem for me as I rarely have time to read more than a couple of paperbacks a year (though I see that changing with iBooks) and a boyfriend who is being driven mad by the quantity of books I insist on keeping.

Reeder

RSS feeds are no longer a case of me fighting a losing battle. Reeder is a beautiful feed reader and now I love spending spare time catching up on feeds without stressing about reading them when I’m at my desk.

Reeder also gives you loads of ways to make use of the articles you read so they’re not just lost in the ether of my bad memory. I’m a serial Delicious user so I can tag and save the useful bookmarks straight into Delicious. I also use ~~Instapaper~~ Read It Later (Instapaper on iPad just doesn’t feel right) so I can save the longer read-it-later articles to there. If I want to add a cool image to Zootool, I just open the link in Safari and lasso it from the browser.

actions on Reeder for iPad

WordPress

So now I’m typing this on WordPress for iPad. It’s perfect for those wifi-less moments when you can’t access your WordPress admin. You can have drafts that are just local to your iPad or sync your drafts across to the web. It’s a fairly minimal interface, relying on HTML if you want to include any kind of formatting, and you can only attach images at the end of a post.

the keyboard takes up a lot of space on the screen, but otherwise it’s very usable

However, if you’re like me and tap away at a few blog posts at once, dipping in to edit them every now and again, WordPress for iPad is great for a distraction-free environment.

Twitterrific

Many people would agree that Tweetie is the most native-style mac Twitter client. I used Twitterrific for mac before I was a Tweetie fan and it just feels too Adobe-Airy. It doesn’t feel native, it doesn’t quite look right, there’s something a bit flimsy about it.

But Twitterrific on iPad is a revelation. Landscape mode is totally where it’s at, it has the extra column/menu down the left hand side. Easy to browse, packed full of features (maybe not so many as Twitter for iPhone or the so-ugly-I-seriously-can’t-stand-it Tweetdeck) but for a casual addict it feels just right.

Twitterrific on iPad

When you’re writing a tweet or replying you get a lovely huge box to work within. A particularly cool feature is that it shows the tweet you’re replying to as well for reference.

Replying to a tweet on Twitterrific

The little popup boxes are great too, you can instantly access all the relevant details about a person including their recent tweets from a few taps.

Profile details on Twitterrific

CropSuey

It’s pretty disappointing that there’s no iPhoto or iMovie style tools for iPad. Alongside a cheap way to import your photos (I haven’t tried the official camera to iPad cable yet,) it feels like a missed opportunity. The iPad is great for viewing photos you’ve transferred from iPhoto on the mac, but that’s about it.

When I started writing blog posts on my iPad, and taking screenshots into the Photos (the only way to directly get images into Photos on the iPad?!) I needed to rotate and crop the images so they looked right on my blog.

I did a bit of searching on the App Store and came across Crop Suey HD. This app is simple but does exactly what it says and with incredibly intuitive tools. With straighten, rotate, flip and crop you can easily get your images looking much neater and save them back into the library for use with other apps.

The incredibly simple Crop Suey interface ensures you see mostly the image itself

Finding Apps

The downside to the iPad is app discoverability. Despite Apple selling so many devices, there don’t seem to be many iPads around. People aren’t constantly talking about new iPad apps on Twitter like they do with iPhone apps. There’s very rarely that word-of-mouth way to happen across a cool app.

So you have to rely on the App Store. Unless you’re after a top 10 app, or a random Staff Pick that’s been sitting there for a month, you just have to search and hope. You can wade through pages and pages of mediocre apps in the Categories trying to find that rare gem. It’s incredibly difficult to be paired up with something you’ll like, use, and will be worth the relatively high cost of often £5.99+.

Appsfire’s App Stream is trying to solve the discoverability problem. A stream of small app icons rotate around the board. You can tap them to see more, basically all the info you get in the app store. If you like it, you can tap again to view and purchase on the App Store.

App stream by Appsfire is useful but not totally beautiful

Unfortunately this really relies on you judging a book by its cover. The slickest, prettiest icons are most likely to catch your attention and you’re most likely to assume the apps with duff icons are going to have a rubbish app design. Whilst it’s pretty likely, I feel like this random stream of icons is as bad as trying to filter through App Store listings. It’s a bit faster to load, but you’re not even getting any contextual category or ranking information.

As the Apple app stores get huger, there’s going to be a much greater need for discovering the best apps for the individual. I can imagine there’s a lot more startups getting into these areas and I’d love to hear if anybody out there has any recommendations for me! I want to get even more out of my iPad time!

9 comments

hayles
at 18:12pm

@laurakalbag Great post! Do you play many games on it? Also for books, have you tried Stanza?
logorrhoea
at 18:17pm

@laurakalbag Nice post. I generally agree with what you say. (This tweet written in Twitterrific on my iPad.)
mikek
at 19:27pm

great account of ipad ownership. think i might tradeup a netbook and old iphone for the pad.. regarding your not being able to have reference of your sent email on your mac if you send from your pad, if you set up mail using imap, the you can. i find this useful as i flit between iphone, netbook, work mini and mbp.
- Laura
  at 09:50am
  
  I’ve tried to set up IMAP but never seem to be able to get it to work. I must be doing something wrong somewhere, or maybe it’s that I have POP set up to? I’m too scared to delete POP and then add IMAP in case I lose a load of e-mails in between!
- AndyW
  at 08:32am
  
  Just a quick point on the email thing… if you use IMAP or Exchange to access your email, the sent items folder should be synced to the server and back to your laptop.
  If your email provider doesn’t do IMAP or Exchange access, set up Google Apps for Domains –; it’s free for up to 50 users, has migration wizards and even allows you to setup your own branding in GMail (as well as Calendars, Docs, Sites and more!).
  
  I switched to Google Apps a year or so back and haven’t looked back!
  - Laura
    at 09:51am
    
    I never knew that IMAP would sync Sent items, that’s so clever!
    
    I tried Google Apps as a setup for IMAP, but it doesn’t work and I have no idea why. That being said, I’m certain it’ll be human error. I struggle a lot with any Google interfaces!
    - AndyW
      at 10:10am
      
      Yeah, it synchs the lot! I use Google Apps via their exchange connection on my iPhone and it works perfectly, including push email. I literally can’t fault it.
      
      If you have skype, add me (I’ve set my username as the bit before the @ symbol in my email address) and I’ll be happy to walk you through it / help you out setting it up. The only problem would be moving your existing email, as I haven’t done it before, but it should be quite easy.
    - Dan
      at 09:10am
      
      Good post thanks… I too struggle with app discovery… A good resource for this is [http://app.itize.us](http://app.itize.us" rel="nofollow) which is a curated list of the best designed apps… There’s some gems in there I wouldn’t have known about otherwise… Hope this helps :)
      - Laura
        at 09:53am
        
        Looks like it’s curated by some proper old-school designers, all those apps have a real graphic designer feel to them! Thanks for the link, I’ll definitely keep my eye on that.

Read the original post, ‘How the iPad is saving my sanity’.

WordPress 3.0 Part 3—Theme Development and the Design

Fri, 16 Jul 2010 21:50:57 +0000

This post has three parts. This is part three. Visit the other parts below:

Part 1: WordPress 3.0—Pre 3.0 and Beyond
Part 2: WordPress 3.0—Really WordPress 3.0

Easier for theme developers to make it easy for users

The following WordPress 3.0 features really make it easier for the big-time theme developers who create highly customisable themes.

Menus

This is brilliant. Before the menus feature, we had to bodge any extra links we wanted on to the end of the wp_list_pages (that just lists pages!) function without much control on what was shown, and only being able to adjust the orders of the pages by entering a number into a clunky text box.

Now you can easily create drag-and-drop menus with custom links place anywhere within the navigation. This enables users to:

Nest pages and links that don’t already have parent-child relationships in the Page hierarchy.
Use different names for the pages in the navigation (handy if you want to call the ‘About’ page ‘Home’ in the navigation.
Link to pages on totally different websites.

WordPress menus in action

All these functions are perfect for users who don’t want to get their hands dirty in the PHP files and make it easier for theme developers as they just need to add the menu function to their functions.php file and use the right template tag to include the customised menus in their themes.

add_action( 'init', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'navigation-menu', __( 'Navigation Menu' ) ); }

Add this to the functions.php file to register a menu by the name of ‘Navigation Menu’

<?php wp_nav_menu( array( 'theme_location' => 'navigation-menu' ) ); ?>

Add this to the template file wherever you want to include the menu.

Custom backgrounds and headers

For theme creators making themes for a wide user base, custom backgrounds and headers are very useful. Most of the big name theme producers have offered custom backgrounds and headers as part of their ultra-sexy, ultra-customisable themes for a long time but now the smaller scale theme developers can do this by adding some extra functions to their functions.php file and into the relevant template files.

I haven’t tried creating a theme with these features yet, as I tend to give my clients one custom-created choice as part of the web design, but you can see custom backgrounds and headers in action in the new default theme, TwentyTen, which I use on this blog. You should be able to see that big yellow block at the top of the page. This is a custom header image I created and uploaded using the settings under Appearance > Header.

As you can see from my image below, it’s incredibly easy to upload your own header or you can pick from one of the beautiful photographs taken by Matt Mullenweg, the creator of WordPress.

Custom headers in WordPress 3.0

If you want to know more about using custom backgrounds and headers, I’d recommend taking a look at the reasonably well-commented code in the TwentyTen theme. Unfortunately I haven’t got any other recommended bookmarks for this yet, I hope you’ll forgive me!

Change in design

TwentyTen

WordPress 3.0 also comes with a cool new default theme called TwentyTen. It was getting to the point where no decent blog would be seen dead in the old WordPress default theme, so it was definitely in need of change.

TwentyTen is clean and simple (and the theme I use on my blog) and takes advantage of the custom backgrounds, headers and menus to make it easy to change the look and feel without having to get into the CSS.

TwentyTen default theme preview

If you want to try TwentyTen out, you can find it in the WordPress theme repository and through the Themes > ‘Install’ section in your WordPress admin by searching ‘twentyten’.

WordPress admin realign

If you follow me on Twitter, you might have heard me whining a bit about the new WordPress admin realign. I’ll call it a realign as they’ve only made some changes, not redesigned the lot.

The idea behind these changes is that it brings the content into focus, and it is more legible to read dark text on a light background so it makes the WordPress admin, which is now entirely dark on light, more accessible.

WordPress 3.0 admin

I have the utmost respect for those working on the WordPress admin interface, and have briefly discussed the decisions with John O’Nolan, member of the Core WordPress UI Team, on Twitter. I appreciate their reasons behind the changes and that it must be very difficult to please everybody in these scenarios. (Here comes the but)

But I find the new admin harder to use, and I don’t believe it is out of a lack of familiarity. Here are my reasons:

There is a general lack of contrast across all the admin

It is all dark grey against white and light grey backgrounds separated by light grey border lines. My eye isn’t drawn to any different elements anymore, it doesn’t suggest so strongly where I am or where I should go first. I’m an idiot and need to be led!

When you select the title text box when creating a new post, the label for the text box disappears

Um, what does that empty box do again? (title input in editor)

If you have cognitive issues, I can’t see how this is accessible. Chances are, you’ll select that first input box available and then be clueless about what that box is for. The label-in-an-input-box isn’t yet a strong-enough standard to make it obvious that you need to deselect the text input. It’s more of a consistent pattern for search input boxes, where the function is made obvious by the accompanying presence of a ‘Search’ button.

I find dark grey a really peculiar choice of colour for an alert

Grey alert bubble

This little alert that lets you know if you have comments, or need to update your plugins or WordPress installation, used to be orange. Orange stood out against the mostly white/grey/blue colour scheme and was clearly there to be noticed. Orange signifies something to be aware about, not quite red being something dangerous but not green for ‘everything is fine’. Even though this new alert style is a reversible of the dark-on-light text shown everywhere else, I think it’s a very unusual choice to have something less colourful for an alert.

To be fair these changes haven’t made the admin unusable. I am being picky. It would be very difficult to undo all the great work of Jane Wells and the UI team since WordPress 2.7.

This post has three parts. This is part three. Visit the other parts below:

Part 1: WordPress 3.0—Pre 3.0 and Beyond
Part 2: WordPress 3.0—Really WordPress 3.0

One comment

pronebird
at 19:44pm

The dark gray is not flaring but better than annoying orange(maybe even closer to red) that was before, in WordPress 2.6.

Read the original post, ‘WordPress 3.0 Part 3—Theme Development and the Design’.

WordPress 3.0 Part 2—Really WordPress 3.0

Fri, 16 Jul 2010 21:50:50 +0000

This post has three parts. This is part two. Visit the other parts below:

Part 1: WordPress 3.0—Pre 3.0 and Beyond
Part 3: WordPress 3.0—Theme Development and the Design

Really WordPress 3.0

Custom Post Types

Custom Post Types are my new best friends. I have used new post types on every client project since the beta of WordPress 3.0. That’s how valuable I think they are.

For any content that you need to act like a post, but not actually be a post, custom post types are there for you. If you already have a news section that uses posts, but also want an articles section separate from your posts, custom post types are what you need.

One of my latest site designs, stuartclayton.com, I used no fewer than four different custom post types:

Custom post types menus in use in the WordPress admin

Discography

It’s pretty self-explanatory, I used the custom post types to list a new CD in each post.

Books

Each one of Stuart’s books has its own post in the ‘Books’ post type.

Features

This is a bit less obvious. In the sidebar or footer on every page is a feature that shows a latest book, video or audio track.

For this I used a custom post type of ‘Feature’ with a featured image to show the image and using the title and text content (even though it’s very little text) as standard. The ‘Buy Now’ button is created by entering a URL and button text into a custom write panel (also known as meta boxes.)

Gear

The gear is pretty special as I made use of a ‘Gear’ custom post type with a ‘Type of gear’ custom taxonomy. You certainly couldn’t do that a few versions ago!

Types of gear custom taxonomy panel

Each item of musical gear that Stuart has is (or will be) listed under the ‘Gear’ section. Then to group the different gear by whether it’s a bass, an amp, strings or effects, a category-style custom taxonomy is used. This helps dictate how the pages are laid out.

I struggled a bit with custom post types at first. I think it It was probably because the developers hadn’t quite ironed out all the quirks and I was too keen on trying out everything during the beta. I could create custom post types that showed up in the admin with no problem, but had issues with choosing which features showed in the editors.

If you, like me, get a bit confused with the huge amount of options for custom post types in the functions.php file, I really would recommend you give Custom Post Type UI by WebDevStudios a go. This excellent plugin does just what you would do in your functions.php file but gives it a friendly checkbox and text input interface in your WordPress admin so you needn’t write any code.

Custom Post Types UI in action

For those that more confident, these are the best resources I’ve found on creating custom post types straight into your themes (or plugins):

Custom Post Types in WordPress by Justin Tadlock (I know, I’m a fan!)
Custom Post Types on the WordPress Codex
How to add a custom icon to your custom post type by Ptah Dunbar

loop.php and other Template Parts

A change in WordPress 3.0 that I’m a bit confused about is the template parts, which separates the WordPress loop into its own file, loop.php. It is certainly not necessary to do this in order to make your WordPress theme work, and the idea behind doing this is that you can now easily separate repeatable parts of your templates into different files and call them when you need them, thus preventing you repeating yourself many times in one file and needing to edit the same repeated line of code multiple times just because you want to change a few characters.

However, the implementation of this in the new default TwentyTen theme seems to contradict this non-repetitive, breaking up into digestible chunks, sensibility. Apologies for the huge amount of code that follows:

<pre class="brush:php">can be overridden in child themes with loop.php or
 * loop-template.php, where 'template' is the loop context
 * requested by a template. For example, loop-index.php would
 * be used if it exists and we ask for the loop with:
 * <code>get_template_part( 'loop', 'index' );</code>*
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?&gt;

max_num_pages &gt; 1 ) : ?&gt;</pre>
<div id="nav-above" class="navigation">
<div class="nav-previous">← Older posts’, ‘twentyten’ ) ); ?&gt;</div>
<div class="nav-next">→’, ‘twentyten’ ) ); ?&gt;</div>
</div>
<pre class="brush:php">
<div id="post-0" class="post error404 not-found">
<pre class="brush:php">
<div id="post-&lt;?php the_ID(); ?&gt;">&gt;</p>
<h2 class="entry-title"></h2>
<p>


<div class="gallery-thumb">$post-&gt;ID, ‘post_type’ =&gt; ‘attachment’, ‘post_mime_type’ =&gt; ‘image’, ‘orderby’ =&gt; ‘menu_order’, ‘order’ =&gt; ‘ASC’, ‘numberposts’ =&gt; 999 ) ); $total_images = count( $images ); $image = array_shift( $images ); $image_img_tag = wp_get_attachment_image( $image-&gt;ID, ‘thumbnail’ ); ?&gt;</div>
<p>
<p>
<div class="entry-utility"><span class="meta-sep">|</span> <span class="comments-link"> </span> | <span class="edit-link">‘, ‘</span>‘ ); ?&gt;</div>
<p>
<pre class="brush:php">
<div id="post-&lt;?php the_ID(); ?&gt;">&gt; 

→’, ‘twentyten’ ) ); ?&gt;</div>
<p>
<div class="entry-utility"><span class="meta-sep">|</span> <span class="comments-link"> </span> | <span class="edit-link">‘, ‘</span>‘ ); ?&gt;</div>
<p>
<pre class="brush:php">
<div id="post-&lt;?php the_ID(); ?&gt;">&gt;</p>
<h2 class="entry-title"></h2>
<p>

→’, ‘twentyten’ ) ); ?&gt; ‘</p>
<div class="page-link">‘ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ =&gt; ‘</div>
‘ ) ); ?&gt;
</div>
<p>
<div class="entry-utility"><span class="cat-links"> Posted in</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-cat-links’, get_the_category_list( ‘, ‘ ) ); ?&gt; <span class="meta-sep">|</span> <span class="tag-links"> Tagged</span> %2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-tag-links’, $tags_list ); ?&gt; <span class="meta-sep">|</span> <span class="comments-link"> </span> | <span class="edit-link">‘, ‘</span>‘ ); ?&gt;</div>
<p>
<pre class="brush:php">
<div id="nav-below" class="navigation">
<div class="nav-previous">← Older posts’, ‘twentyten’ ) ); ?&gt;</div>
<div class="nav-next">→’, ‘twentyten’ ) ); ?&gt;</div>
</div>
<pre class="brush:php">```

If you wade through the code above, you might notice that the loop is cycling through special displays for a gallery category, an asides category, the archives and search, and then all other posts.

This seems utterly bizarre to me. Why, in an exercise that is aimed at splitting the code into manageable chunks are they lumping all of these different outputs into one new file? According to the [Template Hierarchy](http://codex.wordpress.org/Template_Hierarchy#Category_display), you could have separate template files for

* a category named ‘gallery’ (category-gallery.php)
* a category named ‘asides’ (category-asides.php)
* an archive page (archive.php)
* and search results (search.php.)

Leaving all other posts happily served by index.php. This would keep your templates separate and easy to read as well as stopping WordPress having to cycle through all of those conditional options by just hitting the relevant template first.

As I’ve said before, I’m no PHP developer, but if somebody could explain the logic of this particular loop.php file to me, it’d make me feel a lot happier!
---

This post has three parts. This is part two. Visit the other parts below:

* Part 1: [WordPress 3.0—Pre 3.0 and Beyond](/wordpress-3-0-pre-3-and-beyond)
* Part 3: [WordPress 3.0—Theme Development and the Design](/wordpress-3-0-theme-development-and-the-design)

## 6 comments

<ol class="commentlist">
	<li class="comment even thread-even depth-1" id="li-comment-19">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn">benmckenna</cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-19"><time datetime="2010-07-16T21:02:38+00:00" pubdate class="published">
		 at <span class="hours">21:02pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@laurakalbag 3 is great isn’t it? First real play this week and it’s so much less hacky it’s unreal. Now for the arduous client upgrades :-/
	</div>
	<ul class="children">
		<li class="comment odd alt depth-2" id="li-comment-20">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn"><a href='http://twitoaster.com/laurakalbag/' rel='external nofollow' class='url'>laurakalbag</a></cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-20"><time datetime="2010-07-16T21:09:38+00:00" pubdate class="published">
		 at <span class="hours">21:09pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@benmckenna it’s really cool. Shouldn’t be too troublesome with auto-upgrades and backwards compatibility.
	</div>
	<ul class="children">
		<li class="comment even depth-3" id="li-comment-21">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn">benmckenna</cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-21"><time datetime="2010-07-16T21:11:09+00:00" pubdate class="published">
		 at <span class="hours">21:11pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@laurakalbag yep, just trying to leave a sensible period for plug-ins. I went a bit plug-in crazy one one in particular
		</div>	



</li>
	<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-22">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn">nevillestclair</cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-22"><time datetime="2010-07-16T21:08:04+00:00" pubdate class="published">
		 at <span class="hours">21:08pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@laurakalbag Nice little précis of 3.0 stuff there. Ta for that. &lt;3 custom posts.
	</div>
	<ul class="children">
		<li class="comment even depth-2" id="li-comment-23">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn"><a href='http://twitoaster.com/laurakalbag/' rel='external nofollow' class='url'>laurakalbag</a></cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-23"><time datetime="2010-07-16T21:10:33+00:00" pubdate class="published">
		 at <span class="hours">21:10pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@nevillestclair ooh, posh words. Thanks :) Custom posts are &lt;3 &lt;3 &lt;3
	</div>
	<ul class="children">
		<li class="comment odd alt depth-3" id="li-comment-24">
			<div class="comment-author vcard">
			<img alt='' src='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=72&amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/d281a23b55db2b3d1d6b0be43791bf6b?s=144&amp;d=mm&amp;r=g 2x' class='avatar avatar-72 photo' height='72' width='72' /><cite class="fn">nevillestclair</cite>
				<aside class="comment-meta commentmetadata"><p><a href="#comment-24"><time datetime="2010-07-16T21:16:12+00:00" pubdate class="published">
		 at <span class="hours">21:16pm</span></time></a></p>
	</aside>
	</div>
	<div class="comment-entry">
		@laurakalbag Any excuse to do diacritical marks on letters :p
		</div>	



</li>
</ol>

Read the original post, ‘WordPress 3.0 Part 2—Really WordPress 3.0’.

WordPress 3.0 Part 1—Pre 3.0 and Beyond

Fri, 16 Jul 2010 21:49:42 +0000

This post has three parts. This is part one. Visit the other parts below:

Part 2: WordPress 3.0—Really WordPress 3.0
Part 3: WordPress 3.0—Theme Development and the Design

I’m a big fat WordPress fan. I love the people behind it, I love the ethicsand I love how it makes it easy for me to make cool sites that my clients can update themselves.

Not really being much of a PHP developer, I can still get by and can make fairly capable themes from-scratch for my clients. However, it was getting to the point where I couldn’t offer clients an easy way to input content that wasn’t a standard page or a standard blog post without getting a bit hacky with posts, categories and tags.

These solutions were OK, but really far too much of a workaround for clients who were only fairly basic computer users in the first.

Then along came the wondrous…

WordPress 3.0

Actually, it started a bit before that with WordPress 2.9 with the infinitely useful post thumbnails.

Featured Images

But I’ll carry on by calling ‘post thumbnails’ by their new name, ‘featured images’, as this is what they’ve become known as since WordPress 3.0.

Featured images were a selling point in many magazine-style themes for a long time. The ability to have an image that was a visual representation of a post was incredibly sought-after, especially if those images could also be shown in some kind of javascript carousel that rotated the images on the front page of the site. As a result, a huge amount of post-image carousel-type themes exist using all kinds of hacky ways to select a post’s image as the ‘featured’ one.

I used the excellent Get The Image plugin by (the equally excellent) Justin Tadlock when I wanted to use a featured image in a theme. Get The Image cycled through images linked to your post through custom fields, then through the attachments to the post, and even setting a default image, making it really easy to implement featured images in a way that all clients could understand. I still would recommend Get The Image if you want to pick images straight from your posts, rather than setting a specific featured image.

However, setting a specific featured image couldn’t be easier, and I see very few occasions where it wouldn’t be perfect for the job.

First, you’ll need to enable featured images in your functions.php file. This prevents a ‘Featured Image’ box appearing in themes which don’t support the use of featured images (which could cause a lot of confusion for users.) All this requires is a little:

add_theme_support( 'post-thumbnails' );

Then you can see the Featured Image box appear in your post and page editors.

The image selection process is identical to that of adding standard images into the post. You can choose to select from your computer, from a URL or from the Media Library. All you need to make sure is that, instead of hitting the ‘Insert into Post’ button, you select ‘Use as featured image’.

Ensure you select ‘Use as featured image’

If you only want to allow Featured Images for posts in your theme, you can specify this through:

add_theme_support( 'post-thumbnails', array( 'post' ) );

Or for just pages:

add_theme_support( 'post-thumbnails', array( 'page' ) );

Then when it comes to including the Featured Image in your theme, you’ll just need to include:

<?php the_post_thumbnail(); ?>

Really nice and simple!

Even better, you can have more fine-grained control over the sizes of the images, and have different types of image sizes through a few more lines in your functions.php file:

set_post_thumbnail_size( 100, 100, true );
// Set the standard size for your featured images

add_image_size( 'magazine-column-image', 400, 300 );
//Specify a custom image size, you can do this as many
times as you want

This is great if you want to output small thumbnail images on your homepage template and large feature images on your article pages.

For more depth on featured images I recommend you read Mark Jaquith’s pro writeup New in WordPress 2.9: Post Thumbnail images.

Custom Taxonomies

As early as WordPress 2.8 also came custom taxonomies, a sneak peek into something beyond bloggy categories and bloggy tags. For those who blog on specialist subjects you can do without categories and have different hierarchical taxonomies (category trees to people like me), such as ‘genres’ for your film reviews.

If you wanted to tag your film reviews with different actors names, but still keep standard tags to describe your review, you can do this. If you still wanted to organise your fashion blog by different types of articles, using categories, but also wanted to choose from a list of items of clothes to describe your article, you can do this as well.

These are a bit trickier to implement than post thumbnails. Not much, but there’s a bit more to explain in the functions.php file, so if you want to know more I’d recommend that you visit one (or all) of the fantastic resources that I use, below:

1.Custom Taxonomies on the WordPress Codex 2. Custom Taxonomies in WordPress 2.8 by Justin Tadlock 3. Creating a page template that lists all your custom taxonomies by Justin Tadlock 4. Introducing WordPress 3 Custom Taxonomies on NetTuts

This post has three parts. This is part one. Visit the other parts below:

Part 2: WordPress 3.0—Really WordPress 3.0
Part 3: WordPress 3.0—Theme Development and the Design

2 comments

bookmeister
at 21:13pm

@laurakalbag good effort on the wordpress blog posts. You could write a book :-)
- laurakalbag
  at 21:17pm
  
  @bookmeister thanks but barely! You see how much the language plugin shouts at me. Apparently I can barely string a sentence together ;)

Read the original post, ‘WordPress 3.0 Part 1—Pre 3.0 and Beyond’.

HTML5 For Web Designers

Mon, 12 Jul 2010 16:29:43 +0000

Even though the specification for HTML5 isn’t yet complete, those of us who are a bit eager to get into it now have the perfect book to get us started.

HTML5 For Web Designers by Jeremy Keith is the first offering from A Book Apart. It’s a very easy read, not an endless reference, which took me a couple of hours to fully digest whilst I was enjoying the sun. They’ve been some of the first people to produce a book about HTML5 and they prove it isn’t too early to start discussing the new specification and its impact on the web.

The book is split into six chapters:

A Brief History of Markup
The Design of HTML5
Rich Media
Web Forms 2.0
Semantics
Using HTML5 Today

Starting off with a brief history of the specifications that came before, Jeremy Keith gives an explanation on how the various working groups work along with how the specifications are created. This was really enlightening and goes a long way to explain the whys of many of the choices that have been made for HTML5.

After reading HTML5 For Web Designers and listening to Molly Holzschlag‘s great talk at Future Of Web Design about the processes, blood, sweat and tears of the working groups, I feel like I’m starting to get an idea of all the politics and diplomacy that goes into these specifications and I’ve certainly gained an appreciation for the hard work that must go into them.

The phrase ‘paving the cowpaths‘ is repeated throughout the book showing how HTML5 emphasises on taking the existing practices that web developers have formed, such as having <div id="header"> and <div id="footer"> at the top and bottom of pages, and making them fully fledged parts of the specification, as in <header> and <footer> tags. It really shows that this specification is taking a really reasonable look at the web around it and taking backwards-compatibility into mind.

There’s no overly lengthy passages on musts and must-nots. Each chapter is a whistle-stop tour through a few choice elements, their implementation and how you can include them today with backwards-compatibility (and slow browser take-up) in mind. Despite the HTML examples, I wouldn’t say this was the kind of book you need to read at a desktop to try it all out. More than anything it serves to give the reader a taste of things to come and an enthusiasm for what the future will bring.

The final chapter, Using HTML5 Today, ends on realistic ways us keen developers can start using HTML5 right away. It goes to show that, with the amount of new features you can easily implement, it wasn’t too soon to have a book on HTML5 before the specification is finalised.

Jeremy Keith writes in a fun yet informative tone that makes you feel like you’re learning a lot and are part of the cool crowd with a load of webby in-jokes as well. It’s one of the first skills-based books I’ve managed to read from cover-to-cover in the last year due to its size and engaging readability. Totally recommend it.

9 comments

timperrett
at 15:34pm

@laurakalbag Have you looked at the <video> tag? Use of it so far that i’ve seen on apple.com is amazing.
- laurakalbag
  at 15:38pm
  
  @timperrett it looks so good. Being able to specify multiple backup solutions is perfect.
  - timperrett
    at 15:42pm
    
    @laurakalbag Couldn’t agree more –; it looks awesome; now we just need IE to pull up its socks and stop letting the side down ;-)
  - cssgareth
    at 15:37pm
    
    @laurakalbag Good review, thanks!
    - laurakalbag
      at 15:39pm
      
      @cssgareth thanks, I’m pleased you think so :)
      - cssgareth
        at 15:41pm
        
        @laurakalbag just waiting for my copy now…
      - Jeremy Keith
        at 23:46pm
        
        Thank you very much for those very kind words, Laura. Glad you like the book.
      - Zeke Franco
        at 22:21pm
        
        Very jealous! ;) I preordered mine, but haven’t received it yet. I think I’ll be getting it today. Very excited. Thanks for the sneak peak.

Read the original post, ‘HTML5 For Web Designers’.

Picking Fonts

Mon, 05 Jul 2010 19:23:32 +0000

This little post is an extension of my post on Web Fonts.

Of late, some of the snobbier designers are whining that more fonts available will mean the web will get covered in horrible mis-use of fonts, unreadable body text and general ugliness.

I don’t think this is totally fair, but I’m sure some people might get confused by the variety of fonts that are around, so I thought I’d share a few things I try to keep in mind when choosing fonts:

Use appropriate fonts

Easily said, I know, but some fonts are clearly more suitable for particular designs than others. For example, you wouldn’t use a font that looks like it’s dripping blood on a corporate site, and you’d not use a handwriting-style font on a site about computer programming.

If you’re aiming for clean and modern, go sans-serif. If you’re looking for a slightly more traditional feel, go serif.

Don’t use more than two fonts

With all these cool fonts around, it’s easy to go over-the-top and try out loads at once. Unless you’re going for a Victorian poster style, I’d steer clear of the multi-font look.

It’s difficult to find two fonts that match each other well. You want to look for as similar shapes as possible, round fonts with other circle-based fonts, condensed fonts with other tall, thin fonts.

If you’re really struggling to combine two, just use a different weight or style for the heading, like bold or all uppercase.

Mark Boulton covers these kinds of combinations in his fantastic book, A Practical Guide to Designing For The Web.

Keep it in the family

The easiest way to find two fonts that suit each other is to take two from the same family. These are always designed around the same shapes so you know they’ll look good next to each other. This is particularly useful if you want to mix serif and sans-serif fonts. For example, the Museo family. Museo Sans, Museo Serif and Museo Slab all look great used in any combination.

Use simple fonts for body text

Whatever you do, leave the fancy fonts for the headings. With body text (paragraph text,) you’re aiming for readability above all else. Using any kind of fancy, looping, scrawly, drippy, firey font here will make it hard to read and really distract the reader.

Use lovely long font stacks

Bear in mind that, whatever fancy web font method you use, there will always be a user that can’t see that font. It might be because their browser doesn’t have javascript turned on, or doesn’t support @font-face or doesn’t have the system font you specified. Solve this problem by using as many similar fonts as possible in your font stack.

For example, I want to use Museo Sans as my body font on this page. My code would look like:

body { font-family: "Museo Sans", "Perspective Sans", Helvetica, Arial, sans-serif; }

Typekit will provide Museo Sans for me, so I’ll put that first in my font stack.
In case the user doesn’t have javascript enabled (or uses Opera!) I’ll specify an @font-face font I found on Font Squirrel, Perspective Sans.
For the rare case that don’t support Typekit or @font-face, I’ll specify the system font Helvetica.
Just in case a user doesn’t even have Helvetica, I’ll also specify the wildly popular system font, Arial.
And for the user who for some reason has only weird fonts I’ve never heard of on their computer, I’ll specify sans-serif, so at least I know that they’re not being delivered a serif font when I really fancied sans.

Not much effort, maximum kindness to the user.

Keep the poor Windows users in mind

Whichever fonts you choose, you want to make sure it looks good in as many browsers as possible. For us lucky mac users, the fonts tend to normally look smooth and light and lovely. Unfortunately many Windows users aren’t so lucky. Craggy, pixelly and oddly squashed-looking fonts are very common.

Typodermic’s Bouffant font in Mac’s Safari (top) and Windows’ Internet Explorer 6 (bottom)

Many Windows people aren’t as fussy as me, or just don’t notice, but it’s really worth checking that what the Windows’ users see is actually legible.

This quick little guide is just the beginning of all the things I try to consider when I’m choosing fonts to use on the web. A lot of it feels automatic, but when I really think about it, there’s all sorts of rules and theory I’m trying to apply to my choices. And that’s still not saying I always get it right. To a degree, it is still a subjective choice.

4 comments

Loulouk
at 19:48pm

I’ve absolutely no clue about fonts and about to be thrown into a web dev job. To say this is helpful would be a small understatement but in lieu of gushing I’ll simply say thank you.
Laura
at 16:35pm

I’m so pleased you found it helpful! Your comment made my day :)
Clive Walker
at 12:27pm

The Windows font thing is a real bugbear of mine. I have seen lots of websites using ‘new’ fonts where the display on Windows is almost illegible. Perhaps this is because of Windows font rendering issues (ClearType vs non-ClearType vs Vista vs XP?) or perhaps the font chosen does not have very good hinting for the web, I don’t know. Either way, it seems like poor testing/implementation.
OK, rant over :-)
Yulie
at 23:29pm

Thanks Laura! Your tips are simple and to the point :)

Read the original post, ‘Picking Fonts’.

Web Fonts

Fri, 02 Jul 2010 18:12:16 +0000

I’ve got a new infatuation; web fonts. Since the second I heard about Typekit (and Fontdeck) last year I’ve been giddy with excitement about being able to use more fonts on the web. Georgia just doesn’t cut it anymore. Even the introduction of ten new fonts to shake things up would have me flustered. Here’s a brief look at my experience of web fonts over the last year or so.

@font-face and Font Squirrel

Before Typekit, the situation around the CSS @font-face declaration started getting more attention. There was good support across all major browsers (and some of the oldies like Internet Explorers 6 & 7) for this cunning little declaration that allowed you to embed any font into your website. @font-face displayed fonts like we needed, displaying as real selectable text that remains accessible and index-able by search engines.

Despite being far easier to use, and more reliable, than the truly hideous (though handy at the time) Flash text-replacement methods like sIFR and Cufón, @font-face is a bit of a pain to implement. The CSS declarations themselves are fairly simple, but the amount of different font formats you need to include is pretty insane. You need to include .eot, .woff, .ttf and .svg formats of each font face. Not to mention that there’s no piracy protection on these font faces so, not only do you have to find all those different font formats, but you had to make sure you had the rights to distribute them as well (’cause everybody knows that piracy is mean.)

Then came along Font Squirrel.

Quicksand font at Font Squirrel

A wickedly cool site that shows you a huge array of fonts that are licensed for @font-face use, complete with @font-face kits containing the fonts, the license, a demo HTML file and the CSS you need to implement great-looking web fonts using @font-face.

Font Squirrel @font-face kit download

All the files in the Font Squirrel @font-face kit

All you need to do is copy all the font files on to your site, and copy the CSS into your stylesheet:


font-family: 'QuicksandBook';

src: url('Quicksand_Book-webfont.eot');

src: local('☺'), url('Quicksand_Book-webfont.woff') format('woff'), url('Quicksand_Book-webfont.ttf') format('truetype'), url('Quicksand_Book-webfont.svg#webfontozh2o7Cr') format('svg');

font-weight: normal;

font-style: normal;

}```

and put the font into your font-family font stack:

```h1 { font-family: 'QuicksandBook', Helvetica, Arial, sans-serif; }```

## Typekit

Font Squirrel was great but as most of the fonts are free, a large amount of the fonts are lacking a bit in quality. They just lack the care and attention a font gets from a very skilled type designer.

And that’s where Typekit makes things awesome.

I rarely buy fonts. I try to get away with system fonts, or free fonts, *a lot* of the time. As I mostly work on the web, it never made sense to use fonts that weren’t web-safe. I’d only indulge in paid fonts (and still pretty cheap ones) when I was doing logo or print design. I would have loved to use the beautiful, unusual and quality fonts from proper font foundries. I subscribed to [FontShop](http://www.fontshop.com/)‘s newsletters just so I could gaze longingly at the fonts that felt too good for me.


  
    

    

    
      

      One of FontShop’s lovely e-mail newsletters

    
  


Typekit brings those to-die-for fonts from top quality foundries to the web with a teensy bit of javascript. Typekit showcases [some of the most stunning fonts](http://typekit.com/foundries/veer) I’ve ever seen and allows you to use them on your site in a way that is quick and easy, but still preserves the licensing and distribution control that the foundries and font designers need to keep them going.


  
    

    

    
      

      Proper nice fonts from Typekit

    
  


Since Typekit has launched, they have added loads more fonts, and they just keep getting better. The libraries are easy to browse, using tags and your own text samples, and you can even view browser samples of each font so you can see how bad it’s going to look in Windows’ browsers ;)


  
    

    

    
      

      Typekit preview of Atrament Web on Windows XP Internet Explorer 6

    
  


I use Typekit on my personal site, and this blog, and an increasing amount of client sites. The only downside is that, because the fonts are only licensed for the web, you can’t use them in Photoshop mockups or logo designs unless you buy the correct licensed version. However, if you’re like me, and trying to design in-browser more often, it’s absolutely perfect from start to finish.

## Google Web Fonts, Fontdeck and Fonts.com

There are other services around offering the same kind of solution as Typekit. One is [Google Web Fonts](http://code.google.com/webfonts), [who are working in collaboration](http://blog.typekit.com/2010/05/19/typekit-and-google/ "Typekit and Google Announce Open Source Collaboration") with Typekit, and another is Fontdeck. I haven’t got an invite to Fontdeck yet, so I reckon that one will remain a mystery for a while longer, and I took a quick look at Google Web Fonts, which only serves open source fonts, and it looks pretty similar to Typekit but only has a limited amount of fonts at the moment.


  
    

    

    
      

      Google Font Directory

    
  


I had a quick go on [Fonts.com web fonts](http://webfonts.fonts.com/), and whilst the site design is a bit much, the service seems reasonable. It was a very straight-forward process picking and publishing the font I’d chosen to a site. However, the rendering of the font (Century Gothic) looked awful on Windows, despite being a system font that usually looked pretty decent. I’m not assuming that this is the situation with all fonts on Fonts.com, but not being able to preview it cross-browser at a glance seems like a disadvantage after the excellent previews on Typekit.


  
    

    

    
      

      Fonts.com Web Fonts using about a million fonts

    
  


Overall, my preferred web font solution is definitely Typekit. The exciting thing is that new solutions keep popping up all time, so I’m sure the best is yet to come. For now, I have to do a complicated mix of Typekit, @font-face and standard system fonts to cover all bases so I’m really looking forward to the day we have a robust solution that does it all for me!

Read the original post, ‘Web Fonts’.

Autodesk SketchBook Pro

Sat, 19 Jun 2010 13:19:16 +0000

I’ve always been a kind-of arty person. I took Art at school, did an Art Foundation and a Graphics degree. I totally loved art when I was small, but as I’ve got older, and more technology and web-obsessed, a lot of the old media went a bit out of the window.

Though I was still loving wireframing and taking notes by hand, I just threw all the paints out in frustration at how slow and difficult they were.

I’d seen the iPad apps available before launch, and Autodesk’s SketchBook Pro caught my eye. The idea of drawing on-screen is pretty appealing (I never really got the hang of the chunkiness of the Wacom tablet) and SketchBook Pro is better than I expected.

This is my most recent drawing:

I was sitting at the fishing lake at Longleat, sketching from a photo in Matt’s fishing magazine whilst he fishes. (And using the WordPress app for writing this, but that’s a story for another time.) Asides from the sunlight making it a bit tricky to see anything other than my greasy fingerprints, it felt incredibly natural painting with my finger. Some clever person has probably come up with a way of using a stylus but I think that might spoil some of the charm. Finger painting is a bit thick, blobby and impressionist. I’m actually surprised by how much this looks like if I’d painted it in acrylics.

SketchBook Pro uses gestures as naturally as any native iPad app. You use 3-finger tap to open the tools, 2-finger pinch and drag for resizing and moving the canvas on the screen (so you can zoom for the fiddly bits) and a 3-finger left-to-right drag to undo your last marks (and right-to-left for redo.) I’m usually a bit rubbish at remembering all these kind of gestures but they just feel so right that it’s easy.

The capabilities of the tools are just amazing for an iPad app.

The Brushes palette

The amount of elements you can combine to create your own style and perfect the texture and colour you want are just incredible. I’ve not even tried everything yet, but some of my favourite elements are:

Radius—for going from the rough fat splodges to the tiniest little pixels, this gives you very fine-tuned control though it can be tricky to accurately choose the right radius with the small slider (despite my little fingers)
Opacity—opacity of your brush. I reckon it’s best used at less than 100% to give a more realistic painting effect, the more solid your brush, the more it’ll look like an old-school MS Paint picture!
Type of brush—I’ve been sticking with this fine paintbrush style for now. It’s a very predictable, softish round brush.
Colour palette—colour selection that beats Photoshop. It’d be great to have an interface this good for Photoshop. You can be so specific in your colour choices and easily change by Hue, Saturation or Tone which is great if you’re creating gentle gradations.

The incredible Layers feature

You can only have five layers, but you can merge your layers together when you’ve used all five to give you more control over editing work on a new layer.

In my fish picture, I started with some basic line-drawing and blocking out colour. Then on a layer above, I gave it a wash of light yellow with a big fat, mostly transparent, brush and set that layer to 50%. This made that wash more subtle, then I merged the layer down (I knew I wouldn’t need to finely edit this rough stuff later) to make my basic base layer.

The next layer I used to add some more fiddly detail and shadow. I kept this separate from the layer below for if I wanted to go back and erase parts without wiping my base layer.

Then over the top, I tried to make the detail a bit more subtle and give the fish a slightly more realistic 3D multi-coloured appearance.

I’m pretty pleased with the overall effect and I’ll definitely keep trying to practice drawing and sketching.

There are other features of SketchBook Pro as well! My sister liked the mirrored setting and another friend made a great landscape using textured brushes for plants and flowers. I’ll also be looking out for further Autodesk apps as they seem to have the iPad interface totally nailed.

If you fancy getting a bit creative on the iPad, go download SketchBook Pro from the App Store. At £4.99 it’s a steal. The amount of thought and skill gone into the user experience of the app makes it worth far more, and undoubtably more than many higher-priced apps.

2 comments

Tim Jinkerson
at 10:53am

Wow –; I am always in awe of people that can produce pictures that look both detailed and pleasing. It’s a real gift. And to produce something that looks so like a drawing on a screen if amazing, you are so talented. I know a lot of artists shrug off what they do, but to a non-artist, this sort of thing seems like a mystical magic.
jenny
at 13:01pm

What a lovely tutorial, i stumbled over this looking for help with fonts but i’m so glad I did. Very well written and illustrated. I also am an artist and recently got an iPad and you have inspired me so thank you. I need to get back into my art and you have given me that push :)

Read the original post, ‘Autodesk SketchBook Pro’.

Open In A New Window

Wed, 16 Jun 2010 14:40:42 +0000

I’ve been working with a client who wants every external link on their site to open in a new window. They dislike the idea of users leaving their site for somebody else’s and not being able to find their way back.

I understand their concern. I really do. It seems like a perfectly rational feeling but there are a few reasons why this generally isn’t the right thing to do.

The Back button is the second most-used form of navigation.

If a user wants to go back to your site, they can. If you open in a new window or tab, you make the ‘Back’ button useless. Don’t treat your users like they’re idiots that need to be led-around by the nose. (It helps to be helpful, but not patronising!)

By opening a link in a new window, you’re not giving the user any other choice.

This is my personal pet hate. If I want to open a link in another window or tab, I can do so easily by right-clicking the link and selecting that option (and I’m sure there’s numerous shortcuts for such behaviour.) However, if you specify that the link must open in another window, there’s nothing I can do about it. You shouldn’t force users into situations that are uncomfortable against their usual browsing patterns. They will end up associating that discomfort with your site.

Some users just won’t understand what’s happening.

As more and more people get cheap access to the internet, there will be more users who have very basic skills, aren’t wholly computer-literate, but will browse your site anyway! If you’d never used a computer before, and were presented with a link that opened in a new window, are you sure you’d understand what just happened? These users may not understand that they’re now in a new window or tab. They’ll have a great big ‘Back’ button screaming at them, not a ‘Close this window or tab and then select the relevant window or tab to view it again’ button.

There’s no guarantee that, when the user closes that window, they’ll go back to your site.

If I open a page in a new tab on Safari, it gets added to the end of my list of tabs. If I’ve already got another tab open that has the BBC website in, when I close the new tab, it’ll go back to the BBC website, not your website.

It’s irritating for mobile browsers.

Some mobile browsers may just ignore your ‘Open in New Window’ suggestion as they don’t support multiple windows. If you’re browsing using Mobile Safari, it will do this very dramatic shrink-this-window open-another-window animation. The back button is much less fiddly. People using mobile browsers are more likely to be on-the-go and less likely to put up with switching windows all the time when browsing your site.

Please be considerate of your users, and don’t treat them like they don’t know what they’re doing. For those that really don’t know what they’re doing, keep it simple. If users remember yours as the site that was easy to use, that’s going to make you a lot more popular than forcing them to look at your content ever will.

Some other handy articles I found on this subject:

6 comments

ChrisC
at 14:55pm

I can’t believe a client would suggest that, personally I’d hammer hard to explain that it’ll drive people away rather than keep them there.
I always remember the story of old people, they think when a new window opens the other one closes. So they’ll never work out whats going on!
Tom
at 15:02pm

Interesting article, to the point and very good points… only one I slightly disagree or maybe differ on is the opening in new windows on safari/iPhone, if I’m googling and on the move I tend to open everything in a new window so I don’t have to go back to the previous page and load it again… often takes ages if the connection is bad so I tend to be window crazy!
Good stuff! =0)
- Laura
  at 15:44pm
  
  Actually sometimes I do that as well! Still, I think that, like opening new windows on a desktop browser, the important part is that you choose to do it rather than being forced to do it!
- Levisan
  at 17:49pm
  
  Well, now that I finally understand the other side of the argument, I think I’ll get rid of the opening of new windows for my site.
  - Laura
    at 17:58pm
    
    Wow, I’m well pleased I managed to convince somebody :)
  - jitendra vyas
    at 06:17am
    
    Even if your client still want link to be open in new window. You can give clue to sighted and non-sighted user both by appending this to link “World Wide Web Consortium (links to external site)”

Read the original post, ‘Open In A New Window’.

Zootool — The best and most beautiful tool for storing inspiration

Thu, 10 Jun 2010 21:39:32 +0000

Since I started using Zootool in March I’ve been totally addicted.

I’d been looking for a scrapbook-style app, to stash all the inspiration I find, for a while. On cool sites like Dribbble, Drawar, FFFFound and all over the web, I’m always finding pretty things I’d like to keep and use when I’m designing later on.

I was trying to do this with Little Snapper but found, whilst it’s great for posh and annotated screenshots, it wasn’t quick enough to capture and file the images and sites that I’d found. Previously I’d also tried Flickr, Skitch and even just saving image files in a folder on my hard drive. All were a nightmare to maintain and find the images after I’d stored them. Then a little ad with a pretty rhino popped up in Tweetie’s Fusion ads *.

Zootool captured me from the beginning with the mac-like, slick and incredibly useful interface. The lovely woodiness doesn’t look tacky, all the buttons and form elements work exactly as you expect. And it is unbelievably quick to capture an image, video, page or document using the bookmarklets provided and then get back to what you’re doing.

And once you’ve got a cool collection of images in your cutely named ‘Zoo’, you can browse by category, tag or just search to find them again. All in an interface that feels like a desktop app but in-browser.

It’s not really restricted to scrapbook-style use either. I was surprised to find that other people use it for just saving funny videos (my tunnel vision just saw how perfect it was for saving lovely pictures and thought everyone would use it for that) and you can import all your Delicious bookmarks to use it as a visual bookmark browser.

The amount of tags can feel restrictive, as it’s only ten per item, but then again I’m a taxonomy addict. I’ve started using a tag of @origin (@dribbble, @ffffound, @twitter) as well to make sure I remember where I found the image or site in the first place in case I need to give proper attribution.

Zootool also has special versions for iPhone and iPad (though for some reason I can’t scroll on the iPad version,) where native mac-ness of the design is really clear, there’s a Flickr-style badge that’s perfect for a blog (see below!) and you can even also use Fluid app to pretend it’s a real desktop app whenever you’re connected to the internet. I use Fluid with the MobileMe Olive theme that looks lovely against the Zootool design.

Note: I was really lucky to meet Bastian Allgeier, the creator of Zootool, at Future Of Web Design this year and tell him how much I love it, and great to see his hard work acknowledged by Jon Hicks on stage.

* I keep the ad-supported version of Tweetie for this reason, the ads are usually for top-quality, useful products.

3 comments

mark
at 00:26am

Nice little tool, never seen it before.
Have you seen evernote? It’s very big, mac friendly, desktop and web based snippet storage app
- Laura
  at 00:34am
  
  Yeah, I’ve used Evernote a bit but not really their web clipper (what I love so much about Zootool.)
  
  Evernote has got prettier over the last few updates. And its iPad app has made me think it’s got huge potential as a general notebook app.

Read the original post, ‘Zootool — The best and most beautiful tool for storing inspiration’.

Promises

Thu, 10 Jun 2010 12:09:54 +0000

Well, I’ve got a blog.

This is not a promise, but I will attempt to post some stuff focussing on quality over quantity. I’m thinking some of the more useful resources I come across; probably lots on WordPress, maybe a bit on mobile design, I’ve got a rant about HTML brewing somewhere too.

I apologise in advance for my embarrassing command of the English language and grammar.

I’m actively not going to bother designing it as nothing will ever happen if I do. The lovely clean design is that of WordPress 3.0‘s Twenty Ten with some yellow (ok, I might have made that bit) and some Typekit as I’m addicted to this new-found font variety. ## 2 comments

Scott
at 13:56pm

WOOO!
This are dery dery velpful articuals. I read it all. And den read it again. And then pretend I share with friends. Here… HAVE SOME LINKS THAT DON’T RELATE TO THE ARTICLE!

LINK LINK LINK
- Scott
  at 13:57pm
  
  Ok, my “spam” tags got removed thus killing the joke!

Read the original post, ‘Promises’.

Laura Kalbag

Web3: creating problems where we need solutions

Get on the Path to Accessible and Inclusive Design

Winter catchup

Remove Trackers (on CSS Tricks).

In related news…

Speaking at Smashing Meets on 9th February.

Working with Stately

Small Technology Foundation as a NACWG Case Study

Small is Beautiful

Write-only Twitter

The power of CSS pseudo classes

The problem with user stylesheets

A solution to target specific websites

How the stylesheet works

Write-only Twitter

Read-some Twitter

Where to find the stylesheets

Safety at conferences

I don’t feel safe at conferences

What can conferences do to improve our safety?

At the conferences themselves

For non-organisers

A little site update

Site.js and the starter theme

What has changed?

January update

Site.js starter theme

Pretty good defaults

Ambition pared back

Better Blocker

Accessibility in 2020

CSS Naked Day 2020

What’s the point?

You should give it a try!

Smashing Podcast Episode 13: What is online privacy?

How to read RSS in 2020

What is RSS?

The benefits of RSS

Feed readers

Some feed reader recommendations

Accessible unethical technology

Unethical technology discriminates against disabled people

Presentable Live panel at New Adventures Conference

I don’t track you

The future of Better Blocker

Blocking rule updates

Blocking rules in 2020

Thank you to our supporters

Closing the Ind.ie forum

Looking for Better support?

Anonymous support requests

4.5 years is a long time on the web

I’m a little bit sad

People, not brands

It’s Time To Get Personal on 24ways

A belated introduction to Small Technology Foundation

A new name?

What is small technology?

What is the foundation?

Not. for. profit.

Introducing Laura’s Lens

What’s mine is mine and what’s ours is his

My lens means what’s important to me

Like the lens? Fund us!

Why much of the internet is closed off to blind people

Where I’m speaking in Summer/Autumn 2019

Loupe

State Of The Browser

Accessibility Scotland

This One Weird Trick Tells Us Everything About You: In Print!

Smashing TV Livestream: Towards Ethics & Privacy By Default

This One Weird Trick Tells Us Everything About You

Great speakers from Think About conference 2019

Linda Rising

Eriol Fox

Aly Blenkin

Ryn Daniels

Eileen Wagner

Vimla Appadoo