7 Exciting Web Development Trends for 2011

At the end of December, you read Andrew’s list of the <a href="http://net.tutsplus.com/articles/web-roundups/the-top-150-web-development-highlights-from-2010/">hottest technologies, tools, and resources</a> to come from 2010. Today, we’re going to look forward, and take a peek at some exciting emerging technologies and trends.<br /><span id="more-17385"></span><br /><hr /><h2>A Word from the Author</h2>The tools and technologies that we, as web developers, work with is in a state of constant flux, much like every other industry. What separates us from the rest is that we have to learn, unlearn and relearn new developments at a much faster rate, much more frequently.<br /><blockquote>Today, I’d like to talk about a few technologies and trends that I think are going to be quite important in the coming year: a pseudo prediction/wish list/<em>what we’re going to cover this year</em> post of sorts.</blockquote>The technologies listed below weren’t exactly hatched recently. In fact, some are quite old and have been in use for a while now, in their insular niches. That said, I do feel that this is the year they gain even more <em>mainstream awareness</em>. As a great man once said, <em>An invasion of armies can be resisted, but not an idea whose time has come</em>. Let’s get started!<br /><hr /><h2><span>1. </span>noSQL</h2><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/just-say-nosql.png" style="display: inline;" /></div>Why are people excited about noSQL? And by people, I mean some of the big fishes including Google, Facebook and Twitter. For one, the concept of noSQL has redefined the way we perceive databases and the corresponding interactions.<br /><blockquote class="pullquote">Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability.</blockquote>Databases, historically, have almost always been about implementing the relational model and being fully ACID-compliant. If your transactions weren’t ACID, or your database wasn’t relational, people scoffed at you for being a “kiddie” database.<br />The issue is the relational model isn’t really necessary everywhere. Neither is ACID, though many noSQL implementations enforce some sort of data integrity and consistency. Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability. Applications with massive amounts of read/write operations are an excellent choice.<br />Another big factor for me is the simplicity it brings to my schema: your data models can now become a lot more sane. I can’t wait to <em>not</em> muck around with my models just to make it fit into the relational model.<br /><hr /><h2>Implementations of Interest</h2><h3>noSQL at Facebook</h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cassandra.png" style="display: inline;" /></div>There maybe no better example than Facebook when it comes to how to handle enormous traffic. It’s no surprise that traditional methods of scaling won’t quite work for Facebook.<br />Now part of the Apache Foundation, Cassandra, a noSQL implementation, was developed in-house to help with searching data. Currently, it powers Facebook’s inbox search.<br />Facebook also makes use of another noSQL solution, HBase, for its messaging platform.<br /><h3>noSQL at Twitter</h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/hadoop-hbase.gif" style="display: inline;" /></div>Twitter’s reliability used to be, well, infamous. On of the main reasons was that their setup wasn’t really scaling all that well. Twitter now uses a mix of SQL and noSQL to manage their data.<br />Just like Facebook, Twitter uses a mix of Cassandra and HBase. Cassandra is used for all the front facing applications while HBase is used to data mining, analysis and analytics.<br /><hr /><h2><span>2. </span>Serverside JavaScript</h2>JavaScript is, arguably, the most important language for the next few years — and for good reason. Much of the cruft and idiosyncrasies associated with the language is more due to browser quirks, and less due to the design of the language itself.<br />It has been satisfied with residing merely in the browser for a long time, however, this trend is changing. Implementations and interest in server side JavaScript has been growing over the past year and I fully expect it to explode even further this year, thanks to the screamingly fast JavaScript engines to run your code on.<br />To the people questioning the need for JavaScript on the server side, I present you with this single situation, among lots of others.<br /><blockquote>Whatever your backend language of choice is, you’re ultimately going to come back to JavaScript for constructing the frontend. Wouldn’t it be easier to simply use JavaScript universally?</blockquote><hr /><h2>Technologies of Interest</h2><h3><a href="http://nodejs.org/">node.js</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/nodejs.png" style="display: inline;" /></div>node.js makes creating real-time, high performance, scalable applications a cinch. It’s primarily event-driven and runs on V8, the JavaScript engine that powers Chrome and makes it freakishly fast.<br />It doesn’t spawn a separate thread for each connection like most others. Instead it works through asynchronous operation which significantly minimizes latency. If it has stopped making sense, remember to read a <a href="http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/">primer on node.js</a> published right here on Nettuts+. We’ll also be covering this topic extensively over the next few months so stay tuned!<br /><hr /><h2><span>3. </span>Easier Hosting, Deployment and Scaling</h2><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cloud-computing.jpg" style="display: inline;" /></div><blockquote class="pullquote">Bottom line, scaling is a pain.</blockquote>The rise of <em>as a service</em> businesses have only helped developer tangentially in the past. Most of them were ports of functionality that we <em>required</em>, with the exception of maybe project and bug tracking. Recently, a number of services have opened up that significantly ease up a developer’s life.<br />Deployment has always been an issue with non-trivial web applications since you need to do more than copy over the files to the server. Scaling, too, has been an issue — not just in bandwidth, but in computing capacity as well. We must setup load balancers, a caching system, maybe even a lightweight server to serve up static content. Bottom line, scaling is a pain. It’s a rather involved activity, especially when you’re strapped for time.<br /><em>Platforms as a service</em>, as they’re popularly called, remove almost all of the hassle for a developer. Deploying? Merely push to a git repo and everything is handled for you. Expecting a massive rush of traffic and worried whether your application will buckle down? Merely add more nodes or workers to your instance and you’re done.<br /><hr /><h2>Services of Interest</h2><h3><a href="http://heroku.com/">Heroku</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/7tdkj69n.jpg" style="display: inline;" /></div>Heroku is a perfect example of the simplicity services like these can bring to the table. Deploying to my app is really just pushing code to my github repo. Computing capacity and memory, among others, can be dynamically allocated as well. As an added incentive, a lot of noSQL solutions are available as well to be used, including Redis and MongoDB.<br /><h3><a href="http://aws.amazon.com/">Amazon’s Web Services</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/bzb2b2v8.jpg" style="display: inline;" /></div>Amazon Web Services is an umbrella term for a number of awesome services they run. The ones of interest today are:<br /><ul><li><em>Amazon Elastic Compute Cloud</em> [EC2] let’s you create virtual servers that are incredibly scalable. You just need to choose the amount of power you require.</li><li><em>Amazon Simple Storage Service </em>[S3] provides cheap, reliable web based storage. All Envato sites and marketplaces use S3 almost exclusively to store and serve content.</li></ul><hr /><h2><span>4. </span>Utility JS Libraries</h2>Even though we have a massive number of JavaScript libraries that abstract away some of the more mundane tasks, like DOM manipulation and AJAX, they leave a lot of functionality untouched.<br />We saw a number of utility libraries, such as <a href="http://www.modernizr.com/">Modernizr</a> that gained immense popularity last year — a sign that developers are always looking for nifty libraries that let them use cutting edge technology whilst saving time. This year should be even. Here are a few tools that might pique your interest.<br /><hr /><h2>Libraries of Interest</h2><h3><a href="http://headjs.com/">Head.JS</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/headjs.jpg" style="display: inline;" /></div>This library is a true powerhouse. It takes care of loading your scripts in a parallel nature, mimics Modernizr by adding specific classes to your document and much more. Definitely a much watch!<br /><div class="tutorial_image"> <ins style="border: none; display: inline-table; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><ins id="aswift_0_anchor" style="border: none; display: block; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"></ins></ins></div><h3><a href="http://documentcloud.github.com/underscore/">underscore.JS</a></h3><div class="tutorial_image"><img alt="Tutorial Image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/underscore.jpg" style="display: inline;" /></div>This is pure utility library that brings a powerful set of utility methods to JavaScript without extending the native types underneath. Similar to how jQuery maps to the <code>$</code> characters by default, underscore maps to the <code>_</code> character. Check out the site for a full rundown of the utility functions it contains.<br /><h3><a href="http://mustache.github.com/">mustache.JS</a></h3><div class="tutorial_image"> </div>This is a simple templating library that should make handling data much more simpler. You simply need to create a custom template, map it to your data and run the code. If you’re even the least bit interested, you should check out a <a href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/">quick tip</a> we published a couple of months ago!<br /><hr /><h2><span>5. </span>Better Unit Testing for JavaScript</h2>Testing is an integral, intrinsic part of the software development process.<br /><blockquote>Unit testing, specifically, is the testing of individual software components.</blockquote>The difference is that these tests are performed by the developer, since writing tests, in general, requires knowledge of the source.<br />JavaScript has lagged behind other development platforms when it comes to proper testing. Even now, unit testing is not an oft heard statement among typical JavaScript developers and part of the reason is the lack of proper tools to do so. Here are a few tools that should make it significantly easier for you to test your code:<br /><hr /><h2>Tools of Interest</h2><h3><a href="http://docs.jquery.com/Qunit">QUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/how-to-test-your-javascript-code-with-qunit-2010020309015624-iseven%20test%20png.png" style="display: inline;" /></div>Made by the jQuery team and used as the official test suite for the platform, QUnit is a powerful unit testing framework. It can test any generic piece of JavaScript code, even code that needs to be executed inside a JavaScript engine.<br /><h3><a href="http://fireunit.org/">FireUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/fireunit-ui-thumb.png" style="display: inline;" /></div>FireUnit is implemented as a Firefox extension and requires Firebug. This may be good or bad depending on your perspective. For me, since Firebug already is a big part of my development workflow, this is a boon. FireUnit adds an additional <em>test</em> tab to Firebug through which you can access your tests and results.<br /><h3><a href="http://www.jsunit.net/">JsUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/JSUnit.jpg" style="display: inline;" /></div>JsUnit is an open source testing framework for JavaScript. Inspired by JUnit, it’s written entirely in JavaScript and runs inside your browser. It also includes a platform for automating the execution of tests.<br /><hr /><h2><span>6. </span>Raphael-esque Libraries for Canvas</h2>HTML5 brought us the canvas element which opened up new vistas for us. It provided low level, per pixel control over the drawing area which was unheard of before. Previously, you’d usually have to resort to either rendering an image in the backend and relay it or using a browser plugin.<br /><blockquote>Canvas is a game changer in that aspect.</blockquote>The issue here is that it is <em>truly low level</em>. Per pixel control is nice but when you’re trying to create something bigger, you’ll want these details abstracted from you. Kind of like how Raphael abstracts the details from the SVG element. And mind you, SVG is a lot more easier to work with.<br />Libraries like the one I’m looking for aren’t really limited to merely providing interfaces for shapes and so on. A number of <em>game</em> libraries have even been released which let you work at an ever higher level.<br /><hr /><h2>Libraries of Interest</h2><h3><a href="http://processingjs.org/">Processing.JS</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/banner1.png" style="display: inline;" /></div>Processing.JS is an excellent library that provides a high level interface to the canvas element. It’s a JavaScript port of the Processing, a fun, little language to help non-programmers understand programming.<br />The library completely abstracts you from the initialization and other trivialities of the canvas element and let’s you create incredibly suave content.<br /><h3><a href="http://www.kesiev.com/akihabara/">Akihabara</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/4810592758_26afaf2689_b.jpg" style="display: inline;" /><a href="http://www.lostdecadegames.com/onslaught_arena">Onslaught! Arena, a HTML5 canvas game</a></div>Akihabara is an extensive library that let’s you create games rapidly. As expected, it makes use of the canvas element.<br />It helps you with a large number of tasks including rendering, collisions and input. Even, relatively, esoteric features like z-indexed objects and double buffering* are supported.<br /><div style="font-size: 8px; margin-top: -15px;">* If you understand what this means, you get a cookie!</div><hr /><h2><span>7. </span>True JavaScript Frameworks</h2><blockquote class="pullquote">Server side development has it good.</blockquote>Server side development has it good. You have plenty of choices, regardless of which language you’ve chosen to work with; you can choose anything between a modular pick-your-component frameworks, to all encompassing full stack frameworks, to everything in between.<br />In the front end though, we’ve had to work with <em>libraries</em> instead of <em>frameworks</em>, even though there is only one language to deal with: JavaScript. DOM manipulation and other assorted functionalities are abstracted away, sure, but when building a complete UI for an application, low level functions like these are but a fraction of your worries.<br />Usually, you’d have to choose something for your templating needs, UI and widgets, dependency management, DOM manipulation, MVC and other assorted functionalities. A number of frameworks have been slowly gaining momentum that, even though aren’t quite all encompassing, promise a much better front end development experience.<br /><hr /><h2>Technologies of Interest</h2><h3><a href="http://www.sproutcore.com/">SproutCore</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/mobileme.jpg" style="display: inline;" /></div>SproutCore is a JavaScript framework, originating from Apple, that lets users create desktop like web applications rapidly. Needless to say, the entire frontend requires only JavaScript.<br />The framework consists of a number of parts including a widget system to handle different parts of the UI and a key value observing system to wire up each part which significantly reduces the amount of glue code in your application.<br /><blockquote>One of the most public facing applications of SproutCore is Apple’s MobileMe.</blockquote><h3><a href="http://cappuccino.org/">Cappucino</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cocoa-cappuccino.jpg" style="display: inline;" /></div>Cappucino, developed by 20North which is now owned by Motorola, takes a completely different approach to such a framework. Cappuccino introduces a focused, small superset of JavaScript called Objective-J.<br />The platform itself consists of the language itself, Objective-J, and a comprehensive library which is a port of the Cocoa frameworks on OS X.<br /><hr /><h2>And That’s a Wrap!</h2>And there we go. I’ve listed seven trends that I’m hoping <em>truly</em> gains <em>mainstream awareness</em> this year. Did I miss anything important? Let us know in the comments. Thank you so much for reading

