Smashing Newsletter: Issue #94

This newsletter issue was sent out to 161,108 newsletter subscribers on Thursday, October 3rd 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

When we think about design, we tend to get tangled up in discussions about visual direction, layout, content hierarchy and eventually responsive breakpoints. However, what matters the most from the user’s perspective are access to content and readability on the page. The access to content doesn’t just mean that the content is available when users are on the site; the content should be easy to access even before the user has accessed the website.

Clearleft2

Quite often in our projects the URL design is an afterthought — a topic we tend to leave to monstrous content management systems and third-party content providers. The result are unreadable and mysterious URLs which are difficult to type, to memorize and to share. URL Design is important3 and since URLs are created for people, not computers4, why don’t we optimize them for, you know, humans?

Here’s an example: Clearleft uses the URL design pattern such as clearleft.com/does/ux-design to showcase the different areas of their work and activities, and Lanyrd uses self-speaking URL structure for events and speakers: lanyrd.com/2013/w3conf/speakers/. Sometimes it’s even more than that, e.g. How do you prevent vanity URLs from colliding with future features5 on your site?

URL design matters, wouldn’t you agree? What creative ways have you found of keeping your URLs memorable, friendly and helpful to your users? Please share your ideas with us via Twitter556 by using #smurl.

— Smashing greetings from Moscow, Vitaly (@smashingmag)

Table of Contents

01. Free Editable Vector Maps7
02. How Much To Make An App?8
03. Discover The Best Comments In Source Code9
04. Don’t Be Dumb, You’re Smart!10
05. New Workflows For Your Digital Butler11
06. Easy-To-Implement Tool Tips For Your Next Project12
07. A Maps Experiment Made With Chrome13
08. The Beauty Of Corruption14
09. Food For Thought: Workshops in London & Berlin15

161. Free Editable Vector Maps

So what do you get when you marry design and travel? Beautifully detailed Free Vector Maps17 by Ted Grajeda, of course! Ted has an affinity for maps as he loves to travel and explore, and so he has designed a few he wants to share with you. The maps have been created by designers using consistent color, fonts and strokes.

Free Vector Maps18

GIS data is used to create these clean vector maps which are all digitally handmade without tracing or copying any images. The maps are layered with different details and all the elements are on separate layers. These maps are so easy to customize by using the different layers that there’s almost an entire world of maps waiting for you! (sh)

192. How Much To Make An App?

You have this awesome idea of what kind of app the world is still missing? You want to get it out there? But how should you get started? To connect creativity with professional knowledge and know-how is one of the goals ooomf pursues. They offer help with one of the basic steps: estimating the costs of your app20.

How Much To Make An App?21

In only ten steps you can get an overview of how much an app with your desired features costs. There are many options to choose from, such as device, type of interface, required login system, and a few others. Of course, the total you receive in the end is just an estimate but it might give you a sense of direction of what kind of budget you should be expecting or seeking for such a project. (kv)

223. Discover The Best Comments In Source Code

Leaving a personal mark for others to discover seems to be a human urge. Humans in the stone age left cave drawings, today’s students are known to leave doodles on their desk, and tourists love to leave the obligatory “X and Y were here, 03.10.2013″ in almost every famous landmark they can access.

Discover The Best Comments In Source Code23

I always treated code as a deadly serious business (maybe because I’m German), but some developers love to leave goodies for the few people that may stumble across their source code. Read all 518 creative comments24 written in code by developers who have left their personal marks behind, for themselves and for those who may have to maintain a particular code in the future. (ml)

254. Don’t Be Dumb, You’re Smart!

While more and more designers focus on typography and readability, there are still some common issues which are so easy to avoid yet are often overlooked. However, Jason Santa Maria promotes one simple feature which won’t need any special knowledge and can make your content better — today.

Don't Be Dumb, You're Smart!26

Jason’s little side project “Smart Quotes For Smart People27” was made for the National Punctuation Day 2013 and promotes the usage of elegant Curly Quotes instead of the simple Straight Quotes. The website gives you a quick overview on how the English language uses quotes correctly. Furthermore, it presents shortcuts for Mac and Windows users, as well as HTML entities. Improve your practical typography knowledge today — your English teacher will love you for it! (ml)

285. New Workflows For Your Digital Butler

Do you know Alfred29, the digital butler? Discreetely sitting in our Mac menu bars, he is always at our service, untiredly waiting to be woken by a keyboard shortcut. Over time, this little guy has spared us countless clicks and enhanced our productivity. Now, Alfred has attended special training in catering for Web developers and designers, and guess what? He has gotten even smarter. With the nifty Alfred workflows30 that front-end engineer Zano Rocha compiled on GitHub, the program has the makings of becoming your new best digital friend — if it hasn’t been until now.

Alfred31

In the collection of new workflows, you will find cool features such as opening files and folders in Sublime Text, searching for browser compatibility support, converting color values, finding processes by name and killing them, searching for questions on StackOverflow, and many, many more. Once you get used to them, you’ll never want to work without them anymore. (cm)

326. Automatic Background Adjustment For Better Readability

