Dear Friends,
Ah, the good ol' <select> drop-down menu. Whether it's an endless country selector, a lengthy list of available product items or just a quick overview of projects in a portfolio, filling them in is no fun at all. And the experience of scrolling through the drop-down menu that occupies half of the available viewport is quite annoying, too.
But it doesn't have to be this way. We could use an auto-complete field to let users type in the country's first characters and identify the country on the fly (with a <select> drop-down being a default, and JavaScript enhancing the experience). Alternatively, we could turn a drop-down into a stack of rich content layers. Also, if you search for a cross-browser <select> drop-down, you can use CSS only custom-styled select menu by Todd Parker, which works pretty well across all browsers.
So maybe there's no reason to stick to those select-menus after all. And perhaps, just perhaps, there is a better, and a bit smarter way to make user input a bit more comfortable.
– Vitaly (@smashingmag)
Table of Contents
1. Scalable Vector Maps, In One Font
You might have run into this problem before: some regions or countries where the client's business is present need to be visualized, yet you're missing a consistent style for all of the map icons. Fortunately, with Map Glyphs by Ted Grajeda, you've got this problem pretty much covered.
The CSS icon font contains over 300 scalable vector map icons of the world, continents, countries and states. Also, since the entire set is based on SVG, you can easily adjust the style of the icons and its integral parts, be it the thickness or color of lines, or even animation. A reference cheat sheet with icon font classes is provided as well. Please note that the project is still a work in progress, but most icons are very useful already! The font is available as SVG, TTF, WOFF and EOT. An attribution is required unless you purchase the bundle with a few extras. Bookmarked. (vf)
2. Animated Background Headers? Yes, Please!
So you want to create a prominent background image header and perhaps add a bit of animation to add more visual interest to it? Well, you could just use a background video, or a simple SVG transition, but you could also play around with it a bit more, and if you know your way around JavaScript, you could create some quite nifty animated visual effects, like Rachel Smith did — and explained her process in her recent article.
Rachel's animated background header examples were created with JavaScript and Canvas, including an animation loop using requestAnimationFrame and shapes that are being modified to create different effects. The animations follow mouse movements or use tweens from a predefined library. The result? Subtle visual effects that help the header to get just a bit fancier. (ml)
3. Font Family Reunion: Compatibility Tables For Default Local Fonts
Fonts aren't what you'd want leave to chance, but to which default font does a browser really fall back upon? Unfortunately, fallbacks are handled quite inconsistently among different systems which makes it difficult to make predictions on what will happen if you define a font-family with a keyword fallback — let's say for example font-family: fantasy. Until recently, there was no easy way to look up the default fonts for different operating systems, but then (lucky us!) Zack Leatherman decided to change this by building Font Family Reunion, a "caniuse" for default local fonts.
The tool tells you what the five standard CSS keyword font-families are aliased to within each operating system, but you can also run font-family stacks through it to see what will happen on different systems. You might be surprised, something as simple as font-family: Helvetica, Arial and font-family: Arial, Helvetica for example will already lead to very different results. A handy tool that makes your font choices less of a game of luck. Definitely worth having in your bookmarks. (cm)
Advertisement
4. Selling Tickets, With A Sprinkle Of Canvas And SVG
Imagine that you're selling tickets for large concerts or sport events. For every single location, you have a map, and each map has rows and columns with seats, and you want visitors to be able to select an area, and a row and an actual seat on this map. Obviously, you'll have to enable panning and zooming, but how would the interactions look like, and how would you build it to make the solution scalable — both in terms of the available screen size and performance?
SeatGeek developers struggled with just that problem. Their solution? Well, you could use three different layers for every map: an image tile layer (the actual stadium), an SVG layer (the blue section outline), and a marker layer (e.g. with Leaflet, the green dot). However, juggling around thousands of DOM elements drawn in SVG is likely to cause performance issues. In order to improve performance, you can draw the markers to tiled canvas elements instead and move these tiles instead of DOM elements. Drawing to canvas is fast, and you can still use SVG polygons and marker layers to achieve the level of interaction that you are aiming for. An interesting case study for an interesting real-life problem, and thus definitely worth reading! (vf)
5. App Design Workflow
When you design an app for a variety of resolutions, how do you prepare your graphics? Well, you most probably start at a high DPI 2x or 3x the document size and then scale down. But why not start at 1x and then scale up? This may not sound like the most effective way, but might as well be a great strategy for scalable assets. In fact, that's exactly what Marc Edwards does — and explains — in his App design workflow article.
If you have to deal with apps on a daily basis, you'll be sure to find a good number of nifty gems in this particular article, including a guide to designing iOS, Android and Mac apps. You can also use the Photoshop Actions to easily switch between multiple document sizes and apply a few techniques that will allow your elements to appear crisp and nicely rendered for all sizes. Everybody has their own workflow, and it's great to see designers sharing how they do their magic! (ea)
6. Six Monkeys That Might Make You Love Email Again
Most of us have a rather ambiguous relationship with email. We curse them when we are struggling to keep our inboxes from overflowing, or each time we get notified for new spam. On the other hand, our inboxes also treasure messages from dear friends, memories, exciting opportunities. So, what if we could change the context of how we interact with email? What if email was more than just a relentless notification behind the cold glass of our screens? Could we learn to love it, or at least appreciate it, again? Well, we could, as Brendan Dawes project Six Monkeys shows.
Six Monkeys is a series of six physical objects, each one of them named after a famous Chimpanzee (the project is a commission work for Mailchimp, in case you were wondering), that are connected to the Internet and react to email in their own, unique way. Nim, for example, is a light switch that you can switch off to prevent email from coming in, Ham a little box that stores your most treasured emails and prints them out when you unlock the box with a (physical) key. An exceptional mix of analog and digital that gives email back some of its magic from the early days. Beautiful! (cm)
Advertisement
7. Tools For Picking Colors And Gradients
Everybody loves a good gradient, but picking just the right one may be a tedious (and potentially annoying) task. As it turns out, you can use Spectral, a little tool that lets you pick a basic color and adjust the hue, saturation and lightness until you've reached the perfect color gradient. And that's not it: you can add different shades, too!
Another tool, DraGGradients, is also a simple tool that generates and customizes multiple CSS3 radial gradients for you. Just select a main color and "stopping" points, drag each point to the right direction, adjust deepness to create a gradient and... voilà! You're done! You can also generate a random gradient or use an existing preset. Once you're happy with you creation, simply export the CSS. Happy gradients, everyone! (ml)
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.
Half-Day Workshops In Bath, UK (Oct. 27):
4-Hour Online Workshops (Nov. 18/19):
Full-Day Workshops In Whistler, Canada (Dec. 9/12):
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:
-
UI Developer at ZenPayroll (San Francisco, CA)
We're looking for a talented UI Developer who lives and breathes HTML, CSS, and Javascript. The best code is something that is highly extensible and modular.
-
Front-End Developer (m/f) at Westwing Group GmbH (Munich, DE)
We're looking for a front-end developer who will work closely with our product managers and designers to turn static PSD designs into amazing user interfaces, and turn our websites into a beautiful and unique shopping experience for our customers.
-
Full-Time Senior Designer at SPINX Digital (Los Angeles, CA)
We're looking for a UX designer who can manage our Junior Designers, create wireframes, and coordinate frequently with Project Managers (and occasionally with clients).
Smashing Highlights (From Our Archive)
-
Taming The Email Beast
In the 1950s, when consumer electronics such as vacuum cleaners and washing machines emerged, there was a belief that household chores would be done in a fraction of the time.
-
How To Benefit From CSS Generated Content And Counters
Generated content was first introduced in the CSS2 specification. For several years, the feature was used by relatively few Web authors due to inconsistent browser support.
-
The Ultimate Guide To Cloning In Photoshop
Photoshop's wide array of cloning tools is the cause of many of the absolute best and worst works created with the application. In a skilled and experienced hand, these tools lead to phenomenal results.
Recent Articles On Smashing Magazine
