The Browser Cold War

Starting in January 2012, if you have automatic updates turned on, Microsoft will begin silently updating your installed copy of Internet Explorer to the latest version. If you’re on Windows XP, you will wake up one day and find your decrepit IE6 or 7 replaced with 8 — and Vista and 7 will have the joy of using IE9. Ostensibly, Redmond’s intentions are noble — Beauty of the Web! Open Standards! Security! Privacy! Liberté, égalité, fraternité! — but in reality, it is Microsoft’s latest maneuver in the Browser Cold War.

The browser wars

The First Browser War (BW I) raged from 1997 to 2001, with sorties by Internet Explorer 4, 5, and 6 — all of which were bundled with Windows — steadily battling back Netscape until complete market dominance was obtained. IE’s market share was so overwhelming that Microsoft didn’t release a new version of IE for five years, effectively stifling the march of innovation and standards on the web.

The Second Browser War (BW II) began when Microsoft realized that Mozilla Firefox — which emerged from the ashes of Nutscrape in 2004 — was a serious contender. Gates awakened the IE team from their dragon-like, mmm-fat-piles-of-gold slumber to produce IE7 in 2006 — but it wasn’t enough to stymie Firefox’s growth. Then, with Firefox creeping closer and closer to 30%, Google released Chrome at the end of 2008 and Internet Explorer’s market share began its free fall in earnest. Microsoft responded with IE8 in 2009, but to little avail.

In 2010, BW III kicked off. You probably remember it well. It all started with HTML5, and an almost slavish adherence to “the open web.” Google, Microsoft, and Mozilla fell over each other to provide standards support and faster JavaScript execution. The end result, though, has been commoditization. All three of the Big Three (or Four if you include Safari) are capable, secure, standards-compliant browsers, with the only real differences coming down to personal taste. Unsurprisingly, with IE9 being Microsoft’s first competitive browser since IE4, its market share has also started to stabilize.

The first two Browser Wars

Browser War I & II

And now… now we find ourselves in the midst of the Browser Cold War. Every combatant is armed to the teeth with an almost identical feature set, and all three of the big browsers have roughly the same population. Short of launching a nuke, which fortunately no one has, the only way to gain ground is through propaganda, FUD, and sleazy underhanded maneuvers.

 

The Berlin Sandbox

Take Google, for example. It is now spending millions of dollars to market Chrome as the fastest option, when we know that it’s virtually identical to Firefox and IE. Even worse, and reminiscent of the tactics that resulted in an antitrust ruling against Internet Explorer and Microsoft in 2001, Google abuses its search and video monopoly to advertise its browser. Then there’s the recent independent (but Google-funded) study that shows Chrome to be the most secure browser on the web — but hilariously, and probably because Google dictated the test protocol, the study simply ignores a bunch of Firefox and IE security features to paint Chrome as some kind of indomitable Hulk-like hero. In reality, all three browsers are very secure.

Mozilla, which is being squeezed out by rabid bloodthirstiness and larger marketing budgets, has started to get its hands dirty as well. The launch of Firefox 5, released in June, was the biggest social media orgy since the Firefox 1 launch parties in 2004. Recently, with its shift to a Chrome-like rapid release cycle, a lot of work has been done on introducing automatic, behind-the-scenes updates — and now, at long last, Mozilla is nudging Luddite Firefox 3.6 hold-outs to update. Last, but not least, Mozilla is even using adorable red panda (firefox) cubs to try and boost its user base. With only a fraction of its competitors’ budget and gravitas, expect a lot more of these cutesy, forebrain-type land grabs from Mozilla.

And finally there’s the Microsoft, the 800lb gorilla that’s desperately trying to appear calm, collected, and graceful — but deep down some large cogs are whirring, grumbling, and crunching under the strain. In the last 10 years, Microsoft has registered just a handful of market share increases. Seriously, just look at the graph below — if you were the exec in charge of Microsoft’s portal to the web, how would you feel? Some poor sod — or, more likely, a long line of poor sods — has had to struggle through a decade of yearly reviews, each time explaining, yet again, that he has lost another 5% of the market.

International browser market share

Browser War III & The Browser Cold War

This is why Microsoft is enabling silent, automatic Internet Explorer updates. It went half way and rolled out Internet Explorer 9 through Windows Update back in April, but it still required users to click through the IE installer — now, IE9 (or 8) will simply install with the rest of your important and critical updates. Microsoft, like Google, also uses its huge web presence to push surfers towards IE9, and it uses a few of Mozilla’s social tricks with sites like IE Test Drive and Beauty of the Web.

Cuban Missile Crisis

Where is this technological Cold War heading, then? To be honest, as far as consumers are concerned, there’s nothing to worry about. The web has never been as fast or functional, and as long as HTML5 and its Open Web brethren continue to thrive this will continue.

As far as the browser makers are concerned, though, expect further foul play. Expect Microsoft to register a huge win with its built-in, Metro version of IE10 in Windows 8. Likewise, expect Chrome to dig its claws further into Android — and perhaps a renewed push for Chrome OS is due soon, too. Mozilla, being a charity, can’t (and won’t) apply the same kind of pressure, but hopefully its Web API and Firefox for Android efforts will be enough to keep it relevant. Without Firefox, of course, there would be nothing to stop Microsoft or Google from heading down the same path that led Microsoft, back in the balmy days of the Dot Com Bubble, to introduce such  standards-defying disasters as DHTML. Let’s hope that it doesn’t get to that.

4 out of 5 videos are encoded in H.264

A full 80 percent of videos are encoded in H.264 and, at least theoretically, could be delivered to an iPad with the HTML5 video tag, according to new data from MeFeedia. That doesn’t mean they will be, or that they are… just that if a video publisher wanted to use the same video asset for distribution on the iPad, it wouldn’t have to re-encode it. It would just have to switch out the video player from Flash to HTML5.

