There are several ways to make navigation responsive, and usually the solution we need is quite straightforward. But despite the apparent simplicity, there are many underlying factors which, when thought through and implemented properly, can make a simple solution even better without adding more complexity to the user interface.
One of the problems I’ve encountered while building responsive navigations is that browsers currently don’t support CSS3 transitions to a height which is defined auto. Most of the time, we shouldn’t use fixed height either because the height of menu items might not be the same in all browsers, and the number of items may change. I also always try to reduce the weight of pages I build, so I’ve been wanting a solution that doesn’t require a big library such as jQuery to work.
Read more...
If we look at email from a signal-to-noise perspective, then one-to-many emails are undeniably in the “noise” category; people are exceedingly good at ignoring them. Even Gmail and Hotmail are helping us ignore them by providing smart inboxes that sort incoming messages.
Emails from our families, friends and coworkers, however, are “signals.” We go out of our way to read them. But those emails aren’t the only ones — on occasion, we’ll happily read messages from businesses or complete strangers. Why? Because these emails are interesting, engaging and, most importantly, full of personality.
Read more...
As Web designers and developers, we see the value in supporting mobile devices every day. We’re well-versed in tactics and techniques for adapting our work to mobile. Our challenge is to be equally well-versed in selling our clients on that value as being something in which they need to invest precious budget dollars.
I’ve been describing what I call the “mobile imperative” for a few years now when talking to clients or advocating support for mobile devices in Web design projects. The mobile user experience is not an add-on. It’s now a major part of the Web as we know it, and our clients’ content and tools will appear on an increasing number of devices, screens and contexts.
Read more...
With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding.
The Create Demo extension addresses some of these issues. It automatically converts your Fireworks documents into portable presentations, which can then be easily presented in any browser — desktop or mobile.
Read more...
In this tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.
Read more...
Rule number one for designers of all kinds: use a contract. Sometimes, this is easier said than done. Should I use a service agreement? A retainer? A licensing contract? With the help of Docracy, we collected the experience of many designers to provide a wide range of starting points for less experienced creative professionals, and to start a permanent free legal resource for the community.
Below you’ll find a collection of legal documents curated by our fantastic community. We are looking for your feedback and contribution to grow this collection. Suggest more items or add the contract you use for your own work.
Read more...
In the first part of this series, we discussed Backbone.Marionette’s Application. This time around, we’ll discuss the module system that is included in Backbone.Marionette. Modules are accessible through the Application, but modules are a very large topic and deserve an article dedicated to them.
Before we get into the details of how to use Marionette’s module system, we should make sure we all have a decent definition of a module. A module is an independent unit of code that ideally does one thing. It can be used in conjunction with other modules to create an entire system. The more independent a unit of code is, the more easily it can be exchanged or internally modified without affecting other parts of the system.
Read more...
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over five years now, and we are very thankful to all the designers who have contributed and are still diligently contributing each month.
This post features free desktop wallpapers created by artists across the globe for April 2013. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
Please note that:
- All images can be clicked on and lead to the preview of the wallpaper,
- You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
Read more...
As UI designers, we’re always interested in learning, reading user research, understanding best practices and keeping up to date on all the latest approaches and tactics for building websites and applications.
One of the most exciting concepts we’ve started to apply to our thinking is the mobile-first approach, famously pioneered by designer Luke Wroblewski on his blog and then in his subsequent book. Generally, this approach provides a healthy way to gain focus, cut the fat and get to the heart of what’s important — for both content and interaction.
Read more...