7 Exciting Web Development Trends for 2011

At the end of December, you read Andrew’s list of the hottest technologies, tools, and resources to come from 2010. Today, we’re going to l...

Read more »

30 Great Websites with Parallax Scrolling

<strong>The parallax effect</strong> has been around for years in classic video games, but it became a trend in the web design world relatively recently. This cool effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience.<br />The term is derived from the Greek παράλλαξις (parallaxis), meaning "alteration". Nearby objects have a larger parallax than more distant objects when observed from different positions, so <strong>parallax scrolling</strong> can be used to determine distances.<br />We have compiled 30 of the best amazing examples of websites that use the <strong>scrolling parallax effect.</strong><br /> <ul class="listpost view2"><li><h3>Wildlife.la - Let's get Wild</h3><a href="http://www.awwwards.com/gallery/6526/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_wildlife.jpg.pagespeed.ic.O36TmspI9_.jpg" width="459" /></a><i><a href="http://whois.wildlife.la/">Go to website</a></i> </li><li><h3>FK-AGENCY</h3><a href="http://www.awwwards.com/gallery/6527/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_fkagency.jpg.pagespeed.ic.MraRWsXiMj.jpg" width="459" /></a><i><a href="http://fk-agency.com/">Go to website</a></i> </li><li><h3>How Drug Treatment Works</h3><a href="http://www.awwwards.com/gallery/6520/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_drug.jpg.pagespeed.ic.BtkegykbO5.jpg" width="459" /></a><i><a href="http://www.drugtreatment.com/">Go to website</a></i> </li><li><h3>Honda CR-V</h3><a href="http://www.awwwards.com/gallery/6523/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_honda.jpg.pagespeed.ic.RZ1h20O0vY.jpg" width="459" /></a><i><a href="http://crv.honda.com.au/">Go to website</a></i> </li><li><h3>ASICS - STOP AT NEVER</h3><a href="http://www.awwwards.com/gallery/6521/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_asics.jpg.pagespeed.ic.RdX2hyDYCy.jpg" width="459" /></a><i><a href="http://www.stopatnever.com/">Go to website</a></i> </li><li><h3>NH Winter Holidays</h3><a href="http://www.awwwards.com/gallery/6522/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_nhhotel.jpg.pagespeed.ic.0Rcx0rTR-O.jpg" width="459" /></a><i><a href="http://www.nh-hotels.com/winter-holidays/">Go to website</a></i> </li><li><h3>Too Young to Wed</h3><a href="http://www.awwwards.com/gallery/6524/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_tooyoung.jpg.pagespeed.ic.nqsD_gRWz5.jpg" width="459" /></a><i><a href="http://www.tooyoungtowed.org/">Go to website</a></i> </li><li><h3>Range Rover Victoria Beckham</h3><a href="http://www.awwwards.com/gallery/6525/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2012/12/459xNxparallax_rangerovers.jpg.pagespeed.ic.C6RBB-Zd5y.jpg" width="459" /></a><i><a href="http://victoriabeckham.landrover.com/">Go to website</a></i> </li><li><h3>Saucony</h3><a href="http://www.awwwards.com/gallery/5163/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_002.jpg.pagespeed.ic.2w7TghP0ek.jpg" width="459" /></a><i><a href="http://community.saucony.com/kinvara3/">Go to website</a></i> </li><li><h3>Air Jordan 2012</h3><a href="http://www.awwwards.com/gallery/5164/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0011.jpg.pagespeed.ic.8TxwRBI44y.jpg" width="459" /></a><i><a href="http://www.nike.com/jumpman23/aj2012/">Go to website</a></i> </li><li><h3>Lois Jeans</h3><a href="http://www.awwwards.com/gallery/5165/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_001.jpg.pagespeed.ic.RvQbet89B3.jpg" width="459" /></a><i><a href="http://www.loisjeans.com/web2012/es">Go to website</a></i> </li><li><h3>Biamar</h3><a href="http://www.awwwards.com/gallery/5166/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_004.jpg.pagespeed.ic.nuBcENtuMY.jpg" width="459" /></a><i><a href="http://www.biamar.com.br/">Go to website</a></i> </li><li><h3>Whiteboard</h3><a href="http://www.awwwards.com/gallery/5167/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_005.jpg.pagespeed.ic.OlZ1YngZEk.jpg" width="459" /></a><i><a href="http://whiteboard.is/">Go to website</a></i> </li><li><h3>Bomb Girls</h3><a href="http://www.awwwards.com/gallery/5168/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0012.jpg.pagespeed.ic.fZrPAtQ60f.jpg" width="459" /></a><i><a href="http://www.globaltv.com/bombgirls">Go to website</a></i> </li><li><h3>Michelberger Booze</h3><a href="http://www.awwwards.com/gallery/5169/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0013.jpg.pagespeed.ic.2RGwjyiT5i.jpg" width="459" /></a><i><a href="http://www.michelbergerbooze.com/">Go to website</a></i> </li><li><h3>Tokyu Agency Recruit 2013</h3><a href="http://www.awwwards.com/gallery/5170/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0014.jpg.pagespeed.ic.9jB93YZpLC.jpg" width="459" /></a><i><a href="http://www.tokyu-agc.co.jp/recruit/2013/special/">Go to website</a></i> </li><li><h3>Ascension Latorre</h3><a href="http://www.awwwards.com/gallery/5171/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0015.jpg.pagespeed.ic.yXNgfddc5_.jpg" width="459" /></a><i><a href="http://www.ascensionlatorre.com/es/home">Go to website</a></i> </li><li><h3>TokioLab!</h3><a href="http://www.awwwards.com/gallery/5172/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_007.jpg.pagespeed.ic.5-ltbdDBdX.jpg" width="459" /></a><i><a href="http://www.tokiolab.it/">Go to website</a></i> </li><li><h3>Bagigia</h3><a href="http://www.awwwards.com/gallery/5173/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_008.jpg.pagespeed.ic.0-dMi9V6yX.jpg" width="459" /></a><i><a href="http://www.bagigia.com/">Go to website</a></i> </li><li><h3>Marcus Thomas</h3><a href="http://www.awwwards.com/gallery/5174/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0010.jpg.pagespeed.ic.QU8X1_gjMJ.jpg" width="459" /></a><i><a href="http://www.marcusthomasllc.com/">Go to website</a></i> </li><li><h3>Krystalrae</h3><a href="http://www.awwwards.com/gallery/5175/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0016.jpg.pagespeed.ic.bMQs0OTqVe.jpg" width="459" /></a><i><a href="http://krystalrae.com/">Go to website</a></i> </li><li><h3>Ala</h3><a href="http://www.awwwards.com/gallery/5176/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0017.jpg.pagespeed.ic.OQZTAFlmiM.jpg" width="459" /></a><i><a href="http://ala.ch/">Go to website</a></i> </li><li><h3>Intacto 10 years</h3><a href="http://www.awwwards.com/gallery/5177/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0018.jpg.pagespeed.ic.yZ3pvV_oD5.jpg" width="459" /></a><i><a href="http://www.intacto10years.com/index_start.php">Go to website</a></i> </li><li><h3>Anna Safroncik</h3><a href="http://www.awwwards.com/gallery/5178/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2012/04/459xNxparallax_sites_0019.jpg.pagespeed.ic.QvcwPn8z4O.jpg" width="459" /></a><i><a href="http://annasafroncik.it/">Go to website</a></i> </li><li><h3>Head 2 heart</h3><a href="http://www.awwwards.com/gallery/5179/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_01.jpg.pagespeed.ic.2FDwV99PR5.jpg" width="459" /></a><i><a href="http://www.head2heart.us/">Go to website</a></i> </li><li><h3>Unfold</h3><a href="http://www.awwwards.com/gallery/5180/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_02.jpg.pagespeed.ic.PBFAJTTnra.jpg" width="459" /></a><i><a href="http://unfold.no/">Go to website</a></i> </li><li><h3>Manufacture d'essai</h3><a href="http://www.awwwards.com/gallery/5181/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_06.jpg.pagespeed.ic.rL58K7RAph.jpg" width="459" /></a><i><a href="http://www.manufacturedessai.it/it/">Go to website</a></i> </li><li><h3>Web is beautiful</h3><a href="http://www.awwwards.com/gallery/5182/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_07.jpg.pagespeed.ic.OIezFlSJBt.jpg" width="459" /></a><i><a href="http://www.beautifulexplorer.com/main.html?">Go to website</a></i> </li><li><h3>Phase 2 Design Studio</h3><a href="http://www.awwwards.com/gallery/5183/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_09.jpg.pagespeed.ic.Tl-Mk1q9o3.jpg" width="459" /></a><i><a href="http://www.phase2technology.com/design">Go to website</a></i> </li><li><h3>Cantilever</h3><a href="http://www.awwwards.com/gallery/5184/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_10.jpg.pagespeed.ic.qTh8qR5FJq.jpg" width="459" /></a><i><a href="http://www.cantilever-chippy.co.uk/">Go to website</a></i> </li><li><h3>Online Portfolio of Jan Ploch</h3><a href="http://www.awwwards.com/gallery/5185/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_12.jpg.pagespeed.ic.cFT7E1ou9P.jpg" width="459" /></a><i><a href="http://www.janploch.de/">Go to website</a></i> </li><li><h3>Campaign Monitor is Hiring</h3><a href="http://www.awwwards.com/gallery/5186/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_13.jpg.pagespeed.ic.P5-LgBI0dx.jpg" width="459" /></a><i><a href="http://www.campaignmonitor.com/hiring/">Go to website</a></i> </li><li><h3>Netlash-bSeen</h3><a href="http://www.awwwards.com/gallery/5187/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_14.jpg.pagespeed.ic.t_7Xut5VEW.jpg" width="459" /></a><i><a href="http://www.netlash-bseen.be/">Go to website</a></i> </li><li><h3>Iutopi</h3><a href="http://www.awwwards.com/gallery/5188/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_15.jpg.pagespeed.ic.530xfXlb5Q.jpg" width="459" /></a><i><a href="http://www.iutopi.com/">Go to website</a></i> </li><li><h3>Apo</h3><a href="http://www.awwwards.com/gallery/5189/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_16.jpg.pagespeed.ic.74H3KK85cb.jpg" width="459" /></a><i><a href="http://www.ap-o.com/">Go to website</a></i> </li><li><h3>YEBO</h3><a href="http://www.awwwards.com/gallery/5190/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_17.jpg.pagespeed.ic.qzfbWkwZSh.jpg" width="459" /></a><i><a href="http://www.yebocreative.com/">Go to website</a></i> </li><li><h3>Nike Better World</h3><a href="http://www.awwwards.com/gallery/5191/30-great-websites-with-parallax-scrolling"><img src="http://www.awwwards.com/awards/images/2011/05/459xNxparallax-sites_18.jpg.pagespeed.ic.FDruG3bifH.jpg" width="459" /></a><i><a href="http://www.nikebetterworld.com/">Go to website</a> </i></li><li><i> </i></li><li><i>courtesy: http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html </i></li></ul>

