Smashing Newsletter: Issue #101

This newsletter issue was sent out to 173,245 newsletter subscribers on Tuesday, January 21st 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Ready, set, go: Scott Jehl, Aarron Walter, Mark Boulton, Oliver Reichenstein, Tim Brown and Jonathan Hoefler. These are the very first confirmed speakers for the upcoming SmashingConf New York 20142, taking place on June 17th–18th 2014. “New York!?”, you ask? Oh yeah! After a couple of fantastic conferences in Europe, we are now setting the bar even higher and this one will be nothing short of smashing.

Editorial3
This year’s SmashingConf will take place in the legendary TimesCenter4 in NYC, located just off the Time Square district. It can’t get more central than that.

Tickets will go on sale5 on Tuesday, Jan 28th at 2 PM CET (8am EST), and the pricing will be fair and affordable. We’ve also prepared a neat Convince Your Boss (PDF)6 (0.15 Mb) that you can use to convince your colleagues, friends, neighbours and total strangers to join you or send you to the event. We know that you will not be disappointed.

We love organizing community events because we love networking, and good, valuable content. We’d be honored to have you being a part of it, and we can’t wait to finally meet you in person, and talk about the good ol’ Web over a beer or two. It’s been about time, hasn’t it? Well, maybe we’ll see you in June then! ;-)

— Vitaly (@smashingmag)

Table of Contents

01. CSS REM-Unit: To Use Or Not To Use?7
02. Photoshop, Fireworks And Illustrator Scripts, Please!8
03. Preventing Mobile ISP Image Recompression9
04. Fast And Easy Image Resizing10
05. Beautiful Book Previews With BookBlock11
06. Bicyles, Sushi And Fancy Pants… In Patterns!12
07. Inspiring Morning Routines13
08. In-House Smashing Workshops14
09. A New Smashing Mystery: Get Ready!15

161. CSS REM-Unit: To Use Or Not To Use?

So you have a couple of nested HTML elements and you define their font-size in CSS in ems. The common issue is that because the em unit is relative to the font-size of the parent, it causes the compounding issue. To calculate the actual font-size or set the right typographic hierarchy in ems, you need to do a bit of calculation which could become frustrating over time. Solution? Well, the rem unit17, of course.

CSS REM-Unit: To Use Or Not To Use?18

The ‘rem’ is similar to the ‘em’, but instead of cascading it’s always relative to the root (or the html) element, so you can use it everywhere in your CSS, and it will always relate to the html element, and not to its parent element. Of course, Opera Mini, IE8 and below don’t understand rems, but we can feed them with a px19 fallback20 and call it a day.

In fact, you can establish a baseline grid with rem21, use rem as a replacement for the vw unit22 and sneak a Trojan horse into your components with rem23 to make them easily scalable. However, there are mixed opinions about rems and sometimes they are24 not25 always a perfect solution because they take away quite a bit of flexibility, e.g. if you want to scale up or scale down a specific area on your page, and not the entire page; in that case, you’d need to overwrite all rem units in your media queries. Nice techniques to consider on how and when to use rem and when to avoid it after all. (vf)

262. Photoshop, Fireworks And Illustrator Scripts, Please!

Are you searching for smart scripts to improve your workflow? Or to at least get the ball rolling? Well, The Russell Brown Show27 provides you with Photoshop CS5 and CS6 scripts, panels and actions that will definitely help you out with your design and production tasks. Also, there is a growing library of Fireworks extensions28 by John Dunning that will help you use Fireworks more efficiently.

Photoshop, Fireworks And Illustrator Scripts, Please!29

But you spend most of your time in Illustrator, you say? Well then you can check out the Adobe Illustrator Scripts by Hiroyuki Sato30 — they will help you perform vector manipulations whether you’re adjusting dashes or wanting to correct patterns instead. One-stop-shop! These little time-savers are bound to speed up your workflow and save you that headache in your next project! (sh)

313. Preventing Mobile ISP Image Recompression

You’ve most probably already experienced this: in order to serve websites as quickly as possible, many mobile carriers run HTTP traffic through their proxies first, recompressing the images and serving them in much worse quality than the image you have on your site. Sometimes it’s a feature you may want to have, but sometimes this is exactly what you may want to prevent from happening.

Preventing Mobile ISP Image Recompression32

