Journal tags: photos

8

sparkline

Alt writing

I made the website for this year’s UX London by hand.

Well, that’s not entirely true. There’s exactly one build tool involved. I’m using Sergey to include global elements—the header and footer—something that’s still not possible in HTML.

So it’s minium viable static site generation rather than actual static files. It’s still very hands-on though and I enjoy that a lot; editing HTML and CSS directly without intermediary tools.

When I update the site, it’s usually to add a new speaker to the line-up (well, not any more now that the line up is complete). That involves marking up their bio and talk description. I also create a couple of different sized versions of their headshot to use with srcset. And of course I write an alt attribute to accompany that image.

By the way, Jake has an excellent article on writing alt text that uses the specific example of a conference site. It raises some very thought-provoking questions.

I enjoy writing alt text. I recently described how I updated my posting interface here on my own site to put a textarea for alt text front and centre for my notes with photos. Since then I’ve been enjoying the creative challenge of writing useful—but also evocative—alt text.

Some recent examples:

But when I was writing the alt text for the headshots on the UX London site, I started to feel a little disheartened. The more speakers were added to the line-up, the more I felt like I was repeating myself with the alt text. After a while they all seemed to be some variation on “This person looking at the camera, smiling” with maybe some detail on their hair or clothing.

  • Videha Sharma
    The beaming bearded face of Videha standing in front of the beautiful landscape of a riverbank.
  • Candi Williams
    Candi working on her laptop, looking at the camera with a smile.
  • Emma Parnell
    Emma smiling against a yellow background. She’s wearing glasses and has long straight hair.
  • John Bevan
    A monochrome portrait of John with a wry smile on his face, wearing a black turtleneck in the clichéd design tradition.
  • Laura Yarrow
    Laura smiling, wearing a chartreuse coloured top.
  • Adekunle Oduye
    A profile shot of Adekunle wearing a jacket and baseball cap standing outside.

The more speakers were added to the line-up, the harder I found it not to repeat myself. I wondered if this was all going to sound very same-y to anyone hearing them read aloud.

But then I realised, “Wait …these are kind of same-y images.”

By the very nature of the images—headshots of speakers—there wasn’t ever going to be that much visual variation. The experience of a sighted person looking at a page full of speakers is that after a while the images kind of blend together. So if the alt text also starts to sound a bit repetitive after a while, maybe that’s not such a bad thing. A screen reader user would be getting an equivalent experience.

That doesn’t mean it’s okay to have the same alt text for each image—they are all still different. But after I had that realisation I stopped being too hard on myself if I couldn’t come up with a completely new and original way to write the alt text.

And, I remind myself, writing alt text is like any other kind of writing. The more you do it, the better you get.

Union

The nation I live in has decided to impose sanctions on itself. The government has yet to figure out the exact details. It won’t be good.

Today marks the day that the ironically-named Kingdom of Great Britain and Northern Ireland officially leaves the European Union. Nothing will change on a day to day basis (until the end of this year, when the shit really hits the fan).

Looking back on 2019, I had the pleasure and privelige of places that will remain in the European Union. Hamburg, Düsseldorf, Utrecht, Miltown Malbay, Kinsale, Madrid, Amsterdam, Paris, Frankfurt, Antwerp, Berlin, Vienna, Cobh.

Maybe I should do a farewell tour in 2020.

Grüße aus Hamburg!

Auf Wiedersehen, Düsseldorf!

Going for a stroll in Utrecht at dusk.

The road to Miltown.

Checked in at Kinsale Harbour. with Jessica

Checked in at La Casa del Bacalao. Tapas! — with Jessica

Hello Amsterdam!

Indoor aviation.

Guten Tag, Frankfurt.

Catch you later, Antwerp.

The Ballardian exterior of Tempelhof.

Losing my religion.

Boats in Cobh.

Posting to my site

I was idly thinking about the different ways I can post to adactio.com. I decided to count the ways.

Admin interface

This is the classic CMS approach. In my case the CMS is a crufty hand-rolled affair using PHP and MySQL that I wrote years ago. I log in to an admin interface and fill in a form, putting the text of my posts into a textarea. In truth, I usually write in a desktop text editor first, and then paste that into the textarea. That’s what I’m doing now—copying and pasting Markdown from the Typed app.

Directly from my site

If I’m logged in, I get a stripped down posting interface in the notes section of my site.

