Google Web Designer

What is Google Web Designer?

Google Web Designer is an advanced web application that’s built with HTML5 which lets you design and build HTML5 advertisements and other web content using an integrated visual and code interface. Using Google Web Designer’s design view you can create content using drawing tools, text, and 3D objects, and you can animate objects on a timeline. Once you’re done creating your content, Google Web Designer outputs clean human-readable HTML5, CSS3, and Javascript.

When you create advertising creatives with Google Web Designer, you can use a library of components that lets you add image galleries, videos, ad network tools, and more.

Google Web Designer’s Code view lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.

System requirements

	Minimum	Recommended
Operating system	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later	Windows® 7/ Windows 8 Mac® OS X 10.7.x or later
Processor	Intel Pentium® 4 or AMD Athlon 64 processor	Intel Pentium® 4 or AMD Athlon 64 processor
Memory	2 GB RAM	4 GB RAM
Screen resolution	1280×1024	1920×1080
Application window size	1024×768 minimum	1024×768 or larger
Internet connection	Required for initial use after download, for updates, and for help access.	Required for initial use after download, for updates, and for help access.

The Web Designer interface

Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a tool bar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.

1. Tool panel  2. Tool options panel  3. Timeline  4. Color, Properties, Components, Events and CSS panels

The workspace

In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed as they will appear in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.

View bar

The view bar lets you choose between Design and Code mode, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you’re working on.

Tools

The tool bar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.

Tool	Description
Selection tool	Select and move objects in the workspace
3D object rotate tool	Rotate objects in three dimensions
3D object translate tool	Move objects in three space
Tag tool	Create HTML tags of any type by clicking and dragging on the stage
Text tool	Add text
Shape tool	Create elementary shapes
Paint bucket tool	Modify the color of elements in your project
Ink bottle tool	Modify the line color and stroke of elements in your project
3D stage rotate tool	Change your 3D view of the project
Hand tool	Change your view of the workarea
Zoom tool	Zoom in and out on your creative

Tool options

The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.

Timeline

Quick mode

Advanced mode

The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene by scene; in Advanced mode you can animate each element separately.

Panels

The panels section of the interface contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.

Open source components and licenses

Included Software and Licenses

The following open source software is distributed and is provided under other licenses and/or has source available from other locations.

Package name	License
Webfont	Apache license 2.0
LESS – Leaner CSS v1.3.3	Apache license 2.0
GL-Matrix	The zlib/libpng license
jsbeautify	MIT license
uglifyjs	BSD license
Codemirror 2	MIT license
Chromium Embedded Framework	BSD Simplified license
NSIS (Nullsoft Scriptable Install System)	zlib/libpng license, bzip2 license, and Common Public License version 1.0
Zip Utils	info-ZIP license, zlib license
JSON CPP	MIT license
Google Fonts	Open source font licensing

A Beautiful CSS3 Animation

 

<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style>
#sweet {
position: fixed;
margin: 0 45%;
top: 10em;
}

.intro {
background-color: #fff;
border: 2px dotted #f46;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
width: auto;
height: auto;
-webkit-animation: round 3s linear infinite;
transition: border-radius 0.3s linear;
}

.outro {
background-color: #1f1f24;
margin: 0px;
border: 5px solid #c16;
border-radius: 0px;
width: auto;
height: auto;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
-webkit-animation: rounddd 9s linear infinite;
transition: border-radius 0.3s linear;
}

.intro:hover {
border-radius: 35%;

}