Kornel Lesiński, the creator of ImageOptim, explains33 that all proxies recompress all JPEG images except for PNGs, while GIFs are getting noticeably posterized, discolored or dithered. As it turns out, you can opt-out image recompression either by serving well-optimized images over HTTPS or with the Cache-Control: no-transform HTTP header. It’s good to be able to control such things and decide on your own when and how your content will be pushed through the network on to the user screens. (vf)

344. Fast And Easy Image Resizing

With the multitude of image sizes necessary for fast multi-device experience on the Web today, the process of resizing has become a time-consuming and rather tedious task. Okay, there are smart batch scripts to simplify things, but what about the art-direction use case? You’ll probably end up cropping your images one at a time to make sure that no important parts get cut off.

Fast And Easy Image Resizing35

A handy tool that provides a remedy for this is Sizzlepig36, an online service that allows you to create multiple sizes (Retina images included) for an entire folder of images. All you need to do is simply set up blueprints of your desired image sizes, define compression levels and file suffixes. To guarantee the best results, the tool allows you to preview, crop and edit your images with just a few clicks before it even starts to process them. The service can also grab images from Google Drive and Dropbox and is free to use for up to 100 images per month. (cm)

375. Beautiful Book Previews With BookBlock

So you want to introduce a new book (or any other product really), and portray it in a nifty product preview on your landing page? Well, have you ever considered having the book rotate in 3D and moving it to the left side so that details about the book can slide in from the right? The book could even open and scale up into a fullscreen showcase of the first pages and invite you to flick through the book.

Beautiful Book Previews With BookBlock38

Sounds good? Well, that’s exactly what Codrops’ BookBlock39 jQuery plugin does. It offers a neat page-flip experience to review the content; the only thing you have to do is to create different images for the perspectives and adjust the CSS a bit. Although the script will not work in legacy browsers, it’s a nice enhancement that smart browsers would understand well. (ml)

406. Bicyles, Sushi And Fancy Pants… In Patterns!

Do you happen to be looking for patterns? Well, this golden nugget might be just what you’ve been searching for to set just the aesthetics and experience of your next design. Check out this fantastic Pattern Library41, an ongoing project which compiles colorful, inspirational and original patterns created by some of the most talented designers — for free.

Bicyles, Sushi And Fancy Pants... In Patterns!42

Bicycles, retro furnish, NYC candy, alchemy, escape flight or how about a sushi theme? This pattern library portrays creative patterns of all different kinds. Perhaps there’s something which will fit perfectly into your next layout and help you communicate your message more effectively? A high five to both Tim Holman43 and Claudio Guglieri44 for providing everyone this useful library and making our search for patterns easier. (ea)

457. Inspiring Morning Routines

Do you have a typical morning routine? Yes? No? Well, whether you’re looking to find new ideas to incorporate into your current routine, or you want to finally turn your mornings into the productive haven you’ve always dreamed of, My Morning Routine46 will definitely inspire you in one way or the other.

Inspiring Morning Routines47

Don’t underestimate the early morning hours; if you have a good morning routine you can set yourself up for a more productive and enjoyable day. The site features plenty of interviews and articles with creatives across the globe who all share their morning routines and their little tips and tricks to start the day off from the right foot. You can even subscribe to receive a brand new morning routine every Wednesday, or submit your own morning routine48, too. (il)

498. In-House Smashing Workshops

We love fixing problems. If you’re struggling with legacy systems or a suboptimal front-end workflow in your company, well, perhaps we can help. We’d be more than happy to organize in-house workshops on the spot and help you solve the issues that have been troubling you for so long.

In-House Smashing Workshops50

Responsive design, advanced front-end techniques, performance optimization, UX, conversion rate optimization, sketching and wireframing or debugging: we’re quite flexible about the topics and the format of the workshops. If you’re interested in having a workshop run inside your firm for a day, just get in touch with Vitaly51 and briefly describe what problems you’d like to solve. We’ll run a workshop to effectively address your issues. Don’t worry about the costs either — we’ll find a fair price for sure. Yes, it’s that easy! (vf)

529. A New Smashing Mystery: Get Ready!

Perhaps you’d love to attend the SmashingConf New York53, but it’s way too far away from where you are? Well, fasten your seat belts and pull out your alarm clocks: we have a new Smashing Mystery coming up on Tuesday, Jan 28th, at 2 PM CET (8 AM CST) on Smashing Magazine’s front page. Not sure what all of this is about? Well, check out the first one54 to practice your detective skills in the meantime.

