Dear Friends,
We sometimes tend to find the smartest solutions when faced with the most difficult challenges, e.g. how do we keep CSS maintainable by avoiding dirty CSS hacks with bulletproof Flexbox solutions? How do we tweak responsive HTML emails to make them work in Gmail? How do we build up a scalable icon system with SVG that works on a large scale? How do we choose a responsive design workflow that is efficient enough to allow us to achieve high fidelity in the shortest amount of time?
"Real-Life Responsive Web Design", our new Smashing Book 5, will be released in late May 2015.
Over the past few months, I was privileged to work on our new book with our authors — knowledgeable practitioners who have to face responsive design problems every single day. I kept asking difficult and uncomfortable questions to every author, day and night, and over the weekends, too. Most chapters were re-written over and over again, with endless comments and remarks and new challenging questions. But, you know what? I strongly believe that the result is worth it.
The answers to all those questions can be found in our new upcoming Smashing Book 5: "Real-Life Responsive Web Design". Although I do spend a lot of time reading on the web and running RWD workshops, those conversations with our book authors have been some of the most useful and enriching discussions on techniques, ideas, strategies, approaches and rules of thumbs in responsive projects. I found them extremely valuable and eye-opening, and, well, perhaps so will you.
The final touch-ups are being made this very moment, and the Smashing Book 5 will be released in late May 2015. The pre-order is already available, with 25% off the regular price. If you decide to get it, you will not be disappointed.
– Vitaly (@smashingmag)
Table of Contents
1. Styleguide And Boilerplate Patterns
As designers and developers, we usually have to be pragmatic in our work, i.e. finding smart solutions to given problems within the constraints of the project (be it scope, budget or time). Now, what if you need to prototype an accordion very quickly, perhaps to show the interaction to your client or co-workers? Creating the accordion from scratch would take up too much of your time, so what can you instead?
In such cases, Styleguide and Boilerplate Patterns Spreadsheet (which is being maintained by CloudFour) can be quite a time saver. The spreadsheet puts over 200 components against common frameworks (both large and small ones), lists how many frameworks contain it, and also for each of those components lists the frameworks in which it's included.
So, if you need to prototype a component, you can look it up in the spreadsheet, find the lightest framework and use it right away, or perhaps skin it first. What works as a quick prototype may not work for the production code, e.g. when you're using your own framework. Still, a handy spreadsheet to keep in mind when building a specific components or reusing a common pattern! (vf)
2. SVG Patterns For Data Visualization
So you have some sort of a map (perhaps a data visualization or country states or regions), and you'd like to highlight them differently, e.g. by using patterns like we used to do in good ol' textbooks. Obviously, doing it manually would require quite a lot of work. Luckily, Ricardo Scalco has released Textures.js to manage just this concern of yours.
The library is made on top of d3.js, and is a solid foundation for creating and applying SVG patterns for data visualization. You can use lines, circles, paths and custom patterns as well as combine colors and textures. The library is 8.1Kb in size (minified), and is released under the MIT license. (vf)
3. Designing Interfaces For Watches
Now that we've spent a few years trying to figure out how to design for those small mobile screens, we have another challenge ahead of us: how do we design smart and usable interfaces for watches? We're used to identifying critical tasks and content and prioritizing them on small screens, and the task is going to be another exercise in doing just that, but what would interfaces look like?
The deisgners behind Tack Mobile have shared a few experiments on watch UI design in Pebble Time Design Kit, a blog post which not only provides a few interesting concepts and mock-ups inspired by Pebble Watch, but also a freely available interface kit for Sketch, Illustrator and Framer Studio Project. What if you set aside a few hours to figure out how you would design your app for a watch? (vf)
Advertisement
4. Front-End Experiments
Experiments are great, but not necessarily because they have a high practical value, but because they push the boundaries of what we think we can do. It holds true for front-end as well; in the end, it's just a matter of how we combine available technologies creatively. For example, we could create a 3D Rings Rotation with Three.js and a bit of JavaScript, or an Apparently Transparent 3D room by using a few transforms and a bit of JavaScript.
On a more practical side, we could also combine :nth-last-child, :first-child and :last-child intelligently to create breakpoints based on the quantities of children elements, and perhaps even use the technique with Flexbox to create a grid layout that flexes to visually highlight 1-2 upcoming future events and allows the others to flow in at the default grid size. The solutions are surprisingly simple (well, once you wrap your head around them) and are applicable to a number of problems right away. (vf)
5. Delightful Enhancements For User Interfaces
While animations and transitions aren't required for an interface to work, they can be a fantastic enhancement to keep the user engaged and delighted along the way. However, to do that, sometimes we need to entirely reinvent an interface and what the interaction would look like.
Profile Animation Gooey Effect is one of those smooth UI concepts that might work well on mobile screens. Folding menu is another one, and so is Morphing Components, Blooping Animation and Two Chats Interaction. If you want to spice up your slider, how about looking into 3D budget/price slider, or an entirely different donation form. We are often afraid of risky innovations, but perhaps we could give it a try another time, and dismantle our skepticism with real data instead? (vf)
6. Accessibility Wins!
The web is for everyone and no one should be locked out or miss out on anything for how they interact with it. Luckily, more and more members of the web community are becoming aware of this fact, making it their mission to make (or rather keep) the web accessible. Brilliant examples of how you too can tackle common accessibility hurdles can now be found in a small but precious Tumblr blog: Accessibility Wins.
Curated by accessibility advocate Marcy Sutton, this site showcases well-crafted user interfaces that don't surrender to screenreaders or heavy keyboard usage. Icon buttons and autocomplete widgets, focus management and navigation are just some of the accessibility issues that the featured examples have overcome cleverly. A valuable and inspiring source for every web developer. (cm)
Advertisement
7. 30 Species In 30 Pieces
The Pygmy Three-Toed Sloth, Diademed Sifaka and Wallace's Birdwing all have something in common: they are some of the world's most interesting, but, unfortunately, also endangered species. To remind us of the beauty that we are about to lose, designer Bryan James has dedicated a thought-provoking interactive exhibition to them and to 27 other species who share the same struggle: In Pieces. And, well, it is simply breathtaking.
Built with nothing but CSS (CSS polygons, to be more precise), Bryan has created an impressive piece of art. Each shape is being morphed, moved and toyed with by a new set of coordinates, and as they are maintained as triangles throughout, there are always 3 points that link up the movements with some cool CSS transitions.
Each species in this showcase is made up of 30 pieces that form a flat, tangram-style portrait of the animal. The pieces then fall apart and assemble again to form the next species — imagine a Hawaiian Crow becoming a Vaquita, a Vaquita becoming a Golden Lion Tamarin. But the project is much more than just eye candy. Information on threats and stats about the population show how much research and love for detail was put into it. Inspiring! (cm)
8. Pac-Man + Pong + Space Invaders
Did you know that Pac-Man was once named "Puckman"? The name came from the Japanese word pakupaku which means "to flap one's mouth open and closed". Well, it's obvious that there's no other game to date that has come close to dominating the popular gaming landscape the way Pac-Man did in the early 1980s. It probably even claimed video games for kids, and even the strictest parents could see the game's appeal.
With a slight nostalgic tough, Pacapong is a free game that will awaken your childhood memories if you're familiar with not only Pac-Man, but also Pong and Space Invaders. It has been created for two players to try and save Pac-Man from Pong paddles through the well-known maze and get him across to the other side without running into a ghost. At the same time, both players need to battle the Space Invaders with the same paddles — which can be quite a challenge! It's currently available for Windows, OS X and Linux. So, what are you waiting for? Grab a friend and get your game on! (il)
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.
Workshop image credits: Marc Thiele.
Full-Day Workshops in Los Angeles, USA:
Upcoming Online Workshop
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
10. Recent Articles On Smashing Magazine
11. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Creative Strategist at Blue State Digital (London, UK)
We're looking for a collaborative, digitally oriented leader who can rally teams to do their best work across both websites and products, strategies, and digital communications and campaigns.
-
Front-end Engineer at Lesswood GmbH (Frankfurt, DE)
We're looking for a front-end engineer to shape the online platform, and solve issues and work out design solutions with the rest of the team.
-
Lead UX Designer at UPS (Mahwah NJ, USA)
We're looking for a Lead UX designer who will help in the building of a dynamic user experience team that will integrate high-fidelity UX into our current and future development efforts.
12. Smashing Highlights (From Archives)
-
How To Launch Anything
Launching a new product — especially your first — can be incredibly daunting. Even knowing where to turn for help can be hard. So many blog posts are full of free advice on how to successfully launch that I almost didn't write another one.
-
Freebie: Touristic Icons (100 Icons, PNG, SVG)
Icons are a lot like real monuments — they can both be easily recognized. This icon set consists of a set of vector icons that represent monuments across the globe, so they can be literally used anywhere.
-
So You've Decided To Open-Source A Project At Work. What Now?
Many companies are starting to investigate and participate in the open-source community, and yet few guides for doing so exist. This article focuses primarily on the process of open-sourcing a project at work, which brings with it other concerns and decisions.
No comments:
Post a Comment