The latest figures show just how far the industry has come in adopting the H.264 video format as the de facto standard for video encoding. The share of videos encoded in H.264 has risen from just 10 percent in January 2010, to 80 percent less than two years later.

Much of that change can be attributed to the introduction of the iPad and other connected devices, most of which support H.264 hardware acceleration. In May 2010, not long after the initial launch of the iPad, MeFeedia reported that just 26 percent of videos were encoded in H.264.

Wider availability of HTML5-ready files is having an effect on the strategies of other big players in the video delivery market. Adobe, for instance, has announced that it is taking a step back from mobile Flash development. And despite being released with an open-source license last May, Google’s WebM video format has yet to gain any serious traction. MeFeedia reports that less than 2 percent of videos indexed were encoded with the VP8 codec that Google acquired from On2 Technologies.

As even more devices take advantage of H.264 video, we can expect that number to increase even more. Until we see broader adoption of device with hardware acceleration for a competing video format, it’s pretty clear that H.264 has won the codec war — at least in the short term.

Web Design Trends in 2012

It’s that time of year again, where we look into our crystal ball to see what will be the hot trends in web design for the upcoming year. It’s no secret that trends come and go, with some hanging around longer than they should. (Yes, splash page, I’m talking about you.) But trends are a necessity in the development and growth of our craft. Trends are born, improved upon, and often spawn other trends. So as a web designer, when you apply trends to your projects, challenge yourself to expand upon them and make them your own.

As you read this article, keep in mind that the shift in trends from one year to the next may be subtle, and you will probably recognize some of these trends already. But it’s our estimation that the concepts we mention below will grow and become even bigger in 2012.
1. Responsive Web Design

I believe eventually, we’ll all stop talking about responsive web design – not because it will go away, but because it will become what’s expected. However, I don’t think this will happen in 2012. It’s still too new of a concept, and there are many web designers that are not familiar with it at all.

320 and up boilerplate – responsive design

The continued introduction and adoption of more an more mobile devices is what will make 2012 the year of the responsive web site. Web designers and developers will move to the use of fluid layouts instead fixed width, and media queries will find their way into many more stylesheets – allowing more sites to easily be viewed across multiple screens sizes and devices.
2. Fixed-Position Navigation

We have all run into this technique at some point, mostly on personal websites or individual blogs. I have seen a large drop in this trend during 2010-2011, but a resurgence has been appearing over the last few months.

If your website doesn’t have a lot of main navigation then you only need to provide a few small links. So why not keep these visible to each user at all times? This can dramatically improve website performance and even blend into the overall page layout with ease. The concept idea is to keep the navbar and internal links/logo locked in place as your visitors scroll through the content.

Ryan Scherf main portfolio page

jQuery has allowed for very rapid prototyping of this effect. And even without JavaScript enabled you can apply some fancy CSS code to replicate the sticky nav effect. Most of the static navigation bars in 2011 have followed the user’s movement around from page to page. Yet in the example below Simon Wuyts has taken fixed navigation into a new level.

net onwerp web design – fixed position menu

You never consider keeping your webpage content set into a slideshow-like panel for easy display. Not only does this remove the worry of screen resolution, but the navigation system is easy to work with and carries over nicely into mobile browsers. You may seriously consider this technique and all the major benefits during a 2012 site layout re-design.
3. Circles

This trend has actually been noticeable in web design for a bit, yet it recently had died down to lay low for a couple years. During the web 2.0 boom designers were focusing more on desktop-based trends such as drop shadows and rounded corners. But with CSS3 it’s now easier than ever to create these fancy box effects.

Additionally you can design circles and shapes without the need for any images. The impact of these features has caused designers to look at photos in another light entirely. I constantly check out portfolios for web designers and have noticed a dramatic increase in circular-shaped elements. These archetypes can be setup as navigation links, footer icons, or even displaying important portfolio works as seen below.

Mickael Larcheveque personal portfolio website

But the most extreme examples aren’t always the best. Circular shapes are smooth and encourage eye contact from your visitors. Use these to single out specific areas in your design such as listings to helpful resources and pages. Just the shape itself is pleasing enough to be dropped into the background and still hold a delightful effect.

Column Five Media footer area
4. Big Vector Art

The goofy oversized mascots you can spot throughout websites have begun to claim a brand of their own. Just a few years ago you could not find very much illustration work tied into web branding. But the quality of individual designer’s talent has improved greatly. And I can think of no better marketing brand than a lovable vector-based creature.

mailman vector art for Thunderbird software

The many faces attributed to Mozilla and Firefox are just the tip of the iceberg. MailChimp is another great example which has set the bar higher than ever before. The infamous mailman monkey is featured all throughout the website and also throughout their iOS and Android apps.

Freelance Switch freelancers design blog

Additionally the small businessman found throughout Freelance Switch really sticks in my mind. There are a slew of unique vector dudes to be found in their layout. This kind of practice has adapted into a whole new realm of website aesthetics. And if the year 2011 has shown anything it’s that 2012 will be chock-full of these adorable vector logos!
5. Multi-Column Menus

Contrary to our previous example, there are times when a website consists of way too many links to handle. Reasonably the standard type of navigation gets too messy and congested unless you move links into the sidebar. But user experience testing has shown very good results in keeping core links towards the top of pages.

Neuarmy multi-column nav menu

This new year of trends offers designers a new chance at rebuilding. Ideas are often so black and white, but there is a whole realm of creativity waiting to be tapped into. Multi-column layouts are elegantly brilliant in their own regard. You can easily display numerous links to your visitors and keep this section fitted squarely around your logo.

Best Made Company home webpage

