bulldoggie studio's blog » webtoday http://bulldoggie.cn/blog Thu, 16 Sep 2010 06:00:16 +0000 en hourly 1 25 HTML5 Features, Tips, and Techniques you Must Know http://bulldoggie.cn/blog/2010/08/05/25-html5-features-tips-and-techniques-you-must-know-2/ http://bulldoggie.cn/blog/2010/08/05/25-html5-features-tips-and-techniques-you-must-know-2/#comments Thu, 05 Aug 2010 00:24:32 +0000 classiclori http://bulldoggie.cn/blog/?p=534 This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.

[Read More…]

]]>

This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

<!DOCTYPE html>

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

Consider the following mark-up for an image:

  1. <img src=”path/to/image” alt=”About image” />
  2. <p>Image of Mars. </p>
<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

  1. <figure>
  2. <img src=”path/to/image” alt=”About image” />
  3. <figcaption>
  4. <p>This is an image of something interesting. </p>
  5. </figcaption>
  6. </figure>
<figure>
	<img src="path/to/image" alt="About image" />
	<figcaption>
		<p>This is an image of something interesting. </p>
	</figcaption>
</figure>

3. <small> Redefined

Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.

The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
  2. <script type=”text/javascript” src=”path/to/script.js”></script>
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

  1. <link rel=”stylesheet” href=”path/to/stylesheet.css” />
  2. <script src=”path/to/script.js”></script>
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. To Quote or Not to Quote.

…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.

  1. <p class=myClass id=someId> Start the reactor.
<p id=someId> Start the reactor.

Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

6. Make your Content Editable

Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

  1. <!DOCTYPE html>
  3. <html lang=”en”>
  4. <head>
  5. <meta charset=”utf-8″>
  6. <title>untitled</title>
  7. </head>
  8. <body>
  9. <h2> To-Do List </h2>
  10. <ul contenteditable=”true”>
  11. <li> Break mechanical cab driver. </li>
  12. <li> Drive to abandoned factory
  13. <li> Watch video of self </li>
  14. </ul>
  15. </body>
  16. </html>
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<h2> To-Do List </h2>
     <ul contenteditable="true">
		<li> Break mechanical cab driver. </li>
		<li> Drive to abandoned factory
		<li> Watch video of self </li>
	 </ul>
</body>
</html>

Or, as we learned in the previous tip, we could write it as:

  1. <ul contenteditable=true>
<ul contenteditable=true>

7. Email Inputs

If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.

  1. <!DOCTYPE html>
  3. <html lang=”en”>
  4. <head>
  5. <meta charset=”utf-8″>
  6. <title>untitled</title>
  7. </head>
  8. <body>
  9. <form action=”" method=”get”>
  10. <label for=”email”>Email:</label>
  11. <input id=”email” name=”email” type=”email” />
  13. <button type=”submit”> Submit Form </button>
  14. </form>
  15. </body>
  16. </html>
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<form action="" method="get">
		<label for="email">Email:</label>
		<input id="email" name="email" type="email" />

		<button type="submit"> Submit Form </button>
	</form>
</body>
</html>
Email Validation

At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.

It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name attribute is specified. However, it does not support the placeholder attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!

8. Placeholders

Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this.

  1. <input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

Validation

9. Local Storage

Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog

While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.

Support matrix

via http://www.findmebyip.com/litmus/

10. The Semantic Header and Footer

Gone are the days of:

  1. <div id=”header”>
  2. …
  3. </div>
  5. <div id=”footer”>
  6. …
  7. </div>
<div id="header">
	...
</div>

<div id="footer">
	...
</div>

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

  1. <header>
  2. …
  3. </header>
  5. <footer>
  6. …
  7. </footer>
<header>
	...
</header>

<footer>
	...
</footer>

It’s fully appropriate to have multiple headers and footers in your projects.

Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

11. More HTML5 Form Features

Learn about more helpful HTML5 form features in this quick video tip.

12. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.

All elements, by default, have a display of inline.

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

  1. header, footer, article, section, nav, menu, hgroup {
  2. display: block;
  3. }
