Dear Friends,
How would you deal with a multi-lingual tabbed navigation in a responsive project? Perhaps you'd use a good ol' hamburger icon in the small view (or maybe not, since it's becoming more of a last resort, often ineffective and misunderstood). But how about a larger view where there is enough space to display the navigation options?
The Guardian uses the Priority+ Pattern for its navigation.
Or, to make it slightly more dramatic, what if your project had to be available in over 70 languages and you'd like to share only one code base among all of them? You can't just go ahead and keep adjusting the way the navigation looks for all of the languages, by adding specific breakpoints in every language-specific CSS file. That ain't good for maintenance.
Well, it can be done. Aaron J. Barker came up with a jQuery/JavaScript solution to check whether a given element (a set of list items, in our case) fits within the space of another element (the header component), and if in case it doesn't fit, adds on a class that you can use to trigger a layout change.
An alternative CSS-only solution would be to use the Priority+ pattern that exposes the most important navigation elements first and tucks away less important items behind a "more" link. The less important items are then revealed when the user clicks the "more" link. The unimportant items could be hidden with overflow: hidden; and displayed on click. Both The Guardian and Google Docs Spreadsheets use this pattern. And, in order to test how these solutions perform, you could use Wraith, BBC's visual regressing tool.
So how do you deal with multi-lingual navigation menus? And are there any other solutions you've found out there? Tweet us with the hashtag #smnav!
– Vitaly (@smashingmag)
Table of Contents
1. Smart CSS Techniques
How often do you find yourself in a situation when you have to search for a clever workaround to solve a tricky front-end issue? Thought so! Sometimes even simple problems can cause a lot of headache and waste so much of your precious time. However, chances are high that some smart developers out there also found themselves in exactly the same situation.
Ever thought about creating an animated and stateful toggle using only CSS? Well, with a bit of :checked and CSS transitions you can! What about fading an image from black'n'white to color? Yep, you can do that with SVG, using filter and mask on a second image placed on top of a fully-colored version. What if you want to highlight both a row and a column in a table on hover or tap? Sure, you can use huge pseudo elements on the tds, hidden by the table overflow.
What about cross-browser CSS-only custom styled select menus? Guess what: you can do just that with the label wrapping the select menu. And, if you want to make a very special modal window (turn audio on!), that's not too difficult either. Smart CSS techniques to keep in mind — handy once you stumble upon similar problems in your own projects. (vf)
2. Responsive Checkouts Worth Checking Out
As designers, when we think about the process of checking out, we think about multi-step user journeys, shipping estimates and a lot of input fields. We are used to the "usual" checkout experience that is neither exciting nor quick. Well, as it turns out, there are many options to consider. Checking out can be pretty engaging and delightful, too, once you start thinking out of the box.
Codrops has collected a few nifty checkout ideas, with a few simple checkout enhancements — implemented with or without JavaScript. A checkout could also be designed as a off-canvas checkout, with "steps" sliding in from the right side, using the entire horizontal space available on large screens. Or just add a persistent layer that covers content partly and allows users to both check out and see the product that they are purchasing. A few little ideas which could make an otherwise tiresome checkout experience slightly better. (vf)
3. Animating A Tennis Match, With WebGL
Some projects are so unique that it takes a while until you grasp them entirely, and then when you finally have, they'll leave you in awe. One such thing is the US Open Sessions project, a venture between IBM and music maker James Murphy. The project took live tennis stats from the US Open tennis matches and created music and visuals with them — in real time.
The real-time data that came right from the tennis court was used to generate a unique soundtrack for each match. But not only that. The happenings on the court were also visualized through a series of animations which were created dynamically based on the music. Shane Mielke is the creative mind behind these nine bold and powerful WebGL animations. A remarkable example of what can be done only with web-based techniques. (cm)
Advertisement
4. Shade Gradient Explorer
So you need a gradient in CSS. Perhaps for a background color of a button, or maybe for a special featured area. And actually, you already have the base color, but you'd like to experiment a little bit right here, in the browser, without jumping back and forth between the browser and Photoshop or Illustrator.
That's what Shade Gradient Explorer is for. A little online tool that generates a linear gradient out of a base color. You can provide the hue, saturation, lightness and gradient spread (hue shift, saturate, lighten) and preview the result visually in the browser. You might end up spending hours just playing with the tool, but if you need to quickly adjust a gradient, the tool will do the job for sure. (vf)
5. Common IE8 Pitfalls And Fixes
Internet Explorer 8. Exactly, goose bumps! Well, many of us still have to at least consider user experience in IE8, yet finding bugs and fixing them may be quite a nightmare. Well, perhaps not for seasoned designers and developers, but what about junior developers who might not have experience in bugfixing for IE8?
IE8 Linter is a little tool (available as a Node module) that lets you lint websites for IE8 compatibility, displaying warnings for possible pitfalls and suggested fixes. It reviews a given URL and provides a list of usual suspects that cause incompatibility with references to guides and articles on how to fix them. Hopefully, you won't need it that much, but if you do have to actively support IE8, this tool might save you a few hours on an urgent project. (vf)
6. On Early-Birds And Sunrise Joggers
Taking a shower, making coffee, checking emails. Do you have a certain routine to start your day? Well, to be honest, most morning routines tend to become quite boring after a while, and sometimes you might even feel as if you're reliving your personal Groundhog Day when the alarm goes off. So how about changing your habits a bit, and help set yourself up for a more productive and enjoyable day? If you need some ideas to mix into your mornings, My Morning Routine has got you covered.
The site features more than 100 inspiring interviews with creative people from all over the world. Early risers, frequent travelers, those who take the time for some meditation or exercise — they all provide an insight into their mornings. How does their routine influence the rest of their day? And how has it changed over the years? A beautiful idea that will inspire you to rethink your own routine, or at least to give it a bit more thought. (cm)
Advertisement
7. Optimizing Images For Faster Loading Times And Happier Users
According to the HTTP Archive, the average web page is 1860KB in size, with images making up a whopping 63%. To save our websites from unnecessary bloating, image optimization should really be a natural thing to consider — for everyone. But which method leads to the best results? Fellow developer Justin Avery tested to which extent the size of a 1MB-heavy headshot can be improved. By reducing image dimensions and quality, blurring less important parts and running the image through ImageOptim, he managed to save an impressive 858KB. Adding this procedure to your workflow would involve about 2-3 minutes per image at most, but will cater for much faster loading times, and thus a better user experience.
Another way to improve loading times, or at least make them appear much shorter, could be progressive JPEGs. Contrary to conventional baseline images which render from top to bottom, progressive JPEGs serve a low-res version of the image quicker, refining it afterwards. (If you're unsure whether your JPEG is progressive or baseline, you can use ImageMagick to find out.) However, opinions whether progressive images help or hurt the user experience vary. That's why, to back up the debate with substantial data, the team behind Radware conducted a scientific study. The findings are in fact quite surprising (baseline images "performing" better) and an important read for anyone who has ever considered progressive images to be an option.
One way or another, make image optimization part of your automated build process — that's the most valuable way to improve performance in almost no time! (cm)
8. Coffee, Plugs And Free Wi-Fi
A "unicorn" combination of three things that are essential to the happiness of every web worker on the road: good coffee, good Wi-Fi and a good number of plugs. Coffee & Power features coffee places in big cities around the world that are ideal for an afternoon full of caffeine-loaded productivity. Know a good spot? Go ahead and add it to the list!
Sometimes, all you need is a Wi-Fi Spot and the right password without the need to purchase anything to just look up directions or send a very quick message. Wi-Fi Map is a handy app available for both iPhone and Android, that shows you networks and submitted passwords around the world. Everyone is invited to add their newly discovered place which makes the tool an even more extensive resource for web addicts on the road. It's not cool to use Wi-Fi for a longer period of time without ordering anything though — but it goes without saying! (ml)
9. The Stories Behind The Products
Whether it's a head-up display compatible with any car, a foldable kayak or a smart bicycle wheel; makers out there come up with the most ingenious ideas to make our lives simpler, more fun, or, well, just more beautiful. However, just as interesting as the products themselves are the people and the stories behind them. How did an idea evolve and how did it finally get to see the light of day? That's exactly what the blog Maker Stories is all about.
The resource collects the stories behind extraordinary products and introduces us to the people who made them come to life. It's about clever inventions and devoted craftspeople. A very insightful blog, that is just the starting shot for an entire storytelling platform for professional makers to showcase their creations, tell their stories, and connect with consumers. Make sure to keep an eye out on this one. (cm)
Advertisement
10. 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.
Image credits: Marc Thiele.
Upcoming Online Workshops: (Mar 2, 3)
Full-Day Workshops in Los Angeles, USA: (Apr 27, 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!
New on Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Marketing Designer at Schoola (San Francisco, CA)
We're looking for a designer to help us create delightful, well-considered design for our community.
-
Senior UX Designer at Artist Growth (Nashville, TN)
We're looking for a seasoned Senior UX Designer to join our creative team in Nashville, TN.
-
Front-End Web Developer at Red Ventures (Charlotte, NC)
We're looking for folks with exceptional web development skills. We don't need people who just code PSDs.
Smashing Highlights (From Our Archive)
-
Showcase of Web Design in Russia
Like everywhere in the world, web design came to Russia as a modern way to present any kind of information to an audience online. So, principles such as simplicity, accessibility and eye-catching design have been cultivated for several years.
-
Redesigning The Country Selector
The country selector. It's there when you create an account for a new Web service, check out of an e-commerce store or sign up for a conference. The normal design? A drop-down list with all of the available countries.
-
Typographic Design Patterns And Current Practices (2013 Edition)
Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content — specifically, articles, news and stories.
Recent Articles On Smashing Magazine
No comments:
Post a Comment