Google Web Designer

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads. It has a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented. However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically.

The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device. There are built-in components like 360 or carousel galleries, YouTube video embedding and more. A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

Google Web Designer is currently in beta status and it is available for both Windows + Mac.

Google Web Designer

https://www.google.com/webdesigner/

CSS Preprocessors: getting started with LESS and Sass

You probably have heard of LESS, Sass, Stylus, and others but may not have had a chance yet to figure them out. Here’s a very brief overview…

Why should you be using one of these?
CSS Preprocessors exist to help make your CSS more dynamic. They use their own languages, albeit all rather similar, to do the same things. They make CSS better 

  • Retain browser compatibility
  • Allow for the creation of variables using reusable CSS properties
  • Allow for better code by making it more scalable and modular
  • Introduce parent references, math, mixins, nesting, and error reporting

Which one should you use?
There is no bad choice. Like with anything else in programming other factors are the drivers here. Do you use Ruby? Then you will probably gravitate towards Sass. Are you a heavy Bootstrap user? Then consider looking at LESS or Stylus… Research and see which works for you.

Useful links to get started

  • LESS
    • LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functionsLESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

  • Sass
    • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
  • Stylus
    • “Expressive, dynamic, robust CSS”
  • SimpLESS
    • “The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”
  • WinLESS
    • “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”
  • nib
    • Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

Getting started with HTML5: Three steps

Even though it is unfinished standard you can and should get started with HTML5 and it is more easy than you may think…

The new Doctype
Is as easy as it can get. Just replace
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">


 with
< !DOCTYPE html>
< html>
and you’re done. Simple.

Video
The format wars are being fought rather publicly these days and the best  part is that it should have little to no effect on you. The < video> tag is able to hold more than one SRC. So your browser can roll down through the options until it finds what will work. Again, simple. The best place to learn more is here: http://camendesign.com/code/video_for_everybody where they have loads of samples such as:

< !– Video for Everybody, Kroc Camen of Camen Design –>
< video width=”640″ height=”360″ controls preload=”none”>
< source src=”__VIDEO__.MP4″  type=”video/mp4″ />
< source src=”__VIDEO__.OGV”  type=”video/ogg” />
< object width=”640″ height=”384″ type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>
< param name=”movie” value=”__FLASH__.SWF” />
< param name=”flashvars” value=”image=__POSTER__.JPG&file=__VIDEO__.MP4″ />
< img src=”__VIDEO__.JPG” width=”640″ height=”360″ alt=”__TITLE__”
    title=”No video playback capabilities, please download the video below” />
< /object>
< /video>
< p> < strong>Download Video:
Closed Format: < a href=”__VIDEO__.MP4″>”MP4″
Open Format: < a href=”__VIDEO__.OGV”>”OGG”
< /p>

Next up, smarter forms.
Weary of validating if that really is an email address or proper URL in that field? Well now the effort is in the lap of the browser. Again, they are really easy to implement. Examples would be

Email: < input type=”email”>
URL: < input type=”url”>
Number: < input type=”number”>
Phone: < input type=”tel”>
Color picker: < input type=”color”>

Slider: < input type=”range” min=”0″ max=”10″ step=”2″ value=”5″>
etc.

Simple, no? Failure is graceful too as the fall back is to text.

Placeholder text for any of these is just as easy!

< input type=”email” placeholder=”Your email address”>

And again, the browser does the work by responding to the cursor by clearing the field automatically. 

And even better! If you need to make it a required field just add “required.”

< input type=”email” placeholder=”Your email address” required>

What if your requirements are not listed? You can build / define your own. For example if you need a credit card field – which would consist of a string of numbers ranging from 13 to 16. Your field would contain this:

 pattern=”[0-9]{13,16}”>

Needless to say there is an awful lot more such as the canvas tag and all of its potential badness and goodness but this should get you started! If you are interested in the Canvas tag there is a good cheat sheet here: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Google Gears goes the way of the Dodo

HTML5-supported offline access handles basically the same functionality as Google’s Gears browser plugin and that’s a problem. Problems are best handled with quick and simple fixes and it looks like Google has opted for just that by “letting go” of Gears.

Of course now we just need to wait for the interim for the HTML5 spec to get out and running.