30 Great Websites with Parallax Scrolling

The parallax effect has been around for years in classic video games, but it became a trend in the web design world relatively recently. ...

Read more »

IE z-index bug with CSS dropdown menu

Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it).<br /><br />In the W3C’s specs, z-index is designed to affect the stacking order of positioned elements on a web page. So, an element with a z-index of 2 should always appear above an element with a z-index of 1.<br /><br />In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.<br />Example<br /><br />So let’s say we have the following HTML. Fairly standard header, navigation, etc.<br /><br />    <div id="wrapper"><br />    <div id="header"><br />    <ul id="nav"><br />    <li><a href="#">home</a></li><br />    <li><a href="#">item one</a><br />    <ul><br />    <li><a href="#">sub item one</a></li><br />    <li><a href="#">sub item two</a></li><br />    </ul><br />    </li><br />    <li><a href="#">item two</a><br />    <ul><br />    <li><a href="#">sub item one</a></li><br />    <li><a href="#">sub item two</a></li><br />    </ul><br />    </li><br />    </ul><br />    </div><br />    <div id="container"><br />    <h1>Hi. This is a positioned H1</h1><br />    <p>This page is just some friendly content to show you just how bad IE really is.</p><br />    </div><br />    </div><br /><br />Then, we have the following CSS.<br /><br />    #wrapper #header {<br />    position: relative;<br />    }<br />    #wrapper #nav {<br />    clear: both;<br />    margin: 0 5px;<br />    padding: 0 5px;<br />    width: 750px;<br />    height: 30px;<br />    list-style: none;<br />    border-top: 1px solid #335a86;<br />    border-bottom: 1px solid #335a86;<br />    text-align: center;<br />    position: relative;<br />    z-index: 2;<br />    }<br />    #wrapper #nav li {<br />    float: left;<br />    margin: 0;<br />    padding: 0 0 5px 0;<br />    border: 0;<br />    position: relative;<br />    }<br />    #wrapper #nav li a {<br />    margin: 0;<br />    padding: 7px 15px;<br />    display: block;<br />    text-decoration: none;<br />    font-size: 1.2em;<br />    }<br />    #wrapper #nav a:link, #wrapper #nav a:visited {<br />    color: #888;<br />    }<br />    #wrapper #nav a:hover, #wrapper #nav a:focus {<br />    color: #335a86;<br />    }<br />    #wrapper #nav li ul {<br />    background-color: #ccc;<br />    width: 150px;<br />    height: auto;<br />    list-style: none;<br />    margin: 0;<br />    padding: 5px 0 10px 0;<br />    border: 0;<br />    text-align: left;<br />    position: absolute;<br />    display: none;<br />    }<br />    #wrapper #nav li ul li {<br />    float: none;<br />    margin: 0;<br />    line-height: 30px;<br />    height: 30px;<br />    }<br />    #wrapper #nav li ul a {<br />    padding: 7px 10px;<br />    white-space: nowrap;<br />    display: block;<br />    }<br />    #wrapper #nav li:hover ul {<br />    display: block;<br />    }<br />    #wrapper #container {<br />    padding: 10px;<br />    position: relative;<br />    }<br />    #wrapper h1 {<br />    position: absolute;<br />    left: 10px;<br />    top: 10px;<br />    height: 60px;<br />    line-height: 60px;<br />    vertical-align: middle;<br />    font-size: 2em;<br />    background: #335a86;<br />    color: #fff;<br />    }<br />    #wrapper #container p {<br />    margin-top: 60px;<br />    }<br /><br />This is very common code used to trigger a CSS dropdown menu in all modern browsers. Remember that IE6, of course, requires a small JavaScript. A good example is the Sons of Suckerfish. I do not have this JavaScript on my current example, since there are plenty of other great articles about that.<br />IE Dropdown Bug Example<br /><br />IE7 Example – click to enlarge<br /><br />When the code below the navigation, in this case the absolutely positioned h1, is any positioned element (or a select element, Flash movie, etc.), all versions of Internet Explorer prior to version 8 will cause the dropdown menus to fall behind the content.<br />The Fix<br /><br />The fix for this is very simple, but there are incredibly large websites that use jumbled masses of iframes, extra divs, and other horrors to get Internet Explorer to display the dropdowns above the offending elements.<br /><br />For a fix, we use the following CSS for the header div. See the screenshot for an example of this (again, in IE7). Click it to see a larger version.<br /><br />    #wrapper #header {<br />    position: relative;<br />    z-index: 2;<br />    }<br /><br />Now, you will also need to make sure that your container div, whatever it is called, is styled correctly. In my example:<br /><br />    #wrapper #container {<br />    position: relative;<br />    }<br /><br />This ensures that the header and the container, whatever you call them, understand their relationship to each other for the z-index fix to work.<br />IE Dropdown Bug Fix Example<br /><br />Courtesy: http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/<br />

IE z-index bug with CSS dropdown menu

Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it...

Read more »