The best way to get comfortable with this style is practice. Check out some recent articles on the topic to educate yourself about trends in web navigation. Designers are eagerly jumping into the testing arena with new ideas every year. Clearly the reform of standard navigation is a big one on everybody’s plate.
6. jQuery/CSS3/HTML5 Animation

I have always recommended jQuery effects when applied in small portions. Web design must encompass the whole user experience as well as fancy aesthetics and bonus animations. Luckily advances in the jQuery library as well as CSS3 specifications allow for some really outstanding effects with much fewer lines of code than ever before.

In just this past year alone I have run into some educational tutorials to be found all over the web. jQuery is the master of frontend browser effects but unfortunately doesn’t boast 100% major support. Thus using a fallback method tied into CSS means your website is compatible with mostly all visitors and still provides an exceptional experience. I can only imagine what developers are planning for new ideas to roll out as we move closer into 2012.
7. Ribbons & Banner Graphics

This is one design element which I had begun noticing a lot more in 2011. Designers began to write simplified tutorials for creating page ribbons, banners, bookmarks, or other types of display badges. Because of the massive emergence of free information more designers have begun jumping into the trends, too.

Letter Learner App for iPhone and iPad

You would be surprised how many websites have included this style of design in just 6 short months. Beta testers often use these ribbons to classify the current release version of software and mobile apps. Additionally you’ll find banners wrapped around free downloads or featured articles in blogs. I’ve collected a few of my favorite ribbon PSD downloads below, so check them out and be sure to keep your eyes peeled for additional freebies in the coming months.

Corner Ribbon
Dark Slider with Featured Ribbon
Colorful Ribbons
Green Corner Ribbon Templates
Simple Product Box

8. Custom Font Faces

The free online font library Typekit provides a free trial for any interested web designers. With this tool you embed a bit of JavaScript which allows you to write any custom font into CSS styles. In 2011 this trend has shot up in popularity, especially among WordPress designers trying to keep their blogs unique from the rest.

Typekit was however a buggy system with very little support up until a few years ago. Now Google Web Fonts has been giving them a run for their money, and it appears to be more popular than ever! You simply go through a library of supported fonts and Google will output the code you need to include. Then you simply reference each font by name when declaring CSS font-family properties on an HTML element.

Google Web Fonts – Dynamic CSS Typography

What I find so exciting about this trend is how recently it has shot into the mainstream. It seems now even developers are creating free plugins to make custom fonts just that much easier to install. There is no uploading of fonts required, no stress involved and very little to go wrong. Bloggers should take notice of this and check out some of the alternative fonts available to them.
9. Infographics

This trend certainly doesn’t affect the overall web design, but as for user experience and content presentation infographics have blown the roof off new-age media. Never before has information been presented in such an easy-to-consume manner. Even if you barely understand the topic most infographics provide data, charts, and supporting imagery so that a 5 year old child could follow along.

Instagram infographic fun facts

Depending on the type of website you may find this trend not all too useful. It can take a lot of practice and time spent slaving away in Photoshop to perfect these works of art. Yet if you have the talent or drive to teach yourself I say go for it! Now more than ever before the Internet has become a place we can all gather and share information. Infographics have expedited this process using the World Wide Web as a presentation medium.
10. Focus on Simplicity

Ultimately the goal of any website is to get your visitors from point A to B as quickly as possible. Simple, intuitive interfaces are the way of our future. In just the past 5 years I have noticed most of the popular design trends stemming from minimalism. This idea is not ill-founded, as the lesser number of page elements to distract visitors will naturally keep them focused on their goal(s).

We can provide so many examples of this, and there are so many areas to cover. Earlier this May we covered a fine gallery of minimalist websites which pose as examples to perfection. Depending on the type of website you have there may be too many required interface pieces to coordinate a simplistic overtone.

Evening sunset over Japanese Houses

But to rearrange a layout into a clean setup doesn’t require minimalism at the heart of it all. Spend some time writing and drafting out ideas for your navigation, page hierarchy, headings, content area etc. I find that a little bit of pre-planning can go a long way towards simplifying everything.
Conclusion

These design trends are just some of the few to keep up with as we move forwards into 2012. The year is unpredictable and nobody can say for sure what to expect. I think the facts are obvious that your average web designer has been learning much quicker in recent years than ever before in history. As such we could only expect plenty of innovation and new semantics ushering us into a golden age of technology and massive Internet awareness.
About the Author

Jake Rocheleau is a social media enthusiast and Internet entrepreneur. He can be followed on twitter – @jakerocheleau His presence on the web can be found at JakeRocheleau.com.

What do programmers really do?

Computers are useless. They can only give you answers. – Picasso

Many people (including my mother-in-law) think that computers are becoming so smart that programmers will be no longer needed in the near future. Other people think that programmers are geniuses who constantly solve sophisticated math puzzles in front of their monitors. Even many programmers don’t have clear idea what they do.

In this post I want to provide some explanation to uninformed people what programmers really do:

Programmers are translators of human ideas into the language of computers.

They are a link between two worlds – human and computers. Do you think it is easy to maintain this link?

Human World Background

The problem with people is that they’re only human. – Bill Watterson

Humans are product of biological evolution and have a unique and precious organ for producing ideas for programmers – the brain. The brain is a complex combination of neocortex (unique to humans) and older structures inherited from mammals and reptiles. Older brain structures are mostly responsible for reproduction (sex) and survival (finding food or escaping danger). Neocortex evolved to support these function better, however it started to cause strange side effects – consciousness, thinking and curiosity. Thanks to these effects humans invented civilization and thousands years later computers.

Somebody could believe that after thousands years of development humans should become completely dull, predictable and rational species, but it didn’t happen – their old brain structures, complex psychology and social behavior often make people irrational, unpredictable and deceiving. In addition, humans have poor memory, strong emotions and personal interests. However, programmers don’t have choice of working with more rational species and have to work with human beigns to translate their ideas into the language of computers.
Computer World Background