.outro:hover {
border-radius: 50%;
}
@-webkit-keyframes round {
0% {-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}

100% {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-webkit-keyframes rounddd {
0% {-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

100% {-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
</style>
</head>

<body>
<div id=”sweet” align=”center”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”> <div class=”outro”>

<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

 

Related articles

 

• LESS – The CSS Preprocessor, Tools, Mixins And Libraries (designresourcebox.com)
• What is your plan B when selling your Los Gatos house!? (davidmortaz.com)
• CSS3 Animation Demystified (teamtreehouse.com)
• Simple Internet Marketing Guidelines You Can Feel Good About (extra-cash-online.com)

 

The heading structure for your blog

Image via Wikipedia

The heading structure of your pages is one of the very important aspects of on-page SEO. It defines which parts of your content are important, and how they’re interconnected. Because they have different goals, a single post needs another heading structure than your blog’s homepage or your category archives. This post intends to give you the basic pointers to get your heading structure right for those three different cases.

If you’ve ever heard of this new kid on the block called HTML5, or maybe even consider yourself an expert on it, please note that this post still treats headings in the HTML4 / XHTML1 way of using headings. I’ll briefly talk about headings in HTML5 in the end, it’s a whole ‘nother ball game!

This post will cover:

1. 5 basic principles about HTML headings

2. The headings for your homepage

1. The issue of full posts on archive pages

3. Heading structure for your single posts / single pages

4. Structure of headings for your category / tag / taxonomy pages

5. Headings and HTML5

6. Conclusion: re-think your blog’s headers

5 basic principles about HTML headings

Let’s get these things straight before we do anything about our heading structure:

1. The most important heading on the page should be the H1.

2. There is usually only one H1 on any page.

3. Sub-headings should be H2‘s, sub-sub-headings should be H3’s, etc.

4. Each heading should contain valuable keywords, if not, it’s a wasted heading.

5. In longer pieces of content, a heading is what helps a reader skip to the parts that they find interesting.

Based on headings, there are tools out there that can, and will, make an outline for your content. If you were to make an outline for this article, it would look like this:

* [h1] The heading structure for your blog

o [h2] 5 basic principles about headings

o [h2] The headings for your homepage

+ [h3] The issue of full posts on archive pages

o [h2] Heading structure for your single posts / single pages

o [h2] Structure of headings for your category / tag / taxonomy pages

o [h2] Headings and HTML5

o [h2] Conclusion: re-think your blog’s headers

The most widely known, and probably also the easiest, tool capable of doing this is the W3 Validator.

The headings for your homepage

So while we can (and will) discuss some specifics in the comments, your homepage should probably have a structure that looks like this:

* H1: Blog’s name

* H2: Your blog’s tagline, if it’s “keyword-rich”; if not, all your recent posts should have an H2.

* H3: Your recent posts, or, if those have an H2, this could be used for somewhat older posts.

* H4: related content in the sidebar, like the heading of an “about” widget.

* H5: Unrelated headings in your sidebar, footer, etc.

As you can see, I differentiate between “related” widgets and unrelated widgets. It’s no use at all to have an H3 heading saying “Our Sponsors”. An H4 HTML heading saying “About this SEO blog” could be useful though, if “SEO blog” is what you want to rank for.

The issue of full posts on archive pages

Maybe you’ve seen it, maybe you didn’t yet, but this sort of heading structure creates a problem. If you’re displaying full posts on your front page, your sub headings would be H2’s, just like your post titles. That’s wrong, of course, and a good example of why we should be separating our content and markup a bit more then we’re doing now, but that’s not an easy fix. Basically, if you’re displaying a post on an archive, category, tag or home page, each H2 should become an H3, H3 should become H4, etc.

No code samples yet, but my mind is working on this now, so it might come soon.

Heading structure for your single posts / single pages

This one is simple:

* H1: post / page title

* H2’s and H3’s: subheadings and sub-subheadings

* H4: your blog’s name, and possibly related widgets

* H5: same as above: sidebars etc.

Makes sense right? The most important line on the page is the post or page title, second come the subheadings. Your blog title still has some value because, if the post is good, people will search later on for “Yoast WordPress SEO”, for instance.

Structure of headings for your category / tag / taxonomy pages

If you actually want your category and tag pages to rank, meaning you’ve given them some unique content and are making them interesting for people, the heading structure should basically be the same as the homepage, with this difference:

* H1: category / tag title

* H2’s: post titles

* H3: blog’s name

* Rest: repeat from homepage.

Headings and HTML5

In HTML5 the entire method of dealing with HTML headings changes, and while it’s a bit harder to grasp for people at first, the new system makes a lot more sense for content management systems. In short: headings and heading structures are section specific there, where section could be any part of a page. It would take too long to explain here, but if you’re interested, read the header section of Mark Pilgrims excellent Dive into html5.

Truth be told, Mark doesn’t talk about how search engines deal with HTML5 headers yet. In all honesty: I couldn’t tell you yet. Simply a case of “not enough data to tell”.

Conclusion: re-think your blog’s headers

Now it’s time for you to take some action. Go and use the W3 Validator now to check your blog’s outline. If you’ve read an understood all the above, you should now be able to determine whether your theme is doing a good job. If you’re using a premium theme or a theme that you downloaded from WordPress.org, I’d love for you to share your results in the comments!

Related Articles

• A Copywriter’s Guide to Semantic Markup (conversationmarketing.com)
• HTML5: SEO Incompatibility (mikesingleton.net)
• HTML5 structure – HTML 4 and XHTML 1 to HTML5 ❧ Oli.jp (@boblet) (oli.jp)
• HTML Basics: Headings and Paragraphs (video tutorial) (conversationmarketing.com)
• Building a Stylish Blog Design Layout in WordPress (line25.com)