Notes posting interface

Bookmarklet

This is how I post links. When I’m at a URL I want to bookmark, I hit the “Bookmark it” bookmarklet in my browser’s bookmarks bar. That pops open a version of the admin interface tailored specifically for links. I really, really like bookmarklets. The one big downside is that they don’t work on mobile.

Text message

This is something I knocked together at Indie Web Camp Brighton 2015 using the Twilio API. It’s handy for posting notes if I’m travelling somewhere and data is at a premium. But I don’t use it that often.

Instagram

Thanks to Aaron’s OwnYourGram service—and the fact that my site has a micropub endpoint—I can post images from Instagram to my site. This used to happen instantaneously but Instagram changed their API rules for the worse. Between that and their shitty “algorithmic” timeline, I find myself using the service less and less. At this point I’m only on their for the doggos.

Swarm

Like OwnYourGram, Aaron’s OwnYourSwarm allows me to post check-ins and photos from the Swarm app to my site. Again, micropub makes it all possible.

OwnYourGram and OwnYourSwarm are very similar and could probably be abstracted into a generic service for posting from third-party apps to micropub endpoints. I’d quite like to post my check-ins on Untappd to my site.

Other people’s admin interfaces

Thanks to rel="me" and IndieAuth, I can log into other people’s posting interfaces using my own website as the log-in, and post to my micropub endpoint, like this. Quill is a good example of this. I don’t use it that much, but I really should—the editor interface is quite Medium-like in its design.

Anyway, those are the different ways I can update my website that I can think of right now.

Syndication

In terms of output, I’ve got a few different ways of syndicating what I post here:

Just so you know, if you comment on one of my posts on Facebook, I probably won’t see it. But if you reply to a copy of one of posts on Twitter or Instagram, it will show up over here on adactio.com thanks to the magic of Brid.gy and webmention.

Commons People

Creative Commons licences have a variety of attributes, that can be combined together:

  • No-derivatives: the work can be reused, but not altered.
  • Attribution: the work must be credited.
  • Share-alike: any derivates must share the same licence.
  • Non-commercial: the work can be used, but not for commercial purposes.

That last one is important. If you don’t attach a non-commercial licence to your work, then your work can be resold for profit (it might be remixed first, or it might have to include your name—that all depends on what other attributes you’ve included in the licence).

If you’re not comfortable with anyone reselling your work, you should definitely choose a non-commercial licence.

Flickr is planning to sell canvas prints of photos that have been licensed under Creative Commons licenses that don’t include the non-commercial clause. They are perfectly within their rights to do this—this is exactly what the licence allows—but some people are very upset about it.

Jeffrey says it’s short-sighted and sucky because it violates the spirit in which the photos were originally licensed. I understand that feeling, but that’s simply not the way that the licences work. If you want to be able to say “It’s okay for some people to use my work for profit, but it’s not okay for others”, then you need to apply a more restrictive licence (like copyright, or Creative Commons Non-commercial) and then negotiate on a case-by-case basis for each usage.

But if you apply a licence that allows commercial usage, you must accept that there will be commercial usages that you aren’t comfortable with. Frankly, Flickr selling canvas prints of your photos is far from a worst-case scenario.

I licence my photos under a Creative Commons Attribution licence. That means they can be used anywhere—including being resold for profit—as long as I’m credited as the photographer. Because of that, my photos have shown up in all sorts of great places: food blogs, Wikipedia, travel guides, newspapers. But they’ve also shown up in some awful places, like Techcrunch. I might not like that, but it’s no good me complaining that an organisation (even one whose values I disagree with) is using my work exactly as the licence permits.

Before allowing commercial use of your creative works, you should ask “What’s the worst that could happen?” The worst that could happen includes scenarios like white supremacists, misogynists, or whacko conspiracy theorists using your work on their websites, newsletters, and billboards (with your name included if you’ve used an attribution licence). If you aren’t willing to live with that, do not allow commercial use of your work.

When I chose to apply a Creative Commons Attribution licence to my photographs, it was because I decided I could live with those worst-case scenarios. I decided that the potential positives outweighed the potential negatives. I stand by that decision. My photos might appear on a mudsucking site like Techcrunch, or get sold as canvas prints to make money for Flickr, but I’m willing to accept those usages in order to allow others to freely use my photos.

