Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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-complete. 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 values 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 Photo4
Brian Whitton, one of the truly smashing attendees of a CSS Workshop by Jonathan Snook. SmashingConf New York, by Marc Thiele5.

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”6, by Rian van der Merwe,
  • We’re working on the final touches for the Smashing Shop7 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 workshops8 with the first two online workshops on RWD and Performance by yours truly. Of course, regular workshops9 are available as well.

Ahhh exciting times!
— Vitaly (@smashingmag)

Table of Contents

  1. Responsive Iconography and Logos10
  2. Keyboard Shortcuts For DOM Elements11
  3. Raumrot: Free High Quality Pictures For Your Projects12
  4. Those Forgotten Attributes in CSS13
  5. SnappySnippet: Extract CSS and HTML From Any Selected Element14
  6. Mazwai: A Collection Of Free Public Videos15
  7. Responsive Images Markup With Grunt16
  8. Cheat Sheets For Color Palettes17
  9. A Picture Paints A Thousand Words18
  10. Full-Day Smashing Workshops19

1. 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 Logos20

Obviously, initially every icon is designed for a very specific “sweet spot” size, so one approach would be to create responsive icons21 — 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 logos22 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 SVG23 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 ISPs24 and proxies automatically. (vf)

2. 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 Flags25 are for — a Chrome extension to create keyboard shortcuts for DOM elements.

Keyboard Shortcuts For DOM Elements26

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 work27. A yet another great tool to be just a bit faster in your workflow. (vf)

3. 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, Raumrot, provide a large selection of freely available photos in high-resolution ranging up to 5760×3840px.

Raumrot: Free High Quality Pictures For Your Projects

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 Flickr28. 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)

4. 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 CSS29

In general, to keep markup clean and concise, we can use good ol’ attribute selectors in CSS30 to target elements in the DOM which have (or don’t have) specific values. In fact, attribute selectors do not require any browser-specific syntax31 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-* attributes32 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 633 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)

5. 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, SnappySnippet34 is a Chrome extension that makes this task very easy.

SnappySnippet: Extract CSS and HTML From Any Selected Element35

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)

6. Mazwai: A Collection Of Free Public Videos

Whether you are building a quick prototype or work on visual mockup: freely36 available37 public38 photos39 and40 images41 are a fantastic asset to keep closely. However, at some point you might need freely available videos as well. Well, Mazwai42 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 Videos43

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)

7. Responsive Images Markup With Grunt

While the support for responsive images44 is getting better45, 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 Grunt46

Of course that’s a perfect task for a task runner like Grunt. Indeed, you can use the Responsive Images Grunt task47 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 polyfill48 and if you are using Markdown a lot, you can use a Grunt task for converting images markup from Markdown49 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)

8. 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 Palettes50

One of them is BrandColors51. 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 Guidelines52 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)

9. 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 Words53

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 Davey54 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)

10. 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 Workshops55

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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!

  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

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top