header, footer, article, section, nav, menu, hgroup {
   display: block;
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

  1. document.createElement(“article”);
  2. document.createElement(“footer”);
  3. document.createElement(“header”);
  4. document.createElement(“hgroup”);
  5. document.createElement(“nav”);
  6. document.createElement(“menu”);
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

  1. <!–[if IE]>
  2. <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
  3. <![endif]–>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

13. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1> and <h2> tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.

  1. <header>
  2. <hgroup>
  3. <h1> Recall Fan Page </h1>
  4. <h2> Only for people who want the memory of a lifetime. </h2>
  5. </hgroup>
  6. </header>
<header>
	<hgroup>
		<h1> Recall Fan Page </h1>
		<h2> Only for people who want the memory of a lifetime. </h2>
	</hgroup>
</header>

14. Required Attribute

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:

  1. <input type=”text” name=”someInput” required>
<input type="text" name="someInput" required>

Or, with a more structured approach.

  1. <input type=”text” name=”someInput” required=”required”>
<input type="text" name="someInput" required="required">

Either method will do. With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank. Here’s a quick example; we’ll also add the placeholder attribute as well, as there’s no reason not to.

  1. <form method=”post” action=”">
  2. <label for=”someInput”> Your Name: </label>
  3. <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
  4. <button type=”submit”>Go</button>
  5. </form>
<form method="post" action="">
	<label for="someInput"> Your Name: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
	<button type="submit">Go</button>
</form>
Required and Placeholder Attributes

If the input is left blank, and the form is submitted, the textbox will be highlighted.

15. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

  1. <input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Interestingly enough, while I personally tend to prefer a more XHTML approach (using quotation marks, etc.), writing "autofocus=autofocus" feels odd. As such, we’ll stick with the single keyword approach.

16. Audio Support

No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.

  1. <audio autoplay=”autoplay” controls=”controls”>
  2. <source src=”file.ogg” />
  3. <source src=”file.mp3″ />
  4. <a href=”file.mp3″>Download this file.</a>
  5. </audio>
<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	Download this file.
</audio>

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.

When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

17. Video Support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

  1. <video controls preload>
  2. <source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
  3. <source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
  4. <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
  5. </video>
<video controls preload>
	<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.

There are a few things worth noting here.

  1. We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
  2. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
  3. The controls and preload attributes will be discussed in the next two tips.

18. Preload Videos

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.

<video preload>

19. Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

  1. <video preload controls>
<video preload controls>
Options

Please note that each browser renders its player differently from one another.

20. Regular Expressions

How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

  1. <form action=”" method=”post”>
  2. <label for=”username”>Create a Username: </label>
  3. <input type=”text”
  4. name=”username”
  5. id=”username”
  6. placeholder=”4 <> 10″
  7. pattern=”[A-Za-z]{4,10}”
  8. autofocus
  9. required>
  10. <button type=”submit”>Go </button>
  11. </form>
<form action="" method="post">
	<label for="username">Create a Username: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   placeholder="4 <> 10"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Go </button>
</form>

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

Notice that we’re beginning to combine all of these new awesome attributes!

If regular expressions are foreign to you, refer here.

21. Detect Support for Attributes

What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We’ll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern attribute, we could add a bit of JavaScript to our page:

  1. alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
alert( 'pattern' in document.createElement('input') ) // boolean;

In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.

  1. <script>
  2. if (!’pattern’ in document.createElement(‘input’) ) {
  3. // do client/server side validation
  4. }
  5. </script>
<script>
if (!'pattern' in document.createElement('input') ) {
	// do client/server side validation
}
</script>

Keep in mind that this relies on JavaScript!

22. Mark Element

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.

  1. <h3> Search Results </h3>
  2. <p> They were interrupted, just after Quato said, <mark>”Open your Mind”</mark>. </p>
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. When to Use a <div>

Some of us initially questioned when we should use plain-ole divs. Now that we have access to headers, articles, sections, and footers, is there ever a time to use a…div? Absolutely.

Divs should be utilized when there’s no better element for the job.

For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic.

24. What to Immediately Begin Using

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing. In today’s video quick tip, I’ll show you a handful of options.

25. What is Not HTML5

People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey — even Apple has inadvertently promoted this idea. For non-developers, who cares; it’s an easy way to refer to modern web standards. However, for us, though it may just be semantics, it’s important to understand exactly what is not HTML5.

  1. SVG: Not HTML5. It’s at least five years old.
  2. CSS3: Not HTML5. It’s…CSS.
  3. Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
  4. Web Sockets: Not HTML5. Again, was exported to its own specification.

Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.

Thanks for reading! We’ve covered a lot, but have still only scratched the surface of what’s possible with HTML5. I hope this served as a helpful primer!

Related posts:

  1. 120 Tips, Tricks, and Tuts from 2009 Worth your Time
  2. Fantastic Tips for Shooting Bravely in the Sun(copy from photo.tutsplus.com)
  3. 9 Tips for a Perfect Portrait Background

]]> http://bulldoggie.cn/blog/2010/08/05/25-html5-features-tips-and-techniques-you-must-know-2/feed/ 0 Web Design In Poland http://bulldoggie.cn/blog/2010/07/17/web-design-in-poland/ http://bulldoggie.cn/blog/2010/07/17/web-design-in-poland/#comments Fri, 16 Jul 2010 23:13:07 +0000 classiclori http://bulldoggie.cn/blog/?p=464 Vodka, pickled cucumbers and Pope John Paul II might spring to mind when someone mentions Poland. Obviously there’s more to Poland than that. On the world map of design, Poland is marked by creative agencies that produce high-level design and employ some of the best programmers in the world. There’s also a crowd of freelancers and visionaries who have received worldwide recognition.

For the people I interviewed, Web design is life. The art directors and freelancers highlighted here work in all sorts of environments, and they answer questions related to our field. You’ll have the opportunity to see Polish Web design from a number of perspectives — and to form your own opinion while browsing selected productions.

[Read More…]

]]> Vodka, pickled cucumbers and Pope John Paul II might spring to mind when someone mentions Poland. Obviously there’s more to Poland than that. On the world map of design, Poland is marked by creative agencies that produce high-level design and employ some of the best programmers in the world. There’s also a crowd of freelancers and visionaries who have received worldwide recognition.

For the people I interviewed, Web design is life. The art directors and freelancers highlighted here work in all sorts of environments, and they answer questions related to our field. You’ll have the opportunity to see Polish Web design from a number of perspectives — and to form your own opinion while browsing selected productions.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

The State Of Things

Question: Can you name some of the milestones in Polish Web design? What are the biggest and most important productions in recent years?

Jacek Opaluch of K2 Internet: If milestones are things that have changed the perception of Web design, we have to mention Internet locations, events and designs. In my opinion, the locations would inlude mocnweb.pl, a forum that no longer functions and is probably only remembered by people over 30. It was a place where people could share their initial experiences and which, if I remember correctly, had the first carefully selected catalogue of Polish Web designers’ websites.