Some people have remarked that this move by Flickr to sell photos for profit will make people think twice about allowing commercial use of their work. To that I say …good! It has become clear that some people haven’t put enough thought into their licensing choices—they never asked “What’s the worst that could happen?”

And let’s be clear here: this isn’t some kind of bait’n’switch by Flickr. It’s not like liberal Creative Commons licensing is the default setting for photos hosted on that site. The default setting is copyright, all rights reserved. You have to actively choose a more liberal licence.

So I’m trying to figure out how it ended up that people chose the wrong licence for their photos. Because I want this to be perfectly clear: if you chose a licence that allows for commercial usage of your photos, but you’re now upset that a company is making commercial usage of your photos, you chose the wrong licence.

Perhaps the licence-choosing interface could have been clearer. Instead of simply saying “here’s what attribution means” or “here’s what non-commercial means”, perhaps it should also include lists of pros and cons: “here’s some of the uses you’ll be enabling”, but also “here’s the worst that could happen.”

Jen suggests a new Creative Commons licence that essentially inverts the current no-derivates licence; this would be a “derivative works only” licence. But unfortunately it sounds a bit too much like a read-my-mind licence:

What if I want to allow someone to use a photo in a conference slide deck, even if they are paid to present, but I don’t want to allow a company that sells stock photos to snatch up my photo and resell it?

Jen’s post is entitled I Don’t Want “Creative Commons By” To Mean You Can Rip Me Off …but that’s exactly what a Creative Commons licence without a non-commercial clause can mean. Of course, it’s not the only usage that such a licence allows (it allows many, many positive scenarios), but it’s no good pretending it were otherwise. If you’re not comfortable with that use-case, don’t enable it. Personally, I’m okay with that use-case because I believe it is offset by the more positive usages.

And that’s an important point: this is a personal decision, and not one to be taken lightly. Personally, I’m not a professional or even amateur photographer, so commercial uses of my photos are fine with me. Most professional photographers wouldn’t dream of allowing commercial use of their photos without payment, and rightly so. But even for non-professionals like myself, there are implications to allowing commercial use (one of those implications being that there will be usages you won’t necessarily be happy about).

So, going back to my earlier question, does the licence-choosing interface on Flickr make the implications of your choice clear?

Here’s the page for applying licences. You get to it by going to “Settings”, then “Privacy and Permissions,” then under “Defaults for new uploads,” the setting “What license will your content have.”

On that page, there’s a heading “Which license is right for you?” That has three hyperlinks:

  1. A page on Creative Commons about the licences,
  2. Frequently Asked Questions,
  3. A page of issues specifically related to images.

In that list of Frequently Asked Questions, there’s What things should I think about before I apply a Creative Commons license? and How should I decide which license to choose? There’s some good advice in there (like when in doubt, talk to a lawyer), but at no point does it suggest that you should ask yourself “What’s the worst that could happen?”

So it certainly seems that Flickr could be doing a better job of making the consequences of your licensing choice clearer. That might have the effect of making it a scarier choice, and it might put some people off using Creative Commons licences. But I don’t think that’s a bad thing. I would much rather that people made an informed decision.

When I chose to apply a Creative Commons Attribution licence to my photos, I did not make the decision lightly. I assumed that others who made the same choice also understood the consequences of that decision. Now I’m not so sure. Now I think that some people made uninformed licensing decisions in the past, which explains why they’re upset now (and I’m not blaming them for making the wrong decision—Flickr, and even Creative Commons, could have done a better job of providing relevant, easily understable information).

But this is one Internet Outrage train that I won’t be climbing aboard. Alas, that means I must now be considered a corporate shill who’s sold out to The Man.

Pointing out that a particular Creative Commons licence allows the Klu Klux Klan to use your work isn’t the same as defending the Klu Klux Klan.

Pointing out that a particular Creative Commons licence allows a hardcore porn film to use your music isn’t the same as defending hardcore porn.

Pointing out that a particular Creative Commons licence allows Yahoo to flog canvas prints of your photos isn’t the same as defending Yahoo.

Tools of a different trade

I was in Boston last week for An Event Apart, the second of five instances of the travelling web roadshow touching down in the US this year. As with Seattle, all the talks were of a ludicrously high standard. Tickets are still available for the Minneapolis leg; grab ‘em while you can.

