Smashing Newsletter: Issue #114

This newsletter issue was sent out to 183,731 newsletter subscribers on Tuesday, July 29th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Typing on a mobile device is probably one of the most annoying tasks we have to deal on a regular basis. Whether it’s a sign-in or check out, typing on a small screen usually is time-consuming and frustrating. As developers, we aim to simplify data input for our users, and there are indeed a few things that can make it much more convenient.

Editorial2

We can use autocorrect="off", spellcheck="false" and autocapitalize="off" attributes on input to prevent errors from crawling into data input on iOS3. For Android 2.3-, you can use autocomplete="off" for the same result.

However, autocomplete can also be quite useful to turn data input into a breeze. We can use metadata to enrich auto-complete4. By providing both the name attribute and the autocomplete attribute on input elements, we can give hints to the browsers, so they can auto-populate input fields based on previously specified data by the user.

For every input field, we define its role according to the defined vocabulary for attribute values5 and the browser (Chrome so far) will plug in the right data automatically. A little optimization that can significantly help users avoid tedious tasks and focus on what matters to them most: getting things done.

Workshop Photo6
Brian Whitton, one of the truly smashing attendees of a CSS Workshop by Jonathan Snook. SmashingConf New York, by Marc Thiele7.

Ah, as a sidenote, we’ve got a few updates and releases last week:

  • We’ve published a new Smashing book on product management for the startup world, “Making It Right”8, by Rian van der Merwe,
  • We’re working on the final touches for the Smashing Shop9 redesign, and we refactored Smashing Magazine’s code and removed jQuery from the code base. An article on lessons learned is coming up in August.
  • We’re trying something new: online workshops10 with the first two online workshops on RWD and Performance by yours truly. Of course, regular workshops11 are available as well.

Ahhh exciting times!
— Vitaly (@smashingmag)

Table of Contents

01. Responsive Iconography and Logos12
02. Keyboard Shortcuts For DOM Elements13
03. Raumrot: Free High Quality Pictures For Your Projects14
04. Those Forgotten Attributes in CSS15
05. SnappySnippet: Extract CSS and HTML From Any Selected Element16
06. Mazwai: A Collection Of Free Public Videos17
07. Responsive Images Markup With Grunt18
08. Cheat Sheets For Color Palettes19
09. A Picture Paints A Thousand Words20
10. Full-Day Smashing Workshops21

221. Responsive Iconography and Logos

Lack of available space is a common constraint in almost every responsive project. As a designer, how are you supposed to deal with important visual assets which have to look sharp and recognizable among all screen resolutions and also remain prominent even on smaller screens? This holds true especially for logos and brands which might become difficult to recognize once scaled down to a small “mobile” size.

Responsive Iconography and Logos23

Obviously, initially every icon is designed for a very specific “sweet spot” size, so one approach would be to create responsive icons24 — that is, a set of versions for important icons that change the level of fidelity depending on available screen space. As a more practical application, this is exactly what could be done for responsive logos25 where the fidelity and details of logos change depending on the screen resolution. The code provided in the example would need to be refactored though; in fact, you could use responsive SVG26 with a slightly improved code.

And just in case you have to serve PNG or JPEGs for your logo and want to make sure that it always has a good quality when displayed on any device, you could use the Cache-Control: no-transform header to prevent the quality degradation of the images, often turned on by mobile ISPs27 and proxies automatically. (vf)

282. Keyboard Shortcuts For DOM Elements

You know the hassle: if you have to navigate the DOM tree a lot, you’ll always stumble upon tricky elements that are difficult to inspect, or just seem to get lost in the entire DOM. Wouldn’t it be nice to have some sort of a quick shortcut to be able to navigate to critical DOM elements very quickly within your convenient development environment? Well, that’s exactly what DOM Flags29 are for — a Chrome extension to create keyboard shortcuts for DOM elements.

Keyboard Shortcuts For DOM Elements30

Basically, DOM Flags allows you to add ‘domflag’ attributes either in your HTML or JavaScript or in the DevTools Elements Panel. Once it’s done, you can quickly jump to the important elements using Option/Alt + Shift + [1..3]. Attributes can be removed and added with Option/Alt + Shift + D. You can also auto-inspect and auto-focus flagged elements when the DevTools gets opened or the page is reloaded.

Ah, and if you need to inspect an element that only appears when other element is mouse hovered/entered, here is a little quick tip to make it work31. A yet another great tool to be just a bit faster in your workflow. (vf)

323. Raumrot: Free High Quality Pictures For Your Projects

A German designer Markus Spiske is pretty good at many things; but he is particularly good in photography, and quite happy to share his photos with everybody for free to use in both private and commercial projects. His website, Raumrot33, provide a large selection of freely available photos in high-resolution ranging up to 5760×3840px.

Raumrot: Free High Quality Pictures For Your Projects34

