Dear Friends,
Oh my! It took us almost a year of thorough, hard work, but we are getting there, and we are almost ready. Smashing Book 5: Real-Life Responsive Web Design. Oh yes, our brand new, practical book with smart front-end techniques and design patterns, and this time fully dedicated to lessons learned from real-life responsive projects.
With 12 chapters on responsive workflow, SVG, Flexbox, web fonts, responsive images, responsive email, content strategy, debugging, performance and offline experience, this is just the book you need to master all the tricky facets and hurdles of responsive design.
Written by Daniel Mall, Sara Soueidan, Zoe M. Gillenwater, Bram Stein, Yoav Weiss, Andrew Clarke, the (well-known) Mystery Author, yours truly and other smashing authors. Welcome the brand new Smashing Book 5.
The pre-sale of the book will start next Tuesday, March 31st, at 1PM GMT (8AM EDT). Of course, in the spirit of our tradition, we welcome you to add your name to the printed book — just leave a comment on the announcement post in time! We don't have a lot of space, so first come, first served! Make sure you set up an alarm and don't be late!
One of the inner chapter illustrations, crafted by our Mystery Riddle designer Guillaume. Large view.
The inner illustrations are crafted by Guillaume Kurkdjian (remember those mischievous animated Mystery Riddles?) and the cover is designed by everybody-knows-how-amazingly-talented-she-is Jessica Hische.
The book is going to be quite thick, and obviously both hardcover and digital editions (PDF, ePUB, Amazon Kindle) will be available. So if you want to get your hands on the book, you better not wait too long. And trust me — you'll love the book as much as we do. To the book.
– Vitaly (@smashingmag)
Table of Contents
1. Sliders, Sliders And... Sliders!
We all know how difficult and time consuming styling input elements can be. Well, obviously we shouldn't strive for pixel-perfect solutions anyway, but having a bulletproof cross-browser solution or at least a few ready-to-be-used snippets that work well across browsers would be nice.
If you are looking for a well-designed, cross-browser one range slider, Ana Tudor has done the work for you. In fact, she has designed hundreds of various sliders and made them publicly available to everyone. Just CSS, no JavaScript dependencies. If that's not useful, what is? Bookmarked! (vf)
2. Taking Storytelling To The Next Level
Given the prospects that the web has to offer today, shouldn't we start rethinking how we tell our stories? How we can make them even more compelling? The Travel Episodes, a platform for inspiring travel reports brought to life by Johannes Klaus, is a beautiful example of what storytelling could look like.
The Travel Episodes creates unique multimedia experiences that blend text, photography and film into beautiful and rich stories. Join the authors in their travel adventures. Experience first-hand what it feels like to stroll through the busy streets of Vietnam, to explore the polar seas or embark on a bumpy train ride through Burma. The selection of travel episodes available is still quite small, but each one of them is a fascinating and inspiring little gem. (cm)
3. The Beauty Of Pi
There is hardly anything as fascinating in the universe of math as the number π, which, even though it doesn't follow any logical pattern, is the foundation for one of the most perfect shapes — the circle. To celebrate the beauty of the mathematical constant, the digital production company MediaMonks created an audiovisual experiment. And what better occasion could there possibly be to launch such a project as on Pi Day, which this year even fell on the perfect date — the 3.14.15?
What sounds quite nerdy is, in fact, a beautiful way to recall how math is at the base of everything. Thank God It's Pi Day, so the name of the experiment, achieves this with a well-made blend of music and visuals which reflect both the perfect harmony, as well as the randomness of Pi. Eye candy with a deeper meaning. (cm)
Advertisement
4. UX Tools To Improve User Engagement
Understanding how your users perceive your site is key to improving the user engagement. Which features work? Where do users encounter problems? And where and why do they drop off? The following three UX tools all take the guesswork out of these questions and provide you with good ol' substantial data to work with. One of them is Treejack. With Treejack, you can set up tree testing activities. Participants are asked to navigate where they'd expect to find the answers to a series of tasks using your information architecture. The results help you to enhance your IA and dismiss mistakable paths before you even dive into interface design.
Full Story on the other hand takes over after the prototyping phase. It captures every click, every scroll, every page transition to visualize customer and product interactions. This helps you to understand a user's behavior in the context of a certain task so that you can respond more precisely to customer questions and development bugs. A similar service is offered by Inspectlet, which also records your users' sessions and lets you play back everything a user is doing on your site — heatmap analytics included. Full Story and Inspectlet both offer several monthly plans depending on website traffic. Treejack offers monthly, yearly and pay per survey plans. (cm)
5. Spreadsheet Data Easily Visualized
Automating and visualizing data is one of the perks that the web provides. It doesn't have to take too much time to use though, as there are a few libraries that will help you display your data without the hassle. Sheetsee.js is a client-side library that can be used for connecting data from Google Spreadsheets to a website. The website will then be able to visualize the information in tables, maps and charts. Additionally, Google Docs provides a solid environment for a data-driven collaboration.
Timesheet.js is another script that can visualize your data and events with HTML5 and CSS3. You could use it to display a timeline — perhaps by displaying the different states of your project or a diary of recent life events. Just include it your project, configure it, style your data and, voilá! Timesheet.js is released under MIT License, is light (3.2 Kb) any dependencies (isn't responsive though, unfortunately). (ml)
6. A Little Geometry For Your Desktop
Often we tend to seek inspiration rather than get inspired randomly. Well, what if inspiration reached us unexpectedly, perhaps when we get back to our laptop after lunch or a coffee break? The main aim of a screensaver is to save screen, but we could misuse them for a slightly different purpose.
If you happen to be tired of the default "screensavers" brought to you by your OS, you could take a look at Saver Screensson which creates unique patterns on your display by randomly stacking vector stencils. It contains 340 individual images and 19 predefined color palettes, generating countless multilayered compositions. Saver Screensson (a quite appropriate name for a screensaver!) requires Mac OS X 10.8 (Mountain Lion) or later versions to work. (il)
Advertisement
7. Add A Little Art Into Your Browser Tabs
To bring a little more art into your online world, the Google Cultural Institute has come up with a Chrome extension known as the Google Art Project. The idea is simple: every time you open a new tab, you'll see hidden gems and masterpieces ranging from Van Gogh to Monet, and, when curious about the artwork, explore the masterpiece or other exhibits and collections from museums and archives all around the world.
A new artwork is delivered to you every other hour, introducing you to a variety of art projects that are dedicated to historic moments and world wonders. If an artwork happens to spark your curiosity, simply click on the image description to discover more on the Google Cultural Institute website to explore cultural treasures in extraordinary detail. Who thought opening a new tab could be this much fun!? (il)
8. Use Flexbox Today, As Progressive Enhancement
There is still a common misconception that Flexbox isn't yet widely supported and can't be used in real projects. Well, it isn't true. Flexbox is a standardized specification, it's well-supported (with Opera Mini supporting it since last Monday) with many ready-to-use solutions and in fact, we can use it today on UI components if we treat Flexbox as progressive enhancement. In fact, we can make boxes automatically grow to fill space, lay out boxes in any direction easily, align boxes on any side and place boxes out of order from HTML without duplicate markup.
We can't build layouts with Flexbox-first approach, but browsers not supporting Flexbox will ignore Flexbox properties, so i.e. we could use display: inline-block together with display: flex — with Flexbox-properties listed after the fallback properties. There are many resources on Flexbox and if you'd like to understand how to apply Flexbox in actual projects, Zoe M. Gillenwater's Flexbox talk (47 min) and recent presentation could be very helpful. So, there is no reason not to use Flexbox today! (vf)
9. 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.
Full-Day Workshops in Los Angeles, USA: (April 27, 30)
Upcoming Online Workshop (June 30)
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 costs — we'll find a fair price for sure. Get in touch — it's that easy!
Advertisement
New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
UX Specialist at Nielsen Norman Group (Telecommute)
We're currently hiring smart user experience specialists at junior and entry level who are compelling public speaker and persuasive writer.
-
Motion Graphic Designer at Digital Sign ID (DSID)
We're looking for a capable Mid-Level Motion Graphic Designer who will create still and motion graphics to help grow our content library, while also assisting with marketing material for print and web.
-
Full stack web developer at infogr8 (London)
We're looking for a full stack developer who is immersed in data visualization and loves building new things that hold value and purpose.
Smashing Highlights (From Archives)
-
An Introduction To DOM Events
Click, touch, load, drag, change, input, error, resize — the list of possible DOM events is lengthy. Events can be triggered on any part of a document, whether by a user's interaction or by the browser. They don't just start and end in one place; they flow through the document, on a life cycle of their own.
-
The Z-Index CSS Property: A Comprehensive Look
In this article, we'll explain exactly what z-index is, how it has been misunderstood, and we'll discuss some practical uses for it. We'll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox.
-
Extended Entypo Glyph Set (EPS, PDF, PSD, Typeface, Web Font)
After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts.
Recent Articles On Smashing Magazine
No comments:
Post a Comment