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 four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for June 2012. 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?
Without Angry
"This bird is cool not angry :-)." Designed by Tinjo Thomas from India.
"Baba(sadhu) is the Hindu ascetic who has renounced caste, social position, money, and authority and occupies a special place in Hindu society.He absorbed all colors from a spiritual life, devoid of material pleasure, mostly engaged in visiting holy places." Designed by Yoshita Singhai from India.
"This piece pays homage to Mr. Roger Hargreaves, creative kids author to such imaginative stories as Mr. Messy and my personal favourite: Mr. Bounce.We utilized the ‘Curly Brackets’ and titled each according to the font type that was used. Appropriate for the month of June as we celebrate Father’s Day this month." Designed by Pop Up Factory from Milton, Ontario, Canada.
"Mark and Jenny Linn are, perhaps, the dreamiest and the most romantic couple in the whole world. Their love story began in a vintage San Francisco bookstore 5 years ago and continues till the present day. In June Mark and Jenny usually arrange aspecial dinner to watch the night sky and make a common wish for the future, while watching the falling star." Designed by Maria S. from USA.
"Nagraj is an comic superhero in India. In this wallpaper you can see Nagraj as a basketball. I made this a little fun because in India June is a Holiday season for children." Designed by Sandeep Virk from India.
"This is the retro photography of my aunt from 1964 photographed in the beautiful village near the city Nis in Serbia." Designed by Marija Zaric from Serbia.
"La Fete de la Musique, also known as World Music Day, is a music festival taking place on June 21, read more on wikipedia." Designed by Sherif Saleh from France.
"Vector hand drawing illustration of beautiful woman’s face with flowers in her hair and floral pattern behind her." Designed by Jane Lane from Russia.
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
A big thank you to all designers for their participation. Join in next month!
What’s Your Favourite?
What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.
Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action.
What Is jQuery?
In a nutshell, jQuery is a leading JavaScript library that can perform wonders on your Web pages and make your Web development life much easier and more enjoyable. With the rise in popularity of jQuery since its arrival in 2006, over an estimated 24 million websites (50% of them being the 10,000 most visited websites) currently reap the benefits, and as Google Trends suggests, it’s the most popular JavaScript library.
Thousands of Web developers worldwide use jQuery to innovate on their websites and stay up to date on trends. This surge has been influenced by several jQuery gurus who have helped make jQuery what is today. I would like to personally thank these guys and gals for their hard work and would like to do my part to spread the news about JavaScript and jQuery. In this article, we’ll show you over 50 of jQuery’s most renowned functions, demonstrated with live visual examples. The jQuery library is comprehensive, so hopefully seeing these most frequently used functions in action will improve your understanding of how they can work together to produce excellent results.
jQuery And CSS
Styles play a big part in the look and feel of any website, and jQuery can help us change them dynamically. In this section, we will look at how jQuery can be used to dynamically add and remove style classes and entire cascading style sheets.
.css()
You can change your website’s styles dynamically with jQuery’s .css() function. Either change styles that are already declared inline or in CSS files (such as font-size, color, background-color, etc.) or create new styles for elements.
Demo: Change text color and background color
Blue text with orange background
Demo: Add a style sheet
.addClass() and .toggleClass()
In addition to the .css() function, you can apply currently defined CSS classes by using the .addClass() function. Its counterpart function, .removeClass(), reverses the action.
Demo: Add a CSS class to an element
Click “Run demo� to add the styles to the button. Click “Reset� to remove the styles.
The .toggleClass() function is a huge time-saver for toggling a state on and off with CSS. The following example sets event handlers for mouseenter (which applies the CSS class img-hover to the image) and mouseleave (which removes it).
Demo: Toggle a CSS class on an element
jQuery Animations And Effects
We can use jQuery to create some very smooth animations and effects with minimal effort. Animations and effects are always best demonstrated with examples, so let’s dive right in.
.animate()
The .animate() function can be used to animate the movement and/or appearance of elements on a Web page. Let’s look at both. You may define the settings parameter with a set duration (in milliseconds) or any of the words slow, normal or fast. The callback, which is the function that runs after the animation has finished, is optional.
Demo: Animate text
Demo: Animate size
Easily change the size of a div.
Demo: Animate movement
The .animate() function is asynchronous, so multiple animations may run at the same time. You can also use the .stop() function to stop the animation. If you click “Run demo� and then “Reset� during the animation, it will demonstrate the .stop() function.
Many pure JavaScript functions are used frequently in animations, such as setInterval(), clearInterval(), setTimeout() and clearTimeout(). Once again, these functions are included in the list because understanding what they can do is important to supporting the jQuery’s animation functions.
setInterval() and clearInterval()
You can automate a task based on time using the JavaScript setInterval() function, which can be used to specify a regular time-based trigger.
Demo: Simple time counter
Click “Run demo� to start the timer, and click “Reset� to stop it.
0 seconds elapsed
Demo: Digital time display
setTimeout() and clearTimeout()
You can also delay a task based on time using the JavaScript setTimeout() function, which can be set to wait for a specified length of time before running the code.
Demo: Do something after a specified length of time.
Click “Run demo� to set the timeout and, click “Reset� to clear it.
This text will disappear after three seconds.
.slideToggle() and .fadeToggle()
jQuery provides various toggle functions that save us heaps of time when we want to bind related events to the same element. For example, .slideToggle() binds both .slideUp() and .slideDown() to the element and also manages that state for us.
Demo: Slide an element in and out of view.
Click “Run demo� to show the paragraph, and click again to hide.
Curabitur placerat commodo augue eget congue. Aliquam id ante leo. Duis at libero magna, at dignissim odio. Aliquam aliquet suscipit mollis. Pellentesque libero tortor, elementum id mattis vel, mattis eget metus. Nam convallis interdum imperdiet. Fusce at magna tellus. Sed mi ante, aliquam at accumsan ac, tristique sit amet dui. Aliquam eleifend molestie ligula. Vivamus eleifend, diam id tincidunt posuere, ipsum dui elementum sapien, posuere pulvinar risus neque id turpis. Nullam volutpat cursus libero, sit amet euismod justo eleifend vitae.
The .slideToggle() function is similar to .slideToggle() but with a fading effect that uses the .fadeIn() and .fadeOut() methods.
Demo: Fade an element in and out of view.
Click “Run demo� to show the paragraph, and click again to hide it.
Curabitur placerat commodo augue eget congue. Aliquam id ante leo. Duis at libero magna, at dignissim odio. Aliquam aliquet suscipit mollis. Pellentesque libero tortor, elementum id mattis vel, mattis eget metus. Nam convallis interdum imperdiet. Fusce at magna tellus. Sed mi ante, aliquam at accumsan ac, tristique sit amet dui. Aliquam eleifend molestie ligula. Vivamus eleifend, diam id tincidunt posuere, ipsum dui elementum sapien, posuere pulvinar risus neque id turpis. Nullam volutpat cursus libero, sit amet euismod justo eleifend vitae.
.delay()
In this demonstration, we’ll mainly use jQuery’s awesome function-chaining ability by running the .fadeOut(), .fadeIn() and .delay() functions together on the same element. This is very similar to the setTimeout() function we saw earlier but without allowing us to easily interrupt the delay.
Demo: Use .delay() to create a delay between function calls.
jQuery And DOM Manipulation
The DOM (document object model) is all of the HTML content that you see on a website (text, images, container elements, etc.). We can use jQuery to perform wonders with the DOM when all page elements have been loaded. The event that captures when the DOM is ready is called .ready(), and there are a few ways to call it. In this section are demos of jQuery functions that change the DOM in some way.
.clone()
The jQuery .clone() function is pretty simple to use; it basically just copies the element that you specify into a new element.
Demo: Clone an element.
.html(), .text() and .empty()
Using .html() is the most common way to get or set the content of an element using jQuery. If you just want the text and not the HTML tags, you can use .text(), which will return a string containing the combined text of all matched elements. These functions are browser-dependent (i.e. .html() uses the browser’s innerHTML property), so the results returned (including white space and line breaks) will always depend on the browser you are using.
In this example, we are also making use of the .empty() function, which is a quick way to get rid of the content within, and .prev(), which can be used to reference the preceding element, in this case the demo buttons.
Demo: Get the content of an element.
.append(), prepend(), .after() and .before()
These function provide the means of inserting content in particular places relative to elements already on the Web page. Although the differences may appear trivial, each has its own purpose, and knowing exactly where they will all place content will save you coding time.
The jQuery library has a full suite of AJAX capabilities that enables us to load data from a server without refreshing the browser page. In this section, we will have a quick look at refreshing page content, loading scripts and retrieving data from different Web pages and servers.
$.ajax()
The $.ajax() function is arguably the most used jQuery function. It gives us a means of dynamically loading content, scripts and data and using them on a live Web page. Other common uses are submitting a form using AJAX and sending data to server-side scripts for storing in a database.
The $.ajax() function has a lot of settings, and the kind team at jQuery has provided many shorthand AJAX methods that already contain the settings we require. Some developers like to write out the full AJAX settings, mainly because they require more options than many shorthand methods provide (such as beforeSubmit()). Also, note that you can use the Firebug NET.panel to analyze HTTP requests for testing, monitoring and debugging AJAX calls.
Demo: Use $.ajax() to load content without reloading the entire page.
For this demo, HTML content is held in separate files, which are inserted below using AJAX. Showing a loading icon while an AJAX request is processing is courteous. The third content block below has a two-second delay to simulate the loading icon.
Content will appear here.
We can also use functions such as $.parseJSON() and JSON.parse() from ECMAScript5, which simplifies JSON parsing. If you’re interested in JSON parsing and tree recursion, see the “Online JSON Tree Viewer Tool.�
.load()
The .load() function is an AJAX shorthand method for inserting HTML straight into a matched element on the Web page.
Demo: Use .load() to grab HTML content from another Web page.
JSONP
AJAX requests are subject to the same origin policy, which means you may only send requests to the same domain. Fortunately, $.ajax() has a property named JSONP (i.e. JSON with padding), which allows a page to request data from a server on a different domain. It works by wrapping the target data in a JavaScript callback function. Note that the response is not parsed as JSON and may be any JavaScript expression.
Demo: Use AJAX and JSONP to load data from an external source.
This demo will load the latest pictures tagged “jQuery� from Flickr’s public feed.
Managing events using regular JavaScript is entirely possible, however, jQuery provides a much more user-friendly interface to manage Web page events. Examples of such events are clicking a hyperlink, moving the mouse over an image and even pressing a key on the keyboard; the list goes on. Here are some examples of key jQuery functions that may be used to manage events.
.bind() and .unbind()
The .bind() function is very useful for adding event triggers and handlers to your DOM elements. In case you didn’t know, you can bind your DOM elements to a whole list of events, such as submit, change, mouseenter and mouseleave.
You may have also seen .click() used in jQuery code. There is no functional difference between .click() and .bind('click'), but with the latter we have the benefits of being able to specify custom events and add data parameters. There is also an .unbind() function to remove any events that have already been bound.
Demo: Trigger an event when the user clicks on or hovers over a div.
Demo: Trigger an event when the user hovers over or double-clicks a div.
Press “Run demo� a few times in a row for some nice effects. Also, double-clicking the boxes will make them disappear!
Demo: Trigger an event when the user presses a key.
Press any key shown in the boxes below.
Note: The key difference between keydown and keypress events is that the latter captures each individual character entered, as opposed to just firing once per key press. To illustrate, this simple tool shows the keycodes for any key that you press.
.live(), .on() and .off()
The .live() function is essentially the same as .bind(), but it can capture events on new elements that didn’t exist on the page when it was loaded; for example, if your Web page has loaded and then you dynamically insert an image onto it. If we used .bind() to attach an event when the mouse hovers over the image, it would not work. But if we used .live(), it would work! As of jQuery 1.7, you are advised to make use of the new .on() and .off() functions, instead of the .live() function, which has a few disadvantages to .on(). See “jQuery 1.7+ .on() vs. .live() Review� for a more detailed explanation of the differences.
Demo: Capture events on new or changed elements.
Click “Run demo� to dynamically insert more images and check that the event still fires on them.
.delegate()
The .delegate() function provides a means of attaching event handlers to new elements (similar to the .live() function covered above). You might find .delegate() to be faster than .live() because the latter searches the entire document namespace for the elements as opposed to a single document. The much more important difference is that .live() is prone to break if used with traversing.
Demo: Delegate events to the child elements of a root element.
The demo area is the root element (orange border) with colored span child elements that have a hover event attached. Click “Run demo� a few times and hover with the mouse to trigger the effects.
.preventDefault()
The .preventDefault() function can be applied to stop any element with a default action from firing: hyperlinks, keyboard shortcuts, form submit buttons, etc. These are probably the most common uses, and the function stops the hyperlink from going to its destination (the href). It’s very useful for stopping those default actions and running your custom JavaScript actions instead.
Demo: Prevent a hyperlink from going to its href.
.stopPropagation()
There are methods that do things similar to .preventDefault() but that behave differently. The .stopPropagation() function prevents the event from occurring on any ancestor elements. This can be used if you have an exception to the rule that you’ve specified for a container element with child elements. This function currently does not work with .live() events because it handles events once they have propagated to the top of the document.
Demo: Prevent a parent container from firing its event when its child is clicked.
Click both the link and div box area to see which event is fired.
This div does not use the .stopPropagation() function.
As you can see, when you click the top link it also fires off the div event, but the bottom link uses .stopPropagation(), which prevents the div event from firing. The div event will still fire if you click inside the div, as expected.
.stopImmediatePropagation()
This function is nice for stopping all future bound events. The events will fire in the order they were bound, and when it hits the .stopImmediatePropagation() function, all further bound events are not fired.
Demo: Prevent all future bound events from firing.
Click both the link and div box area to see which event is fired.
This div does not use the .stopImmediatePropagation() function.
As you can see, when you click the links in the top div, all of the events fire off. But when you click the links in the bottom div, only the code for all of the links fires off because it calls .stopImmediatePropagation() on the event. This function also prevents the event from firing on any ancestor elements, just like the .stopPropagation() function, as seen in the example where the div click event doesn’t fire on the bottom links.
Finding, Looping And Filtering Results
jQuery gives us fast access to finding anything on the page and the ability to loop through or filter results as we please. It also has powerful functions to manipulate and extend data and functionality associated with JavaScript objects. There are so many things to cover in this section, so we have narrowed them down to a few key functions.
$.each() and .each()
There are two different methods for iterating with jQuery: .each() is used to iterate only over jQuery objects collections, while $.each() is a general function for iterating over JavaScript objects and arrays. I am a big fan of functions such as these and JavaScript shorthand techniques that provide us with a fast alternative to basic JavaScript coding.
Demo: Use $.each() to loop through values in an array.
Output the countries of the world (stored in an array).
Demo: Use .each() to loop through DOM elements.
This demo loops through all of the h2 tags on this Web page and creates a table of contents.
You can use $.each() and .each() on a lot of different things, such as DOM elements, arrays, objects and JSON. For those of you who are keen, you could try five more jQuery .each() examples.
$.data(), .data(), $.hasData() and $.removeData()
Updates to the jQuery library (mainly since 1.4) has brought the ability to attach data of any type to DOM elements. This is a very useful alternative to storing data in JavaScript objects and other such methods. There are two versions: $.data(), which takes in the element as a parameter, and .data(), which can attach directly to matched elements.
Note that $.data() returns a data object to the caller, whereas .data() does not. There are also many utility functions, such as $.hasData(), $.removeData(), that help with data management.
Demo: Attach data to DOM elements.
The following example sets and gets a data object into the div for this demo area.
Together with the jQuery :contains() selector, you can use the pure JavaScript functions .match() and .test() to save time when filtering for string values. Let’s look at some examples.
Demo: Extract email addresses from inside HTML (i.e. a string).
We can use .test() to check whether any emails are present, and use .match() to extract them.
Curabitur placerat commodo augue eget congue. Aliquam id ante leo. Duis at libero magna, at dignissim odio. Aliquam aliquet suscipit mollis. Pellentesque libero tortor, elementum id mattis vel, mattis eget metus. somebody1@somewhere.com Nam convallis interdum imperdiet. Fusce at magna tellus. Sed mi ante, aliquam at accumsan ac, tristique sit amet dui. Aliquam eleifend molestie ligula. Vivamus eleifend, somebody2@somewhere.com diam id tincidunt posuere, ipsum dui elementum sapien, posuere pulvinar risus neque id turpis. Nullam volutpat cursus libero, sit amet euismod justo eleifend vitae.
Demo: Use the jQuery :contains() selector to match elements with substrings.
We can use the :contains() selector to match substrings inside any of that element’s descendants (this is case sensitive).
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur quis arcu ac justo pellentesque ullamcorper sit amet quis mi.
Nam a lorem quis lacus dapibus egestas et a ipsum.
Phasellus nec magna quis diam cursus egestas quis aliquet tortor.
Ut feugiat vestibulum mi, sit amet consequat orci facilisis ac.
Phasellus et enim ut sem dapibus hendrerit.
Search:
.find()
The .find() function is very useful for matching elements filtered by a selector, jQuery object or element. The .find() function can be used with the functions .children() (which searches only the direct child siblings of the matched elements) and .parents() (which searches the direct parent elements of the matched element).
Demo: Finde specific descendants of matched elements.
Folder 1
Subfolder 1
Item 1.1.1
Subfolder 2
Item 1.2.1
Item 1.2.1.1
Item 1.2.1.2
Folder 2
Item 1.3.1
Item 1.3.1.1
Item 1.3.1.2
.filter()
The .filter() function allows us to reduce a set of matched elements based on a jQuery selector. This is useful when you want to process a group of elements and then further process specific child elements. The .filter() function can be used in a few different ways, such as to filter by a class name, function or jQuery object.
Demo: Use .filter() to match subelements.
In this example, .filter() is used to style paragraphs based on their content.
Paragraph 1
Paragraph 2 with span tag
Paragraph 3 with strong tag
Paragraph 4 with highlight class.
Paragraph 5 with span tag
Paragraph 6
Paragraph 7 with strong tag
Paragraph 8 with span tag
Paragraph 9
.slice()
The .slice() function lets us easily specify a subset of elements to perform actions on. It takes two parameters: start and end indices of subelements in a matched parent element.
Demo: Use .slice() to perform actions on a subset of elements.
Slice 1
Slice 2
Slice 3
1
1
1
1
2
3
1
4
2
7
3
0
3
6
1
.prev() and next()
The .prev() and .next() functions can be used to reference the immediately preceding or next element in a set of matched elements (in the DOM hierarchy). You can also add a selector to the functions that acts as a filter on the elements (shown in the demo).
Demo: Reference the previous and next elements in a list.
The $.extend() function can be used to combine two or more objects into the first object or into a completely new object.
$.extend( target, [object1,] [objectN] )
In the demo, we have a functional contact form on our website, and we want two more forms with similar functionality. Instead of copying all of the code that processes the form, we can use $.extend() to copy the functionality to our new forms, thus avoiding repetitive code. You might have noticed that the target element specified is a blank object; this is a trick that you will often see to create a new object of object1 and extend it with objectN (N representing any number of objects). So, in the example, we want to “copy� the existing functionality of forms.enquiry and simply override the email address.
Demo: Use $.extend() to change the send action on a form to different email addresses based on the form used.
This demo simulates the submission of three forms that all use the same code base.
Demo: Use $.extend() to specify custom settings for a plugin.
This demo shows how to specify the length of paragraph excerpts. The default is 150 characters.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Addy Osmani’s book Learning JavaScript Design Patterns gives greater insight into how to use the $.extend() function to override the default values of jQuery plugins.
.serialize() and .serializeArray()
The .serialize() and .serializeArray() functions can create string and array values from form fields in seconds! There are two demos here: the first outputs all of the form’s fields and their values, and the second creates a URL string with the form fields and values appended to the form action ready to be sent.
To run the demo, enter anything into the form and click the “Run demo� buttons below the form.
Demo: Create an array of all of the form’s field values
Demo: Create a URL string with all of the form’s field values
Conclusion
Although we have only scratched the surface of jQuery in this article, we hope you have learned something about some of the most popular jQuery functions and are able to use them to write fantastic code for your next Web development project. Thanks for reading.
You cannot plan for and design a responsive, content-focused, mobile-first website the same way you’ve been creating websites for years—you just can’t. If your goal is to produce something that is not fixed-width and serves smaller devices just the styles they require, why would you use a dated process that contradicts those goals?
I’d like to walk you through some problems caused by using old processes with responsive design. Let’s look into an evolving design process we’ve been using with some promising new deliverables and tools. This should provide a starting point for you to freshen up your own process and bring it into the responsive age.
The Problem
The issues caused when trying to force new results from an old process are significant yet, strangely enough, not immediately obvious. We’ve all just gotten used to them, like the annoying quirk we didn’t realize we had, until someone points it out. And from that point forward, it drives you crazy. For example, when we create a desktop-sized, fixed-width site layout in Photoshop and hand it to a developer to interpret into HTML/CSS, we are asking the developer to make a lot of design decisions—possibly without even realizing it. Below is just a small sample:
How should the layout adjust for smaller-sized devices? (It sure would be nice to have a hierarchy of important page elements based on their purpose, huh?)
What is the hierarchy of the content? (Gee, all that “Lorem Ipsum� doesn’t make it obvious?)
How does the navigation respond to smaller screens? (How do I handle ten links with five child pages each revealed on hover with a 320×480 touch device?!)
This can cause major problems if the developer doesn’t feel confident in the visual arena. Even designers/developers who feel comfortable making those calls can get in hot water. In the end, the developer is often forced to make assumptions where plans were not made clear beforehand—sometimes days before feedback from designer or client becomes available. Sometimes it works, sometimes it doesn’t.
Work More or Work Efficiently?
It’s easy to resort to working more to resolve these new challenges. What comes naturally? Do a desktop and mobile-sized wireframe, then turn around and design a desktop and mobile-sized layout. This sort of solves the problem. You and your developer have more to work with, at least. However, what about all the device widths in-between—you’ll have to cover those as well, right?
At this point, you wake up and realize you’re stuck in a familiar loop of ever-increasing deliverables and ever-shrinking profits. Using this old process to tackle new problems doesn’t really solve any of them, and it’s going to kill you from lack of sleep, make you poor from lack of profit, or both.
There are some good ideas floating around dealing with new processes. Some smart folks are of the very sensible opinion that the only answer is to design in the browser. However, other smart folks have admitted for the quiet rest of us that it’s really, really hard to design freely in the browser—at least with current tools.
Of the emerging new process ideas, those that involve responsive HTML/CSS prototypes look very promising. I’m planning to investigate these further. However, there are some definite challenges with this approach, not the least of which is the time it takes to create them when the site content is complex. Most of the examples I’ve seen are fairly generic, which doesn’t translate well to real projects.
Currently, we are successfully using a different approach. It attempts to optimize content, design, and development time, finding a budget-friendly balance of appropriate direction from all disciplines—something that is effective, lean and uses quick, widely-accessible tools.
Solution: The Priority Guide
I used to call this my “mobile-sized content prototype wireframe thingy.” For obvious reasons, however, I was encouraged to change the name by pretty much everyone I know. I liked the specificity of the name, but brevity won out. So, I settled on: Priority Guide.
Essentially, with the priority guide, we create a single deliverable that provides direction for content-focused design and mobile-first development in something resembling a wireframe.
By nature, a mobile-sized approach is narrow and forces more of a single column layout. The single column, in turn, causes a linear display of content and features. This linear display makes priority and hierarchy much more apparent than a desktop-sized wireframe, especially if you attempt to use a draft of real content instead of greek text—hence the content prototype.
At that point, armed with just this priority guide, the designer sets off to create something beautiful. The designer cranks up trusty ol’ Photoshop and begins a new layout at a traditional desktop resolution—just like you may have done for the past ten years. For a good web designer (outfitted with his super-duper powers of visualization), it is a snap to make design decisions for a desktop resolution while looking at a mobile plan. That’s just how their minds work.
Once the design work is done, the handoff to the developer consists of the completed desktop-sized design and the original mobile-sized wireframe.
Don’t Let the Simplicity Fool You
This approach may sound simple—which is part of the beauty of it—, but it also provides some real benefits:
The developer is provided a sort of bookended direction, both desktop and mobile. Two guides to follow, each offering unique information. Some interpretation still has to be made, which isn’t a bad thing, but there is far less guess work.
The designer is given a wireframe that provides hierarchy but does not dictate desktop-sized layout, where ample real estate allows for more creative room to breathe—designers need to be given their freedom, lest they shrivel up into sad, hollow, hipster-jean-wearing shells of themselves.
From the prototype and their linear approach, hierarchy can be understood fairly quickly, and the foundation for mobile-first markup and style is implied but flexible.
All of this is done in a two-deliverable process, like before, so it saves time and budget. Any method you get better results in the same amount of time (or less) is a good.
A Note About Context
Any conversation concerning mobile web draws questions of context. Is there a “mobile context”? If one does exist, do users actually have different expectations of a website’s content while they are mobile? And, if users do have different expectations, how do we address them? Whew.
In short, those questions aren’t what this article is about. These issues are beingdiscussedin depth elsewhere. I believe that questions of context can be answered very differently, depending on the project. I’ll leave it to you and your team to apply due diligence in addressing context.
What I will suggest, however, is that you tread very carefully when making assumptions about your users and limiting content as a result. Though a mobile context may exist, you can’t make those assumptions based on screen size alone. People surf the web on their phones from their couches, and they have all the time—and expectation—to access all of your site’s content as they sit and watch TV. This is why we believe in a responsive web design approach that acts as a safety net where little to no content is abridged from the experience of the user. This is the approach reflected in the above article—plan for all content in all contexts.
Tools To Consider
Style Tiles
Designer Samantha Warren just recently presented her concept of Style Tiles at SXSW. She was featured just days later on A List Apart discussing the same concept. We love it. It’s one of those concepts that makes you slap your forehead, wondering why you didn’t think of it sooner. It makes sense for web design in general, even more so in responsive design where client delieverables are much more tricky. We are already planning to integrate this into our workflow. We envision this deliverable being presented to a client during the wireframing process, so progress concerning style and layout can be made separately but concurrently.
Keynote for Wireframes
I’ve been loving Keynote for wireframes lately—it’s even great for mobile-sized content prototype wireframe thingies. If you haven’t tried it, give it a shot. It’s quick, easy to learn, and easy to share. A really interesting article was written recently about designing in Keynote. I’m not sure I’m ready to go that far. However, it’s a fantastic wireframing and planning tool, and there are some great kits to get you started. We’ve been using this one from Travis Isaacs.
Conclusion
If you gain nothing more from this article, let me remind you what you already know: don’t be afraid to try new things. No process is a silver bullet—the same is true of tools and deliverables. If the ideas above don’t fit your project, scrap them and try others. However, you must evolve your design process to account for the evolution of the web and users. If you hope to solve new problems, you’re going to need a new approach.
You must also address the very human issue of communication. Earlier and more frequent collaboration among team members and the client must become the rule in your workflow, not the exception. Content, design, and development team members must review and collaborate regularly at every stage in the creation process until the site is live. We can’t ‘throw it over the wall’ anymore—at least, not if we want our sites to be excellent. There are simply too many moving parts now. Go forth and collaborate.
There is a paradox that fits my life. Doesn’t matter what aspect of my life I am talking about because it always seems to apply. Even more so when I think about this paradox and the design of this website and other websites. I really hate this paradox.
“To walk through the woods, you first need to walk halfway through. Then, once you’re in the middle of it, you still need to walk half of the remaining distance, then half of the distance again, and then another half, and you can never successfully make it through the woods.”
This example is based off of Zeno’s paradoxes, which are even more mind-boggling than the one above.
No matter what stage of a design I am in, I am always halfway there. This is why you might find yourself always saying that you need two more weeks to finish up all the details. It will always be two more weeks no matter what, because all you did was get halfway from where you were to where you are trying to go. Using this mentality can wear you down, but if you twist it around a bit, it can be used as motivation to achieve a successful design.
A Totally Made Up Theory
Let’s use our good ol’ sparring partner Google as an example. You are about to sit down and create the first home page in Google’s history. If you had an infinite amount of time you could tackle any part of the design that you wanted without any worries. But unfortunately life doesn’t give us non-deadlined projects. Because of this, you know the goal that you are striving to achieve—you know what it looks like once you leave the woods, so first, you just have to get halfway there.
If the very first half makes the design at least 50% usable then what would you design first? The logo? The footer? The obvious choice would be the search box and button. In fact, if you design that, then you are probably over 50% of the way through with the design because the website is now usable. It’s good to get that first 50% out of the way, and now you are halfway to your end goal. Some people like to call this working from the inside out.
Next step is to get halfway from where we are now to where we need to be. I think it’s important that we have some kind of branding on the page so people know where to come back to next time they want to search. That means I put the logo on the page. Once I am done with that I’m 75% of the way to my goal. 75% of the way through and how many people in the world would be satisfied with using Google if it had nothing but a logo, search bar and one button on it? I’m betting more than 75%. But if getting 75% of the way towards our goal can please even 75% of our audience, we might be doing a good job.
If you continue on with this process of knocking out half of what you need to do, eventually you will get close enough to your goal where good enough is as good as you are going to get. I know people argue about what good enough means, but if you are 99% of the way to where you are trying to go, then good enough is good enough.
MUD
In the startup community there is a term called minimum viable product.
“A Minimum Viable Product has just those features (and no more) that allows the product to be deployed.”
I’m coining the term Minimum Usable Design, and that is when you reach your 50% mark for your design. If you can’t use your design after you have reached 50% (or a person can’t understand at least 50% of what is going on) then you haven’t reached the 50% mark yet.
By no means does this imply that you should show your design to the public at the 50% mark, but you can use it as a way to gauge your progress. Sometimes you need to wait untill you are 99% done before showing your work to a larger audience. There is nothing wrong with striving for perfection, but it depends on your design and audience. Apple does minimum viable product with the limited features on their products, but make up for it with maximum viable design (a new term, crown me king).
An Example
Blog design is a very simplistic example, but lets run with it. On my website, Drawar, the main goal is to get people to read the content. If I can do that, I have achieved my number one goal, and it just so happens that this goal will keep the majority of my audience happy. Because of this, I want to make the content easy to get to, and so I need to know what design will help me get there.
The 50% mark. Not much, but it achieves the #1 goal.
With this design, anyone that comes to my website can read the content. That is 50% of my journey, but now I need to go the other half to reach another subset of people coming to my design. I decide next that there should be some branding on the website so that people can know where they are at and remember the website if they visit it again.
Now the design is 75% there.
Now when you visit the website you know where you are at, but notice that the additions didn’t take away from the original MUD that I created. From here I can take another halfway point journey by adding links to other sections of the website, and also provide a bit of context about the website they are on.
87.5% of the way…
Again, the additions do not take away from the original 50%, so that is a good thing. Time for one more halfway journey before I push the website out, and that would be adding some revenue.
93.75% complete (well, at least to me).
Basically the design is finished, but there are additional things I could add to the design to make it more complete to some people. For example, search, social media widgets, and possibly a blogroll. I’ve set the goals of the design though, so I understand the milestones that I want to achieve.
Design Is Never Finished
Although I’m happy with the end result of the design, it doesn’t mean it will work for everyone that visits. Someone will always want to get more out of a design, and that is why a design will never be able to leave the forest. Fortunately, the more halfway points you knock out in a design, the smaller the subset of people that are still wanting more out of it. Be careful though, because adding too much will take away from the original 50%, which was the main purpose of the design from the beginning.
And don’t think that this only applies to “minimalistic” websites—that is just my style of design, but it applies just as much to the designs that add a lot of flare to their aesthetic. Tweetbot, for example, isn’t any less of a usable design than other Twitter clients in my mind, because it adds a bit more flash to its design elements.
Always aim for the next halfway point and you will get closer and closer to the edge of the forest—but remember that you will never reach the end. Designs can always be improved upon, and therefore will always be unfinished.
A portfolio is a must-have for any designer or developer who wants to stake their claim on the Web. It should be as unique as possible, and with a bit of HTML, CSS and JavaScript, you could have a one-of-a-kind portfolio that capably represents you to potential clients. In this article, I’ll show you how I created my 2-D Web-based game portfolio.
Before getting down to business, let’s talk about portfolios.
A portfolio is a great tool for Web designers and developers to show off their skills. As with any project, spend some time learning to develop a portfolio and doing a little research on what’s going on in the Web design industry, so that the portfolio presents you as an up to date, innovative and inspiring person. All the while, keep in mind that going with the flow isn’t necessarily the best way to stand out from the crowd.
One last thing before we dive into the mystery of my Web-based game portfolio. I use jQuery which has made my life much easier by speeding up development and keeping my code clean and simple.
Now, let’s get our hands dirty with some code.
The HTML
Let’s warm up with a quick overview of some very basic HTML code. It’s a bit long, I know, but let’s take it step by step.
The HTML is not very complicated, and I could have used an HTML5 canvas element for this game, but I felt more comfortable using simple HTML DOM elements.
Basically, we have the main #wrapper div, which contains the game’s elements, most of which are represented as div elements (I chose divs because they are easy to manipulate).
We have roads, trees, fences, water, caves, houses and so on.
Back to our HTML. You’ll find an element for each of these items, with the relevant class and ID. Which brings us to the CSS.
The CSS
First of all, note that I prepared the HTML to follow the principles of object-oriented CSS by determining global classes for styling, and not using IDs as styling hooks. For example, I used the class .road on each element that should look like a road. The CSS for the .road class would be:
Note that almost all of the elements are absolutely positioned on the game’s canvas. Positioning the elements relatively would be impossible for our purposes, especially because we want the game to be as responsive as possible (within limits, of course — the minimum width that I deal with is 640 pixels). We can write a general rule giving all of the DOM elements in the game an absolute position:
#wrapper * {
position: absolute;
}
This snippet will handle all of the child elements inside the #wrapper div, and it frees us from having to repeat code.
One more word about the CSS. The animations in the game are done with CSS3 transitions and animations, excluding certain features such the lightboxes and player “teleporting.� There are two reasons for this.
The first is that one of the purposes of this portfolio is to demonstrate innovation and up-to-date development, and what’s more innovative than using the power of CSS3?
The second reason is performance. Upon reading Richard Bradshaw’s very interesting article “Using CSS3 Transitions, Transforms and Animation,� I came to the overwhelming conclusion: use CSS3 when you can.
A great example of the power of CSS3 animations in my portfolio is the pattern of movement of the water. The CSS looks like this:
.sea {
left: 0;
width: 100%;
height: 800px;
background: url(images/sea.png) repeat 0 0;
-webkit-animation: seamove 6s linear infinite; /* Webkit support */
-moz-animation: seamove 6s linear infinite; /* Firefox support */
animation: seamove 6s linear infinite; /* Future browsers support */
}
The repeating sea.png image is 65 pixels wide, so to give the sea a waving effect, we should move it by the same number of pixels. Because the background is repeating, it gives us the effect we want.
Another cool example of CSS3 animations happens when the player steps into the boat and sails off the screen.
The boat sails off the screen, revealing the “Contact� section.
If the player gets back onto the road, you’ll notice that the boat moves in “reverse,� back to its original position. It sounds complicated, but you have no idea how easy it is with CSS3 transitions. All I did was capture the event with JavaScript to determine whether the user is “on board.� If the user is, then we add the class .sail to the boat element, which make it sail off; otherwise, we withhold this class. At the same time, we add a .show class to the #contact wrapper, which smoothly reveals the contact form in the water. The CSS of the boat looks like this:
#boat {
position: absolute;
bottom: 500px;
left: 50%;
margin-left: -210px;
width: 420px;
height: 194px;
background: url(images/boat.png) no-repeat center;
-webkit-transition: all 5s linear 1.5s;
-moz-transition: all 5s linear 1.5s;
transition: all 5s linear 1.5s;
}
When we add the class .sail to it, all I’m doing is changing its left property.
#boat.sail {
left: -20%;
}
The same goes for the #contact wrapper with the class .show. Except here, I’m playing with the opacity property:
#contact.show {
opacity: 1;
}
CSS3 transitions do the rest of the work.
The JavaScript
Because we are dealing with a 2-D game, we might want to base it on a JavaScript game engine, perhaps an existing framework. But the thing about frameworks (excluding jQuery, which I’m using as a base) is that they are usually good for a head start, but they probably won’t fit your needs in the long run.
A good example is the lightboxes in my portfolio, which provide information about me and are activated when the user enters a house.