Part of the inhumanity of the computer is that, once it is competently programmed and working smoothly, it is completely honest. – Isaac Asimov

A computer is the best invention of human civilization. It consist of CPU, motherboard, memory, hard drive, monitor and some other parts. Computers moved our civilization to the new level, filled our life with meaning and entertainment and compensated weaknesses of our brains. There are good chances that computers will become more intelligent than humans. (However, I am a bit concerned if computers need human programmers after it happens.)

Modern computers are completely logical, straightforward and obedient. It is pleasure to work with a computer if you know what it should do and how to instruct it. The only problem is that computers will do exactly what you tell them to do. Therefore, you should have very clear ideas and instructions for a computer to avoid feeling miserable when you see your boss or customer.
Translation Between Humans and Computers

There are three main challenges in translation:

Language ambiguity. Human language is vague, complex and ambiguous – for example: “This program doesn’t provide good user experience”. Culture, background and context affect communication and meaning. On the contrary, any computer language is exact, straightforward and context-free.
Levels of details. Humans communicate often in general terms without many details – for example: “I want this f* program work right”. It allows them to save time and energy, but cause two big problems – misinterpretation and possibility that important details are missing. And a computer requires all details – everything should be spelled out.
Thinking style. Humans often think in terms of needs, outcomes and solutions – for example, “This report should run in 2 seconds instead of 2 hours”. However, computers need algorithms – sequence of steps how to achieve desired outcomes.

In order to write good software, programmers have to overcome these challenges, understand humans and translate their ideas into the computer language.
Skills of a Super Programmer

As we can see a super programmer should have two distinct sets of skills to deal with both worlds.

Understand humans and create solutions:

Communication -ability to establish contact with humans, talk with them without alienating and even heroic attempts to share own opinion.
Meaning – extract useful information from conversations with humans, decode and make sense from it
Logic – clearing, removing ambiguity and controversy from human ideas for uncompromising reality of computers
Creativity – dig, twist and play with human ideas to create good solutions
Design – wrap programming ideas with human friendly interfaces and convenient interactions
Big Picture – know how solutions fit into world of users, business and Universe to make your program useful.

Tell computers what to do and build solutions:

Logic (again) – organize programmer’s thoughts into cohesive software ideas and instructions for computers
Technology – uncovering and understanding the black box of technology (black box for 99% of population)
Programming Languages – learn the beautiful, logical and unambiguous languages for feeding computers with programmer’s ideas
Algorithms – master the most effective ways how a computer can accomplish a task
Modeling – create abstractions and models for grasping and manipulating ideas in software code
Practices (as Refactoring, Unit Testing, Continuous Integration) – recurrent activities to keep system solid, healthy and possible to change

There is a big difference between a human-oriented and hardcore object / system – oriented programmer.
A programmer who is specialized to work with computers only is a half of the good programmer. Great solutions require skills for computers and human worlds. Connect both worlds and become a super good programmer!

2011 in review: 20 sites that took 3D to the next level

The advertising industry is always looking for new and exciting ways to promote products, and real-time 3D graphics have the potential of bringing a new level of interactivity to their customers.
1. Rome: 3 Dreams of Black

Featuring music by Rome, 3 Dreams of Black immerses the user in three amazing 3D worlds, where animals and plants come to life forming beautiful dreamscapes and users contribute with their own creations.

An interactive film by Chris Milk and Aaron Koblin, it was created by North Kingdom, Skellftae, Mirada and the Google Data Arts Team led by designer/developer Mr.doob, the man behind the Three.js JavaScript 3D engine that powers many of the projects listed here.

Although this list is ranked in no particular order, if I had to choose the best project, it would certainly be this one. A truly landmark experience that shows what WebGL can do in a web browser.
2. Nissan: The Planet Zero

An interactive 3D microsite by ROXIK using his Sharikura engine, produced by unit9 for Japanese agency ENJIN, promotes Nissan’s new eco-friendly range of vehicles.

Visitors explore The Planet Zero in search of various methods of renewable energy, all set in the neo-futuristic, zero-emission world.

Being Flash 10 based, this is the only project on this list that doesn’t use hardware accelerated graphics. But who needs technology when you have ROXIK’s magic?
3. Adidas: Adizero f50

The new Adizero F50 football shoe created by Stopp for Adidas is a great example of 3D product visualisation, something we will certainly see more of in the future.

Using WebGL to render this high-tech football boot, allows the user to change between wireframe, solid and expanded views to see how the boot is put together and read about the various features.
4. Nissan: StageJUK3D

Revealed at the launch of Flash 11, StageJUK3D allows you to configure and drive the Nissan Juke in full 3D. The first of many to come commercial projects taking advantage of the Stage3D technology in the latest version of Flash.

Created by Adobe, Nissan Europe and Digitas France and powered by the Away3D engine.
Self promotion

It’s great to see agencies bringing creativity and innovation to their own sites, leading the way and showing clients what’s now possible.
5. Nouvelle Vague

Created by French agency Ultranoir, Nouvelle Vague offers a poetic WebGL experience based on Twitter.

In a surrealist world, tweets retrieved from your selected hashtag, are carried out by flying objects such as air balloons, biplanes, zeppelins and even UFOs. The user can see the scene from any of these ships from each of the pilot’s point of view.
6. Les Chinois

The website of also French agency Les Chinois was one of the first Flash 11 projects launched this year using Away3D.

Immersive sound design and creative camera work combine with Stage3D graphics to create a futuristic scene dominated by a flying dragon creature.
Creation tools

Making 3D creation tools accessible to anyone is another exciting prospect of the future, made possible by the use of 3D technology in the browser.
7. 3DTin

3DTin is a WebGL modeller that runs in your browser, allowing the user to create 3D models using cubes and other kinds of shapes.

