Dear Friends,
What's the first thing you do when you travel abroad? Obviously, some sightseeing, exhibitions and fancy Foursquare marks are often scheduled, but what about trying something entirely different for a change? When traveling to a new city, I love spending hours wandering around random places outside the city center, observing how people live, taking photos of street windows, textures and, most importantly, house numbers; they tell so much about the personality of the city, and they can be remarkably inspiring, too. In fact, this is how the previous mystery riddles came to be.
Autumn is usually a busy season for conferences, and if you're planning to attend one, why not spend a few hours wandering around the city instead of just taking notes and meeting new people? You could wander around together and take photos of door knobs and building signs and textures and falling leaves and misaligned labels and fancy old book covers... and so much more! You might find quite a few interesting things which (once combined with a smart designer's eye) can give birth to a new side project, or a new idea worth exploring!
Indeed, we have the SmashingConf Freiburg coming up next week, so if you'll be joining us, be sure to use the opportunity to randomly explore Freiburg — it's a laid-back, remarkable city. As for Smashing, PPK's Mobile Web Handbook is now available as eBook; the hardcover should be available late September. Also, we've got a few new upcoming front-end workshops in Zürich, Bath and online and we've published a little case study on performance optimization on SmashingMag over the last year. Beware: this might keep you busy for a while ;-)
Happy exploring, everyone!
– Vitaly (@smashingmag)
Table of Contents
1. High-Quality Free Fonts
Everybody loves a good, free typeface. Obviously, designing a typeface requires a lot of work, and not always do designers release the results of their work for everybody to use. Finnish designer, Mikko Nuuttila, has created a quite funky, quirky experimental typeface that can be just what you're looking for in a not-so-formal design project.
Jaapokki is an exquisite free sans serif typefeace with 2 alternatives and a large set of glyphs. It will not work as a body copy typeface, but could work well for posters and quirky headings. Available in OpenType, TrueType, WOFF, EOT and SVG formats. Pretty, pretty good. Looking for more free fonts? Check out Source Serif Pro, Clear Sans, Fénix, Elega, Haus Ethnik and Typogami. (kv)
2. Monocle List: An Unusual User Interface Experiment
We're usually afraid of new interface patterns and prefer to stick to well-tested ones, just to be on the safe side. But what if you want to tell a story, or involve the reader, or make an unusual impression? Why not try something less common for a change? Hakim El Hattab reconstructed one of the effects he had noticed a few years ago, and created a new interesting interface pattern: the Monocle list. As you scroll the page, list items expand under a magnifying area. Neat!
So, where could the pattern be used? Well, perhaps in embedded maps or in portfolios where you'd like to give your illustrations a bit more prominence on hover. Of course, the technique is created entirely with CSS and JavaScript, and the source code is available on GitHub as well. Perhaps not very useful in every scenario, but definitely worth keeping in mind for you-never-know-what's-coming-up-next-projects. (cm)
3. Chartist.js: Responsive Charts With No Drama
Living as a designer or developer in the responsive age, you will need to create a responsive chart sooner or later (if you haven't done so already, a hundred times). Regardless of how experienced you are with charts, you will maybe fret about the issues that come up with most of the charting libraries out there: bitmap-based, not flexible enough, pretty static, and the list continues.
Well, what if you could use a simple chart generator for (of course, scalable) SVG graphs? If this sounds great, check out Chartist.js, a responsive charting library created with the single goal to help you draw straightforward responsive charts and not bother about technical issues. Once you've defined a config file for the chart, Chartist draws charts as inline SVGs, and a detailed documentation provides quite a number of options for tweaking the charts and making them just right. In fact, you can make the graph animated, too! A useful little tool to keep in mind for pretty much every responsive project. (ea)
Advertisement
4. Handy CSS Gradient Inspector
Chrome's Developer Tools come with a nice set of features that are useful for debugging. Despite the fact that there are a number of handy and powerful features already available, sometimes there is always that one little extension that can make your life so much easier. Rafael Carício's CSS Gradient Inspector is exactly one of these valuable, handy add-ons.
Once installed in Chrome, the extension adds a sidebar to your developer tools which provides you with information on the gradients applied to the inspected object. Normally, Devtools provides you with an overall style, but with the extension each part of the gradient can be toggled individually, very much like different layers which can be extremely useful for debugging. A little helper that makes your workflow just a little bit faster. Sounds good? You can download the Chrome extension or Opera's Add On. And if you are looking for more useful extensions, link checker, traffic re-router, tab manager and Pagespeed Insights could be quite handy, too! (cm)
5. Table Generators For HTML And Markdown
Writing markup for complex tables is usually a pretty annoying task. What if the content is available in Markdown, or you'd like to use Markdown to mark up a table quickly, e.g. to display in comments on GitHub? Well, you can use Markdown Tables Generator to generate tables visually. All you have to do is build a table, type in the content (or import the CSV file or table data) and generate the Markdown code with a click of a button. You can use the same tool to generate HTML tables and text tables, too.
Alternatively, you might want to check out ASCII Table that additionally allows you to generate markup for a spreadsheet, a simple ASCII table and GitHub Markdown. Also, if you need a simple tool to generate tables in your text editor, you might want to look into Emmet to generate HTML tables with a few simple abbreviations. No more manual table coding — yay! (ml)
6. Redesigning The Flying Experience
With their cryptic signs and confusing layouts, boarding passes often are pretty much the opposite of what we'd call "user-friendly". Disappointed by the status quo and their own flying experiences, Tyler Thompson and Peter Smart both challenged themselves to rethink the conventional boarding pass. What came about was a number of innovative mockups that could provide passengers with all the information they need at one glance, and a simple framework to cater for a consistent experience — no matter which airline you're flying with.
However, the boarding pass isn't the only annoyance when flying. Just think of the uncomfortable seats or the waste that all of those sticky luggage tags produce. The topic matters to a lot of designers and some airlines have slowly started to realize that the flying experience has gotten outdated in many ways. But how can it be improved? There are some very interesting ideas out there that could help to solve the pain points of flying. Hopefully, they will fuel the much-needed makeover. (cm)
7. Get Better And Smarter: New 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!
8. New on Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Lead UI/UX Designer at Onevest (New York, NY)
We're looking for a talented ui/ux designer with a passion for design with strong opinion about aesthetics.
-
Front-End Developer at Boston Globe Media (Boston, MA)
We're looking for a developer who can spot the difference between 10px padding and 12px padding from 10 yards away.
-
Senior Designer at SPINX Digital (Los Angeles, CA)
As Senior Designer, you will get all of the essential web design tasks, such as designing original homepage and inner page comps, UX strategy, mobile app design, and prototyping.
9. Smashing Highlights (From Our Archive)
-
Symptoms Of An Epidemic: Web Design Trends
What exactly is this new epidemic? Well, let's start by looking at some of the most common symptoms, many of which you have probably noticed.
-
An Introduction To Object Oriented CSS (OOCSS)
Have you ever heard the phrase "Content is King"? Being a Web developer, and therefore having a job that's often linked to content creation, it's likely you have.
-
Freebie: E-Commerce Icon Set (33 Icons, PNG, PS, AI)
This freebie contains icons in different-sized PNGs (32×32, 64×64, 128×128 and 256×256 pixels), and the set includes Photoshop and Illustrator files containing all of the icons as well!
10. Recent Articles On Smashing Magazine
No comments:
Post a Comment