A New Smashing Mystery: Get Ready!55

The main prize for the winner will be a round-trip ticket to New York, accommodation in a fancy hotel and a full conference plus workshop ticket. Doesn’t it all sound just… smashing? Well, make sure to get enough coffee and make it to Smashing Magazine’s front page56 on time! How about setting your alarm clock right now just in case you forget? ;-) Good luck! (vf)

The authors in this newsletter are: Shavaughn Haack (sh), Cosima Mielke (cm), Melanie Lang (ml), 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://smashingconf.com/ny-2014/
  3. 3 http://smashingconf.com/ny-2014/
  4. 4 http://thetimescenter.com/
  5. 5 http://smashingconf.com/ny-2014/
  6. 6 http://smashingconf.com/pdf/8-reasons-for-Smashing-Conference-NYC-2014.pdf
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #
  17. 17 http://snook.ca/archives/html_and_css/font-size-with-rem
  18. 18 http://alwaystwisted.com/post.php?s=2014-01-01-rems-fallbacks-and-support
  19. 19 http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
  20. 20 http://alwaystwisted.com/post.php?s=2014-01-01-rems-fallbacks-and-support
  21. 21 http://typenot.es/posts/baseline-rem
  22. 22 http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
  23. 23 https://medium.com/front-end-development/8f433689736f
  24. 24 http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/
  25. 25 http://nerd.vasilis.nl/dislike-rem-unit/
  26. 26 #
  27. 27 http://russellbrown.com/scripts.html
  28. 28 http://johndunning.com/fireworks/
  29. 29 http://russellbrown.com/scripts.html
  30. 30 http://shanfan.github.io/Illustrator-Scripts-Archive/
  31. 31 #
  32. 32 http://calendar.perfplanet.com/2013/mobile-isp-image-recompression/
  33. 33 http://calendar.perfplanet.com/2013/mobile-isp-image-recompression/
  34. 34 #
  35. 35 http://www.sizzlepig.com
  36. 36 http://www.sizzlepig.com
  37. 37 #
  38. 38 http://tympanus.net/Development/BookPreview/
  39. 39 http://tympanus.net/Development/BookPreview/
  40. 40 #
  41. 41 http://thepatternlibrary.com/
  42. 42 http://thepatternlibrary.com/
  43. 43 https://twitter.com/twholman
  44. 44 https://twitter.com/claudioguglieri
  45. 45 #
  46. 46 http://mymorningroutine.com/
  47. 47 http://mymorningroutine.com/
  48. 48 http://mymorningroutine.com/participate/
  49. 49 #
  50. 50 http://www.smashingmagazine.com/workshops/
  51. 51
  52. 52 #
  53. 53 http://smashingconf.com/ny-2014
  54. 54 http://www.smashingmagazine.com/the-smashing-book-mystery-is-resolved-gifs-crazy-people-all-that-malarkey/
  55. 55 http://www.smashingmagazine.com/the-smashing-book-mystery-is-resolved-gifs-crazy-people-all-that-malarkey/
  56. 56 http://www.smashingmagazine.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
  1. 1

    Resizing and cropping images. There’s a real easy way to do this, if you already have Adobe Creative Suite. In InDesign, set up a template with a number of graphic frames sized to the crop size of your intended upload images. Populate each of these graphic frames with the high-res original image(s). I just use the fit image to frame command, but I also can use the grabber tool to move the image inside the frame to what I want it to be. Then I export to HTML, with the Export Options for Image set to “Preserve Appearance from Layout” and resolution at 72 ppi. You can select an output type (png, jpeg, gif), or use the default. It takes all of 15 minutes to create all the images I will need (ex of a tree picture: tree_slide, tree_homepage, tree_toc, etc.) for a 30 page website. The only thing that takes time is renaming the images (if you want to) as the ID engine will only put suffixes of fmt, fmt1, fmt2 after the image name. But this method is quick, and free (if you have InDesign).

    0
  2. 2

    Hi! I’m looking for a software used to design newsletters and magazine because I have been given the task to purchase this software. Hopefully my request will be adhered to, looking forward for your response.

    0
  3. 3

    I love your email newsletters. Just one thing after another thing after another thing. They must look great on mobile devices. I wish I could convince our folks not to get so fancy with their print-like layouts that I have to try to copy — and then get content from the CMS to flow into it. Our HTML email newsletters would be ever so much easier to prepare and be rendered properly by everybody.

    0

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