Models can be saved in the cloud or exported in standard 3D file formats like OBJ and Collada.
8. My Robot Nation

My Robot Nation combines WebGL, robots, and 3D printing. Users can make a robot on the site in full 3D, then have it 3D printed and shipped to their door.

You can customise your robot with different body parts, stamps, and colours. Everything happens in real time as you drag new 3D parts onto the model, rotate and place stamps, and pose their robot just right.

I would love for consumers to be able to get easy access to 3D printing. As they say, robots are just the beginning!
Data visualisation

One of the most immediate uses of 3D graphics is data visualisation. The possibilities are truly endless, just take a look at these examples.
9. BioDigital Human

BioDigital Human is an impressive 3D human body explorer with many interactive options and utilities to learn about your body.

Tools for exploring, dissecting, and sharing custom views, combined with detailed medical descriptions provide a new visual format to patients, students and medical professionals.
10. WebGL Bookcase

WebGL Bookcase is an experimental interface created by the Google Data Arts Team that aims to translate traditional media into a virtual space.

They designed a digital bookcase that’s an infinite 3D helix with more than 10,000 titles from Google Books. It allows the user to browse over the covers or search by subject, to open a 3D model of each book. Each one comes with a QR Code for downloading to your mobile and a link to its entry in Google Books.
11. CNN Ecosphere

The CNN Ecosphere Project is a real-time Twitter visualisation that aims to reveal how the online discussion is evolving around the topic of climate change.

The online representation consists of an interactive 3D globe where tweets grow into plants and trees. Conceived by Heimat-Berlin and developed and produced by Minivegas and Stinkdigital.
12. TwitterGraph

TwitterGraph is an interactive 3D word cloud visualisation which shows common friends among several Twitter users.

Developer Daniel Pettersson has also used data from last.fm to show similarities between music bands and artists in another interesting piece called ArtistGraph.
13. WebGL Globe

The WebGL Globe uses an interactive 3D representation of the Earth to visualise geographic data like world population, latest earthquakes or search volume by language.

Created by the Google Data Arts Team, the project is an open data visualisation platform for anyone to copy the code, add their own data and create their own globe.

Globe visualisations get more interesting every day. These are other good examples, using data from world flights, weather and internet traffic.
Maps

The future of digital cartography is clearly in 3D. We’ve just started to see what’s possible when maps take advantage of hardware accelerated graphics to create a more detailed representation of the world.
14. Nokia Maps 3D

Currently only supported in a few major cities, Nokia Maps 3D uses WebGL to accurately render terrain and buildings, that really come to life when you move and look around.

The experience is closer to Google Earth than Google Maps, with the freedom of a 360-degree view and adjustable elevation. Click the name of a city to go there and see it close up in all its glory.
15. Google MapsGL

Bringing one step closer Google’s idea of mirroring the real world inside your browser, the new MapsGL option introduces the power of WebGL graphics to Google Maps.

The experience is improved with 3D buildings (with shadows appropriate to the local time of day), slick transitions between imagery (like the 45-degree aerial photography views in some areas) and the ability to smoothly enter into Street View without a plugin.

To try this features out, click the “Want to try something new?” words on the lower left side of the screen.
16. Blocky Earth

Described by author Jaume Sánchez as “all the planet, one block at a time”, Blocky Earth is a voxel visualisation of your local area using both photographic and elevation data.

In close range it gives a unique view of the area that surrounds you, but only when you zoom out you can see the big picture, from the heights of the mountains to the depths of the seas. Fascinating.
Online coding

Due to the fact that JavaScript runs natively in the browser, a number of online live coding tools have emerged. These two are a lot of fun and have great potential as learning tools.
17. GLSL Sandbox

GLSL Sandbox is a WebGL application for live coding fragment shaders right inside the browser. GLSL is the language the shaders are written in, and here you can edit them in real time and instantly get the feedback.

The interface is dead simple, the results are displayed in the background while the code editor is overlaid on top. Your work is automatically saved to the gallery for all to see and build upon.

Originally created by Mr.doob, the project has attracted many developers who are creating all sorts of awesome graphic effects, render tests and even simple games. The extensive library of shaders is quickly becoming an excellent source of reference for beginners and experts alike.
18. WebGL Playground

In a similar fashion, WebGL Playground lets you type in WebGL programs and see the results on the same page. The live editor supports JavaScript code and GLSL vertex and fragment shaders, plus a handful of features that make your life easier.

The idea is to shorten the development cycle so you can spend more time on the creative part. All necessary things are added behind the scenes. Your code is automatically organised, formatted and includes syntax highlighted.

The project is still at its early days but the potential for becoming another comprehensive learning source is an exciting prospect.
Demos

Of the many demos we’ve seen this year, I’ve chosen these two because of their technical prowess and superb attention to detail.
19. Chrysaora

Chrysaora is a real-time jellyfish simulation using realistic rendering and simulation techniques. Created by Aleksandar Rodic, it demonstrates both creative talent and technical expertise.

To enjoy it at its full, make sure you check the debug console and play with the different shaders and simulation controls.
20. WebGL Water

WebGL Water by Evan Wallace, is another beautiful demo that combines advanced rendering techniques like reflection, refraction, caustics and ambient occlusion to simulate something as simple and beautiful as a pool of water.

Don’t forget to try the various interactions to draw ripples with the mouse and move the sphere across the water surface.
My own work

As a bonus, I also wanted to include these three projects I’ve worked on this year at HelloEnjoy.
21. Lights by Ellie Goulding

An interactive music experience using WebGL for the British artist Ellie Goulding and her song Lights. You can read more about the project in this Behind the Scenes of Lights feature. Produced by Tool of North America.
22. HelloRacer

A high-end interactive car simulation designed to be both intuitive and visually engaging. HelloRacer is available in WebGL, Flash 11 and Unity.
23. helloflower online