Then there was the everlasting webesteem.pl, steadily breaking records as the website with “the layout that never changed.” There were always several people around — some significant, like Bartek Gołębiowski, Jędrek Kostecki, Bartek Rozbicki, Wojtek Krosnowski, Wojtek Piotrowski, Piotr Łupiński and Łukasz Twardowski — whose attitude toward the Internet undoubtedly had great influence on thinking and design. There were many more people whose names I don’t remember, unfortunately, for which I apologize.

Chopin in Showcase Of Web Design In Poland
Chopin2010.pl

Certain designs are stuck in my mind. These were well known, not just in Poland, and sometimes they were great examples to follow. Some have been replaced by newer versions, so giving the URLs here might be pointless, but they definitely include: Max Weber’s pdk.pl, a Flash portal with much character (probably the first in Poland); Nokia (created by K2 Internet); plama.art.pl and its subsequent versions; feta.pl; Sullivan’s Productions; click5.pl; Ars Thanea; cookie.pl; and recently, StudioKxx and huncwot.com. These are all first-class websites. Unfortunately it’s impossible for me to name every excellent website.

In my opinion there were two other crucial events that gave shape to things: agencies went public (a sort of goodbye to the formative years of Web design) and eBay debuted in Poland. These events showed the quality of our service and proved that the Polish internaut had been highly underestimated abroad.

Question: Are there any significant differences between Web designing in Poland and in the rest of Europe when it comes to artistic development?

Jacek Opaluch: There are differences in budget, in the attitudes of clients and in understanding the Internet’s potential. Statistically, I don’t see any difference in the quality of the things we do: we win awards, we are jurors and we build among the best of the websites that present outstanding design — just like the rest of the world.

Zakochaj-sie-w-kolorze in Showcase Of Web Design In Poland
Zakochaj się w kolorze.

Kamil Kaniuk of Merix Studio: Polish programmers and coders are generally well regarded, which results from our observations and experience — often in cooperation with foreign firms. Numerous highly skilled Web developers are in Poland whose code is of world-class quality. Here at Merix Studio, we are searching for such people. The skills of our coders have been appreciated by the British company Independent News and Media, which prepared a series of test tasks for us before they decided to commission us to work on their leading brands (The Independent and Herald, for example).

We are less inspired by Flash achievements and augmented reality (so popular right now) than are other interactive agencies in Poland. We are more interested in the productions of smaller flexible firms such as 37signals, nclud, Reactive and Clearleft. We invest in flexible and cost-optimal open-source software (Drupal, WordPress, Magento), because it can easily substitute for expensive commercial solutions.

Open-source software is regarded slightly differently in Poland than it is in Western countries; the opinion that any self-respecting interactive agency should have its own original content management system (CMS) still prevails here, but this is not so. Just look at the US government: Whitehouse.gov is based on Drupal.

In the current period of economic slowdown, Western companies are looking for ways to reduce costs while maintaining good quality. Many companies outsource to such countries as Poland, and these companies often have funds at their disposal that allow them to be more open to creative ideas. This is encouraging for Polish Web designers.

Warszawska-jesien in Showcase Of Web Design In Poland
Warszawska Jesień 2008

Question: When was the starting point of innovative Web design in Poland? When did new media settle in Poland for good?

Łukasz Twardowski of Cookie.pl: The first thing I remember from the Internet was an interactive advertising campaign for Frugo juice. The campaign was created by an agency, and it was the first Polish viral ad. It probably significantly increased interest in the Internet as a medium for advertising, and it collided with the so-called “Internet bubble,” which burst before any innovative design came into being.

Still, this was the time when most designers I admire became active. Some independent websites on Web design were created, like Mocny Web or Webesteem. They attracted people who already thought of themselves as designers for new media. Looking back, I see that what pushed us forward was energy and optimism rather than skills and knowledge.

I think we became aware of both (i.e. skills and the role of Web design) about three or four years ago, but the awareness wasn’t strong yet. The major problem with Web design in Poland is that the best interactive agencies give priority to advertising, and design is a secondary issue. Small clients such as photographers and architects, who might desire and deserve the best designs, often don’t have enough money to employ professionals. It’s great to see, though, that cultural institutions have more money to spend on the Internet, and they spend it wisely.

Question: Is it possible to identify specific patterns in Polish Web design? Is every significant website really different from all the rest?

Łukasz Twardowski: I wish Polish Web design had German discipline, Scandinavian simplicity and our knightly imagination. Polish designs are often much more daring than those of our neighbours. Still, if we want to develop our philosophy of design and be visible to the world, then we have to make more effort.

The economy in Poland has been improving, and the only thing we need now is more energy and optimism. Mocny Web died naturally, and Webesteem is on its last legs. What we lack is a central forum where young designers (in a sense, all of us are “young”) can see the spectacular Web designs and discuss them.

Flirt-camp in Showcase Of Web Design In Poland
Flirt Camp

Kamil Kaniuk: We think that in Poland there are still no styles in Web design that would distinguish our country from others — that is, that any styles are unequalled. Although one could fairly easily enumerate some common features of designs created elsewhere (the meticulous detail and profound illustrations of Russia, for example, or the graphic-rich interfaces of the United States), no specific style dominates in Poland. However, the “transfer of ideas” (say from West to East) is much faster now than it was a few years ago.

Too often a design is a compromise between the vision of the designer and the requirements of the customer. Such designs tend to undergo amendments by the customer, which can change their original form. In our opinion, the openness of customers to modern solutions (e.g. non-standard interfaces based on JavaScript, like Xpiritmental) is less common in Poland than elsewhere. Foreign customers seem to be more open to our ideas and give us greater freedom, and they are ready to make use of technologies like JavaScript and AJAX.

