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.
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.
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.
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.
A recent study (PDF) found that more than 80% of people are disappointed with the experience of browsing Web on mobile devices and would use their smartphones more if the browsing experience improved.
This isn’t surprising when 64% of smartphone users expect websites to load in 4 seconds or less, while the average website takes more than twice that amount, at 9 seconds. This article explains techniques you can use to make your websites faster on mobile devices.
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.
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?
There is no longer any debate about whether we need to address the design needs of mobile website users. While mobile browsers and platforms are creating new challenges for us, jQuery Mobile, an open-source multiplatform UI framework, can help us succeed with our mobile apps.
jQuery Mobile was released to help designers and developers create mobile Web experiences that are easy to build, multiplatform, customizable and unobtrusive in code. In this article, we’ll discuss what we need in order to use jQuery Mobile, as well as its basic architecture, and how to deal with a typical app’s features, such as theme, fixed toolbar, page navigation, buttons, lists and forms. You’ll get a practical idea of how to create a jQuery Mobile app and how to extend it with advanced features.
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.
For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough. Typically, sub-navigation displays the parent, siblings and children of the current page.
A persistent primary navigation bar shows top-level pages, allowing users to move between sections. However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a "mega-site".