helloflower is an intuitive 3D editor that allows you to design your own flowers from a petal outline. Originally conceived for the iPad, the online version requires the Unity plugin.

Looking at the 3D sites created this year, we can see interesting trends starting to appear. Developers working in advertising, entertainment and product and data visualisation are starting to take advantage of hardware accelerated 3D graphics to deliver a richer, more immersive experience to their users. Furthermore, game and demoscene developers have also produced amazing 3D work, pushing the boundaries of what can be achieved in the browser.

But things are going to get even better. On the one side, professional 3D development tools such as Unity and Unreal UDK will enable us to create console quality graphics for Flash 11. On the other, WebGL has got a lot of momentum and a growing community, and will soon be available on mobile browsers.

Different technologies give creative teams plenty of choice to choose the right one for the job. These are very exciting times and we look forward to the year ahead.

From: http://www.netmagazine.com/features/2011-review-20-sites-took-3d-next-level

5 Ways To Guarantee Your Website Is Ready For Traffic

Copyright 2005, Rozey Gean

It’s so easy to annoy and drive away your website visitors without even realizing it. Ensuring your site is user-friendly–and not annoying–is one of the most important factors in creating a successful online presence.

To guarantee your website is ready for traffic, consider the following 5 points before kicking your advertisements into high gear:

1. Remove any “under construction” signs.

People are visiting your website because your promotional message triggered their fancy. Nobody wants to be directed to a site that holds a welcome message and a sign that states, “under construction.”

Frankly, sending traffic to unfinished website only defeats the purpose of advertising in the first place.

The idea is to cater to visitors, as long as possible, in hopes of getting them to join your list or to buy. Neither is possible when you’re promoting a site that isn’t ready to accommodate the traffic it receives.

2. Create your subscription forms.

You can’t walk without putting one foot in front of the other. The same holds true for your mailing lists… You can’t build a list without offering plenty of sign up forms.

To prepare, place the forms in a prominent box on your web pages and offer an incentive to join.

- Know who you’re talking to and speak to them directly.
- Address the problems that your list will solve for them.
- Answer your prospect’s question, “What’s in it for me?”
- Ask them to take specific action to join.

This not only makes your mailing list enticing for newcomers, it also allows you to connect with them after they’re gone.

3. Include an easy-to-use navigational system.

The truth is, your visitors are going to be pressed for time. This is the way of the world-wide-web and the more you can do to make surfing your site — EASIER — the better!

A navigational system using understandable links or buttons that lead deeper into your site, as well as making sense to the end-user, is nothing short of surfing bliss!

If all else fails, use a site map page!

4. Work smarter… not harder. (Build it one section at a time)

If you’re creating a large site, rather than using “under construction pages” that cut off the natural surfing flow for visitors, consider building it one section at a time.

If you’re erecting a home and garden site, decide what to put in front of the public first; the home section or the garden area. Then proceed to build it.

The great thing about structuring web pages in this fashion is how nicely your website will flow, while the rest of the site is being designed offline!

5. Think community!

People like to feel as if they’re a part of something special. Your job, as a site owner, is to make this a reality for every person who visits your website.

- Be yourself and let your personality shine through.
- Offer more than a quick one-liner in your outgoing emails.
- Think relationships first – sales second.
- ASK visitors what their pressing problems are and help solve them.
- Provide adequate community tools and add to them, frequently.
- Provide tons of free information to help educate your end-users.

Every person, who is a part of a target market, shares common traits with others in that community. That’s a fact! I suggest you build your site around these shared attributes. You simply can’t go wrong with this mindset.

Before you tackle the job of website promotion, make sure your website meets all the criteria listed above to guarantee it is ready for the traffic surge it is about to receive.

Now… go forth and promote for prosperity!

5 Surefire Ways To Ruin Any Website

Owning a website gives you certain rights. For example, you have the right to plaster your URL all over the doors and windows of your SUV in hopes that someone in one of the 7 cars you pass on the way to work will get the urge to visit your website and spend gobs of money. You own the website-this is your right. You also have the right to post pictures of your family, friends, pets, and other totally uninteresting images all over your website after all it’s yours. One of the biggest rights you have as a webmaster is the right to make your website successful (and profitable) or to run it into the ground like a 737 missing both engines and landing gear. For those of you who despise online success and frown upon the wealths of cyberspace I have compiled a list of 5 ways to ruin any website.

1. Make Your Website As Cluttered As Possible

Nothing makes visitors leave quicker than a cluttered website that is hard to navigate around. So if you want people to flee from your site like it’s a rabid wolf then be sure to put as much junk as you can on the homepage. Then make the links to the rest of the website hard to find. Be sure to have lots and lots of pictures, forms, banners and pop-ups as well. All the relevant information should be well hidden, and the main focus should appear to be the countless programs you want visitors to sign up for. That should keep any pesky visitors from ever coming back.

2. Never Update Your Website

If someone were to visit your website today and then come back 6 months from now they should see the same information. Nothing should be updated. This will let them know that you care nothing about the website and that you have nothing new to offer them. The next time they see a listing for your website they won’t even bother to visit. Great!

3. Never Ever Advertise

Advertising cost money and it might draw some good targeted traffic to your website. So be sure to never advertise. You can just keep promoting your website through those same tired free programs that you have been using for years. This should bring you little or no traffic, and the traffic that does come won’t be your target audience so they’re almost certain to leave without spending a dime. Awesome!

4. Always Sell A Crappy Product

Selling good products online can get you a good reputation. A good reputation can get you repeat sales and new customers. You don’t want all this hassle. So find the worst products you can and sell them exclusively. This should damage your reputation to the point where no one wants to bother buying from your site. Be sure to lie about your product too. This will further ruin any kind of credibility you may have.

5. Never Respond To Any Questions