That opens the gate to creativity and gives the freedom to implement interesting solutions. In many Polish agencies — including those that work with big brands and budgets — some cheap and mediocre designs are created out of necessity.

Kula in Showcase Of Web Design In Poland
Kula.gov.pl

Question: What is it like to work as a freelancer in Poland? Is it drudgery or a stress-free job? Is it about keeping loyal clients or constantly searching for new ones?

Jan Stańko: We shouldn’t generalize; every freelancer is different. Starting off is definitely difficult. Without a strong position in the market, you have to look for clients on your own, and you have to convince people that you are trustworthy and deserve opportunities. There are plenty of freelancers, but unfortunately the majority of them are young and immature and have no idea about the business. They finish school and immediately call themselves professionals. It can end badly: very often the honest designers who treat the profession seriously and think of it as their future have to suffer the consequences.

In time, the serious freelancer gets clients and agencies start knocking on their door. Then you can choose the tasks you like the most, and that brings more money. Work gets difficult when you want to earn more money; it can mean sleepless nights, gallons of coffee and in my case, unfortunately, plenty of cigarettes.

There are moments of anxiety as well, usually brought on by people who pretend to know everything about the Internet but actually know very little. I guess the best solution is to cooperate with agencies on a regular basis. Agencies can take the burden of work overload and stress off your back. Also, their complex services give you the opportunity to meet more interesting clients. As for the future, time will tell. I’m not even halfway through my career. Trophies are still a long way ahead!

Bubole in Showcase Of Web Design In Poland
Bubole

Rafał Nastały: Earning one’s living as a freelancer in Poland without a recognized name can be incredibly tough. Independent clients often don’t want to sign contracts or pre-pay. They also think that preparing a layout is a piece of cake, so when they hear the price, they often back out. It’s very frustrating. It’s much more pleasant to cooperate with several agencies that can give you a fairly constant number of orders.

Piotr Biernawski: I have five or six regular clients. Sometimes a client withdraws, and it’s usually because of money. It’s never a disagreement about the terms of the contract but about actually sticking to these terms (payment can be long delayed, etc.). But when some go, others come. I’ve been working with longstanding clients for five years now.

Drudgery or a piece of cake? Definitely not a piece of cake. If it wasn’t for my strong connection to the mountains, which I love and where I do my hobbies, I would probably move to a bigger city and look for a full-time job. I also have a wife and child who are not very keen to move. However, I don’t think freelancing is drudgery; I can’t afford the latest model of BMW, but I work only about two hours a day. Even though you need to be psychologically strong to work like this, the lifestyle is great.

Łukasz Bronisz: I think it depends on the individual. Everyone arranges their time and work environment differently. Some people prefer working at night and waking up at dusk in order to meet a deadline. Most of us, however, try to work during regular hours. It allows you to be in touch with agencies, allows you to make light changes and corrections and lets you have a private life too.

I imagine that freelancing in Poland is similar to freelancing in other countries. It can be hard sometimes because of tight schedules or having a number of projects going at the same time. On the other hand, you always have the opportunity to relax or even take a break for a couple of days. No one arranges your time or dictates your schedule.

Also, though, no one checks on you. If you choose to freelance, for which your income depends on how much you work, it’s reasonable to cooperate with several agencies. Doing this usually gives you enough orders that you don’t have to worry about the next month and can concentrate on your work. Of course, it’s always good to look for new projects so that you develop and diversify your designs.

Matibu in Showcase Of Web Design In Poland
Łukasz Bronisz

Konrad Wysokiński: It’s still quite difficult to get by as a freelancer in Poland, although there are probably some people who don’t have to worry about work or can be picky about contracts. I often get the impression that people still don’t know what good design is or know that it costs money. For many people, the Internet is still a must: “People are talking about it, so let’s make a website — but make it as cheap as possible.” Some company owners have this attitude. As a result they ask someone, anyone, who knows a little bit about Photoshop (a brother-in-law’s daughter) to create the cheapest website possible. Thankfully, this has been changing steadily, like our society in general, and I hope that our sensitivity to the profession of Web design will increase with time.

Mateusz Jakobsze: The Web design market in Poland has been gradually expanding. A lot of people freelance to get rid of the constraints of working for agencies. They want creative freedom and to earn more money. Undoubtedly, an advantage to freelancing in Poland is the opportunity to work for clients abroad who pay in Euro or American dollars. The ability to choose which clients and agencies to cooperate with is a big advantage as well. I always try to look abroad for new clients and to network. I have some regular clients as well as a couple of interactive agencies that I often collaborate with. We socialize not only at work but also at parties and unofficial get-togethers. It’s good to maintain informal relationships with your clients.

Jakobsze in Showcase Of Web Design In Poland
Mateusz Jakobsze

Question: How does the Web design and development market look in Poland? Is it possible to earn one’s living from freelancing alone?

Jan Stańko: It is possible, definitely. Many people are self-subsisting freelancers, including me. There are quite a lot of agencies and enough clients, and whether we get by depends on our hard work, consistency and responsibility. When it comes to cooperation with agencies, it usually goes smoothly; it’s the clients who are the weak link. But even that has been changing. The Internet is still a brand new thing for many people. Non-professionals find it difficult to catch up with the news that keeps popping up in the field, and sometimes this can result in misunderstanding.

Rafał Nastały: Freelancing is not for everyone. You need to be self-disciplined and consistent to work as a freelancer. When you collaborate with agencies that know how to communicate with clients and that pay generously, you can have a relatively high standard of living.

