Dear Friends,
Have you ever thought about how the reading experience of email newsletters could be improved? Tidying up the design and making it responsive (unless it is already, that is) may be a good start. Well, that's what we did last week; we adjusted the header area and removed clutter, increased the font-size and spacing within the body copy. You may have already noticed that you're able to read much more of today's editorial without having to scroll down first.
Furthermore, the table of contents is now an actual table with larger clickable areas supported by more padding that should be easier to click on. Also, the content of our newsletter issues will be highlighted both in the subject line as well as in short taglines that allow a quick preview of the topics across popular mail clients.
If you just started experimenting with responsive newsletters, you could look into responsive email layouts, patterns, resources, transactional email templates and potentially even email signatures to make the HTML email just right.
Happy responsive emailing!
– Vitaly (@smashingmag)
Table of Contents
1. Getting To Grips With The Bézier Curve
Mastering the pen tool can be quite challenging, even for experienced designers. So if your skills need some brushing up or if you finally want to get to grips with the bézier curve, The Bézier Game, created by Mark McKay for the education startup Method of Action, is a playful way to improve your skills.
The concept of the game is simple. You get an object and you have to trace its outline by bending curves around it — with as few nodes as possible. But be warned, what sounds easy in theory is quite tricky in practice indeed. Just remember: practice does makes perfect, so don't give up too easily! (cm)
2. Get More Out Of Your Photoshop
Smart Photoshop extensions can speed up your design workflow immensely. So, how about giving these two a try: LayerCraft is a plugin to automatically export UI assets from layers to all iOS and Android sizes (@1x to @3x and mdpi to xxxhdpi). It does not only allow you to scale assets, but also trim down transparent pixels and cut out selected layers. You can download LayerCraft for free, however, if you find it useful, its creator Ray appreciates if you buy him a coffee in return.
Another addition to your Photoshop toolbox that is bound to save you a lot of time is Page Layers, a Mac app that captures entire webpages and converts them to layered Photoshop files. Simply open up a site in the embedded browser and select to save it as a PSD file. Every page element (be it images, links or blocks) will be rendered as a separate, named layer that you can work with. This app is great if you need to switch from the browser to Photoshop quite often, or you just feel more comfortable adjusting design in Photoshop. But if you're working on a redesign, then this particular app could prove to be most handy. (cm)
3. Applying Alpha Channels To JPGs
You've had this problem before: you have a prominent large photo that requires a heavy transparent drop shadow on a solid background. Well, you could save the image as a PNG but then the file size will be pretty large, or you could save it as JPEG, but then transparency won't work because the transparent shadow will look washed out. So what to do? Well, you can create two files, a regular non-transparent JPG and an 8-bit PNG (alpha mask), and you can embed both of them inside an SVG container and actually apply the PNG mask to the JPEG image.
The JPEG/PNG compression with SVG is a simple technique, but due to SVG it isn't supported in IE8. However, for cross-browser support, you could embed both PNG and JPEG as data URIs inline inside the SVG and then display the images using img src or background. You can automate the process with an online generator, too. The result? Significant savings in file sizes for images that otherwise would have been obese. One for the bookmarks! (vf)
Advertisement
4. (Good) Typography Is A Practice!
Here's a million dollar question: What goes often unnoticed just because it makes sense? Well, the correct answer is: Good typography. Repeat, good typography! Good typography is what most people never really think about, and that's because it's simply appropriate. Good typography tends to simply convey just the right feeling; it's neither overwhelming nor distracting. If you consider that web design is 95% typography, then why not hone your skills?
For example, you could bite off a little bit of your time and learn how to select typefaces for body text. Or, you could let yourself get inspired by a pro like Donny Truong and check out his demos of typographic web design using CSS, such as hanging punctuation, multi-columns, drop cap and the good old ampersand. If that's still not enough, why not pimp up your expertise on subheads and learn how you can achieve some interesting effects with a pinch of CSS, too? Also, sometimes it even helps to remind ourselves what typography is and why it's so valuable. (ea)
5. Design Patterns To The Rescue
Nothing beats a nice overview of common design solutions to a problem that you've just stumbled upon. You might not find just the solution to use right away, but seeing what might work before starting to design or code right away definitely saves a great amount of your time.
CodePen guys 'n' gals have collected and categorized a few code snippets and presented them all in a nice Design Patterns overview. You'll find common solutions (and clever design techniques) for charts, graphs, tabs, buttons, dialogs, drop-down menus, log-in forms, loaders, pagination, calendars, tables, maps and emails. A handy resource to keep in mind, so you don't have to lose too much time searching around next time. (vf)
6. The Forgotten Vertical Media Queries
When we discuss media queries in responsive design, we tend to focus primarily on screen width and screen density. However, the good ol' device-agnostic design approach for RWD prompts us to add breakpoints when things, well, break, e.g. when font size is becoming too small, or the line-length is becoming suboptimal, or there isn't enough space to show the entire navigation menu any more. However, things don't only tend to break just across the horizontal axis. Portrait and landscape media queries, just like vertical media queries (min-height/max-height) can be extremely useful to fit in just the right amount of content within the available viewport area.
Well, what can you do with them? ToDoGroup adjusts padding for the content area and navigation bar based on the available vertical space to fit in more content in the narrower space. On Trent Walton's website, the main idea is to show more-or-less the same amount of content — adjusting font-size and padding based on both horizontal and vertical media queries. In his recent talk, Antoine Butler advocates to embrace the vertical and covers a few cases when vertical MQs would make sense, e.g. using accordion pattern when the vertical space is sparse and building adaptive sticky vertical navigation. Perhaps vertical media queries are worth considering in your next project, too. (vf)
Advertisement
7. Unusual Off-Canvas Menu Effects
Who says that off-canvas menus have to always just slide in from the left or right to reveal side menus and controls? If you are eager to try out something different for a change, you might find a wonderful source of inspiration in Codrops's collection of off-canvas menu effects. The effects are quite surprising, but in no way obtrusive.
Created with CSS transitions, CSS animations and animated SVGs, the code snippets give common interaction patterns an unusual twist and allow you to play with organic shapes — think waves flowing in from the bottom, for example. The collection comes with a nice demo, and if you want to dig in further, you can also find the project on GitHub. (cm)
8. Get Better And Smarter: Upcoming 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: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.
Two-Hour Online Workshops (Sept. 30–Oct. 1):
Full-Day Workshops In Zürich, CH (Oct. 14–15):
Half-Day Workshops In Bath, UK (Oct. 27):
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.com 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!
New on Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Senior UX Architect at Krossover (New York, NY)
We're looking for a Senior UX Architect to help us design, manage and improve our suite of Intelligence products, including web, iOS and Android apps.
-
Front-End Developer at Unify Square (Bellevue, WA)
We're looking for a front-end developer who will design and implement enterprise-grade and robust UX for our high-performance products, as well as drive uniform UX across all the products and services.
-
UX Designer at BombBomb (Colorado Springs, CO)
We're looking for a UX designer who has a passion for usability, an eye for visual consistency, and a knack for reducing the complex to the bare essentials.
Smashing Highlights (From Our Archive)
-
An Introduction To DOM Events
Click, touch, load, drag, change, input, error, resize — the list of possible DOM events is lengthy. Events can be triggered on any part of a document, whether by a user's interaction or by the browser.
-
Smart Transitions In User Experience Design
Some websites outperform others, whether in their content, usability, design, features, etc. Details of interaction design and animation make a fundamental difference on modern websites.
-
The Ultimate Free Web Designer's Icon Set
There are thousands of free icon sets out there, and every other day we see new sets being released by the design community. In fact, Smashing Magazine has been releasing icon sets for years now, too.
Recent Articles On Smashing Magazine