If someone emails you with a question about your website or products on your website, Do Not Reply. Replying could be considered courteous and businesslike. You don’t want to come off that way. It’s better to just delete any emails from people who were interested enough in your website to take the time to email. Hopefully this will drive them to one of your competitors websites and out of your hair.

There you have it folks. Five great ways to ruin any website. So don’t blame me if you don’t follow these tips and you become an online success story. I’ve done all I can to try and help out. And now, if you’ll excuse me, I’ve got to write down the URL that’s airbrushed on the hood of this Ford Explorer beside me…

5 Important Website Writing & Design Conventions

This article outlines the five most important conventions for writing and designing your webpages.

Your presentation is every bit as important as your content. The best content in the world won’t ever be read if the presentation is so bad that nobody stays long enough to read it. If you maximize your website usability, your visitors stay longer, read more, and you make more sales.

If the purpose of your web site is to educate your readers and/or lead them to a specific action, (like buying something) then you should seriously consider following these design and writing conventions…

1. Start Each Page With Your Most Important Content.
2. Use Meaningful Link Text to Provide Information.
3. Write Scannable Pages.
4. Use Simple Website Designs.
5. Use Clear, Consistent Website Navigation.

1. Start Each Page With Your Most Important Content.
People are impatient; they will scan your page quickly and leave as soon as they get bored. Put your best, most important content near the top of the page.

Design your layout so that nothing pushes your most important content down past the “page fold”. That is your “Prime Real Estate” — don’t waste it. Large logos, unnecessary graphics, ambiguous headlines…. all these things are a waste of your must valuable space.

Begin each page with a summary or a short list of page contents. Be specific, and place the newest items at the top of the list or in a “What’s New” section.

2. Use Meaningful Link Text to Provide Information.
Web surfers decide in seconds whether or not your page is worth reading. When you use bland, content-neutral words for your link text, you miss an important opportunity to provide information. (Also – visually impaired web users often instruct their computer to read the link text aloud, “Click here” won’t help them.)

The words used in your anchor text should suggest what the reader will find when they click on the link, and help them decide to click or not.

* Bad: To learn about icebergs, click here.
* Better: Icebergs
* Best: Where icebergs come from.

You can make your links even more informative by following them with a blurb:

Blurbs: Short Previews of Web Pages
A “Blurb” is a short paragraph that gives a preview of the page at the other end of a link. You are reading a blurb now. If a blurb helps a reader decide to click the link, then it works.

3. Write Scannable Pages.
Offline, books and magazine articles are designed for sequential reading: You start at the beginning and read to the end.

Online text is not necessarily sequential – it relies upon smaller chunks of text, which the reader often does not read in order. So each page of your website must make sense to a visitor who did not see the preceding page, or just arrived from a search engine.

Meaningful, informative headers & subheadings, bulleted lists, and bold keywords all help readers scan the page quickly and easily.

4. Use Simple Website Designs.
Your visitors didn’t come to see your fancy graphics. They came to find information about prices or availability, they’re looking for contact information or directions, or maybe they just want some technical details…

Unless your website is about cool graphic effects, I can guarantee that your visitors don’t really care about your spinning logo or dancing unicorns, or even whether or not your menu buttons blink or change background images on a mouse-over.

Web-savvy visitors have ‘trained’ themselves to ignore ads. Anything that flashes, shimmers, blinks or dances around will not get the attention that it deserves.

The more such things you put on your page, the harder your reader will have to work in order to find what they want. Too much of that and they are gone, never to return. Use images wisely. Every image on your page slows it down, sometimes a little, sometimes a lot….
* Use smaller images whenever possible.
* For large collections of images, use an index with thumbnails that they can click if they want to see the image full-size.
* Use an image editor to reduce the file size of your images

See our “Using images in your webpages” section for more about all that ~ http://blt-web.com/web_design/using_images.html

5. Use clear, Consistent Website Navigation.
Next to pages that take forever to load (and pop-ups), the biggest complaint that surfers have is difficult to understand and/or inconsistent website navigation…
* Use the same menu on all your pages.
* Use a logical link hierarchy, with related items together.
* Be perfectly clear with your link titles & descriptions.
* Use text links whenever possible.
* If you must use image links, use the alt=”link destination” element.

A website with more than ten or fifteen pages may not need a link from every page to every other page… you can link to each section from each page, but give each section its own “Table Of Contents”.

Every page should have a link to the home page and to the site map. (If you have less than ten pages, you may omit a site map, but your home page should have a text link to every page for search engines.)

See our “Menu Design Tips” page for more information ~ http://blt-web.com/web_design/menu_design.html

Following these 5 simple guidelines will help your website be a success. With faster-loading pages and easier-to-find information, people will read more of your content and are more likely to take the action that you want them to.

To Your Success!
Tim

Additional Reading:
http://www.smbtn.com/books/gb57.pdf ~ Writing and Editing Like a Pro Entrepreneurs Guidebook #57, from Small Business Town

http://www.useit.com/papers/webwriting/ ~ Writing for the Web, Research on how users read on the Web and how authors should write their Web pages.

http://www.sun.com/980713/webwriting/ ~ Writing for the Web, by Jakob Nielsen, distinguished engineer; PJ Schemenaur, technical editor; and Jonathan Fox, editor-in-chief, www.sun.com

5 Important Tips On How To Build A Professional Website

Copyright 2006 Nikki Mhlanga

With the advent of the internet, a lot of business transactions are done online. Almost every business nowadays has a website.

Although some customers will go to the shop to buy the product from the shop, they firstly shop for what they are looking for and compare prices on line. It is now almost imperative that any business must have a website.

Whether you own a home based online business of any type, or you own a shop in your town or city, you need a website to let potential customers know that you exist and that you offer products or services or business opportunities they may be interested in.