One negative aspect is the lack of credibility at the bank (getting a big loan is difficult), so if you’re not a high-profile Web designer, the best option is to have a full-time job and take additional work from other sources now and then. This creates financial stability. A bonus like that — a well-paid creative task — is actually very nice. There are of course some freelancers for whom one layout is worth more than the monthly earning of others.

Warszawska-jesien-091 in Showcase Of Web Design In Poland
Warszawska Jesień 2009

Piotr Biernawski: It is certainly possible to earn a living from freelancing. I know some people who earn more than ten thousand a month. I’m not talking about famous names here, but about people from small towns, “unheard of” names in our line of business. Considering the time I devote to work, I am not an example of this, but I can afford everyday living: mortgage, alcohol and cigarettes!

Łukasz Bronisz: I think that the Polish market is pretty good. It’s a young market. Actually the whole business is young. Polish clients have become more aware of the Internet in recent years. Plenty of talented people are in the trade in Poland. If you know how to organize your time effectively, talk to people and sometimes work more than the standard eight hours, then freelancing is enough to earn a living. The important thing is to be consistent and up to date.

Konrad Wysokiński: I’ll quote part of a conversation I had with a colleague, a designer. I asked him once, “Can you earn a living from freelancing?” He said, “It depends on your standard of living.” You can get by, of course, but you probably won’t make a fortune. I often get the impression that in Poland this type of work is considered a craft and is not treated with respect like other “professional” work. We are very far from the image of the Web designer you see in Hollywood movies, who has a five million dollar house with a swimming pool, has his own agent and who is the top Web designer for the most famous brands.

Wysokinski in Showcase Of Web Design In Poland
Konrad Wysokiński

Mateusz Jakobsze: It’s not much different from what you see in other countries. We have many arenas where graphic designers can display their work, like themed blogs and Internet forums. The majority of creative agencies and independent clients look for employees that way.

Freelance Web designing has been developing in Poland: about a quarter of agencies outsource on a regular basis, and more than a third use freelancers for selected projects. So, there are opportunities to work on different brands for different companies, which is good for both present and future freelancers.

Special workplaces and offices have gradually emerged where there is no boss and all the workers are freelancers. We have such a place in Poznań. It’s a great idea to have freelancers from different professions gathered in one place. I hope for more initiatives like that.

Question: What inspires you? Do you approach every design differently and enthusiastically, or is it sometimes like mass production?

Jan Stańko: Mass production kills creativity, so I avoid it as much as I can. I prefer to do less work better. Then you can show a portfolio that you are really proud of. It’s the only way I work.

Honestly, my inspiration comes from the work of other designers, both from Poland and abroad. Behance.net is a really amazing source, vast and rich. I don’t have a specific example, but this ocean of artistic ideas fuels creativity and prepares you to bring your own ideas to life. Then it just flows.

Rafał Nastały: When I have the freedom of choice and some time on my hands, I try to make something original that appeals to both me and the client. But it sometimes happens that there are several tasks and the deadline is “yesterday.” In this situation, I bear down and work like a robot while trying to maintain a high quality of work. I get inspiration from the Internet. I regularly visit websites devoted strictly to Web design like FWA, DesignFollow and obviously Smashing Magazine. I also visit DesignYouTrust, FormFiftyFive and FFFFound. You can find plenty of great art and designs from many fields.

Piotr Biernawski: Sometimes a free mind, a break from work and lack of inspiration are the best sources of inspiration! I work most effectively after a two-week break in which I do absolutely nothing — but such breaks happen only once in a while. This is why a freelancer needs to be psychologically strong, otherwise getting depressed is easy.

As for inspiration, I have bookmarked several links. They are mostly Polish productions, and I visit them now and then. Given how much I work, this may sound strange, but one’s attitude to design makes a difference. Unfortunately for me, the majority of my recent projects were due “yesterday.” A client pays for fast work, and standards have to be met. There isn’t always a sense of achievement when you work quickly, but as long as the client is satisfied, I’m happy as well. Some interesting projects require more involvement. Usually these are not assigned by agencies but by independent clients who come directly to me. Maybe this tells us something?

Reserved1 in Showcase Of Web Design In Poland
Reserved.pl

Łukasz Bronisz: I treat every design individually and use new ideas and techniques. When I start a project, I try to get a sense of what the client likes, but I also aim to be satisfied with my own work. It’s nice when everything goes smoothly and both the client and agency like your idea. Working with individuals can be tough; sometimes they just don’t appreciate your effort, which can compromise the result. This is typical both in Poland and abroad — at least, that has been my experience.

Konrad Wysokiński: I get inspiration from all around. I sometimes do corporate identity design, which can inspire me. Naturally, I watch the best people at work and keep up with the trends. I’m a fan of grunge design, but very rarely can I use it. Every project is a new challenge for me, so I give my heart and soul to each and every design. I’m never convinced by lines like, “Do it quicker and simpler for a lower price.” I believe it’s impossible to make something look professional without taking a professional approach.

Strzyg in Showcase Of Web Design In Poland
Strzyg

Mateusz Jakobsze: Like every creative job, graphic design requires participation. To keep up to date with all the news in both Web and graphic design, I regularly visit the important portals and blogs devoted to this line of work, be they Polish or international. The crucial ones include Behance, Smashing Magazine, DeviantArt, the FWA and New Web Pic. Additionally, I find reading and browsing books on advertising, typography, designing for the Web (including for portfolios, Flash websites and e-commerce shops) and graphic design useful. It can also be a good way to relax and get away from the digital world to some degree.

The last (but most important) sources of inspiration for me are sleep and having a life outside of work (away from my computer). Socializing with friends and going to parties, cinema, opera and other cultural events renew my energy for creative work.