You know how it is: you have a large, prominent feature area in your layout, usually with a quite large background image, and you have to put either an illustration or text on top of it. The problem is that the feature image is likely to change in the future and you don’t really know whether a light or dark foreground text (or illustration) will still stay readable once the content manager has made some changes.

BackgroundCheck33

What do you do? Well, what if you used a script that would detect the brightness of background images as well as their dark and soft spots, and then automatically switch the brightness of your foreground text or illustration to a darker (or a lighter) version of an element? That’s exactly what BackgroundCheck34 does. This library gives you two extra classes, .background--dark and .background--light that you can use to change an element’s style in your CSS. Simple and easy. The script weights 3.82 Kb and is available on GitHub35 as well. Worth bookmarking! (vf)

367. A Maps Experiment Made With Chrome

Map Dive37 is a game that lets users free fall to famous monuments from around the world, such as the Statue of Liberty. But wait a second, it’s Pegman from Streetview — do you recognize him? The whole aim is to earn your wings by navigating Pegman through a series of gates and gaining points by collecting stars along the way and hitting the bonus objects by using the arrow keys on your keyboard.

Map Dive38

The game is actually a celebration for reaching the landmark achievement of one million Maps API integrations. It also demonstrates the immersive experience of Maps in the browser. The design of the user interface has been kept simple and reflects the new Google Map design. (sh)

398. The Beauty Of Corruption

If you’re a person who finds beauty in the faulty and distorted things in life, or if you just like to break things, then maybe you’ll enjoy glitch images40 — a script which lets you mess around with bytes in a JPEG image. Simply import your own image and try it out yourself!

JPEG Glitch41

This script was inspired by Smack My Glitch Up42 and created by Georg Fischer43. Sometimes it’s good to break things to discover something new, unexpected and perhaps even a bit innovative. (ea)

449. Food For Thought: Workshops in London & Berlin

When we started running workshops in our lovely hometown Freiburg, we were humbled to see the interest from areas close to our city, so we decided to explore other areas. Since recently, we have also started organizing full-day workshops with experts45 of the industry in Berlin and London. The feedback has been amazing, and we know that you’ll love the workshops just as much as we do, and brush up your skills for good!

New Smashing Workshops46

The upcoming hands-on, practical workshops are:

We look forward to meeting you at one of the Smashing workshops soon. If you have any questions or workshop suggestions, please don’t hesistate to contact us via Twitter556 and we’ll get back to you right away! (vf)

The authors in this newsletter are: Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Shavaughn Haack (sh), Kristina Vogt (kv), 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://warpspire.com/posts/url-design/
  3. 3 http://warpspire.com/posts/url-design/
  4. 4 http://www.not-implemented.com/urls-are-for-people-not-computers/
  5. 5 http://www.quora.com/How-do-sites-prevent-vanity-URLs-from-colliding-with-future-features
  6. 6 http://www.twitter.com/smashingmag
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a4b
  12. 12 #a5
  13. 13 #a7
  14. 14 #a7b
  15. 15 #a8
  16. 16 #
  17. 17 https://www.freevectormaps.com/
  18. 18 https://www.freevectormaps.com/
  19. 19 #
  20. 20 http://howmuchtomakeanapp.com/
  21. 21 http://howmuchtomakeanapp.com/
  22. 22 #
  23. 23 http://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered
  24. 24 http://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered
  25. 25 #
  26. 26 http://smartquotesforsmartpeople.com/
  27. 27 http://smartquotesforsmartpeople.com/
  28. 28 #
  29. 29 http://www.alfredapp.com/
  30. 30 https://github.com/zenorocha/alfred-workflows
  31. 31 https://github.com/zenorocha/alfred-workflows
  32. 32 #
  33. 33 http://www.kennethcachia.com/background-check/index.html
  34. 34 http://www.kennethcachia.com/background-check/index.html
  35. 35 https://github.com/kennethcachia/Background-Check
  36. 36 #
  37. 37 http://mapdive.weareinstrument.com/
  38. 38 http://mapdive.weareinstrument.com/
  39. 39 #
  40. 40 http://snorpey.github.io/jpg-glitch/
  41. 41 http://snorpey.github.io/jpg-glitch/
  42. 42 http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator
  43. 43 http://fishnation.de/
  44. 44 #
  45. 45 https://shop.smashingmagazine.com/workshops/?pk_campaign=Editorial-Newsletter-19-09-2013&pk_kwd=full-day-workshops
  46. 46 https://shop.smashingmagazine.com/workshops/
  47. 47 https://shop.smashingmagazine.com/smashing-workshop-mobile-web-london.html
  48. 48 https://shop.smashingmagazine.com/smashing-workshop-visual-design-essentials.html
  49. 49 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html
  50. 50 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-london.html
  51. 51 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html
  52. 52 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-berlin.html
  53. 53 https://shop.smashingmagazine.com/smashing-workshop-nodejs-knowledge-smash-and-grab-berlin.html
  54. 54 https://shop.smashingmagazine.com/smashing-workshop-innovation-by-design.html
  55. 55 http://www.twitter.com/smashingmag

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

    About “How Much To Make An App”, there is not an option for Windows Phone.

    A shame.

  2. 2

    I opened this latest issue and immediately found information that I needed that very day. Thank you so much for being so very relevant and helpful. You made my work so much easier today!

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