If you do not have a website, then you are not represented on the largest and most popular medium of communication today.

What hints must you heed in order to build a professional website that will effectively promote your products or services and encourage visitors to actually buy from you?

A well presented website: A tidy and professional looking website is important. Your website is your store front, and you need to create very good first impressions, otherwise you lose potential customers.

A website that is easy to navigate: There is a lot of competition out there, and there are thousands of other businesses and websites from which customers can choose from. Customers expect an efficient and easy to navigate website where they can easily and quickly get what they are looking for.

You will need to have a clearly laid out outline of contents on your website which is easy to use and straightforward. This means that information and images of the products you are offering must be easy to find in your shopping section of your website; and they must be very clear to view. It is also important that your pages load quickly and that you have all the various options for completing an order form and paying for the products or services.

Use techniques that encourage browsing and impulse buys: Present your website in such a way that every visitor or customer is presented with an opportunity to buy more. Include product reviews or satisfied customers feedback on your products so that visitors are encouraged to buy. Include some comments about the products key benefits. If you sell a wide range of products, next to any main product, include some other complementary products which the buyer may need.

Have your contact details on your site and always be reachable: After-purchase service is very important, especially for online transactions. It is therefore critical that customers know who you are and how to contact you after they’ve made a purchase, or if they need further information about your product or service before they decide to purchase. Your contact information should be clearly visible on your site.

This will also help increase their confidence in doing business with you.  It is also important that you check your website’s emails at least once everyday in case there is a customer needing some help. Your website is your shop which operates full time 365 days so you will need to be available as needed so that you keep your business running smoothly and your customers happy. A happy customer is a potential return business for you.

Include a feedback form: It is important that you constantly improve your website or products/services, and you can achieve this by having a feedback form on your website. A feed back form gives your customers an alternative way to reach you and it also informs you about what customers think about your products and services.

For you to maximize your business?online sales, you will need a well present website that will encourage your visitors to buy the products or services you offer.

5 Common Mistakes of Website Design

Huge Mistake #1: Creating a Website with Flash — Did you know in a recent study, top internet marketers discovered that having a website created with Flash, actually decreased the response from prospects and customers by as much as 370 percent?

Here’s why: Your prospects and customers are most likely visiting your website using all types of different computers, connection speeds and internet configuration settings…

What may look great to one visitor may not even appear for another! You could very easily have shelled out hundreds or even thousands of dollars to have a website created using the Flash technology, only to find out that some of your visitors will never see it! (Not to mention the loading times can cause your visitor to close your site, never to return again.)

Huge Mistake #2: The “Internet Catalog” Approach — You see this everywhere. Good, honest and hardworking businessmen and women get online to sell their products or services, and have a site created for them that contains a link to just about everything they offer on one page. Their thinking goes along the lines of, “…well, I don’t want to leave anyone out. If they come to my site, I want to make sure I have what they’re looking for…” — This way of thinking could not be further from the truth.

Here’s why: There’s an ancient rule that goes back to the very beginning of direct-marketing on the internet, taught by the richest, most legendary and well-respected internet marketers of all time…

“When you give your prospects too many choices, they become confused and aren’t sure what to do next. Confused people never buy anything.”

Huge Mistake #3: Optimizing Your Sales Site for the Search Engines — You’ll see this taught in nearly every “internet marketing” course, manual or eBook out there… “You must optimize every page of your website for the search engines!” — In fact, this false teaching is accepted as ‘gospel truth’ so often that most web designers will offer to do this for you at no, or little extra cost…

What they don’t understand is that certain words and phrases must be either re-worded (to make it “keyword rich”) or taken out completely, just to be looked upon highly by the mighty search engines — and this could kill your sales, literally overnight.

Here’s why: When you or a hired web designer optimize your sales page (i.e. any web page designed to sell your products and services) to get a higher listing in the search engines, you’re going to have to sacrifice the pulling-power of your sales copy (i.e. written sales material) just to get those higher listings. Sure, this can bring you more traffic — but what good is all the traffic in the world, if your visitors arrive at your website and aren’t compelled enough to read why they should order your product?

For years, it has been taught that you should always try to find a “balance” of SEO (Search-Engine-Optimization) mixed with promotional copy designed to sell your products and services…

Wrong Again! — The truth is that you should never optimize your sales page for the Search Engines. Instead, you should create tiny “entry pages” for each keyword related to your product or service, (highly optimized for the Search Engines) and have them link to your main sales site! (We can show you exactly how to do this quickly and easily and get *massive* targeted traffic from the Search Engines – without ever *touching* your sales site!)

Huge Mistake #4: Having a “Graphics-Based” Website — Sure, graphics can certainly help us to visualize a particular situation or circumstance, product or service… But did you know that having a graphically-driven website can actually distract your visitor away from your sales message?

After all, your sales message (or “web copy”) is The #-1 most important factor in a website that makes money. If your visitors are paying more attention to your “professional graphics” than your sales message… you’ve just lost another sale.

Here’s why: You’ve got approximately seven seconds from the time your visitor arrives at your site, to the time they decide whether to buy your product, get more information or leave. If you’ve got a graphically-intensive website, your website will most likely still be loading past your seven-second time limit.

That’s a “customer-killer” in and of itself – however, the real reason lies within the fact that the bigger, brighter and more beautiful your graphics are, the more they will distract your visitor from your sales message. And if your visitor is distracted even for one second, it could mean the difference between getting a sale, and losing a customer.

Huge Mistake #5: Designing a Website with Zero Marketing Experience — Most web designers have no idea how to make money on the internet, with anything other than their design services. It’s not their fault – they simply have no or very little marketing and sales experience. After all, they’re just website designers…

However, having your website designed by someone with Zero internet marketing experience is like buying a street-car without an engine… it won’t go anywhere, and it’ll just waste your time and money!