Tuesday, March 31, 2015

Meet New Smashing Book 5: Real-Life Responsive Web Design

Our brand new book with tips and tricks from
real-life responsive projects: Smashing Book 5.

Fifteen Shades Of Responsive Web Design.

Meet Smashing Book 5, our comprehensive guide with proven tips and tricks for effective responsive design.

Real-Life Responsive Design, a new Smashing Book 5

$29 $39

Get the bookPrinted, gorgeous hardcover.
Save 25% today. Free shipping only today.

About The Book

Responsive design is a default these days, but we are all still figuring out just the right process and techniques to better craft responsive websites. That's why we created a new book—to gather practical techniques and strategies from people who have learned how to get things done right, in actual projects with actual real-world challenges.

Real-Life Responsive Web Design, the new Smashing Book 5
One of the inner book illustrations, crafted by Guillaume Kurkdjian. The cover is designed by Jessica Hische.

The book isn't concerned with trends or short-lived workarounds. It's focused on the actual design patterns and front-end techniques that you can apply right away. Think of it as a reliable playbook for issues that keep popping up in every responsive project. No, this book won't solve every single issue, but it will help you deal with common challenges effectively. Table of contents.

Following our tradition from previous years, we'd love to kindly invite you to add your name into the book, too. Thanks for your kind support.

Neatly packed in a gorgeous hardcover. 498 pages. Hardcover/eBook. Release: May 2015. Get the book.


Why This Book Is For You

Real-Life Responsive Web design is focused on what has worked or failed in real-life projects. No theory, no guesswork, no assumptions: just techniques that showed results and proved to work in practice. You'll learn how to:

  1. Be efficient in your responsive workflow,
  2. Tackle common content issues in RWD,
  3. Architect and maintain a style guide,
  4. Design systems with atomic design process,
  5. Master advanced SVG techniques,
  6. Avoid dirty hacks with smart Flexbox techniques,
  7. Build scalable, maintainable CSS layouts,
  8. Manage Web fonts performance issues,
  9. Implement responsive images today,
  10. Craft responsive HTML email newsletters,
  11. Test, maintain and debug responsive sites.
  12. Make responsive websites fast and snappy,
  13. Set up a performance optimization strategy,
  14. Enhance your website with offline features,
  15. Avoid generic solutions and stay creative with RWD.

And that is just scratching the surface. Get the book now and save 25% off, with free shipping only for the next 24h—it won't take more than 60 seconds.

Not convinced yet? →



Tuesday, March 24, 2015

Smashing Newsletter #133: Sliders, Front-End and a Dash Of Storytelling

With better browser tabs and spreadsheet tools. Issue #133 Tuesday, March 24th 2015 180,585 readers View in the browser

The Smashing Email Newsletter

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.

Smashing Book 5: Real-Life Responsive Web 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!

Smashing Book 5: Real-Life Responsive Web Design
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!
2. Taking Storytelling To The Next Level
3. The Beauty Of Pi
4. UX Tools To Improve User Engagement
5. Spreadsheet Data Easily Visualized
6. A Little Geometry For Your Desktop
7. Add A Little Art Into Your Browser Tabs
8. Use Flexbox Today, As Progressive Enhancement
9. Keep Calm… And Attend A Smashing Workshop!

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.

Sliders, Sliders And... Sliders!

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.

Taking Storytelling To The Next Level

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?

The Beauty Of Pi

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
Ad


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.

UX Tools To Improve User Engagement

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.

Spreadsheet Data Easily Visualized

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.

A Little Geometry For Your Desktop

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
Ad


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.

Add A Little Art Into Your Browser Tabs

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.

Use Flexbox Today, As Progressive Enhancement

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.

Keep Calm… And Attend A Smashing Workshop!

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
Ad


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


Workshop image credits: Marc Thiele

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


Tuesday, March 3, 2015

Smashing Newsletter 5th Anniversary (And Front-End Bits)

With front-end techniques, animations and RWD Email in Gmail. Tuesday, March 3rd 2015 179,964 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Hold on a second... Why exactly are you reading this? A few sentences written by someone out there, sent out every other week for the last few years. With a few notes on the shiny beautiful web, a few techniques on how to craft better interfaces, and an occasional goodie for your toolbox. Sometimes even with a typo, or a missing comma, or even a misspelled sentence. Just a regular email newsletter — one of thousands out there!

Smashing Newsletter: 5 Years Old: That's how it all started
Remember how it all started? The Smashing Newsletter Challenge back in 2010. Good ol' days!

Well, this newsletter is very special for us. We sent out our first newsletter five years ago, and every single time we're about to push that shiny "Send" button, we look forward to greeting our dear readers and seeing emails stream into email clients across the globe. We feel connected, and since the team works hard on crafting those little newsletter articles, it's something with which the entire team can relate to. Well, it kinda makes us all a little Smashing Family.

We want to thank you for your trust and respect, for your curiosity and interest, and for your valuable time for reading those sneaky, lengthy Smashing Newsletter issues with lengthy introductions. We just hope that you love and enjoy reading our newsletters as much as we do. Thank you all for your wonderful support, and here's to another 5 years!

