Posts tagged with Css3

the hobbit

14 blockbusting examples of movie website design

As the cinema experience continues to improve with technological advancements in Imax, 3D and fully immersive sound, so too does the aesthetic experience of the web with its glorious HTML5, parallax scrolling and super-slick CSS3 coding.

It's as if they're competing directly for our attention!

Thankfully the home experience will never match the cinema experience no matter how cutting edge your home cinema set-up may be. 

Just think of the sheer visceral horror of watching Sandra Bullock spinning out of control in the depths of space and how muted it will seem while watching it in bed on your tablet.

These films still need to be marketed through these less than cinematic desktops and portable devices in order to drag us out of our homes and into the theatres.

Luckily the fast pace of change in web design trends has meant that the large scale experience of cinema can be substituted online in brilliant alternative and innovative ways.

Here is a list of movie websites that either feature captivating visuals, grand technological achievements, innovative UX or highly interactive fun, whilst also perfectly capturing the essence of the movie online.

0 comments
HTML5 / CSS3 logos

14 creative HTML5 websites built for digital agencies

If you run a digital agency, especially one that designs and builds websites, then what better way of showing off your talents than to build a wonderful website for your own company?

In the past couple of years many agencies have rebuilt and relaunched their websites using HTML5 and CSS3. The results can be eye-opening, highly engaging, and built to work on all kinds of devices.

It's not all good news though. Sometimes the use of HTML5 can be downright annoying: just because you can do something doesn't mean you should. Does it matter that some of these websites take half a minute to load? Personally I think fast loading times really matter, but I've heard arguments that people are prepared to wait for certain types of website. You can decide for yourself. 

At any rate, there is plenty to admire here, and perhaps there is an acceptable trade off between optimal usability and the overall user / brand experience. Certainly it's always interesting to watch web design evolve, and agencies are naturally inclined to push the boundaries.

The following examples show what can be achieved, and mercifully not all of them are addicted to loading icons. Tuck in and see what you think.

6 comments

14 lousy web design trends that are making a comeback

I was on the verge of writing a post about the joys of HTML5, which when combined with CSS3 and Javascript can do some very impressive things. However, having visited a bunch of ‘inspiring’ HTML5 websites I’ve ended up with a slight headache. The truth is that many of these sites leave a lot to be desired.

It’s a case of déjà vu. A decade ago the rise in popularity of Flash steered many web designers down the wrong path. It wasn’t the fault of the technology, but of the people using the technology. Just because you can do something doesn't mean you should. I'm all for innovation, but innovation should not be regressive.

Make no bones about it, HTML5 design is a massive, musty elephant in the room, and it is about to charge. In its path lies a flailing, unarmed Jakob Nielsen, backed up with legions of user experience professionals, who are gently sobbing. GoDaddy CEO Bob Parsons, the noted elephant slayer, is nowhere to be seen. 

So, below are some examples of user experience badness. The irony is that I spotted many of these examples in posts like this one, dedicated to ‘fresh HTML5 design inspiration’. For the purposes of clarity I am not pointing the finger of blame at HTML5 itself, but the 'HTML5 design' themes seen on lots of sites which suffer from the issues outlined below.

142 comments

14 fantastic scrolling websites that tell a story

In the past year or so there has been a trend in web design towards the use of scrolling, which can help to engage visitors and provides a feeling of movement and animation.

These web pages are entirely static, and rely on the visitor to interact in order to generate the ‘movement’. Back in the day if you asked for this a developer would reach for Flash, but nowadays HTML5 (which has a <ParallaxScroll> tag), CSS3 and JQuery are usually employed to achieve scrolling effects.

I’ve collected a bunch of scrolling websites that are built with the arrow keys in mind. Some of these are more 'animated' than others, and some scrolling websites feel a little bit clunky, but all of them are interesting and creative web experiences. 

I’m not yet convinced that scrolling is something that e-commerce companies should be embracing en masse, but it can certainly be used to support brand and product campaigns, given that the best examples are inherently narrative. Portfolio-based websites (such as the two agency sites I've featured) are another area where scrolling could come into play.

Scrolling, scrolling, scrolling, keep those websites scrolling…

48 comments

Adobe acts on its HTML5 ambitions

Shut out of the iPhone/iPad ecosystem by Apple, Adobe declared that it would "try and make the best tools in the world for HTML5." Less than two weeks after that statement was made, Adobe appears to be attempting to follow through.

At the Google I/O conference, the company demonstrated its HTML5/CSS3 update pack for Dreamweaver CS5, the latest version of the Adobe Creative Suite's web development application.

5 comments