Designing User Interfaces For Business Web Applications
February 25, 2010 in Design by Janko Jovanovic
Read the full article here
You are browsing the archive for Design.
How to Design a Website with Fireworks: New Plus Tutorial
February 24, 2010 in Design by 8ify.com - Design
In this week’s plus video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4. Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design, including how to work with a grid. Help give back to Nettuts+, and join Plus!
In Depth Video Training
Final Design
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
InCase’s updated Courier Collection
February 24, 2010 in Design by 8ify.com - Design
Some byooootiful new stuff from InCase: First up, their messenger-minded Courier Collection gets updated with a wide-mouthed Messenger Backpack, below.
Other items in the line are an iPhone Pouch, the Messenger Hip Pack, the crowded-subway-friendly Vertical Messenger Hip Pack, the Skate Messenger Bag and of course, the tried-and-true Messenger Bag. This season’s color updates are the Dove Grey with orange accents, but for those who like to keep things on the low, no worries–the bags are also back in (all) black.
Hit the jump for tons-o’-shots.
Coding your First jQuery UI Plugin
February 24, 2010 in Design by 8ify.com - Design
jQuery contains the fn.extend() method, which makes authoring jQuery plugins quite easy, allowing us to write code that is used in exactly the same way as other jQuery methods. jQuery UI also contains structures that make authoring custom jQuery UI plugins easy. So that’s what we’ll be looking at over the course of this tutorial. The methods used differ from that of standard jQuery plugins, and there are stricter conventions that should be followed, which is why I feel the topic is deserving of an article.
Over the course of this tutorial, I’ll show you the coding conventions and general guidelines that should be adhered to when authoring plugins for jQuery UI. We’ll be creating a simple plugin that just adds captions to images on the page. It’s purposely simple so that we can focus on what is needed to make a jQuery UI plugin without getting lost in the code. Anyone that’s written a jQuery plugin should have no problems. Knowledge of jQuery UI may help but shouldn’t be essential to complete this tutorial. Let’s get started.
Getting Started
We’ll need a copy of jQuery as well as a couple of files from jQuery UI, but it needs to be jQuery UI 1.8 (this can be found on the blog). Create a working directory somewhere on your machine called jqueryui-plugin, then inside this create a css folder, a js folder and an img folder (the images used in this tutorial can be found in the code download).
Download the library and unpack it somewhere accessible. We only need a few files from the archive, namely the jQuery source file which is in the root of the archive as jquery-1.4.1.js, and the jquery.ui.core.js and jquery.ui.widget.js files, which are both in the ui folder. Grab these and put them into the js folder in your working directory. We’ll be making light use of the CSS framework as well, so we’ll need one of the theme style sheets available with the current stable version of jQuery UI (I used ui-lightness in this example).
We’ll be making a captionator widget, so we’ll also need a page, with a bunch of images on it, to develop/test the plugin with. This example uses the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Captionator</title> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"> <link rel="stylesheet" type="text/css" href="css/ui.captionator.css"> </head> <body> <img src="img/1.jpg" alt="Royal Air Force Eurofighter Typhoon"> <img src="img/2.jpg" alt="A British military GR-9 Harrier"> <img src="img/3.jpg" alt="Two RAF Tornado GR-4s pull away from a KC-135 Stratotanker after refueling"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ui.core.js"></script> <script type="text/javascript" src="js/jquery.ui.widget.js"></script> <script type="text/javascript" src="js/jquery.ui.captionator.js"></script> </body> </html>
We’ll keep things pretty simple for now; we’ve just three images on the page, followed by four script files; three link to the jQuery and jQuery UI source files, the fourth to our plugin’s source file which we’ll create shortly. The jquery.ui.core.js file is required by all jQuery UI widgets/plugins. The jquery.ui.widget.js file is the widget factory and allows for the creation of consistent widgets that share common API functionality. Most library components require this, and we’ll be using it to create our plugin.
Creating the Plugin File
Create a new JavaScript file and save it as jquery.ui.captionator.js in the js folder; we should keep to jQuery UI’s naming convention, which has just been updated in the 1.8 version of the library, and use jquery.ui.plugin_name.js. Add the following code to the new file:
(function($) { })(jQuery);
All of the code that makes up our plugin should be encapsulated within a self-executing anonymous function. The jQuery object is passed into this function and is used inside the function via the $ alias; this is to ensure that the plugin is compatible with jQuery’s noConflict() method. This is a specified requirement and should always be adhered to.
Next we need to define the plugin; add the following code to our anonymous function:
$.widget("ui.captionator", { });
The pattern for using the widget factory is simple to use, we just call the widget() method specifying the name of the plugin as the first argument, and an object literal containing the properties and methods that make the plugin function. This allows our plugin to be called (and created) using the commen jQuery syntax $(“element_caption_applied_to”).captionator(); like any other jQuery or jQuery UI method.
The widget factory provides a number of these properties and methods for us; for example, we can set the default options for the plugin using the options property, and add an initialisation function that is executed automatically by the widget factory as soon as an instance of the plugin is invoked. Within the object that appears as the second argument in the previous code add the following code:
options: { location: "bottom", color: "#fff", backgroundColor: "#000"
},
These are the only options we’ll use in our example plugin; users (and by users I mean implementers, not end users) of the plugin can specify the position of the caption to be either at the top of the image it is called on, or the bottom, they can specify the color of the text on the caption, or change the background-color of the caption. To change a configurable option of any jQuery UI widget prior to initialisation the implementing developer would just use something like this:
$(“element_caption_applied_to”).captionator({ location: “top” });
Next we can create our initialisation function, after the options object add the following method:
_create: function() { var self = this, o = self.options, el = self.element, cap = $("<span></span>").text(el.attr("alt")).addClass("ui-widget ui-caption").css({ backgroundColor: o.backgroundColor, color: o.color, width: el.width() }).insertAfter(el), capWidth = el.width() - parseInt(cap.css("paddingLeft")) - parseInt(cap.css("paddingRight")), capHeight = cap.outerHeight() - parseInt(cap.css("paddingTop")) + parseInt(cap.css("paddingBottom")); cap.css({ width: capWidth, top: (o.location === "top") ? el.offset().top : el.offset().top + el.height() - capHeight, left: el.offset().left, display: "block" }); $(window).resize(function(){ cap.css({ top: (o.location === "top") ? el.offset().top : el.offset().top + el.height() - capHeight, left: el.offset().left }); });
},
The method name should begin with an underscore as jQuery UI prevents any plugin method that begins with an underscore from being called from outside of the plugin, so this stops it being accidentally called from the HTML page. Any method that we begin with an underscore will be protected in this way.
The majority of our initialization method is a series of variables; within our function the keyword this refers to an object passed into the method which represents the instance of the plugin. The first variable caches a reference to the current instance of the plugin; the _create method is called for each element that the plugin method is called on, which could be a single element or several.
We can access the default options of the plugin (which are overridden automatically if the implementer configures any of them) using the options property of the object; we cache this in the second variable. The element that the plugin method (captionator()) was called on, which in this example would be an image, can be accessed using the element property of the object. We store this in the third variable.
We use the fourth variable to store a reference to the new caption element, which is built from a simple <span>; the <span> has its innerText set to the alt attribute of the current image, and several class names are added to it; we give it the ui-widget class name so that it can pick up some default styling from the current jQuery UI theme. We also give it a custom class name so that we can add some of our own styling.
Next we need to set some CSS properties; we’ll be using a separate style sheet for some styles, but certain things, such as the color and background-color styles are controllable via configurable options, so we need to set these using the plugin. The width of the caption needs to match the width of the image that it overlays, so we also need to determine this and set it programmatically. Finally the new <span> is injected into the page directly after the target image.
Once the caption has been inserted, it needs to be sized and positioned; the only way it can be sized accurately is if it already exists in the DOM and has CSS rules applied to it, such as the font-size. This is why we append the caption to the page, and then determine its exact dimensions, which are then stored in the variables capWidth and capHeight.
Once the caption has been appended to the page (and only then) we can work set the correct width, height and position of each caption, which we set using the css() method once again. The captions are actually completely separate from the images; they are inserted directly after each image and then positioned to appear to overlay the images, after all, we can’t append the <span> as a child of the <img>.
This is fine, until the browser is resized, at which point the images move but the captions don’t because they are absolutely positioned. To remedy this, we’ve used a basic resize handler attached to the window which simply repositions each caption to the new position of its image. This event handler is the last thing in our initialization method.
Another method that our plugin should expose is the destroy() method which is common to all jQuery UI plugins. We must provide an implementation of this method in order to clean up after our plugin. For our example plugin, the method can be as simple as this:
destroy: function() { this.element.next().remove(); $(window).unbind("resize");
},
All we need to do is remove the captions and unbind our window resize handler. This method can be called by an implementer using the plugin so we shouldn’t begin this method name with an underscore. To call this method, the implementer would use $(“element_caption_attached_to”).captionator(“destroy”); which is how any of our public methods would be called.
We need to provide another method controlled/executed by the widget factory; we saw earlier how a developer could change a configurable option prior to initialisation, but what about after initialisation? This is done using the option method using the following syntax: $(“element_caption_attached_to”).captionator(“option”, “location”, “top”); so we need to add the built-in method _setOption to handle this:
_setOption: function(option, value) { $.Widget.prototype._setOption.apply( this, arguments ); var el = this.element, cap = el.next(), capHeight = cap.outerHeight() - parseInt(cap.css("paddingTop")) + parseInt(cap.css("paddingBottom")); switch (option) { case "location": (value === "top") ? cap.css("top", el.offset().top) : cap.css("top", el.offset().top + el.height() - capHeight); break; case "color": el.next().css("color", value); break; case "backgroundColor": el.next().css("backgroundColor", value); break; }
}
We start this method with an underscore because the implementer uses option, not _setOption to actually change the options; we don’t need to worry about how this is handled, we just need to provide this method to deal with anything specific to our plugin. Because this method already exists in the widget factory we should call the original method, which we do first of all in our method using the prototype of the Widget object, specifying the method name (_setOption in this case but we could do it for other built-in methods as well) and use apply to call it. We can then proceed with the code specific to our plugin.
The function will automatically receive two arguments which are the option to change and the new value. We cache some commonly used elements, such as the image and the caption, and obtain the current height of each caption. We then use a simple switch-case statement to handle each of our three options being changed. Repositioning the captions is the most complex, but is still quite trivial and similar to how we positioned them initially.
Adding Events
It’s important to add events that developers using your plugin can add callbacks for so that they can react to different things happening when users interact with the widget in some way. The widget factory handles most of this task for us, all we need to do is trigger the event. This plugin doesn’t really do much, but we could still trigger an event after each caption is added to the page; to do this add the following code directly before the resize event handler:
self._trigger("added", null, cap);
That’s all we need to do! A single line of code and we have a custom event that can be reacted to. We call the _trigger() method of the plugin instance (which we stored in the variable self) and pass the method three arguments; the first is the name of the event, the second is for the event object (we don’t need to use this in our example plugin, hence the null value) and the third is a reference to the caption element. The widget factory will automatically pass the event object (if supplied) and the data we pass in the third parameter to a callback function that uses the added event. A developer could hook into this event using the following syntax: $(“element_caption_attached_to”).captionator({ added: function(e, ui){ //do stuff });
Styling the Plugin
We only need a very tiny style sheet for our plugin, literally we have just three styles. It’s almost not even worth creating a separate file for the styles! But we will, so create a new file called ui.captionator.css, which is the required format for plugin style sheets, and save it in the css directory. Add the following styles to it:
.ui-caption { display:none; position:absolute; padding:10px; }
That’s all there is to it. Our plugin is now functionally and visually complete. The captions should appear like this:
Summary
Like jQuery’s plugin creation method fn.extend(), jQuery UI also has its own mechanism that allows developers to quickly and easily write robust and scalable plugins that meet the jQuery UI projects high standards, although in terms of what it actually does for us, it’s even better that jQuery. The widget factory has been created in such a way that pretty much all of the hard work is taken out of custom plugin creation.
It’s easy to work with the methods provided by the widget factory to add methods to our plugins that are common across UI widgets, such as the destroy and option methods, which implementing developers would expect to find in any plugin. We also saw just how easy it is to trigger custom events that developers can use to react to interactions or occurrences with the widget.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
h3
Coroflot Design Job of the Day: Senior Interior Designer, Teague, Mukilteo, WA
February 24, 2010 in Design by 8ify.com - Design
Senior Interior Designer
Teague
Mukilteo, WA
Extraordinarily talented Senior Interior Designer—one who is passionate about design, energetic, self-motivated, concept oriented; a strategic thinker who can take a project from start to finish. You are highly creative and content-focused with a comfortable and confident presentation style that plays equally well to a variety of international clients and cultures. You are collaborative and articulate not just about design, but related issues like color psychology, branding and global trends. This position is responsible for supporting airline client accounts, facilities design projects, and show aircraft design.
The best design jobs and portfolios hang out at Coroflot.
Quick Tip: Private Variables in JavaScript
February 23, 2010 in Design by 8ify.com - Design
Because of JavaScript’s dependence upon globals, it might be easy to forget that creating private variables can be accomplished quite simply, thanks to closures. In just a few minutes, I’ll demonstrate two common techniques which allow for private variables and methods in your projects.
The key to this particular method is to create a variable that is equal to the returned value of a function. That way, we can specifically choose with values and methods are available to our object. Thanks to closures, we’ll still have access to these private variables, even after the object has been returned from our singleton.
var MyObj = function() { // Private variables var priv1 = 'private 1', priv2 = 'private 2'; // Only the methods and properties within this object will be available. return { doSomething : function() { // alert(priv1); // private 1 alert(this.someProp); // someValue }, someProp : 'someValue' } }(); // execute the function when the MyObj variable is initialized. MyObj.doSomething();
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Shalom! Showcase Of Web Design In Israel
February 23, 2010 in Design by Brandon Corbin
Israel is a young country with an old heart. It has been quickly built up over the last 60 years as an independent democratic Jewish state and is shockingly cutting edge for a country so new.
It is a tiny surreal sliver of land smack dab in the middle of the Middle East: a very European, modern civilization… just programmed to Jewish tradition. Israel has great weather, nice beaches along the Mediterranean sea, fresh and tasty food and a warm and friendly culture. It is home to historic holy sites of the world’s three major religions, and buses drive down streets whose stones are older than anything you’ll find in Europe.
href="http://israblog.nana10.co.il/tblogread.asp?blog=387973">
It feels as if Israel has one foot in Silicon Valley and the other in ancient Canaan — with an undercurrent of Middle Eastern hospitality and culture in this already multi-cultural society. And yet, English is commonly spoken here because many Jews from all over the world immigrate here regularly (not to mention the thousands of tourists from around the globe who pour in for sun, falafel, nightlife and a dash of biblical archaeology.) In some areas, you hear as much Spanish, French, Russian and English on the streets as Hebrew.
Because of its small size and the everyone-knows-everyone effect of being a bunch of Jews, cabin fever (and completion of mandatory army service for the younger generation) drives Israel’s citizens out on frequent travels across the globe, to India, Asia, and South America. As a result, a unique mix of cultural discoveries abroad is woven into Israeli culture.
Tel Aviv is Israel’s most urban, chic city: the capital of all things sexy, secular and spiritual (in alternative ways to traditional Judaism.) You can read more on Tel Aviv’s unique soul in href="http://www.ynet.co.il/english/articles/0,7340,L-3702035,00.html">this article by Ehud Azriel Meir.
Much like many of Israel’s cities — hastily built and functional, yet poorly planned — such is the unfortunate state of most of the country’s websites. Most Israeli websites look unfinished, and they probably are. And Hebrew being a right-to-left language doesn’t help! Being victims of circumstance, Israeli Web designers cannot unleash their creative potential to make modern, usable working websites.
href="http://www.agadir.co.il/">
Even though some cutting-edge technologies are being developed right here in Israel — which is home to former hot startups such as ICQ (which became AOL messenger) and Intel (which is inside your machine… have a look!) — most business owners still putter around in IE6. Israel opened its first official Mac store only last year.
[By the way: The
href="http://www.smashingmagazine.com/network-posts/">network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best design blogs.]
What’s Unique About Israeli Web Design?
Here are some other issues that designers face here (and, I imagine, in most places outside the US, Canada and Western Europe):
- Websites must work in legacy versions of IE (though IE6 is finally almost out). Israeli business owners emphasize this more than getting their websites to work in Safari or Firefox.
- There is a strong liking for Flash-based designs… it must be a cultural thing.
- Little value is given to Web designers (and those in related fields, such as copywriting — although marketers and SEO people seem to being doing okay), and many designers are not taking back their profession.
- Clients care more about cost than usability and standards.
- CSS-based designs are not standard, and many of the people responsible for hiring are not aware of it.
- Big agencies are usually asked to make conventional designs, and although they do quite impressive branding work, the websites they turn out are behind the times. Because they are launched by such big companies, the websites succeed “in spite of themselves,” leading many to believe that this is the formula for wildly successful websites: for Agency X to do our website the way they did for Company Y.
href="http://www.lionways.com/">
- Many entrepreneurs here believe that because they are smart and successful in tech that they know your field as well as their own. They think they can write English better than a US-born copywriter and can design better than a graduate of FIT. Needless to say, this can be frustrating for the person trying to build a new website for them.
- Despite that, usability is starting to be demanded by many website owners, especially the genuinely intelligent tech companies, Web app providers and social media startups; hundreds of these are in Israel, mostly in English.
- Israel is always a few years behind American and European trends and standards, and this is no different on the Internet.
The State Of Affairs
We spoke to key people in the Web design industry in Israel to get their point of view on the state of affairs.
Q: Do you find you have to convince and educate clients a lot to be able turn out the high-end websites that you do?
Arie Zonshine ( href="http://www.lionways.com/">Lionways.com): “Most people calling for a quote don’t really know what they want. It’s as if they are calling to get the price of an air conditioner. It doesn’t matter if they want a new site or a make-over of an existing site: they usually don’t have written specifications, they don’t know what kind of pages they want and they don’t have a visual concept.
“So, I have to guide them through a series of questions, maybe looking at a few sites together in order to understand their needs. Sometimes, their lack of knowledge leads them ask for functionality that would work against them in terms of SEO, for example. I usually don’t have to work too hard to convince them to do things the right way.”
href="http://www.eranpal.com/flash.htm?MainImage=16">
Q: Are clients surprised by how much you quote them? What buzzwords do you hear most from clients?
Zonshine: “Always! Naturally, customers want the best price and, unfortunately in most cases, are not aware at all of the time and work invested. It’s even more problematic with issues such as Web standards and browser compatibility, because these aspects of the work have no visual impact on the website and are difficult for the client to appreciate. [I hear] SEO, AdWords and Flash. Very few mention browser compatibility, Web standards, semantic mark-up or CSS-based design”.
Q: Approximately what percentage of Israeli businesses are into the new standards of websites written in XHTML and CSS, that are non-Flash and that use minimal JavaScript?
Zonshine: “The numbers are unfortunately very low. I would say about 5%. Maybe less.”
href="http://vaza.co.il/project.asp?cat=Web&id=Alfred_Gallery">
Q: Why do you think most Israelis are into conceptual Flash designs that are hard to navigate, outdated and slow? Is this a cultural thing? Are more people waking up?
Zonshine: “In too many initial conversations with potential clients, I hear requests to make things ‘Move on the screen like in PowerPoint.’ Many Israelis forget that the inside is just as important as the outside, and that foundations are more important than a cool façade (i.e. a flashy home page with clever animation) that has nothing behind it. I do believe it’s a cultural thing: you can see it in many areas. The ‘great façade with no foundation’ combo is very representative of Israeli culture. You see it everywhere. However, I do believe that appreciation of quality grows with time, experience and knowledge. More and more people call in already understanding the disadvantages of a Flash-only website”.
href="http://www.towerofdavid.org.il/">
Q: Arie, I notice in your href="http://www.lionways.com/">portfolio that you still use Flash, though you seem to have found the middle road between Flash and usability. Please explain.
Zonshine: “Exactly. We wanted to make the point that cool and functional can work together seamlessly and are not contradictory. It was indeed an early decision that I took together with my partner Dana Ronen, who is responsible for the Flash programming on the site. We wanted to show creativity and Flash capabilities but also show that it can be done without compromising the accessibility, functionality and SEO of the site.
“So, on almost every page, there is a small or big gimmick in Flash, depending on the content of the page and its function. On the home page, the flying business card gets center-stage; similarly, on the ‘About us’ page, the laptop CD tray makes an exciting entrance. On other pages we wanted the client to focus on the content itself, so the gimmicks were demoted to a supporting role and, in most cases, done in Flash (e.g. the credit card terminal, the coffee steam and the compass) and in other cases in jQuery (e.g. the changing color stamp on the contact page)”.
href="http://www.bee-creations.com/Hebrew.html">
Q: How does the fact that Hebrew is written from right to left influence your design work?
Zonshine: “If the site will be Hebrew, you just need to flip your way of thinking horizontally. In terms of layout, it means that the logo would be probably placed in the top-right corner of the page rather than the top-left. You also need to mirror the placement of elements on the page, because the visitor’s eye-tracking patterns are mirrored in Hebrew.
“The issue becomes more complicated when the site has both Hebrew and English or another left-to-right language. A good example of a dilemma that arises is a design that has a large background image, which I use quite often. When the background image cannot be flipped, it usually results in the logo and other elements being positioned on the “wrong” side of the page for one of the languages (Lionways is a good example of that). If, on the other hand, the image can be flipped, it’s much easier, as the Jerusalem Camerata site shows [see below] — the large violin image is mirrored on the English side of the site”.
href="http://waltzwithbashir.com/">
Another example of this issue is Twitter, which scrambles any right-to-left tweets to an almost ridiculous degree. But again, Israel’s creative minds come to the rescue with href="http://www.talker.co.il/">Talker, a Twitter API-based… well, Twitter, except in Hebrew and right-to-left. Compare a Twitter Talker href="http://www.talker.co.il/alonuziel">right-to-left account with a href="http://www.twitter.com/alonuziel">left-to-right account.
Q: How does Hebrew affect other aspects of Web design?
Zonshine: “First of all, a much smaller selection of safe fonts can be used for live text. Arial is probably the most common, followed by Times New Roman, Tahoma and Courier. That’s it, more or less. There aren’t any equivalents of Trebuchet, Georgia, Palatino or other fonts.
“Also, if the site has both Hebrew and English, choosing a font for titles and logos becomes much trickier, because you usually need to choose two separate fonts — for English and Hebrew — that work well together. The Hiddush logo is a good example of that. I spent hours searching until I found a close-enough English font (Anderson the Secret Service) that worked well with the Hebrew one (AgadaMF), and even then I had to clean it a little to match the other. A few font shops in Israel, such as FontBit, offer quality fonts that are designed to blend well in both Hebrew and English”.
href="http://hiddush.org/">
“On top of all this, there are many technical problems with dealing with right-to-left texts in graphic elements, especially Flash components. Small and trivial things suddenly become an issue, such as the inability to control the location of punctuation marks, numbers and other symbols. Sometimes the only solution, as silly as it sounds, is simply to avoid certain characters, but this is impossible to control when dealing with dynamic content.“
Q: Do clients pay on time. And what is negotiating like?
Zonshine: “Negotiating is a part of Israel’s culture. People almost always ask for a discount. I almost always get paid on time”.
Uzi Shmilovici (co-CEO at href="http://netcraft.co.il/">Netcraft) adds: “A lot of the logos that are designed in Israel have English typography. So the question is, where should the logo appear on the site: the left side or the right side?”
Examining some of the biggest websites in Israel shows that this dilemma remains unsettled.
“The other issue”, Shmilovici continues, “is using English words and phrases (either quotes or special terms) in the middle of Hebrew sentences. They force users to change the direction of their reading, which affects the flow of the article and scanning”.
href="http://www.bigdesign.co.il/cs-Confederation%20House.htm">
Typography
Typography is one of the most interesting crafts related to Hebrew websites and design. While traditional Hebrew fonts are great for creating an ancient or holy atmosphere, Web designers face a big challenge in finding or creating modern (or even futuristic) fonts from an alphabet that was invented for one thing: Torah books.
Typography fans might be interested in the “Torah Scribe,” written by a person who handwrites Torah books and who follows a strict set of rules and guidelines. The slightest mistake makes the book un-kosher, and he has to throw it away and start all over again (which is why Torah books cost so much).
href="http://soferstam.co.il/">
Another trend in Hebrew typography is nostalgic fonts from the early days of the state (the British Mandate). A great example is the Palestina font created by Oded Ezer (see image below), which is an effort to fuse an ancient typeface to a modern design.
href="http://www.ezerdesign.com/">
href="http://www.ezerdesign.com/">Oded Ezer’s website is a great place to look for modern Israeli fonts and experiments in Hebrew typography. A leading Israeli typographic artist, Ezer also runs the blog href="http://odedezer.blogspot.com">Spare Type. If you are into typography (and who isn’t?), you must check out two works by Ezer in particular: href="http://www.ezerdesign.com/ketubah.html">Ketubah and href="http://www.ezerdesign.com/typosperma.html">Typosperma.
Any Israeli knows how hard it is to find beautiful fonts in Hebrew. Lucky we have Oded Ezer, a typographic artist, logo and type designer, lecturer and typographic experimentalist. His studio is located in Israel.
href="http://odedezer.com/">
href="http://odedezer.com/">
href="http://www.fontef.com/old/">Fontef, Israeli font designers.
href="http://www.fontef.com/old/">
href="http://hagilda.com/">Ha’Gilda: Hebrew fonts
href="http://hagilda.com/">
href="http://hagilda.com/">
Interesting Solutions to Israeli Design Problems
href="http://www.yotamhadar.com/">Yotam Hadar redesigned href="http://www.nrg.co.il/">nrg.co.il, Israel’s second-most popular news source and seventh most popular website. The old version had too many boxes, low readability and nowhere to focus the eye, not to mention unconventional and hard-to-use navigation. Since its redesign, the website has continually gained popularity (and the statistics show much longer stays), yielding more income and a smaller team on which to rely for maintenance. (The website was completed while the designer was working at Maariv, in collaboration with NRG’s design team, under chief designer Amir Hadad.)
href="http://www.nrg.co.il/">
Efficiency Is A Double-Edged Sword
In a 62-year-old country that is in a constant state of war, where every citizen has to join the army at the age of 18, efficiency (not to be mistaken for productivity or effectiveness) is almost sacred. It has been the most important quality in building this country, and it tends to be the most valued quality in any project. One could say, “It doesn’t matter if it’s good, as long is it works…” Sort of… Close enough. Thus usability, aesthetics and trends are ignored quite often, making the job of the designer secondary.
Another side effect of this harsh efficiency-driven attitude is the de-emphasis on a proper technological education. Because clients only demand that things “work,” standards, trends and aesthetics are the last thing on a developer’s mind. In turn, clients lack a real understanding of the media, which is why so many Israeli websites use Flash. The lack of variety of supported Hebrew Web fonts is also a factor. But fortunately SEO is creeping in and forcing even the most stubborn clients to ditch Flash for HTML and to replace images with live text as much as possible, which will hopefully push typography awareness to the next level.
href="http://www.hasushia.com/">
Adam Benayoun (CEO and co-founder of href="http://lionite.com/">Lionite), puts it very well: “It is a technology-oriented market. A lot of Israeli companies don’t focus on the front end, design, UI, experience, because we are all developing and selling technology to the US.”
Lea Aharonovitch (a senior product manager at Answers.com and a href="http://www.notes.co.il/lea/">UI/UX blogger) adds: “I would even go further to blame each and every one of us Israelis as consumers for not demanding higher standards from websites that prefer banner spots to design.”
“Just a quick look at some of the href="http://www.go2web20.net/#tag:israel">130 Israeli Web 2.0 companies demonstrates how much creative types and services are trying to solve problems and foster new exciting ways to do more on the Web… If we support designers and let them show us what they can really offer, we stand a chance that the next ‘Made in Israel’ design article will boast about how Israel has become the cutting edge of intuitive and excellent user-centered design.”
Lea is also a former manager of UPA Israel (Usability Professionals Association), which recently initiated a series of usability reviews published weekly on Israel’s biggest news website href="http://www.ynet.co.il">Ynet (the equivalent of CNN in terms of traffic and importance), inspecting a different Israeli website every week.
href="http://www.ourbudget.org.il/">
Q: What other setbacks against designers in Israel can you identify?
“Behind every Israeli designer stands a team of managers who just don’t get it,” says Aharonovitch. “Managers don’t think they can afford to offer simple, less monetized interfaces, so designers are required to add as many monetization elements as possible”.
Shmilovici: “Strong interactive companies lead clients to invest a lot of money in the media (where they have big commissions), and the result is usually less resources for UX and design (because the development part is a must anyway)”
Oded Ezer, whose work was featured earlier in this piece, give us a typographer’s point of view: “Conservativeness. Instead of relying on 3,000 years of documented culture and Jewish heritage, young designers are looking to modern European design for inspiration.”
href="http://vaza.co.il/project.asp?cat=Web&id=Dinamo-Dvash">
href="http://vaza.co.il/project.asp?cat=Web&id=Dinamo-Dvash">
Local Influences
It’s worth mentioning that the second official language of Israel is Arabic, another right-to-left language with amazing appeal to typographers. But a whole other article would be required for that and for the question of why Israel has so few Arabic websites.
href="http://www.shatil.org.il/">Shatil
href="http://www.shatil.org.il/">
href="http://www.mossawacenter.org/">Mossawa Center
href="http://www.mossawacenter.org/">
href="http://www.koloudtof.com/">Koloudtof. This website is Hebrew but influenced by local cultures. Remarkably, about 50% of Israelis come from Arab countries.
href="http://www.koloudtof.com/">
Let’s Turn To The Future
Web designers in Israel seem to have two choices: find work overseas, or deal with the conditions in Israel, which in most cases mean lower wages and having to dabble in print design and other unrelated design work. This is another reason why finding good examples of Israeli Web design is hard, because most of the work is done for European and American clients or, if done for domestic clients, just doesn’t compare to the quality of design overseas.
But as Israelis, we always look at the bright side and seek solutions. “Clients in Israel are just like clients all over the world,” says Adam Benayoun, putting as much of the blame on service providers. “We need to educate clients on the importance of design,” he says, advice that is as true of designers in Israel as it is anywhere else.
href="http://be-baboo.com/">
Lionite is a great example of Israeli creativity in business model and workflow. The Tel Aviv-based Web shop provides a complete solution for clients in Israel and overseas, combining development, design and even marketing. “Clients overseas prefer us because of our standards, not because of or despite of our being Israeli,” says CEO Adam Benayoun. “We believe you have to be good no matter where you are from, no excuses.”
Netcraft’s Uzi Shmilovici seems to agree with that philosophy: “Although Israel is not the cheapest place on earth, it is still cheaper than Europe and the US. That said, professionally, Israeli designers are definitely on par with European and American designers. Take those two facts together and you’ll understand why Israeli design gives you the best value for your money.”
Q: So, what do you think we have to offer the world in terms of style, influence, etc.?
Shmilovici: “I do think that some of our unique typography issues have led to some nice progress. Because the Israeli font inventory was weak, we had to come up with new fonts quickly. Some of those explorations, done by Oded Ezer for example, ended up in the MoMA.”
href="http://odedezer.com/typosperma.html">
Aharonovitch: “Israel is considered one of most innovative nations in the world when it comes to technology. It’s hard to compete with our sense of creativity, our high level of adaptability and flexibility and our high skill level in problem-solving and other traits.
”While at times it may seem that we’re not organized or that our affairs are managed informally or that our processes are not well defined, these are our advantages when considering the Agile or Lean development method that has been gaining popularity recently. The last thing to mention is the emotional strength and maturity that many Israelis develop at an early age — mainly derived from growing up in as challenging an environment as the Middle East and serving in the army at the age of 18.”
Showcase of Israeli Web Design
href="http://www.deniszilber.com/">Denis Zilber
href="http://www.schlaffstunde.com/">Schlafstunde
href="http://www.racheltimor.com/">Rachel Timor
href="http://www.eladtayar.com">Elad Tayer
href="http://www.keoss-live.com/">Keoss Studios (warning: music is turned on automatically!)
href="http://www.anz.co.il/">Anz.co.il
href="http://www.arava-k.com/">Arava
href="http://rubinmuseum.org.il/">Rubin Museum
href="http://www.e-dologic.co.il/burger_ranch/2008/site/06/">E-Dologic.co.il
href="http://www.hayehudim.com/">Hayehudim, an Israeli music band.
href="http://kid.org.il/">Kid.org.il
href="http://alilot.co.il/">Moran in the big city
href="http://www.nofganim.co.il/">Moran in the big city
href="http://www.segalwines.co.il/">Segal Wines
href="http://www.sibling.co.il/">Sibling
href="http://odedbabayoff.com/">Oded Babayoff
href="http://www.hablock.com/">“The Block”
href="http://www.israelhayom.co.il/">Israel Today
href="http://www.iestudio.co.il/">IE Studio
href="http://www.redseajazzeilat.com/">The Red Sea Jazz Festival Website
href="http://www.zeronine.me/">Zero Nine
href="http://studiogavriel.net/Web/Web-Intro.html">Studiogavriel’s work
href="http://www.thekotel.org/">The Wall, Jerusalem.
href="http://www.sipholux.co.il">Sipholux.co.il
href="http://3bears.co.il/">3 Bears
href="http://kitsh.co.il/">Kitsh
href="http://www.quicheria.co.il/">Quicheria, one of the many Flash-based websites in Israel (via href="http://www.wix.com/">Wix.com)
href="http://terrypoison.com/">Terry Poison, electro-rock and roll band.
href="http://www.dudihasson.com/">Duddi Hasson, Fashion photographer.
href="http://www.halas.am/">halas.am, Holon Art Lab Audio Service
href="http://www.shanibar.com/">shani bar, Fashion designer.
href="http://www.wuwa.org/">while you were away, Ben Ben-Horin.
href="http://www.supersize.co.il/">hello supersize, Matty Marianski (Supersize), Motion graphics and interaction design.
href="http://www.jcamerata.com/">The Jerusalem Camerata
href="http://www.chansonim.com/he/emmanuel/">The Red Sea Jazz Festival Website
href="http://www.hydros.co.il/">Hydros
Israeli Designer Showcase
Those who are able to rise above the circumstances end up turning out top-notch websites. Some such stars are featured here.
href="http://www.shual.com/">Shual (meaning “Fox” in Hebrew) is a two-person team that churns out modern Web-standard websites. Its own portfolio is startlingly green. Aside from this neon-green page complete with fox howl, the team turns out such beautiful websites as the following:
href="http://galiaoffri.com/">Galia Offri
href="http://www.shual.com/artfocusorgil/">Art Focus
href="http://netcraft.co.il/">Netcraft does it right and sets a good standard. It is one of the leading agencies in Israel.
It designed this well-known e-commerce website:
href="http://www.lionite.com/">Lionite is an Israeli agency with a href="http://lionite.com/waytowork">unique approach to business.
It also created href="http://octabox.com/">Octabox…
… and href="http://www.cubicl.com/">Cubicl.
href="http://www.itamarlerner.com">Itamar Lerner is an Israeli-born graphic designer. He started working as a designer at 2002. In the following three years, he was employed by several design studios around Tel Aviv.
href="http://adamtal.com/">Adam Tal (a collaborator on this article) and the design agency href="http://internetlife.co.il">Internetlife created the Gottagettofwa.com website.
href="http://dainareed.com/">Daina Reed is a freelance Web designer in Tel Aviv.
href="http://www.inbalpinto.com/">Inbal Pinto and Avshalom Pollak Dance Company created this beautiful, simple and artistic Flash website, which may be impractical for most in the real world.
href="http://inkod-hypera.com">Inkod Hypera
href="http://nucampaign.org">nucampaign offers great insight into the real Israel (as opposed to the Israel you know from the news).
Illustrators
href="http://liron.de">Liron Tocker is a talented Israeli illustrator and icon designer who lives in Germany.
href="http://www.mikimottes.com/">Mikimottes is commendable for his sketching of everyday Israeli scenery.
href="http://www.asafhanuka.com/">Asaf Hanuka worked on the art for the award-winning animated documentary feature film by director Ari Folman.
href="http://www.hoop.co.il/english/">hoop: this is just about the end of our journey. If you wish to absorb more Israeli design, you should visit hoop.
Related Posts
You may be interested in the following related posts:
- href="http://www.smashingmagazine.com/2009/10/17/global-web-design-russia/">Showcase of Web Design in Russia
- href="http://www.smashingmagazine.com/2010/01/26/showcase-of-web-design-in-germany/">Showcase of Web Design in Germany
- href="http://www.smashingmagazine.com/2009/12/12/viva-mexico-showcase-of-web-design-in-mexico/">Showcase of Web Design in Mexico
- href="http://www.smashingmagazine.com/2009/10/23/showcase-of-web-design-in-ireland-2/">Showcase of Web Design in Ireland
About the Authors
href="http://dainareed.com/">Daina Reed is a freelance Web designer and Web project manager in Tel Aviv.
href="http://adamtal.com/">Adam Tal is a Web entrepreneur who believes that code is poetry and design is music. Follow him on Twitter href="http://twitter.com/adamtal">@adamtal, or check out his href="http://adamtal.com/">website.
Sara Eisen is a freelance writer, editor, journalist and “marcom” and Web content consultant. She blogs at href="http://the-word-well.com/">http://the-word-well.com.
Also, this article wouldn’t have been possible without the contributions of href="http://twitter.com/joeysim">Joey Simhon and href="http://twitter.com/lioryair">Lior Yair of href="http://www.netcraft.co.il/en">Netcraft, a digital agency in Tel Aviv that specializes in user experience and Web technologies. Special thanks to href="http://twitter.com/Avinio">Avi Joseph, CEO of SmediaC for helping with the research for this article.
(al) (dr) (at) (vf)
© Smashing Editorial for
href="http://www.smashingmagazine.com">Smashing Magazine, 2010. |
href="http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/">Permalink |
href="http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/#comments">49 comments |
title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/&title=Shalom!%20Showcase%20Of%20Web%20Design%20In%20Israel">Add to del.icio.us |
title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/">Digg this |
title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/">Stumble on StumbleUpon! |
title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Shalom!%20Showcase%20Of%20Web%20Design%20In%20Israel'%20http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/">Tweet it! |
title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/02/23/shalom-showcase-of-web-design-in-israel/">Submit to Reddit |
href="http://forum.smashingmagazine.com/">Forum Smashing Magazine
Post tags:
href="http://www.smashingmagazine.com/tag/israel/">israel,
href="http://www.smashingmagazine.com/tag/showcases/">showcases
One Week Left to Enter the CodeCanyon Scripting Competition
February 22, 2010 in Design by 8ify.com - Design
On February 1st, we announced an enormous scripting competition on CodeCanyon with prizes equaling $6200. You now have just one week left to enter!
For those unfamiliar, Envato recently launched its newest marketplace, focused specifically on selling high-quality scripts and components for PHP, JavaScript, ASP.NET, and Java. As we’ve only recently launched, we’re hoping to build up our repository with a plethora of fantastic scripts and components, across all of the categories.
How Do I Enter?
Quite simply! To enter, prepare an item (PHP, JS, ASP.NET, or Java) of your choice for CodeCanyon, and once it has been submitted and accepted on the site, leave a comment here with a link to your item. That way, we can track it! That’s all! Then, on March 1st, 2010 (CST), my review staff and I will filter through all of the submissions and choose the best three of the bunch!
Grand Prize Winner
- 1 Dedicated Virtual Box (Rage) from Media Temple ($1200 value)
- 1 32 gigabyte iPod Touch ($299 value) (Ultimate TechSmith Package)
- 1 copy of Camtasia Studio for Mac or PC ($299 value) (Ultimate TechSmith Package)
- 1 copy of Camtasia Studio 6: The Definitive Guide ($39.95 value) (Ultimate TechSmith Package)
- 1 Logitech QuickCam Communicate Deluxe PC Webcam ($99 value) (Ultimate TechSmith Package)
- 1 Audio Technica USB Studio Condenser Microphone ($149 value) (Ultimate TechSmith Package)
- $100 Envato credit (Can be used across all of the marketplaces)
- $200 cash
- 1 MediaTemple Gift Card – 1 year of hosting, 1 domain name, Up to 5 websites. ($95 value)
- $25 Amazon Gift Card
- 1 year Tuts Plus membership – ($78 value)
- 1 Wufoo Subscription – 1 year ($288 value)
- 1 Formspring Pro Subscription – 1 year ($348 value)
- 1 Surreal CMS Subscription – 1 year ($275 value)
- 1 Personal TypeKit subscription – 1 year ($300 value)
- 1 Myows Paid Account – FREE for life
- 1 Rockable Press Book of your Choice ($29 value)
- 1 copy of Snippet (mac app) ($13 value)
- 1 copy of jQuery UI 1.7 from Packt Publishing ($40.49 value)
- 1 copy of Magento Beginner’s Guide from Packt Publishing ($35.99 value)
- 1 copy of Object-Oriented JavaScript from Packt Publishing ($35.99 value)
- 1 copy of jQuery Cookbook from O’Reilly Publishing ($34.99 value)
- 1 Threadsy Invite
- You will be featured on the front page of CodeCanyon as both the featured author and the featured item of the week!
- Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
- As an Envato marketplace author, you’ll earn 40-70% of every sale!
2 Runners-Up
- 1 year Tuts Plus membership – ($78 value)
- $50 Envato credit
- 1 Personal TypeKit subscription – 1 year ($300 value)
- 1 Surreal CMS Subscription – 1 year ($275 value)
- 1 Wufoo Subscription – 1 year ($288 value)
- 1 Myows Paid Account – FREE for life
- 1 Rockable Press Book of your Choice ($29 value)
- 1 copy of Snippet (mac app) ($13 value)
- 1 Threadsy Invite
- Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
- As an Envato marketplace author, you’ll earn 40-70% of every sale!
What Kind of Item Should I Submit?
We’ll that’s entirely up to you! That’s where you get to be creative. With that said, you’ll want to think of an item that will appeal to a wide variety of buyers. Ask yourself, “what sort of script or component – that’s not widely available around the web for free – have I often found myself in need of? Remember that, at this time, we’re only accepting PHP, JavaScript, ASP.NET, and Java related items.
Refer here to view the best selling items on CodeCanyon.
FAQs
When is the deadline to enter?
The competition will officially end on February 28th, 2010 at 11:59 PM, Central Standard Time. However, we do hope that you’ll submit before that date.
Are all items accepted on CodeCanyon?
No. You’ll first go through a review process, similar to all of our other marketplaces. It’s possible that your item will be rejected, in which case, it won’t be considered.
How Will you Judge?
We’ll consider many factors when determining the winners: overall sales, innovation, how much it appeals to a wide variety of buyers, etc.
Who Will be Judging?
The CodeCanyon review staff will collaborate to determine the winners.
Terms and Conditions
- Envato staff and reviewers are not eligible to compete
- Only items uploaded between 12:01 AM 02/01/2010 and 11:59PM 2/28/2010 CST and subsequently approved for sale on CodeCanyon are eligible to count.
- The same author cannot win more than once. In other words there will be three winners, no less.
- Our decision is final.
- Files that are taken down for any reason are not eligible to be counted.
- Files must stay up on CodeCanyon for at least 6 months.
- Items may not be substituted for their cash equivalent.
- Prizes will be awarded during the first week of March, to give time to ensure no copyright infringement has occurred.
So get coding! There are five-thousand reasons to do so! We can’t wait to see what you come up with.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
Server Issues
February 22, 2010 in Design by 8ify.com - Design
Over the weekend and into Monday we unfortunately experienced some pretty severe downtime on all Envato WordPress blogs. The downtime was due to problems in the data centre of our current hosting company. The problems occurred because of some faulty hardware which had a lot of run-on effects.
It seems to all be resolved now, but I just wanted to make a quick apology for the inconvenience and interruptions. We’re going to be re-examining our hosting setup to make sure we avoid this situation in the future and to generally try to pull up the quality of service across the board.
In the meantime there may be some further minor interruptions as we shore up the setup. Thank you for your patience!
CSS Fundamentals: CSS 3 Transitions
February 22, 2010 in Design by 8ify.com - Design
As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.
Tutorial Details
- Program: A web browser that can utilise CSS3 transistions (Chrome or Safari)
- Language: CSS
- Difficulty: Easy
- Estimated Completion Time: 30 min
Prefer a Video Tutorial? Join Plus!
If you’re more of a visual learner, you can watch a video version of this article instead. Simply help give back to Nettuts+ by signing up for a Plus membership, which grants you access to the Plus content for ALL of our sites – all for $9 per month.
Already a Member?
Step 1 – Link Transitions
To begin, we’ll work with some basic techniques – firstly a simple change of text color when a user hovers over a specified element.
a { color:#000; }
a:hover { color:#f00; }
Here, we change the text color to red on hover. Now, with a little CSS3, we can create a much smoother look by gradually fading the color.
a{ color:#000; -webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}
We’ve added the css property, -webkit-transition. Note that the -webkit prefix specifies that this will only work in Webkit engines, or Safari and Chrome. Luckily, other modern browsers have their own implementations as well. A full statement covering all browsers might look similar to the following:
a { color:#000; -webkit-transition:color 1s ease-in; -moz-transition:color 1s ease-in; -o-transition:color 1s ease-in; transition:color 1s ease-in;
}
Please note that, for this tutorial, we’ll be focusing exclusively on the webkit implementation. After the declaration of the property, we have the values “color 1s ease-in.” This is the shorthand declaration; the three values represent:
- the property to be transitioned
- the duration of the transition
- the type of transition
In this case, we transition using ease-in, which will begin the transition slowly, and speed up into the transition.
Step 2. Background Transitions
Another basic use of changing states is to change the background of an input box on focus.
input.ourInputBox:focus{ -webkit-transition:background-color 0.5s linear; background:#CCC;
}
This time, we put the transition declaration into the hover state, so that we aren’t adding additional unnecessary classes to the CSS. We apply the transition once the input box acquires focus.
Step 3 – Transitioning Multiple Properties
CSS transitions are actually relatively straight forward to add to existing hover functionality, and give your
site that extra polish for browsers that support CSS3.
To take things a step further, we can also transition multiple CSS properties using the longhand versions of the CSS3 transition.
a.thebg { color:#000; background:#f00; padding:5px; -webkit-border-radius: 5px; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in;
} a.thebg:hover { color:#f00; background:#000;
}
This time, the background and text color changes on hover, so we can target both of these properties with our transition.
We simply split the transition: first we have -webkit-transition-property and separate the different values with a comma. So we target the color and background properties, respectively.
-webkit-transition-property:color, background;
Then we set the duration of the transition using:
-webkit-transition-duration:1s, 1s;
These are referenced in the same order as the first statement; this time, however, both values are set to 1s.
Lastly, we set the timing function, and set two different values: the first, linear, relates to our first declared variable – color; and the second relates to the variable background.
So, we’ve set the color to a linear change over one second, and the background to ease-in over that same time period.
Step 4 – Putting the Pieces Together
CSS3 transitions start to come into their own when they’re combined with other new CSS properties.
You can review examples of using overlapping elements and transitions on Andy Clarke’s For a Beautiful Web.
Let’s create a simple example of animating a pop out sign.
We first create the bounding box for the signpost, and give it a relative positioning context to ensure that we can
position items absolutely within it.
#signpost{ width:60px; height:196px; position:relative;
}
Now we place the box on the page and put the pieces of our sign within it.
<div id="signpost"> <img id="post" src="post.png"> <img id="sign" src="sign.png"> </div>
Next, the post is positioned with a z-index of two, to place it on top of the sign.
#post{ width:79px; height:196px; z-index:2; position:relative;
}
Now, we add in the sign, positioned underneath the post, and rotate it with the CSS3 transform property.
#sign{ height:46px; width:80px; position:absolute; top:10; left:60; -webkit-transform-origin:0 0; -webkit-transform: rotate(86deg); z-index:1; -webkit-transition:-webkit-transform 0.5s ease-in-out;
}
The sign is rotated using -webkit-transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.
We set the transition to change the -webkit-transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.
#signpost:hover #sign{ -webkit-transform:rotate(0deg);
}
We do this on the containing #signpost:hover rather than on the hover of the #sign itself.
Step 5 – Introducing Animations
We can now tie all of this together, using webkit animations, which give us the power to carry out things such as continuous rotation.
We begin by creating two circle images, and positioning them inside a containing div – as we did with the signpost above.
<div id="circles"> <img src="outer.png" width="180" height="180" class="outercircle"/> <img src="middle.png" width="90" height="90" class="middlecircle"/> </div>
#circles{ width:180px; height:180px; position:relative;
}
.outercircle{ width:180px; height:180px; position:absolute; z-index:1; top:0: left:0;
}
.middlecircle{ width:90px; height:90px; position:absolute; z-index:3; top:45px; left:45px;
}
Now we need to define the animations; we’ll spin the circles in opposite directions, so we need to set up two animations.
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg);
}
to { -webkit-transform: rotate(360deg); }
} @-webkit-keyframes spinrev {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-360deg); }
}
The animation is given a name for reference, in this case “spin” and “spinrev.” Then, we assign them a to and from value; so we rotate the image from
0 deg to 360 deg using webkit transform, and to -360 for the reverse.
Now we assign this animation to the hover states. Note that, if we assigned it to the normal state, the animation would run immediately when the page is loaded.
#circles:hover .outercircle { -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 10s;
} #circles:hover .middlecircle{ -webkit-animation-name: spinrev; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 5s;
}
We reference the animation name we created earlier (-webkit-animation-name: spin;). Then, we declare the number of times we want the animation to run (-webkit-animation-iteration-count: infinite;).
In this case, infinite will keep it going round and round whilst the #circles div is hovered upon.
We next set the timing function (-webkit-animation-timing-function: linear;), and, finally, we set a duration for each iteration – in this case, it will be ten seconds (-webkit-animation-duration: 10s;), and five for a complete revolution.
Step 6 – Graceful Degredation with Modenizr
Once we have everything working, we should consider our users who are browsing without CSS3 capable web browsers. This is easily accomplished using a JavaScript library such as Modernizr, which adds classes to the HTML element relating to the browser capabilities.
Using the sign post example above, browsers that don’t support CSS transforms will not place the sign under the post correctly; so we can target these browsers and simply hide the sign until it is hovered over.
.no-csstransforms #signpost #sign{ display:none;
}
.no-csstransforms #signpost:hover #sign{ display:block;
}
It’s as simple as linking to the Modernizr script, finding the appropriate class name, and then creating a separate CSS statement for that instance.
Conclusion
That’s all for now. I hope you enjoyed it! Let me know if you have any questions/comments below!
You Also Might Like
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
