2012 looks to be an interesting year. For now, forget GoDaddy’s support for SOPA; we finally won the SOPA, PIPA war against governments who did their best to censor the internet, to deny citizens basic rights or prop up ailing media companies.

The web design and development industry, though still a young one, has shown incredible growth over the past couple of years – mobile has grown exponentially from the desktop, open information, innovative methods of designing and presenting information and content, getting out of the conventional web 2.0 model and creating ground breaking web apps. With the industry growing so fast, it’s tough to predict what the future holds but we can definitely make predictions for the industry over the coming year.

1. Flash was never threatened and it is not dead.

Like it or not, Flash remains to be the best tool for interactive videos, animation and 3D online. There’s no other reason why some of the best sites in the world that demonstrate user experience and user interactivity in the truest sense are made using Flash.
Most web designers and developers sometimes lose sight of what works and what is demanded by a larger audience due to preferring what’s considered ‘cool’ in their bubble.

There’s no doubt that despite larger corporations and industries trying to test and experiement with HTML5 and CSS3, still opt for Flash as it is indeed the predominant tool of choice to create stunning and engaging experiences. Choosing HTML5 over  Flash because of hype will not be the right thing to do for many brands, and industries; stepping back and sticking to Flash would be.

Recently, renowned digital agency, B-Reel, along with Google launched a super music portal using the Chrome Web Audio API and HTML5. It shows the potential power of HTML5 and the possibilities of how it can be used to change the course of web designing in 2012, regardless, the existence of Flash is not threatened.

2. Responsive, Responsive and Responsive.

We have almost stopped considering 800×600 px resolution screen size for web viewing, right? We have and for the good. Most of the fixed width sites are made in 960px width framework and are targeted for displays equal to more than 1024px, but for how long? We, as web designers, cannot control our viewers. We have absolutely no control over the browsers they will be using to see our website, the display size they will be viewing it on, the internet connection, device, operating system and so on. RWD is the answer.

It all started with an article on AListApart written by Ethan Marcotte and took the web design industry by storm in 2011. Right after Ethan introduced the fundamental principle behind RWD, Boston Weekly changed their website to responsive, with flexible grids, media queries targeting a wide range of view ports, almost covering all mobile sizes and desktop screen sizes.

The website is not supposed to and cannot look exactly the same on every browser and device. The browsing pattern of a particular user changes when he browses on a desktop to when he uses an iPad to when he uses his smartphone. RWD allows Web designers to be able to shrink a website in size and prioritize information based on the device user and display it accordingly.

While it’s not necessary that in the future we will be witnessing all sites to go responsive, but with a good chunk of web users migrating to mobile for seeking information, it’s quite possible that Responsive Web Design continues to be one of the most talked about trends in the web design industry to look out for.

3. Big, Bigger Mobile.

This is a no-brainer prediction – mobile usage is continuously growing, the traffic reports to mobile apps and sites are astonishing and will continue to grow with more sales of smartphones and mobile devices.

Knowing that, it is very important for professionals in the Web design and development industry to start embracing mobile technologies and be ready when it becomes gigantic.

We know that the future of the web is going to be incredible. Designing the web keeping emotions in mind will connect us through it and make us more human. The web industry will continue to provide us with richer experience with designers and developers working on design and functional structures respectively. The creators of the web will continue to surprise us.

A very simple snippet of code that many will find useful. This is a very fundamental piece of code that you will learn while doing your basics in PHP.

Often, we keep changing the footer of our website for the “Copyright” year at the start of every year. This can be easily automated with just a few lines of php.

Start by converting your homepage extension to .php from .html or .html.

The function is pretty simple. Declare two variables for the initial and final year – startYear and thisYear. Every variable is defined with the symbol $ in PHP. Then we assign the year value returned by passing parameter Y in the ‘date()’ function. Then, we compare if the initial and final year are same – if same it prints just one year and if not then both separated by a hyphen.

Working on websites is no longer a task that requires notepad and a browser to complete. The previous web developer revolution was about the semantics, but now we have real technologies that are being specced out and browsers in a race to implement. Your website is no longer a static page with headings and semantic markup.

With overwhelming array of choices, where do you begin?

In this talk Divya Manian goes through what it takes to get a web development process right.

• In 2000, CSS + HTML = Web. The web was static.
• Worst problem was choosing the right element.
• In 2011, CSS + Webf6nts + SVG + Canvas + HTML + JavaScript + DOM APIs + WebGL += Web. The web is more dynamic now.
• The easiest problem is choosing elements.
• Workflow in 2011 – Photoshop > Read reddit > Use old project as starting point > Mark up and CSS and so on and so forth.
• Now, the kinds of webpages we make are more than just visuals.
• More user interactions. More impatient users.
• More complicated web pages.
• Why does the workflow matter?
  • Cut away the tedious.
  • Abstract the obvious tasks.
  • Work on what matters.