When it comes to designs, I treat every project differently, but I always try to have a plan, an idea of how to do the project, from beginning to end. I make some sketches, and when know exactly what I want, I get down to work. Every design is a new challenge. I set higher standards for myself every day, and I strive to be the best at what I do.

Showcase Of Beautiful Web Design From Poland

Lech.pl

Lech in Showcase Of Web Design In Poland

Teatr Wybrzeże

Teatr-wybrzeze in Showcase Of Web Design In Poland

Sony Walkman

Sony-walkman-komiks in Showcase Of Web Design In Poland

Modna Nokia

Modna-nokia in Showcase Of Web Design In Poland

McDonald’s Happy Meal

Mcdonalds-happy-meal in Showcase Of Web Design In Poland

Bigstar

Bigstar-barcelona in Showcase Of Web Design In Poland

Allegro za kulisami

Allegro-zakulisami in Showcase Of Web Design In Poland

Thetoke

Thetoke in Showcase Of Web Design In Poland

Mały Głód

Malyglod1 in Showcase Of Web Design In Poland

Eureko

Eureko in Showcase Of Web Design In Poland

Grey Wolf

Grey-wolf in Showcase Of Web Design In Poland

Carlsberg Liverpool

Carlsberg-liverpool in Showcase Of Web Design In Poland

Skoda Yeti

Skoda-yeti in Showcase Of Web Design In Poland

Fiat 500 Diesel

Fiat-diesel in Showcase Of Web Design In Poland

Happiness Factory

Happiness-factory in Showcase Of Web Design In Poland

Best Photo

Best-photo in Showcase Of Web Design In Poland

Rokkaboy

Rokkaboy in Showcase Of Web Design In Poland

Festiwal Feta

Feta in Showcase Of Web Design In Poland

Żubr

Zubr in Showcase Of Web Design In Poland

Okocim

Okocim in Showcase Of Web Design In Poland

Zając Mroku

Zajac-mroku in Showcase Of Web Design In Poland

Amica Scandium

Amica-scandium in Showcase Of Web Design In Poland

Kakao Puchatek

Puchatek in Showcase Of Web Design In Poland

Kalinowe Pola

Kalinowe-pola in Showcase Of Web Design In Poland

ProfiPartners

Profi-partners in Showcase Of Web Design In Poland

KFC Longer Mix

Kfc in Showcase Of Web Design In Poland

Justyna Kowalczyk

Justyna-kowalczyk in Showcase Of Web Design In Poland

Biblioteka Narodowa

Bn in Showcase Of Web Design In Poland

Nowy Teatr

Nowy-teatr in Showcase Of Web Design In Poland

Mediations Biennale

Mediations in Showcase Of Web Design In Poland

Masterm

Masterm in Showcase Of Web Design In Poland

Common Wealth

Commonwealth in Showcase Of Web Design In Poland

Pawel Lenar

Pawel-lenar in Showcase Of Web Design In Poland

Fotokody

Fotokody in Showcase Of Web Design In Poland

Greenline

Greenline in Showcase Of Web Design In Poland

Gellwe

Gellwe in Showcase Of Web Design In Poland

Horalky

Horalky in Showcase Of Web Design In Poland

Fajne Chłopaki

Fajne-chlopaki in Showcase Of Web Design In Poland

Showcase Of Interactive And Creative Agencies In Poland

Click5

Click5 in Showcase Of Web Design In Poland

Cookie

Cookie in Showcase Of Web Design In Poland

OS3

Os3 in Showcase Of Web Design In Poland

Ars Thanea

Ars-thanea in Showcase Of Web Design In Poland

Artegence

Artegence in Showcase Of Web Design In Poland

Adv

Adv in Showcase Of Web Design In Poland

Huncwot

Huncwot in Showcase Of Web Design In Poland

Opcom

Opcom in Showcase Of Web Design In Poland

Blueberry

Blue-berry-pixel in Showcase Of Web Design In Poland

180 Heartbeats

180-heartbeats in Showcase Of Web Design In Poland

Change Connections

Change-connections in Showcase Of Web Design In Poland

Hipopotam Studio

Hipopotam-studio in Showcase Of Web Design In Poland

Golden Submarine

Golden-submarine in Showcase Of Web Design In Poland

So Interactive

Sointeractive in Showcase Of Web Design In Poland

Honki

Honki in Showcase Of Web Design In Poland

Pro-Creation

Pro-creation in Showcase Of Web Design In Poland

Hypermedia

Hypermedia in Showcase Of Web Design In Poland

Art Flash

Art-flash in Showcase Of Web Design In Poland

Chigo Design

Chigo in Showcase Of Web Design In Poland

Eura 7

Eura-7 in Showcase Of Web Design In Poland

Infinity Group

Infinity-group in Showcase Of Web Design In Poland

Insignia

Insignia in Showcase Of Web Design In Poland

Netizens

Netizens in Showcase Of Web Design In Poland

Studio Synergia

Studio-synergia in Showcase Of Web Design In Poland

Xoe Studio

Xoe-studio in Showcase Of Web Design In Poland

Media Ambassador

Media-ambassador in Showcase Of Web Design In Poland

Hotmind

Hot-mind in Showcase Of Web Design In Poland

Przemek Matylla

Yep, that’s me! I’m a web-developer, interface specialist at Allegro, one of the largest online marketplaces in Central and Eastern Europe. I am in love with CSS, JS and AS3, ad basically everything front-end related. You can visit my personal blog or follow me on Twitter.

