This newsletter issue was sent out to 168,798 newsletter subscribers on Tuesday, November 19th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.
Time passes quickly, and another year is soon coming to an end. We’re immensely proud and happy of everything we have achieved this year, and eagerly look forward to the official release of the Smashing Book #4 next week. As we’re known to be big fans of adding icing on the cake, we’ve prepared something quite extraordinary for you.
The Smashing Book #4 is on its way — it’s only a matter of days!
Have you marked the 26th of November on your calendar yet? A mystery will be waiting for you on the Smashing Magazine front page this upcoming Tuesday at 14:00 CET. The first dozen of readers to try their luck and solve the mystery will win very special and unique prizes. Make sure you don’t miss out! ;-)
Cheerio everyone, and keep an eye open for hints!
01. Dashed, Animated CSS Background
02. Happy Fox, A Free Font
03. When Intuition Just Isn’t Good Enough
04. Free Quality Photos: Use As You Please
05. Clean Up Your Photoshop Swatches And Styles
06. Making Website Testing More Efficient
07. Color Scheme Repository For Google Maps
08. Web Services (Not) In Control
09. Exploring How Writing Works
10. Encoding: How To Get It Just Right
11. The Cubicle Is Dead: Rethinking Workspaces
12. Life Is Like Riding A Bicycle…
13. Draw Me A Typographic Iceberg
14. Keep Calm… And Attend A Smashing Workshop!
If you are into shadows, dashes, animations and CSS, today is probably going to be the best day of your life. Well, what if you combine them all to produce a nice visual effect for type on your website? Well, that’s what Lucas Bebber did.
The result is a Sass/Compass mix in which you can define foreground, background and shadow colors, distance of the shadow, the cut distance as well as the size, ratio and angle of strips being displayed in the shadow — and you can animate it all, too. Lucas used
:after pseudo-elements, a linear gradient and
background-size for stripes alone. It’s a good idea to replace pt definition in type size with ems though. Funky! (vf)
Even if you don’t happen to be a huge typography fan, we’re sure you’ll love Fran’s and Laura’s Happy Fox typeface. It’s a thin font with hand-drawn and condensed shapes.
Happy Fox is their first typeface project, and they’re quite proud of it. You can download it and spread the word with a tweet or post about it on your blog. Psst, there’s also another goodie hidden inside the download folder — check it out! (il)
You can’t always trust your intuition, and you don’t have to reinvent the wheel all the time. If you’d like to set up a good typographic hierarchy for headings and body copy on your website, you can use one of the tested and proven scales out of the box.
Type Scale provides a quick visual reference for choosing the proper scale. Derived from Tim Brown’s Modular Scale calculator, it lets you select a scale and preview it right away. Basically, you just need to enter the base font-size for your body content (16px works), examine the em values that the tool outputs and choose the ones that work best. No guesswork necessary! (vf)
When was the last time you felt inspired by generic, random stock photos? Stock photos are actually quite easy to spot, and usually look alienated, unfit or plain ridiculous. With Gratisography, Ryan McGuire has decided to provide free high-resolution pictures which are freely available for personal and commercial projects.
While admittedly some pictures do look like stock photos, most pictures are unique in their own right, shot professionally from unique angles. All of the pictures have been captured by Ryan McGuire himself, with new ones being added to the gallery every week. Definitely worth bookmarking! (vf)
Photoshop has many features and default styles as well as swatches that can empower us and invite new users to play and explore the endless possibilities. However, if you’re an experienced designer, chances are high that the pile of defaults has cluttered up your work environment and has eventually slowed you down. Instead of copying and pasting styles and colours, you might find it more efficient to clear out any defaults and build custom palettes to you current project instead.
Selecting color and styles individually and deleting them is tedious work. Luckily, Mindy Wagner provides a time-efficient solution for this. She has created two empty palettes for you to download. Simply replace the swatches and styles defaults with these empty palettes and you’ll have a blank toolbox that can be filled with your very own custom styles. If you want to learn more about creating you own portable design toolkit, check out Martin Gittin’s article. (ml)
You know the drill: building responsive websites involves a lot of testing and making adjustments — sometimes a pretty tedious cycle. However, the right tools can help to make your testing workflow a lot more efficient. One of these little helpers is browser-sync. Developed by Shane Osbourne, the command-line tool keeps multiple browsers and devices in sync — just as the name implies.
Browser-sync comes with some really nice features. It does not only make your browsers follow your clicks, but also reloads live, and watches your CSS files and injects them when they change. It even serves static files, and copies data to all of your browsers when you fill out a form once. Sounds good, doesn’t it? (cm)
Google Maps is a great tool to visualize locations and directions, but there is one downside that can’t be denied. Unfortunately, the visual appearance doesn’t really blend well into most website designs. Well, at least it hasn’t until now. The team behind Snazzy Maps decided to give back a little something to the Web community by releasing a repository of color schemes for Google Maps.
Kelly Slater once said, “Surfing is like the mafia. Once you’re in — you’re in. There’s no getting out.” But did you ever think that getting out of a Web service could be as difficult as getting out of surfing? Guess what, it can! Registering to services like Skype, Picasa or Netflix is mostly very easy, but deleting your account can be very difficult and sometimes even requires you to contact customer service. Hmm, dark patterns!
Luckily, two guys have switched on the lights and have created Just Delete Me — a directory of direct links to delete your account from particular Web services. At present, 300 services are listed. All links are marked as either easy, medium, hard or impossible to indicate the difficulty level. You not only get the direct URL to delete your account, but in most cases also additional information on how to completely remove it. On top of that, Just Delete Me offers you a very smart Google Chrome Extension and a Fake Identity Generator. A big Thank You to Robb and Ed — well done, guys! (ea)
On the Web, writing, editing and publishing has become an almost ubiquitous activity. Everybody has to prepare, manage and “meet” content at some point. Yet, while we’ve recently started discussing Content Management Systems more than ever, not enough attention is paid to actual content “production”, i.e. writing.
Editorially’s STET (which stands for Let It Stand) aims to fill this gap and encourage more discussions between writers and editors. It’s a writers’ journal on culture and technology which pairs good writing with notes that explain what makes writing so good. Each article is thoroughly designed, copyedited and presented, with contributions ranging from technical to design topics. A good journal with brilliant content to give copy the attention it deserves. (vf)
The issues of encoding have been identified ten years ago, and so have the solutions for getting it just right. Nevertheless, common editors still save in ASCII by default, many Web developers still don’t know about character encoding and the Internet is still full of websites showing garbled text. Oli Studholme summarizes what is essential for building a Web page with bulletproof encoding.
Where do you feel most creative? At a bustling coffeeshop, at a desk in an open space office, or lounging on a couch in some quiet corner? Everyone is different and so are our needs when it comes to workspaces. Luckily, companies have started to realize that our surroundings significantly influence creativity, and that sitting in a gray, inflexible cubicle from 9 to 5 isn’t the best motor for groundbreaking ideas. Young, dynamic startups were among the first to break with the outdated concepts of what an office typically looks like — and many companies have followed with fresh ideas. Want to sneak a peek behind closed doors?
Custom Spaces lets you browse through thousands of photos of unique office spaces, every single one of them bubbling over with ideas on how to make work more pleasant, and as a consequence, more productive. Delve into impressive lounge areas, quiet spaces, meeting rooms, play areas, and kitchens! A nice bonus feature: each office portfolio is accompanied by the contact data of interior designers and vendors that have helped bring it to life. But be warned, chances are high that you’ll get at least a bit jealous at the sight of half-pipes, fully-equipped bars and rooftop terraces. (cm)
Now here’s a little something for all the athletes among you — well, cyclists, to be more precise. Neil Stevens strikes again with another fresh set of prints that celebrate the success of British Cycling. Among the prints in the forthcoming series (soon to be available in Neil’s online shop) are the Mark Cavendish, Bradley Wiggins and the Velodrome designs.
These giclée prints will be printed on 315gsm uncoated paper and look good on any wall. One of our favorite quotes: “Life is like riding a bicycle. To keep your balance you must keep moving!” (il)
Imagine you receive a call from someone who asks you to draw a typographic iceberg. What would you say? You probably wouldn’t know how to answer, and end up saying, “Huh?” Or let’s say, Sesame Street calls you to draw hand-lettered quotes of Bert or Ernie. Well, we’ve come across someone out there who actually has received these kind of assignments, and what she makes of them is just too stunning and beautiful — we just had to share!
Meet Mary Kate Mc Devitt, a letterer and illustrator living and working in Brooklyn, NY, and lean back to dive into her colorful showcase of Hand Lettering & Illustration gallery. Mary doesn’t just display her work but also shares interesting bits of information behind every assignment and where she gets her inspiration from. If you take a closer look, you’ll also be able to figure out what an iceberg and a hermit have in common. (ea)
Do you feel like you’re just not advancing enough in your front- or back-end skills? Have you had a chance to check out our line-up of Smashing Workshops yet? With our full-day workshops in London, Berlin and Zurich, we encourage you to grab a seat and say goodbye to your programming woes. Now if one of these workshops don’t help you get better and smarter, what will?
|Scalable Front-End by Harry Roberts
From code organization and structure to naming conventions, performance tips to effective usage of Sass, this workshop will help you start building huge front-ends from the ground up. Read more…
|Responsive Design by Vitaly Friedman
In this workshop, Vitaly will present practical techniques, clever tricks and useful strategies from real-life projects that you will definitely find quite useful when working on any responsive design project. Read more…
|Front-End Warrior by Addy Osmani
Front-end tooling can dramatically increase your productivity. In this workshop, you’ll learn how to automate repetitive tasks, automate the setup and improve your workflow. Read more…
|Pragmatic UX by Marko Dugonjić
Learn how to use lightweight UX design tools to better understand your users’ needs, quickly prove your concepts, generate discussions, facilitate communication and make design decisions early on. Read more…
|Adaptive Interfaces by Aaron Gustafson
Learn the ins and outs of crafting rich Web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the process. Read more…
Would you like us to organize workshops in your city? Is there a particular topic that you’d like to master? Let us know by getting in touch with us and we’ll be there before you know it!
The authors in this newsletter are: Iris Lješnjanin (il), Vitaly Friedman (vf), Shavaughn Haack (sh), Christiane Rosenberger (research) and Elja Friedman (tools).
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!
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!