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