Related posts:

  1. Web Design Trends For 2009
  2. 27 Places to Find Web Design Jobs
  3. More Web Design Trends For 2009(layout)

]]> http://bulldoggie.cn/blog/2010/07/17/web-design-in-poland/feed/ 2 Create Snook-Style Navigation Using MooTools http://bulldoggie.cn/blog/2010/06/26/create-snook-style-navigation-using-mootools/ http://bulldoggie.cn/blog/2010/06/26/create-snook-style-navigation-using-mootools/#comments Sat, 26 Jun 2010 04:31:27 +0000 classiclori http://bulldoggie.cn/blog/?p=443 Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.

View Demo

The Images

[Read More…]

]]> Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.

The Images

Image 1 Image 1

These are the same images used in Snook’s article.

The XHTML

<h2>Example 0: No Script</h2>
<ul id="noscript">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example A: Top down</h2>
<ul id="a">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example B: Right left</h2>
<ul id="b">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>
1<h2>Example 0: No Script</h2>
2<ul id=”noscript”>
3 <li><a href=”#”>Home</a></li>
4 <li><a href=”#”>About</a></li>
5 <li><a href=”#”>Contact</a></li>
6</ul>
7
8<h2>Example A: Top down</h2>
9<ul id=”a”>
10 <li><a href=”#”>Home</a></li>
11 <li><a href=”#”>About</a></li>
12 <li><a href=”#”>Contact</a></li>
13</ul>
14
15<h2>Example B: Right left</h2>
16<ul id=”b”>
17 <li><a href=”#”>Home</a></li>
18 <li><a href=”#”>About</a></li>
19 <li><a href=”#”>Contact</a></li>
20</ul>

Three menus. The first will be a simple CSS-only mouseover, the other two will be varying MooTools versions.

The CSS

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1ul { list-style:none; margin:0; padding:0; }
2li { float:left; width:100px; margin:0; padding:0; text-align:center; }
3li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
4li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
5a:hover, a:focus, a:active { background-position:-150px 0; }
6#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
7#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }

Nothing too notable here.

The MooTools JavaScript

window.addEvent('domready', function() {
	/* example a:  top down */
	$$('#a a').each(function(el) {
		//fx
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel'
		});

		//css & events
		el.setStyle('background-position','-20px 35px').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-20px 94px');
			},
			'mouseleave': function(e) {
				e.stop();
				fx.start('background-position','-20px 35px');
			}
		});
	});

	/* example b:  right left */
	$$('#b a').each(function(el) {
		//css
		var reset = false;
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel',
			onComplete:function() {
				if(reset) {
					el.setStyle('background-position','0 0');
				}
			}
		});
		//events
		el.setStyle('background-position','0 0').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-150px 0');
				reset = false;
			},
			'mouseleave': function(e) {
				reset = true;
				fx.start('background-position','-300px 0');
			}
		});
	});

});
Click here to copy this code to the clipboardClick here to add this snippet to CodaClick here to add this snippet to TextMateGet the raw code

1window.addEvent(‘domready’, function() {
2 /* example a: top down */
3 $$(‘#a a’).each(function(el) {
4 //fx
5 var fx = new Fx.Tween(el,{
6 duration: 500,
7 link: ‘cancel’
8 });
9
10 //css & events
11 el.setStyle(‘background-position’,'-20px 35px’).addEvents({
12 ‘mouseenter’: function(e) {
13 e.stop();
14 fx.start(‘background-position’,'-20px 94px’);
15 },
16 ‘mouseleave’: function(e) {
17 e.stop();
18 fx.start(‘background-position’,'-20px 35px’);
19 }
20 });
21 });
22
23 /* example b: right left */
24 $$(‘#b a’).each(function(el) {
25 //css
26 var reset = false;
27 var fx = new Fx.Tween(el,{
28 duration: 500,
29 link: ‘cancel’,
30 onComplete:function() {
31 if(reset) {
32 el.setStyle(‘background-position’,’0 0′);
33 }
34 }
35 });
36 //events
37 el.setStyle(‘background-position’,’0 0′).addEvents({
38 ‘mouseenter’: function(e) {
39 e.stop();
40 fx.start(‘background-position’,'-150px 0′);
41 reset = false;
42 },
43 ‘mouseleave’: function(e) {
44 reset = true;
45 fx.start(‘background-position’,'-300px 0′);
46 }
47 });
48 });
49
50});

When you mouseover the last two navigation menu links, the background image animates from one spot to another creating a flash-like effect.

Related posts:

  1. Easy to Use Safari Style jQuery Slider Plugin
  2. Create a Professional Web 2.0 Layout
  3. Create Your Own ActionScript 3.0 Pixel Explosion Effect

]]> http://bulldoggie.cn/blog/2010/06/26/create-snook-style-navigation-using-mootools/feed/ 0 Lightbox + PhotoNav = LightNav http://bulldoggie.cn/blog/2010/06/26/lightbox-photonav-lightnav/ http://bulldoggie.cn/blog/2010/06/26/lightbox-photonav-lightnav/#comments Sat, 26 Jun 2010 03:54:52 +0000 classiclori http://bulldoggie.cn/blog/?p=436 If you’ve been around the web for a while, you might have heard of Lightbox. And if you used it, you might also know the limitations.

One of those limitations is of course the fact that an image wider than your screen goes out of bounds. Very annoying! And it creates ugly scrolbars.

[Read More…]

]]> If you’ve been around the web for a while, you might have heard of Lightbox. And if you used it, you might also know the limitations.

One of those limitations is of course the fact that an image wider than your screen goes out of bounds. Very annoying! And it creates ugly scrolbars.