• New Workflow:
  • Developer Tools
    • Not just for CSS/ JS debugging
    • Test for devices: Opera Mobile debugger
    • Remote debugging
    • Version Control Systems
    • Learn to use one: Hg/ Git
    • Learn Git and contribute: html5boilerplate
    • Master one, be proficient in all
  • Deliberate design choices based on feature support
    • What features will you use for your webpage?
    • How well are they supported?
    • What do browsers lacking these features render?
    • What do browsers lacking ALL these features render?
  • Polyfill policy
  • What features are you willing to polyfill?
  • Which features when implemented will break on unsupported browsers?
  • BAD: Text-shadow, Gradients, Box-shadow, Border-radius.
  • GOOD: Animations, Canvas, Web Storage.
  • Study: ISOTOPE.
  • Isotope.metafizzy.co
  • Mordenizr
  • Test for keyframe 3d/2d transforms, perspective, transitions.
  • Vendor Prefixes:
  • Love to Hate
  • Use all, if you must (or use prefixr)
  • Life-Cycle of a Prefix:
  • First implementation of features in Working Drafts or, third-party features
  • Prefixless for feaures in Candidate Recommendations – wiki.csswg.org/spec/vendor-prefixes
  • Don’t use prefix for – box-shadow, border-radius, background-clip

• Preprocessors
  • They are quick.
  • Not tied to legacy syntax.
  • Catch syntax errors.
  • Abstracts the maual labor.
  • CSS-Preprocessors:
    • Sass & Compass!
    • Create sprites automatically.
    • Maths!
    • Maintainability of assets
    • Automate creation of manifest files
    • Optimize images
    • Minify script files
    • Deploy to production
    • H5bp.com/docs
    • Caniuse.com
  • Specs
  • Active learning
    • Learn to love specs
    • Dev.w3.org/csswg/ | html5.org/
    • Dev.opera.com, html5rocks.com, hacks.mozilla.org
    • Participate in spec discussions.
    • Submit suggestions to the editors.
    • Tools:
      • Jsfiddle.net
      • Jsbin.com
      • Gist.github.com
      • Dropbox folder
• Summary
  • Start mastering developer tools, test in devices, use version control.
  • Use polyfills, vendor prefixes responsibly, bootstrap with preprocessors.
  • Submit bug reports, keep up with the latest features, be an active web developer.

Believe it or not, it’s very easy to get bad, shitty clients. Here’s how:

• Use Craigslist or local business listings to find them.
• Show them old, rotten work you did for some business 3 years ago.
• Lower your rates just to bag the account.
• Offer discounts to almost make it look like they’re getting it for FREE!
• Be like a 16 year old shy girl.
• Do speculative work. <- Easiest way!
• Work for family, friends.
• Saying Yes to everything!

If you are doing that, still, you can probably write volume 2 of Clients from Hell!

If you combined the list to create the scariest thing possible, it would be to give a presentation in an airplane at 35,000 feet, near a spider web, while doing your taxes, sitting in the deep end of a pool inside the airplane, feeling ill, with the lights out, next to a rabid dog, near an escalator that leads to an elevator.

Excerpt from Scott Berkun’s Confessions of a Public Speaker.

Do job interviews and contract negotiations transform you into a babbling idiot with sweaty palms and a nervous tic? Well, even if your interview self doesn’t seem quite that frazzled, but could still use some work, take a moment to learn about the Briefcase Technique. Developed by Ramit Sethi, the “BT” focuses on the art of pre-interview preparation and works in sticky negotiation situations after you have already landed the gig.

Brad Wright’s talk from the DIBI Web Conference.

The web is moving towards real-time interaction in the browser. This talk will guide you through your options, both on the server and client side, with examples and programming tips to avoid common pitfalls.

I’m currently working on an eCommerce website for selling designer and ready made wedding cards and wanted to share about making the navigation as appealing as possible, so here goes:

Horizontal navigation systems are limited to a maximum of five navigation points or words. Studies have shown that the eye and brain cannot capture words horizontally as quickly and easily as when they are stacked in a list. Limiting the amount of menu options will help to reduce this weakness. Keep in mind that the width of your layout will reach its limit earlier than the height, however, even with vertical navigation structures we should try to limit our menu options to a maximum of seven points or words.

The site I’m working on has about 5 points and a horizontal navigation, which, in this scenario, works best as we have a rotating product slider followed by product thumbnails. The intent is to not invite users to a same level containing both menu and product slider.

Navigation is an important part of the content flow for web page elements, understanding it and the others: headers, titles, images, thumbs and so forth (more on this in upcoming posts) is important in creating and displaying a seamless flow of information hierarchy.