What’s fascinating about seeing all the talks together is finding the unspoken connections between them. Without any prior co-ordination, myself and Aarron had moments of crossover with our talks, Emotional Interface Design and Paranormal Interactivity.

Blenderbox have written a round-up of the themes from An Event Apart. This is the one that really stood out for me:

Your designs should embrace the diversity of browsing experiences offered by different devices.

There was plenty of talk about technologies like and devices like the and . All of it was galvanised together in Ethan’s superb A List Apart article, Responsive Web Design:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Here’s my quick three-step guide to ensuring your websites work in just about any device:

  1. Mark up your content with a logical source order.
  2. Style your markup into a flexible—i.e. liquid—layout.
  3. Use media queries to re-arrange the layout for varying viewport widths.

If you want some examples—and feel free to resize your browser window—peruse Huffduffer and Science Hack Day from myself, dConstruct 2010 from Andy and Talking Animal Blug from Patrick (actually, that last one uses JavaScript to get the same result but the principle is the same).

It seems that step two continues to be the sticking point for most web designers. We’ve had over ten years to get this right, yet everything that David Emery wrote in 2006 is truer than ever today:

There are very few legitimate reasons for using a fixed width site, the main one being concerns over the line length on a fluid width site; obviously as the site gets wider, the line length gets longer which is bad for readability. This is can easily be countered by using max-width, larger font sizes and so on but is really quite faulty thinking – if the solution is a fixed width site that’s sized for 1024×768 then if you’re window is any smaller then that then the line isn’t readable at all, which is obviously much worse.

I also think he was spot-on with his explanation for the prevalence of fixed-width layouts:

When you make a web site design (probably in something like Photoshop) it obviously starts off as static — you have no way of testing how it’ll stretch in a browser. You’ve got to picture how that’s going to work, and design accordingly.

Photoshop and Fireworks are great tools …for tweaking photos and creating icons, gradients and textures. When it comes to laying out web pages however, they are worse than substandard. They are actively harmful. They reinforce the incorrect idea that there is a way of representing the browsing experience in anything other than a browser.

What’s ironic is that designers who continue to shackle themselves to Photoshop and Fireworks do so because they claim that designing with HTML and CSS in the browser limits the design possibilities. And yet they are perfectly content to limit themselves to an environment where designs cannot be resized, cannot respond to varying text sizes and typefaces, and cannot convey even the most basic of interactions.

Meagan Fisher has some good advice on making your mockup in markup. And of course, Malarkey has plenty to say on this subject.

Photoshop Battle

It’s time for one of the more, um… “interesting” slots at The Future of Web Design conference. It’s a live battle of the sexes with Photoshop as the weapon of choice. Whatever you do, don’t call it layer tennis.

Andy Clarke is the compére. He gets the show on the road by introducing the contestants one by one:

With the introductions out of the way, the game kicks off. The boys win the toss and elect to let the ladies go first.

While Jina makes strange amalgamations of Malarkey and robots, Andy sits down for a chat with Elliot and Jon. Jon is sharing insights into life at Rissington. Apparently John has taught him to swear properly.

A Twitter from the audience: Mr. Hicks, you’re rocking the pipe and beer but where are the slippers and flat cap? Did I neglect to mention that they’re all drinking some very nice Belgian beer.

30 seconds for the first round. Meanwhile Elliot explains the challenges in going freelance like getting dressed in the morning. With that, the first five minutes are up.

Second round. The boys get Photoshopping and the girls sit down for a chat. While Hannah explains the revenue model for Last.fm, the lads pull up embarrassing pictures of Andy like the one where’s he drinking out of pineapple when we visited the Tonga Room.

Andy quizzes Jina on the differences between agency work and working for a large unnamed company.

Next round. Hannah has control of the decks. Andy says he’s trying to ignore what’s been constructed on screen. Inevitably, he quizes Jon on the Firefox logo. Jon tells the tale of receiving an enquiry from Burning Monkey Software, could we get a monkey on fire wrapped around a planet? Since doing the Silverback icon, he gets asked to do more primates.

30 seconds left on the clock for this round.

Time’s up. The ladies have created a lovely montage. Now it’s time for the last volley. The boys really need to pull out all the stops.

The conversation between Jina and Andy resumes. They’re talking about creativity and other such designery things.