As you might know, I have created a Panoramic Photoviewer in Javascript to fix the problem of images going out of bounds. And I thought to myself: “Why not try and implement PhotoNav on top of Lightbox?”. With this, even super large images would be viewable.

I created LightNav for this. It runs along Lightbox without changing the script, so you can always update Lightbox if needed.

lightnav

Download
LightNav zip-archive Example
Open the LightNav examples

The example page is located here:
http://www.gayadesign.com/scripts/lightnav/

And the archive is downloadable here:
http://www.gayadesign.com/scripts/lightnav/lightnav.zip

Using LightNav is easy! I’ll tell you what you need to do in this step-by-step guide:

1. Download Lightbox and upload to your webpage.

Go to the Lightbox project page and download the zip: http://www.huddletogether.com/projects/lightbox2/#download

The files from the zip we are going to need are: lightbox.js, lightbox.css and the images in the images folder.

For this installation, we don’t need the prototype.js and scriptaculous.js file from this zip.

Now upload the files to your server. Check the lightbox.js file in the top section for the image paths. These settings are on line 49 and line 50. They have to be set correctly to get a good output on your page.

2. Download and use Scriptaculous.

Go to http://script.aculo.us/downloads and download the latest version of scriptaculous.

Upload the files to your server.

Now it’s time to make use of Lightbox and Scriptaculous on your webpage by placing this code in the head section of your webpage:

1 <script src="js/prototype.js" type="text/javascript"></script>
2 <script src="js/scriptaculous.js" type="text/javascript"></script>
3 <script src="js/lightbox.js" type="text/javascript"></script>
4 <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

Fix the paths to the files as they are on your server. Now you have included the technology which will make Lightbox work. Now it’s time to include LightNav to upgrade Lightbox!

3. Download LightNav and use with Lightbox.

Download LightNav here: http://www.gayadesign.com/scripts/lightnav/lightnav.zip

Upload the contents to your server.

Now place the following code in the head section of your page (under the previous tags!)

1 <script src="js/lightnav.js" type="text/javascript"></script>
2 <script src="js/photonav.js" type="text/javascript"></script>
3
4 <link href='css/photonav.css' rel='stylesheet' type='text/css' />

LightNav will overwrite some functionality of Lightbox and make use of PhotoNav to create a navigation feature.

You are basically done now! But if you can configure LightNav to your needs in the following part of the lightnav.js file:

1 //you can adjust this to your needs.
2 var LightNavOptions = {
3 maxWidth: 800,
4 maxHeight: 600
5 }

The maxWidth and maxHeight give the maximum width and height (in pixels) of the LightBox window, making it impossible to get bigger than that.
If you set these variables to 0 LightNav will create a width and height according to the browse window of the user, which will also fix the out of bounds problem!

I hope I helped some people with this. Follow my feed if you wish to see more Javascript tweaks.

Happy tweaking your Lightbox!

Related posts:

  1. jQuery.popeye – an inline lightbox alternative
  2. Modal Windows In Modern Web Design
  3. Mollify – Web File Manager Hosted in Your Web Server

]]> http://bulldoggie.cn/blog/2010/06/26/lightbox-photonav-lightnav/feed/ 0 Bringing the Magazine to the Web http://bulldoggie.cn/blog/2010/06/26/bringing-the-magazine-to-the-web/ http://bulldoggie.cn/blog/2010/06/26/bringing-the-magazine-to-the-web/#comments Sat, 26 Jun 2010 03:08:27 +0000 classiclori http://bulldoggie.cn/blog/?p=433 The rise of blogs on the web has brought a quick and easy way for anyone to publish their thoughts online without having to get down and dirty with HTML. Just write your content, hit ‘Publish,’ and your thoughts are instantly available for the masses to read.

For all the good that blogs have done, they’ve made the internet look predictable when compared to articles printed in a magazine which look completely unique, each with their own art style and layout. As Greg Storey pointed out in a blog post from 2006, “before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it”.

Most larger blogs may have a unique theme, but each blog post looks the same. Most posts we read everyday share the same common layout:

[Read More…]

]]>

The rise of blogs on the web has brought a quick and easy way for anyone to publish their thoughts online without having to get down and dirty with HTML. Just write your content, hit ‘Publish,’ and your thoughts are instantly available for the masses to read.

For all the good that blogs have done, they’ve made the internet look predictable when compared to articles printed in a magazine which look completely unique, each with their own art style and layout. As Greg Storey pointed out in a blog post from 2006, “before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it”.

Most larger blogs may have a unique theme, but each blog post looks the same. Most posts we read everyday share the same common layout:

In breaking this trend, several bloggers have begun giving each post a unique layout, colour scheme and art style. Their posts look more akin to a magazine article than the typical blog post. The posts stand out from the crowd, like a zebra amongst a field of horses.

“Before there were blogs we had websites. Beautiful, random websites that felt more like a zine – one page looking nothing like the one before or after it” – Greg Storey

Below is a round-up of forty beautiful looking blog posts from fourteen sites which break out of the mentality that every page on a website should look the same.

1. Gregory Wood

2. Marcel’s Blogazine

3. Jason Santa Maria

4. PeepCode

5. Danny Garcia

6. Chris Coyier

7. Avoid Contact With Eyes

8. Paddy Donnelly

9. iamsteve

10. Jack Cheng

11. Dustin Curtis

12. Metalab Design

13. Smashing Magazine

14. Panic Blog

Related posts:

  1. Top 50 WordPress Tutorials
  2. Post Pic How to: Get the first image from the post and display it
  3. More Web Design Trends For 2009(layout)

]]> http://bulldoggie.cn/blog/2010/06/26/bringing-the-magazine-to-the-web/feed/ 0