Dear Friends,
Does your website work offline? Probably not. However, it doesn't have to fail completely if users want to access your content. Obviously, with Service Workers we aren't quite there yet, but we are getting there. In fact, very much like with Flexbox, we can use Service Workers as progressive enhancement for capable browsers, adding offline caching to make it work. In fact, we're looking into making our articles available offline, so when you request a page, a cached version will be displayed, and when the connection is available, the content can be refreshed.
If you'd like to dive deep into Service Workers, an article by Matt Gaunt on Introduction to Service Worker is a good starting point, and we'll have a more detailed chapter on offline technologies by Matt and John Allsopp in our brand new Smashing Book 5, too. A yet another dimension of user experience for us, designers and developers alike, to keep in mind.
— Vitaly (@smashingmag)
Table of Contents
1. Free Icons To Celebrate Summer
The only thing better than a set of well-designed icons? Well, perhaps a set of well-designed, freely available icons. The community has been releasing quite a few sets recently, and some of them are definitely worth highlighting. For example, you can grab Summer Icons Package, a big bundle of summery icon goodness, released by a team of designers from Egypt, freely available for everybody to use.
Icons Responsive provides a set of 24 freely available icons with 8 variations each, ranging from flat coloured to Google Material icons, glyphs and various levels of detail for different resolutions. Last but not least, you can also get Icons8 Free Flat Color Icons which provide another 312 free icons for personal and commercail use. (cc)
2. Become a Command Line Power User
With the rise of command line tools like Grunt and Gulp, Jekyll or GitHub, the Terminal has become an interesting environment for designers and front-end developers. We can massively improve our workflow if we dedicate enough time to learn how to use the almighty command line efficiently. But where to start? Luckily, Wes Bos has released a series of 11 tutorials to bring people a little bit scared of Terminal up to speed with the command line.
Command Line Power User is a video series for Terminal users who want to improve their command line workflow with ZSH, Z and related tools. Videos are available for free, but you need to sign up with your email first. (ml)
Advertisement
3. Rent Fonts or Just Try Them For Free
So you are thinking about using a typeface in one of your projects, but you aren't quite sure which one to use. Of course you can preview the typeface on a foundry's website, but you can't really easily apply it to your mockup without purchasing the family first. In fact, more often than not it's simply impossible to "rent" a typeface for a while or just try it out for an hour or so.
Well, you can now. Fontstand is a new service which provides a new way of licensing and using fonts on desktop. You can try any font for free in any of your applications for one hour, or rent them on the monthly basis. If you've been renting the font for 12 months, it automatically becomes yours. A nice licensing model for graphic designers or even for quick prototyping (the font will be loaded via CSS from your local machine, of course). So far, 340 font families from 21 foundries are available. The service is provided only for Mac OS. (vf)
4. Spicing Up Front-End A Little Bit
There is nothing more simple yet valuable on the web than a good ol' link. Yet when it comes to styling links, often they are quite difficult to spot, and most importantly sometimes you don't know whether you visited a link already or not. That's simply annoying. What about revisiting :visited pseudo-class? Perhaps you'd like to style a box containing a "visited" link differently? Or add something fancy to your links beyond the limitations of :visited? As it turns out, you can use localStorage and HTML5 data attributes with a dash of JavaScript to make it all work in a few minutes.
Or maybe you are struggling with other issues. Like SVG scaling bugs in Internet Explorer — well, you can use canvas to fix the SVG scaling in IE 9–11. Or maybe you need a slightly more attractive product comparison table? Or you're looking for cross-browser text masks with blend modes for your art-directed feature?
And if this isn't enough, you can add subtle animations to your SVG logo, e.g. with @keyframes animation to indicate that something is being loaded in the background. Lots of useful techniques to test, and to bookmark, and perhaps apply to your next project! (vf)
5. Good Examples of Email Copy and Copywriting
It's not easy to write a well-crafted, well-written email that doesn't just communicate a message, but makes it difficult to forget it. Perhaps with a unique personality that shines through every line, or a charming voice and tone, with an occasional missing comma or an incorrectly placed semicolon. These details make up a character for the company sending out the email, and they deserve more attention than they usually get.
Great Email Copy collects some of the interesting and well-crafted emails sent out by companies — be it transactional emails, notifications or regular mailings. Content Snippets goes beyond email and focuses on specific copy examples from websites and applications. Good resources to learn how to write better copy and how to make emails a bit more charming, and a little bit more delightful. (vf)
Advertisement
6. Free Programming Fonts With Code Ligatures
As designers, we tend to spend a lot of time selecting typefaces for headlines, subheads and body copy. As developers, we might have different needs and requirements when selecting an appropriate typeface. A typeface should be scannable, with every glyph being clearly different than another one. In fact, there are some good options out there, but perhaps a typeface of your choice could be a little bit... smarter?
Hasklig, for example, is a programming font with monospaced ligatures. With the font, not only can multi-character glyphs, such as -> be rendered more clearly, but also other problematic details in monospaced fonts, such as spacing, are corrected.
Inspired by Hasklig font, Fira Code is a yet another monospaced font with programming ligatures. Based on Fira Mono, it's an extended family with a comprehensive set of ligatures for common multi-character combinations. Underlying code remains ASCII-compatible, but readability of the code is (supposed to be) much better.
And if you are more into design after all, keep in mind that Roboto, the default font on Android and Chrome OS, and the recommended font for Google's visual language, Material Design, is now fully open-sourced. Roboto supports all Latin, Cyrillic, and Greek characters in Unicode 7.0, as well as the currency symbol for the Georgian lari, to be published in Unicode 8.0. The fonts are currently available in eighteen different styles. (vf)
7. Podcasts For Web Designers Worth Listening
Perhaps you are commuting every morning, or travel quite a bit, or maybe you'd like to use your dish washing time a bit more efficiently? In these cases, listening to podcasts while doing something else could be an option worth trying. The Path to Performance, for example, is a podcast dedicated to fostering a culture around web performance in organizations. It often features interviews with people who have successfully integrated performance as part of their culture and the benefits they have seen.
Responsive Web Design Podcast is dedicated to responsive redesigns; Viewsources Podcast is dedicated to front-end development and design workflows and if you're looking for something slightly less technical, Unfinished Business, talks about pretty much everything web (and not web) related, hosted by Andrew Clarke.
Image credit: Francois Schnell (vf)
8. Better File Names For Automatic Screenshots!
Why is sending screenshots to a friend or a colleagues always such a nightmare? Not because of the way how you create them (e.g. Cmd+Shift+4 on Mac), but because of the way how they are automatically names. Something slightly more descriptive than "Screen Shot 2015-06-01 at 01.36.26" would be helpful.
Tiny is a fantastic little tool that renames screenshots into something more meaningful automatically as you capture a screenshot. It uses a window-based screenshot name, renaming your screen based on the front most application's window. So if you take a screenshot of a browser, it will add some details about the page you are looking at, such as the URL, the size, and even the title of the active tab. Handy? Absolutely! And guess what: because the project is currently in beta, it's available for free, too. (vf)
Advertisement
9. The Joy Of Beautiful Type
Typography walks a fine line between practicality and creativity. While many resources exist to improve our technical fonts knowledge, sometimes it's nice to indulge in a little typographical delight.
Typetodesign.com is the beautiful, interactive result of typographic design quest that challenged participants to seek graphic type "in the wild" and upload it to Instagram. 100 Days Of Fonts sees brave designer Do-Hee Kim "design and code a creative showcase of a google font pairing a day, everyday, for 100 days straight." Finally, join Wenting Zhang as he annotates a daily web typeface on Typedetail, focusing on the beautiful, finer details that all too often get overlooked. (cc)
10. Keep Inspiration Flowing: BaubauHaus
Inspiration. This fickle, tricky beast that can either mislead you or drive you to creative directions you've never thought of before. It doesn't mean that inspiration serves as a foundation of your work, but it's through combining ideas and experiences that great work emerges.
BaubauHaus is one of those projects that feature interesting creative work with bold typography and/or strong visual impact. Unlike many other "galleries", the artworks featured are indeed not generic but quite distinguishable. Another site for your bookmarks. Well, maybe. (vf)
11. Keep Calm And Attend A Smashing Workshop
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.
Upcoming Online Workshops:
Advertisement
Upcoming Smashing Workshops and Meet-Ups:
- Kerning, Talk + RWD Workshop, Faenza, Italy, June 3,
- SmashingConf New York 2015 in New York, US, June 15–18,
- MediterráneaJS, RWD Workshop, Barcelona, Spain, June 20,
- EdgeConf in London, UK, June 27,
- RWD Workshop in London, England, July 1.
- HybridConf Talk + RWD Workshop in Dublin, Ireland, August 19.
- ColdFrontConf Talk + Workshop in Copenhagen, Denmark, September 2.
- Amuse UX Talk + Workshop in Budapest, Hungary, October 28.
You can also check more workshops coming up later this year. 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 cost — we'll find a fair price for sure. Get in touch — it's that easy!
Workshop image credits: Marc Thiele
12. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Web Designer / Illustrator at Apparent (Anywhere)
Apparent is seeking an intuitive and talented person to join the Doxie creative team as our senior web designer/illustrator.
-
Front-End Wordpress Ecommerce Developer at Jupiter Highway (New York, NY)
The ideal candidate will be passionate about creating beautiful, highly customized Wordpress websites, constantly on top of the latest design trends and web standards, and ready to contribute their knowledge to the team.
-
Product Design Manager at BSH Home Appliances Group (Munich, Germany)
Your task will be to develop market-oriented design concepts with a focus on differentiation within the BSH brand context as well as on their implementation in the product development process.
13. 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. As developers, we should understand how DOM events work, so that we can harness their potential and build engaging experiences.
-
Introduction To Photoshop Scripting
Automation is useful in the work of every designer. It saves precious time on repetitive tasks and helps us solve certain problems more quickly and easily. You can automate your workflow in Photoshop with actions, which are pretty popular and which most of you already know about and use.
-
Sassy Z-Index Management For Complex Layouts
Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it!
No comments:
Post a Comment