At the moment you can download 18 sets á 12 photos with 216 hi-res/hi-quality professional pictures. The photos cover a variety of categories such as business, science, food & drink, urban, nature, transport and sport. In fact, new sets are being added to the collection every other day as well. Markus has provided all images on Flickr35. To use his photos, please make sure to attribute to the original source. And if you like the photos, drop a quick email to Markus saying him that you love his work. Now get creative! (kv)

364. Those Forgotten Attributes in CSS

CSS and HTML have a very special, intimate relationship. We used to use a lot of IDs in markup to have unique identifiers for elements and target them with CSS and pass data to JavaScript, but with object-oriented CSS, many developers lean away from too specific IDs towards more general classes. Yet in some cases, even classes aren’t really necessary.

Those Forgotten Attributes in CSS37

In general, to keep markup clean and concise, we can use good ol’ attribute selectors in CSS38 to target elements in the DOM which have (or don’t have) specific values. In fact, attribute selectors do not require any browser-specific syntax39 or prefix, and are even supported in Internet Explorer 7. E.g. to target all internal links we can use a[href^="#"] { background-color: yellow; }. Now, isn’t it convenient?

Furthermore, we can also use HTML5 data-* attributes40 to store extra information on HTML elements without needing to use a non-semantic element or pollute the class name. So with article data-parent="cars", we could grab the content with CSS using article::before { content: attr(data-parent); }. Again, it kind of works even in Internet Explorer 641 and could be very useful for DOM manipulations with JavaScript. Almost magical!

Before choosing another set of classes or an ID in your markup, it might be a good idea to check if you can achieve the same with a few attributes here and there to keep the code clean and lean. (vf)

425. SnappySnippet: Extract CSS and HTML From Any Selected Element

We all know it: especially in our industry it’s fantastic to be able to learn from each other, and it’s wonderful to see people sharing what they’ve learned. We often do this by looking into the source code, getting a look behind the scenes to create something new that fits our needs well. In fact, extracting code during prototyping or debugging can be very useful to see all the dependencies and reasons for bugs and issues, especially if the styles are spread out over several elements and stylesheets — not to mention if DOM is manipulated with JavaScript, too. Well, SnappySnippet43 is a Chrome extension that makes this task very easy.

SnappySnippet: Extract CSS and HTML From Any Selected Element44

The tool lets you extract CSS and HTML from any selected element in the DOM tree and send it directly to CodePen, jsFiddle or JS Bin with one simply click. It also automatically cleans up HTML, removing unnecessary attributes and fixing indentation, and optimizes the CSS to make it more readable. It works with :before and :after pseudo elements as well. A great tool for debugging on a component level without having to fiddle with the whole code base. (ml)

456. Mazwai: A Collection Of Free Public Videos

Whether you are building a quick prototype or work on visual mockup: freely46 available47 public48 photos49 and50 images51 are a fantastic asset to keep closely. However, at some point you might need freely available videos as well. Well, Mazwai52 offers a selection of beautifully crafted intros, outros and scenes that can be used by everyone for their professional and personal projects.

Mazwai: A Collection Of Free Public Videos53

You can download the videos or embed them in your mock-up right away; the videos are available in .mp4 and .webm formats. The growing selection consists of clips, footage and mini-films which are all available in HD under the public domain or Attribution license (CC 3.0). This means you’ll be able to transform, adapt, cut and share the videos, as long as you credit the original author. Would be great to see more projects like these appearing every now and again. (ml)

547. Responsive Images Markup With Grunt

While the support for responsive images55 is getting better56, have you considered how you would actually author markup for responsive images with srcset, sizes and the picture element? While img src was pretty straightforward, you might not want to write a more eloquent markup for every single image on your page, right?

Responsive Images Markup With Grunt57

Of course that’s a perfect task for a task runner like Grunt. Indeed, you can use the Responsive Images Grunt task58 to let the markup generation be an automatic part of your build step. And to generate different sets of images, you could use… Obviously, the most bulletproof approach would be to use the new markup with a Picturefill polyfill59 and if you are using Markdown a lot, you can use a Grunt task for converting images markup from Markdown60 to responsive images. Of course, the art direction use case would need a bit more fiddling, but heavy lifting will be taken care of automatically. (vf)

618. Cheat Sheets For Color Palettes

When we were little, things were simple: in order to draw the sky we would take the blue crayon out of its box, for the grass green, and the sun yellow. Today, as a designer, blue isn’t just blue anymore. It’s all about choosing the perfect shade — which is especially critical when you have to consider brand guidelines in your design. Luckily, there are two convenient sites out there that keep track of common brand’s color palettes and thus spare you a lot of research.

Cheat Sheets For Color Palettes62

One of them is BrandColors63. As the name implies, BrandColors features an extensive list of brands along with the color schemes they use. No more no less. To make incorporating them into your design even easier, the palettes can be downloaded in CSS, SCSS, LESS or ASE.

Find Guidelines64 operates on a similar principle. It provides you with an overview over brand colors, and even lets you save them directly as Photoshop swatches. And in case you need to dive in deeper into a brand’s design assets, the site links directly to the corresponding guidelines page, too. Definitely worth a bookmark. (cm)

