It might be the 4th of July, but we aren’t letting that stop us from making sure you get your weekly dose of Real-Time Overview. Michael’s returned from Boston and back at the helm for this week, kicking things off with the news that 500PX just ditched Creative Commons because… well, they say it wasn’t being used, but that seems like a weird reason to us. Go go go Flickr! We’ve got some design articles for you covering footers and flexible text, a little accessibility nugget, some UI inspiration at UIDB, and finally, we wrap up with a look at how to recharge your creative juices.
Followup Resources
- 500px will no longer allow photographers to license their photos under Creative Commons
- 7 Tips for Designing a Large Footer
- Fitting Text to a Container
- Designing for accessibility is not that hard
- Find User Interface Design Inspiration with UIDB
- Art of Listening: One designer’s foray into experiential design
Transcript
Have you ever stopped to consider the fact that spiders are the only web developers that enjoy finding bugs?
Hey everybody, Michael Fienen here and back from An Event Apart for this 4th of July episode of Real-Time Overview. I hope you all are having a great holiday and being careful to mind your hands around all those fireworks. That’s a lesson in web accessibility that you don’t need to learn. Hmm. That got dark, didn’t it? Well let’s brighten things up with a trip to The Verge.
Big news in the land of image sharing this week as 500PX will no longer allow photographers to license their photos under Creative Commons on the platform. Andrew Liptak writes about this in his article over at the Verge.
In a sudden announcement to users, 500PX announced on June 28th that within 48 hours they would cease to allow users to license their photos with Creative Commons licenses and would remove existing designations from the system, sending many users into a scramble to preserve more than a million open licensed images that were available on the site.
500PX had been hailed as the likely heir to the throne that Flickr seemed unable to hold on to several years ago, but with Flickr’s acquisition by SmugMug earlier this year, this moves seems to put them in a very precarious position with the users of the platform. Flickr’s early adoption and support of Creative Commons has long been one of its pillars of strength as a service, and with 500PX bowing out of that ecosystem, it looks like a sign that the once praised service has lost its way. Or maybe worse, it might be simply running out of money.
Web designers all over the world benefit from Flickr’s Creative Commons search features, enabling them to find high quality imagery to use in projects. By giving them more room in this area, 500PX may no longer have the momentum it once did, leaving it in search of a niche in a world where Flickr and Instagram dominate users’ imagery needs.
If you’re in search of some motivation to get you through your next footer design, run by Design Shack for their article 7 Tips for Designing a Large Footer, where they review advice to help you ensure you’re focused on the form and function of this element.
Too often, we let footers become an afterthought, simply cramming them with an address and some social media links. But there’s no reason it has to be that way. Footers can be a great opportunity for secondary engagement if you give them a purpose by focusing on additional calls to action or data collection points.
Moreover, you don’t need to run your footer lean and slim. It’s okay to make a footer large, providing breathing room around elements in it, and allowing space for nicely curated and organized links the user may need to reference there. You want to afford the footer the same usability considerations you give any other element on the page. Nothing is lost by trying to honor it with appropriate design.
Design Shack’s article breaks down some of the obvious and less obvious suggestions when it comes to footer design, summing things up with a good rule of thumb – big or small, a footer should be digestable at a glance. If you can get the users’ eyes where they need to be quickly, then you’re doing a good job. Check out all their tips in their blog.
If you feel like diving into some typography stuff this week, everyone’s favorite CSS jockey, Chris Coyier, has you covered with a round up of tools and methodologies to help you fit text into a container.
Getting text to conform to a container in a flexible manner is still something that requires a bit of magic sauce to work consistently across the board. To this day, I still default to an elastic font mixin in SASS to help streamline that process, and I’ll link an additional tutorial in the shownotes on how to do that as well.
Coyier starts off with a basic overview of how to use viewport width units as a starting point for a simple, flexible font size, and expands from there. He demonstrates some JavaScript libraries that can help the process, like FitText and Fitty, and also more creative solutions like SVG text with viewboxes.
Most of these have a little bit of tradeoff in various ways, depending on the containers you’re trying to fill, but until we have a straightforward, pure CSS solution to the challenge of flexible width text, this will give you several options to choose from so you’ll have the best solution for a given design. His article is up now with all those suggestions at the CSS Tricks website.
In case you need a reminder, Pablo Stanley has put together some guidelines to remind us that designing for accessibility is not that hard. You can check out this piece over at UX Collective.
As Pablo outlines, 56 million Americans have a disability, and last year almost 1000 lawsuits were filed over web accessibility. By addressing accessibility head on, we don’t just help people and avoid the courtroom, we’re building better sites that perform better for everyone.
He reminds us how important things like our color selection process is. You can’t always trust your corporate colors to be the best guide or option when it comes to providing contrast or conveying information, so stop and think about how your palette performs.
There’s also the matter of markup – not just using it right, but including all the right bits in the right places to ensure hover and focus states perform right, that the page behaves as expected with keyboards, and that everything can be picked up correctly by screenreaders. Again, this is important for accessibility, but it also ensures the machines that crawl and rank your pages can do so in a meaningful manner.
Pablo’s article is a great primer or review of the basic checkboxes for web accessibility, but it’s also not the end of the road. Accessibility isn’t a goal, it’s a process. Once you’re comfortable with these conventions, take the time to read up on ARIA, and look at the new WCAG 2.1 standards. Make sure you’re always progressing and reviewing.
Let us know what your favorite accessibility tools are. You can leave us a comment in the shownotes over at drunkenux.com.
If you’re finding yourself in need of design inspiration or references, Hongkiat has an overview of the UIDB service. You can find the tool at https://uidb.io/.
The service is reminiscent of other tools like Pattern Tap, which work to catalog different examples of UI implementation in a searchable directory so that you can see how others are tackling common interface items.
Maybe you have a form you want simplify, or you want to create a pricing table for customers. The UIDB is designed to help you find examples to inspire your work, but also provide you a reference point that can still be familiar to your site’s visitors.
It can be handy to have these sorts of sites ready as reference points, especially if you’re stupid at design like, say, me. What else do you use? What are your favorite sites to help you find inspiration? Shoot us a message on Twitter and let us know.
We’ll wrap up with my go-to article for the week. It’s a piece by Valerie Veteto at the Figma Design Blog that looks at how designers can tap into other sources of creativity to keep themselves sharp and inspired.
It’s no surprise that people have hobbies. And as someone that builds websites for a living, I can identify with a craving to put my hands into something that isn’t digital. I love old cars, camping, and fountain pens. Valerie’s piece reviews the story of interaction designer Mike Godlewski and his side work with a small group of people that use music to center themselves and provide fresh energy to their process.
The trick to it isn’t to just do the thing. It’s to let yourself let go so that you can focus only on the enjoyment of the experience in front of you. In the case of camping, it’s not about setting up the tent, or grilling dinner, or collecting wood. It would be about walking into the forest for an hour, sitting up against a tree, closing your eyes, and just listening to the forest for a bit. I’m sure that sounds all new-agey, but there’s enormous value in allowing your brain to chase its own thoughts for a while, driven only by stimuli occurring around you naturally.
The key to Mike’s group is to sit quietly, without the distraction of phones or laptops, and just listen to an album together, writing or doodling in the process as they feel the need to. It allows the brain to find rhythms on its own, to pick out the melodies and patterns. Then later, when you’re back to the real world doing your normal design, you have those ideas to tap into.
It’s a refreshing take on the question: how do you be creative. Run by the Figma blog and give this one a read, then let us know what your favorite ways to recharge are.
Thanks for listening to Real-Time Overview, I’m Michael Fienen. If you want links to any of the stories in today’s episode, be sure to swing by our website at drunkenux.com, they’ll all be linked in the shownotes there. Stay tuned for a new episode of the Drunken UX Podcast next week when Greg Podunovich will be joining us from the design agency Expand the Room to talk about design philosophy. You’re not going to want to miss this chat.
Until next time, keep your personas close, and your users closer.