At this point, the alarm on Jina’s iPhone (which has been deposited somewhere near me) starts to go off. I must spend five minutes trying desperately to find it and switch it off. Just as I manage that, the Photoshop battle ends. Who won?

Pictorial Ajaxitagging

I talked a while back about how I was attempting to add some extra context to my posts by pulling in corresponding tag results from Del.icio.us and Technorati, and then displaying them together through the magic of Ajax.

It struck me that there was another tag space that I had completely forgotten about: Flickr. Now at the end of any post that’s been tagged, you’ll find links entreating you to pull in any of my Flickr pics that have been likewise tagged.

This is all possible thanks to a single method of Flickr’s API. I’m reusing the same method to search for other pictures too…

A had a little epiphany in the pub the other night, chatting after the WSG meetup. I was talking about geotagging and I mentioned that it probably won’t be too long before just about every file will be geotagged in the same way that just about every file already has a time stamp. Then I realised, “hey, all my blog posts have time stamps and so do all my Flickr pics!”

So I added an extra link. You can search for any pictures of mine that were taken on the same day as a journal entry. I like the extra context that provides.

While I was testing this new functionality, I couldn’t figure out why some pictures weren’t being pulled in. Looking at the post from the Opera event written on Tuesday, I expected to be able to view the pictures I took on the same night. They weren’t showing up and I couldn’t understand why not. I assumed I was doing something wrong in the code. As it turned out, the problem was with my camera. I never reset the date and time when I came back from Australia, so all the pictures I’ve taken in the last couple of weeks have been off by a few hours.

Keep your camera’s clock updated, kids. It’s valuable metadata.

Hmmm… I guess I should take a picture today to illustrate the new functionality. In the meantime, check out this older post from BarCamp to see the Ajaxitagging in action.

The man in blue sees red

I flew back from Australia at the start of the week… and boy, are my arms tired — ba-doom!

The day of traveling went surprisingly smoothly. That was probably due to the fact that Jessica and I were flying with Virgin Atlantic’s “upper class” serviceJohn and Maxine sure know how to take care of their speakers. The best part was getting a complimentary ride home from Heathrow airport right to our front door in Brighton.

Actually, the best part was probably on the outward journey, getting to hang out in the Clubhouse at Heathrow. It was like the space station from 2001: A Space Odyssey.

Virgin lounge, Heathrow

Now that Web Directions South is well and truly wrapped up, I’m gripped by the usual tug of post-conference emotions. On the one hand, I’m feeling very inspired by the excellent presentations (and even more excellent people) to start hacking and coding some new stuff. On the other hand, the time I spent in Australia means I’ve let a lot of stuff slide. Now that I’m back, I need to catch up with a whole slew of commitments. That leaves me with no time to put any grand schemes into action.

Cameron sums up the dilemma of maintaining the post-conference buzz nicely. He even illustrates the point with diagrams.

Speaking of Cameron…

I feel I should explain some of the more, um… “unusual” pictures that began showing up on Flickr during Web Directions South.

While I was preparing my first presentation, Explaining Ajax, I needed a screen shot of a typical page on Flickr. What better page to use than this photo entitled “Topless Cameron Diaz”? Don’t worry: it’s safe for work. It’s a picture of Cameron Adams and Dustin Diaz with their shirts off, see?

Topless Cameron Diaz

Now, I felt perfectly justified in using this photo. Cam is infamous for using his presentations as platforms for ridiculing others. I thought it would be fun to put him at the receiving end for a change.

“You’re a dead man!”, he shouted from the audience when the photograph blazed across the screen.

Topless Cameron Diaz

He was not a happy camper.

Cam :)

The next day, Cameron was presenting together with Kevin Yank. I think it would be fair to say that everyone was waiting for the other shoe to drop.

Right in the middle of a superb talk on APIs, this slide appeared.

Payback Is A Bitch

In the interest of full disclosure, I feel I must point out that that is not my body. It’s a Photoshop job!

I had the opportunity to get in the last word. My second presentation came after Cam and Kevin’s. I could have used this as a platform to get in one last dig, but I decided to be a bigger man than that. I called a truce. Besides, I was in mortal terror of what revenge Cam would wreak… perhaps not today, perhaps not here, but at some future date, in a dark alley, years from now, when the whole incident has long faded from my memory.

I did, however, point out that only cheats use Photoshop. So there.

All’s well that ends well. We kissed…

tongue too

…and made up.

Clare Hotel