– Vitaly (@smashingmag)


Table of Contents

1. Crafting Delightful Animations
2. Clever Front-End Experiments
3. Pseudo-Responsive Email Layouts In Gmail
4. Remove That Keyboard Layout Already!
5. The Future Of Design
6. Keep Calm… And Attend A Smashing Workshop!

1. Crafting Delightful Animations

Good animations are subtle and functional. The purpose of animation should not be to make users take note of how delightful it is, but rather connect the dots between states by creating bridges that make an interaction smooth and seamless almost invisible. You might think that those animations are superficial and unnecessary, but they could serve as a powerful tool to make task completion more comfortable.

Crafting Delightful Animations

Twitter's fave animation is a lovely example of a fast-paced animation that does just that by creating an illusion of movement. The effect is similar to the old Zoetrope devices, which present a series of illustrations in sequence around a cylinder. But instead of a cylinder, Twitter displays a flat series of images inside of an element and uses the CSS animation steps timing function to make it work. A lovely detail that makes quite a difference, wouldn't you agree? (vf)


2. Clever Front-End Experiments

When it comes to CSS, doesn't it feel like every single time we have to push the boundaries even harder of what we thought we knew so well? Obviously, laying out a few columns isn't such a big deal, and tabbed navigation nor a form with a few input fields either; we can manage them. However, every now and again, we have to find a workaround to make things work the way they should — sometimes with a little bit of JavaScript along the way.

Clever Front-End Experiments

So what about animating highlighted text or creating a 3D Plane Hover effect? Obviously, you must have dealt with a responsive animated SVG Polygons Lion at some point or a flexible folded corner or a flappy modal dialog? And now that we've come so far, perhaps you've always wanted to manage your anger by closing a few modal windows every now and again? A few nifty little techniques that you might find useful in your next project. What else have you stumbled upon recently? (vf)


3. Pseudo-Responsive Email Layouts In Gmail

Yup, the title says it all. Just enough to start a headache, right? Well, complaining about how evil responsive email layouts can sometimes be, as well as avoiding them as much as possible isn't going to get us anywhere. Thankfully, Julie Ng decided to conduct a case study and take a closer look at one particular newsletter and how it's portrayed on different email clients and devices.

Pseudo-Responsive Email Layouts In Gmail

When it comes to the Gmail app, she notes that instead of having Gmail guess what a mobile layout is supposed to look like, it's better to explicitly dictate it. In fact, mobile-first works better for email, too, although there are some quirks to keep in mind for Yahoo! Mail. Obviously, Gmail (and all Gmail apps) do not support media queries, so they won't deal well with responsive layouts. Julie has provided the screenshots of how things look like with a bit of CSS here and there. However, Gmail does support a small subset of CSS inside style tags. The trick is to make judicious use of CSS's structural selectors: the descendant, adjacent, and child selectors.

Also, if a mobile-first approach is kept in mind, everything should actually work quite well across most email clients. In doubt, use an alternative workaround for Gmail and Outlook, avoiding media queries altogether. (il)


4. Remove That Keyboard Layout Already!

How annoying switching keyboards can be! Especially, if you have customers and clients around the world, and you happen to speak a few languages, so you decide to install custom keyboards: perhaps German, Spanish, French (in addition to English, obviously). Of course, each keyboard layout has slight differences in the position of its characters, or accents, or dashes, or special characters. You may also have extensions like TextExpander running in the background, adding a new keyboard layout, too. And every single time you have to write that email or chat with someone on Skype, you have to switch to the right keyboard layout, and then back to English again, and then switch back again in a few minutes... Oh, what a drama!

Remove That Keyboard Layout Already!

Well, what if you removed all of the keyboards except the one that you used most? And perhaps used extensible tools to manage those sneaky accents via your main keyboard layout? Well, you could just type accents on Mac with the option key (and the left Alt key on Windows). Alternatively, you can find more advanced tools like USGerman Keyboard Layout or coDE, for example, to communicate in German. If you feel like you're upto an ultimate key remapping session, Karabiner will be just what you need. The result? Typing much faster without getting annoyed, but you would need a bit of time to get used to it. (vf)


5. The Future Of Design

Although there's a lot of high tech around us, graphic design is still firmly rooted in the fine arts, and mostly based on principles inherited from the printed page. However, the way we design is about to change fundamentally, shifting away from this rather artisanal practice towards a more technical approach: meta-design. Instead of creating an artifact (a static logo, for example), a designer creates a system which then can create endless variations of a design. The result? Products that are more dynamic and adaptable!

The Future Of Design

One of the thinkers who discuss this evolution of the design profession is Rune Madsen. He has written a very interesting blog post about it, in which he envisions meta-design to work in the intersection between art, design, and computation, but also help developers become a creative class in the design world. An essential read. (cm)


6. 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.

Keep Calm… And Attend A Smashing Workshop!

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! (vf)


Workshop image credits: Marc Thiele.
Keyboard image credits: Christian Schnettelker.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser