Issue #81 | Tuesday, April 2nd 2013 | 137,273 subscribers | Previous issues
Dear Friends,
As professionals who care about our craft, our design discussions often circle around best practices and perfect solutions for design problems. We care, and that's what makes our work good and our workflow better with every new project. But perfect solutions don't exist in the real world, and so seeking pragmatic alternatives that get projects finished in time is fine, too — as long as we don't compromise our professional principles, that is.
As Harry Roberts and Nicolas Gallagher remind us, questioning status quo is helpful and necessary. So when was the last time you broke your CSS/JS habit and tried something different and counter-intuitive for a change? What about trying out OOCSS, LESS, SASS or RESS? Or refactoring a stylesheet with rems and SVG sprites?
That's exactly what we've set out to do this week on Smashing Magazine's website to improve the performance and the code base. So in case you notice any bugs or issues, please let us know on Twitter and share your experiences on breaking your habits using the hashtag #smnlhabits. Good luck!
PS: If you happen to be around Freiburg (Germany) this week, make sure to drop by at the Smashing Meetup With Paul Boag on April 4th — we'd love to meet you! By the way, Paul Boag's "Client Centric Web Design" eBook is now available in our Smashing eBook Library starting from today. Happy reading and stay tuned!
— Vitaly
Table of Contents
01. CSS Icon Stacks
02. What Are Your Biggest Failures?
03. Building An Automatic Table Of Contents
04. Adaptive SVG Illustrations With CSS
05. CSS3 For Responsive Web Design: Workshop With Andy Clarke
06. Free PSD: Corporate Identity Mock-Up Set
07. Photoshop Shortcut To Copy Color Hex Value
08. Windows Of New York
09. So What Exactly Is UX Anyway?..
10. New Characters To Extend Your Superhero Collection
11. New on Smashing Job Board
12. Smashing Highlights (From Archives)
13. Recent Articles On Smashing Magazine
1. CSS Icon Stacks
If you worked with PNG sprites for a while, you probably experienced a sense of relief when you first played around with SVG or icon fonts. The latter provide a couple of interesting features that you don't have with "classic" vector graphics. With icon fonts you can define custom ligatures and assign any combination of characters to an icon glyph — e.g. to embed scalable logos into your Web font. In fact, you can do more than that. What about building modular, complex, stacked, multi-colored icons?
Conor Muirhead was struggling with a solution for displaying multi-colored icons using Web fonts. So he came up with a nice little technique that he calls Icon Stacks. Split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a "mega-icon." And if you'd like to add a little bit more depth or polish to your mega-icons, just use CSS gradients and the background-clip property to pop things up a bit. Simple, right? A clever technique that might save some headaches and time in your next project. (vf)
2. What Are Your Biggest Failures?
While we love discussing our success stories and the mysterious paths that lead us to happy accidents and important achievements, we tend to avoid talking about our failures and biggest mistakes. However, usually it's the times when we fail miserably and have to start over when we are truly getting better at what we do.
In his blog, the designer Ben Krogh started a fantastic series of interviews about failures and mistakes designers made in their careers. Interviews go into detail examining the reasons behind and the consequences of failures and what designers learned from them. An insightful series of articles, worth reading, bookmarking and learning from. (vf)
3. Building An Automatic Table Of Contents
Tables of contents aren't a must, but having one on a content-heavy page can be quite beneficial as users can quickly jump to their desired section. Of course you can also build your table of contents manually, but doing it dynamically on-the-fly with JavaScript can save quite some time. Of course, building a dynamic table of contents isn't that difficult and Chris Coyier has published a detailed tutorial on how to build it.
Since an automatically created table of contents isn't subject to authoring errors, it is more reliable, and, written once, JavaScript can create one on every page you like. The tutorial walks you through the six easy steps it takes to build your own. A nice and really simple solution. (cm)
Advertisement
4. Adaptive SVG Illustrations With CSS
Responsive design is usually associated with fluid images, adjusted navigation patterns and layout shifts. However, what if we applied responsive design techniques in places where they aren't usually used — e.g. when working with SVG illustrations?
Because SVG is XML-based, the same CSS attributes that we use to style HTML pages can also be used to style SVG files. So we can apply an id attribute to SVG elements (e.g. svg id="flourish" and customize their appearance using an id or class selector. And if we apply a media query, we can easily create adaptive SVG illustrations. In his blog, Dudley Storey explains how to create adaptive SVG illustrations and embed them in a responsive design. Another way to break out of the boxes of thinking that we are all sometimes used to.
If you'd like to learn more about SVG and its (great) browser support, make sure to check Chris Coyier's article on Using SVG. (vf)
5. CSS3 For Responsive Web Design: Workshop With Andy Clarke
It's always useful to see how our colleagues — professional designers and developers — work and think and what we can learn from their design processes to improve our own design workflow. What sounds fantastic in theory, doesn't necessarily work in real-life projects, and this is why it's great to get practical insights into work done by well-respected professionals.
That's why we invited Andy Clarke, author, speaker, designer and the creative mind behind Stuff and Nonsense, to host a brand new full-day workshop in our hometown Freiburg, Germany. Andy will explain how you can use Flexbox and display: table to rearrange content, make the most of tiny bitmaps with border images and improve Web typography in your designs. The workshop will be held on June 25th 2013. The number of seats is limited, so make sure to grab your ticket now! We'd love to meet you! (vf)
6. Free PSD: Corporate Identity Mock-Up Set
We live in a world of brands and logos. Everything requires its own identity, and creating a memorable and recognizable corporate identity (CI) is often an essential part of any design project. However, when it comes to presenting a newly designed CI to clients, how would you present a brand? As a vector graphic or as a print-out? Wouldn't it be helpful to have a complete mock-up set of the various assets that the CI could be displayed on — e.g. CDs, pencils, letterhead, calendars or bags — to give the client a better idea of how the logo would feel in various settings and environments?
Well, the creative minds behind blugraphic did just that. They released a Photoshop PSD freebie which you can use to present your CI designs to your clients or in your design portfolio: Corporate Identity Photoshop Mock-Up. The free mock-up consists of those assets which are typically used to display and promote a brand: office utensils, letterhead, business cards, CD cases, etc.
All elements are build with vector shapes, which means that you can easily resize them without losing quality. You can also change the proportions of everything to fit the sizes of your identity elements. (ea)
7. Photoshop Shortcut To Copy Color Hex Value
Have you ever wondered if there's a shortcut to copy the hex color value of a color selected in Photoshop using the eye dropper tool? The same question was bothering Noah Stokes, so he asked on Twitter. Sean McCabe came up with a handy little tip: You can set a keyboard shortcut to copy a color's hex value.
Just select a color with the eye dropper, switch to your code editor and paste the hex value into your CSS. To make things even easier, you can assign this feature to one of your function keys and have it at your fingertips whenever you need it. Looking for yet another alternative? Dries Delaey noted that a simple right click on a color with the eye dropper, which copies the hex value, also does the job. (cm)
Advertisement
8. Windows Of New York
Windows are the eyes of a city: they watch people walking, the rush hours of traffic, the movements of nature, life. Sometimes we just pass by them without really attempting to see the details which make them so unique.
Graphic Designer Jose Guizar noticed the beauty of the Windows of New York and had an idea: to illustrate them and categorize them by their neighborhoods. Take a look at his project and you will observe the nuances of the architectural style present in the Big Apple. (tts)
9. So What Exactly Is UX Anyway?..
Everybody is talking about UX, UI, IA, intuitive interfaces and easy-to-use products, but do we and our clients have a common shared vocabulary about what these terms actually mean? To get you well prepared for your next conversation about UX-related issues, UX Apprentice has broken down this vast territory to the absolute basics, explaining the process of UX design by exploring its three layers: Discovery, Strategy and Design.
After learning about the core principles, you will see them being put into practice in real-life examples. A little quiz puts your newly aquired knowledge to the test. And in case you want to learn even more, Theresa Neil, the author of the resource, has put together lists of further resources like books, blogs and links to advanced UX topics for you to explore. The topics covered include an entire UX process from customer research to storyboarding, prototyping and testing to the final launch — the basics every designer should understand. (cm)
10. New Characters To Extend Your Superhero Collection
We all love our good ol' superheros like Batman or Catwoman, but we have to admit that this set can become quite limited over time. Everett Downing is just in time to save our bored minds by presenting us hundreds of new characters to love. The animator draws at Pixar and decided that his New Year's resolution for 2010 would be to draw one new superhero each day for one year. He didn't quite manage to finish in the same year but has picked up the challenge again to complete the set of 365 characters.
When beginning with a character, he starts first with the name. A name is either cool, comes from a pun or is made up of a word play. From there, he creates the rest. He also sets a deadline and only spends one hour on each drawing. Those simple rules set boundaries for infinite creative possibilities and to define the working process — a perfect example of how to create an efficient workflow. (ml)
11. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Web Designer/Developer at The District Management Council (Boston, MA)
We are looking for a talented and motivated designer to help us shape the future of public education. The ideal candidate will possess strong marketing, visual design, data visualization, analytical skills, as well as expertise in semantic web standards using light HTML markup and CSS.
-
Sr. UI Engineer / Architect for stealth mode startup at Social in SOMA (San Francisco, CA)
Big Data + Social + Mobile + UX = Big Opportunity. Does the cross-pollination of big data, social, mobile and UX spark your imagination? Good. Us too. We are energized by the opportunity at hand. Here's your chance to join us in building something fresh, from scratch.
-
Senior Front-End Web Developer Strategic Partnerships (HTML,CSS, Javascript) at Booking.com (Amsterdam, Netherlands)
Booking.com is the global market leader in online hotel reservations. Since 1996 our team has expanded to more than 4500 professionals from hotel, finance, internet technology and marketing businesses and has built a company that provides online hotel reservations in the best possible way.
12. Smashing Highlights (From Archives)
13. Recent Articles On Smashing Magazine
No comments:
Post a Comment