659. A Picture Paints A Thousand Words

How does an artist approach a theme for artwork? How, for example, would you express silence? Or learning? Can they be visual? Some among us have an amazing skill to make nearly anything visual. You just give them a theme and they start to draw and later you can’t take your eyes away from what they’ve come up with.

A Picture Paints A Thousand Words66

We are talking about the people among us who draw the covers of magazines and create something so beautiful that you buy the magazines only for their covers. Just because the artwork appeals to you so much and you can see the passion and the skill of the illustrator behind its picture. Owen Davey67 just loves to draw and he has already created many fascinating characters and illustrations that have their own unique personality, character, atmosphere. Explore his turtles, foxes, an astronaut dog who wants to be loved and so many more artworks which are both very unique and very attractive. (ea)

6810. Full-Day Smashing Workshops

With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our front-end and RWD workshops are all about: full-day practical front-end + RWD workshops that will help you become a better front-end developer, today.

Full-Day Smashing Workshops69

Here are a couple of practical, hands-on workshops taking place in Freiburg, Germany that you may perhaps like to consider attending:

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com75 and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! (vf )

The authors in this newsletter are: Kristina Vogt (kv), Melanie Lang (ml), Cosima Mielke (cm), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.smashingconf.com/whistler-2014/
  3. 3 http://www.bennadel.com/blog/2307-disabling-auto-correct-and-auto-capitalize-features-on-iphone-inputs.htm
  4. 4 https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs
  5. 5 https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#recommended-input-name-and-autocomplete-attribute-values
  6. 6 https://www.flickr.com/photos/marcthiele/14435587044/in/set-72157644792424680
  7. 7 https://www.flickr.com/photos/marcthiele/14435587044/in/set-72157644792424680
  8. 8 http://www.smashingmagazine.com/2014/07/24/making-it-right-product-management-for-the-startup-world/
  9. 9 https://shop.smashingmagazine.com/
  10. 10 http://www.smashingmagazine.com/workshops/#online-workshops
  11. 11 http://www.smashingmagazine.com/smashing-workshops/
  12. 12 #a1
  13. 13 #a2
  14. 14 #a3
  15. 15 #a4
  16. 16 #a5
  17. 17 #a6
  18. 18 #a7
  19. 19 #a8
  20. 20 #a9
  21. 21 #a10
  22. 22 #
  23. 23 http://responsivelogos.co.uk/
  24. 24 http://responsiveicons.co.uk/
  25. 25 http://responsivelogos.co.uk/
  26. 26 http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
  27. 27 http://calendar.perfplanet.com/2013/mobile-isp-image-recompression/
  28. 28 #
  29. 29 http://domflags.com/
  30. 30 http://domflags.com/
  31. 31 http://stackoverflow.com/questions/24790002/inspect-element-that-only-appear-when-other-element-is-mouse-overed-entered
  32. 32 #
  33. 33 http://www.raumrot.com/10/
  34. 34 http://www.raumrot.com/10/
  35. 35 https://www.flickr.com/photos/125167502@N02/sets/
  36. 36 #
  37. 37 http://css-tricks.com/attribute-selectors/
  38. 38 http://css-tricks.com/attribute-selectors/
  39. 39 http://24ways.org/2012/a-harder-working-class/
  40. 40 https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/
  41. 41 http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6
  42. 42 #
  43. 43 https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil/details
  44. 44 https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil/details
  45. 45 #
  46. 46 http://wefunction.com/8-unique-places-to-find-quality-free-photos/
  47. 47 https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b
  48. 48 http://nos.twnsnd.co/
  49. 49 http://www.unsplash.com
  50. 50 http://join.deathtothestockphoto.com/
  51. 51 http://picjumbo.com/
  52. 52 http://mazwai.com/
  53. 53 http://mazwai.com/
  54. 54 #
  55. 55 http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
  56. 56 http://timkadlec.com/2014/05/dont-wait-on-responsive-images/
  57. 57 http://www.andismith.com/grunt-responsive-images/
  58. 58 http://www.andismith.com/grunt-responsive-images/
  59. 59 http://scottjehl.github.io/picturefill/
  60. 60 https://github.com/miller/grunt-responsive-images-converter
  61. 61 #
  62. 62 http://brandcolors.net/
  63. 63 http://brandcolors.net/
  64. 64
  65. 65 #
  66. 66 http://www.owendavey.com/
  67. 67 http://www.owendavey.com/
  68. 68 #
  69. 69 http://www.smashingmagazine.com/workshops/
  70. 70 http://smashingconf.com/freiburg-2014/workshops/jason-grigsby
  71. 71 http://smashingconf.com/freiburg-2014/workshops/matthew-andrews
  72. 72 http://smashingconf.com/freiburg-2014/workshops/sara-wachter-boettcher
  73. 73 http://smashingconf.com/workshops/vitaly-friedman
  74. 74 http://www.smashingmagazine.com/smashing-workshops/#online-workshops
  75. 75 mailto:vitaly@smashingconf.com

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top