Google Web Designer HTML5 Tool is Updated

Originally, this application was launched in September 2013 and it is marked as one of the largest update since the release. Users can download this software for free. With this application, designers can see and tweak the code behind the design tools and can experience amazing designing experience.

The association says that ads built with Web Designer have now been seen over 2.5 billion times. The infancy of users (72%) are outward of a U.S. and 20% are returning users.

Google Web Designer HTML5 Tool

Google always put a concentration for Web Designer on producing interactive ads. And while a apparatus offers a series of ad-centric features, there is zero that would stop we from regulating it to develop any other kind of content, as well. If we wish to build ads with Web Designer, though, a new chronicle now facilities a significantly deeper formation with that service, too. You can now tell your creations directly to DoubleClick Studio, for example, and those ads are automatically tagged with a right account, advertiser and debate information.

Google’s AdWords use for advertisers now also supports HTML5 ad creatives from Web Designer. This outlines a initial time AdWords can hoop HTML5 ads. Google also says that Flash ads that are uploaded to Adwords will be automatically converted to HTML5 now, too.

While that’s good for advertisers, other users will expected conclude a further of a series of new animation collection to Web Designer more. The group reworked a animation timeline in a collection to now embody facilities like animation scrubbing, timeline events and automobile keyframing, which should make it utterly a bit easier to build animations inside a tool. The group also combined a few new 3D features, that should make a animations some-more interesting, too.

Other new facilities embody an formation with Google Drive to make it easier to share Web Designer files with others, as good as integration with a CodeMirror content editor. On a some-more technical side, a group rewrote any member in a application as a web component. This includes things like galleries, maps and YouTube embeds.

Developers can easily create more interactive and animated content with Google Web Designer HTML5 Tool after its update. Google Web Designer HTML5 Tool is announced by Google, this week. After this update, developers can easily develop more interactive and animated content and can also bring tighter integration with AdWords.

So Download and Enjoy!! Download

 

IE compatibility issue? add X-UA-Compatible Meta Tag

What is “IE=edge” and why should we add?

“IE=edge” will instruct browsers to use the latest version of IE. Also note that individual user settings in IE settings may override X-UA-Compatible content setting, forcing pages to render in compatibility mode.

However, “IE=EmulateIE8″ will override user settings and is one way to get past that issue and force IE 8 rendering mode.

Designating “IE=edge” is the best practice because it ensures Internet Explorer uses the latest engine. The most current Internet Explorer version includes the latest security updates as well as feature support. The current version is also the fastest version.

Add following meta in head section of the web page

The most common way to designate which version’s compatibility mode to use is including a X-UA-Compatible META tag in the page’s head. This is done using an http-equiv META tag, specifying “X-UA-Compatible” and the content to the IE version. Setting the version to ‘edge’ tells Internet Explorer to use the latest engine to render the page and execute JavaScript.

Please note that “It has to be the very first meta tag in the head (but can be after the title tag)”

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Do not use Chrome=1 Info for IE, Google Chrome Frame is no longer supported and retired as of February 25, 2014, more details are at developer FAQs.

 

What is viewport meta tag?

The viewport meta tag allows you to tell the mobile browser what size this virtual viewport should be. This is often useful if you’re not actually changing your site’s design for mobile, and it renders better with a larger or smaller virtual viewport.

Without viewport your device uses a virtual viewport which by default is effectively a zoomed out version of your website, this is around 980 px on iPhone and 800px on andriod. As soon as you set the viewport and disable this zooming out, the device treats the website as it should and measures out at around 480px wide or 320px depending on device and orientation etc.

Full resource here below, my advice is that whenever your working with responsive & mobile, always set the viewport first. It is the best way to normalise device zoom and ensure your site is shown using an actual device width as opposed to any virtual widths.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The viewport meta tag supports a handful of other properties for the “content” attribute:

Property Description
width The width of the virtual viewport of the device. Enter a
number (pixels assumed), or the keyword “device-width” to
set the viewport to the physical width of the device’s screen.
height The height of the virtual viewport of the device. Enter
a number (pixels assumed), or the keyword “device-height
to set the viewport to the physical height of the device’s screen.
initial-scale The initial zoom of the webpage, where a value of 1.0
means no zoom.
minimum-scale The minimum level the user is able to zoom out of
a webpage, where a value of 1.0 means the user isn’t able to at all.
maximum-scale The maximum level the user is able to zoom in on
a webpage, where a value of 1.0 means the user isn’t able to at all.
user-scalable Sets whether the user can zoom in and out of a webpage.
Set to yes or no.

CSS3 color formats

CSS2: Color formats

  • Hex format – #cccccc
  • Shorthand hex format – #ccc
  • rgb() format – rgb (red, green, blue)
  • Named colors – white, red, blue, etc

CSS3: New color formats

  • HSL – hsl(hue, saturation, lightness)
  • CMYK – cmyk(cyan, magenta, yellow, black)
  • HSLA – hsla(hue, saturation, lightness, alpha)
  • RGBA – rgba(red, green, blue, alpha)

HSL

  • HSL stands for Hue, Saturation, Lightness
  • A format that is easier for humans to understand and manipulate
  • HSLA – hsla(hue, saturation, lightness, alpha)

Responsive Images

Responsive Images

There are various way available to make images responsive, like with JQuery, media-queries, <picture> tags, but I think below is the best and easiest way to make image responsive.

img {
border: 0;
width: 100%;
display: block;
max-width: 100%;
height: auto;
}

Above way will work in supported browsers, images will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.

Table sorter

I come across excellent Table sorter jQuery plugin, with good examples and excellent documentations.

Table sorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

I liked this because it’s multi-column sorting and supporting almost all browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)

Check this out URL: http://tablesorter.com

 

List of Tablet and Smartphone Resolutions and Screen Sizes

As the desire to style sites or applications for a particular device, there will be some aspects of those devices you’ll need to know in advance. Media Queries in CSS3 allow for the styling of specific devices based on attributes like screen resolution and orientation.

Below is a list of nearly 50 of the most popular devices, along with their resolutions and display sizes.

Manufacturer Model Screen Size Resolution Type
Acer Iconia Tab 10.1″ 1280×800 Tablet
Amazon Kindle Fire 7″ 1024×600 Tablet
Apple iPad 9.7″ 1024×768 Tablet
Apple iPad 2 9.7″ 1024×768 Tablet
Apple iPad 3 9.7″ 2048×1536 Tablet
Apple iPhone 3GS 3.5″ 480×320 Smartphone
Apple iPhone 4S 3.5″ 960×640 Smartphone
Apple iPhone 5 4″ 640×1136 Smartphone
ASUS Transformer TF101 10.1″ 1280×800 Tablet
ASUS Transformer Prime TF201 10.1″ 1280×800 Tablet
Barnes & Noble NOOK 7″ 1024×600 Tablet
BlackBerry Playbook 7″ 1024×600 Tablet
BlackBerry Torch 9800 3.2″ 480×360 Smartphone
BlackBerry Torch 9810 3.2″ 640×480 Smartphone
Colby Kyros 7″ 800×480 Tablet
HP TouchPad 9.7″ 768×1024 Tablet
HTC Amaze 4G 4.3″ 960×540 Smartphone
HTC Evo 3D 4.3″ 960×540 Smartphone
HTC Flyer 7″ 1024×600 Tablet
HTC Sensation 4G 4.3″ 960×540 Smartphone
HTC Thunderbolt 4.3″ 480×800 Smartphone
Lenovo IdeaPad A1 7″ 1024×600 Tablet
Lenovo ThinkPad 10.1″ 1280×800 Tablet
LG G2x 4G 4″ 800×400 Smartphone
LG G-Slate 8.9″ 768×1280 Tablet
Motorola Droid BIONIC 4.3″ 540×960 Smartphone
Motorola Droid RAZR 4.3″ 540×960 Smartphone
Motorola Droid Xyboard 10.1 10.1″ 1280×800 Tablet
Motorola Xoom 10.1″ 1280×800 Tablet
Nokia Lumia 900 4.3″ 480×800 Smartphone
Samsung Brightside 3.1″ 240×320 Smartphone
Samsung Epic 4G Touch 4.52″ 800×480 Smartphone
Samsung Exhibit 4G 3.5″ 480×800 Smartphone
Samsung Focus Flash 3.7″ 480×800 Smartphone
Samsung Galaxy S 4G 4″ 480×800 Smartphone
Samsung Galaxy S II 4.52″ 800×480 Smartphone
Samsung Galaxy S III 4.8″ 1280×720 Smartphone
Samsung Galaxy Tab 7″ 1024×600 Tablet
Samsung Galaxy Tab 7.7 7.7″ 1280×800 Tablet
Samsung Galaxy Tab 10.1 10.1″ 1280×800 Tablet
Samsung Gravity Smart 3.2″ 320×480 Smartphone
Samsung Sidekick 4G 3.5″ 800×480 Smartphone
Sony Tablet S 9.4″ 1280×800 Tablet
T-Mobile MyTouch 4G Slide 3.8″ 800×480 Smartphone
T-Mobile SpringBoard 7″ 1280×800 Tablet
Toshiba Thrive 10.1″ 1280×800 Tablet

Top SEO Tips and Techniques

SEO Tips and techniques

I have read many articles about SEO tips and techniques, most of them are very basic, I have summarised them and list down Top SEO Tips and Techniques.

  1. Use correct Title-Tag
  2. Use correct Meta-Description
  3. Use Correct Meta-Keywords
  4. Provide robots.txt and sitemap.xml
  5. Headline-Tags
  6. Page-Content
  7. Images
  8. Domain
  9. Path/Page URLs(/)
  10. Social Media
  11. Optimize page load time of your site

Use correct Title-Tag

The title tag of any page appears at the top of browsers. While this is important for user experience, this indicate people about the page name or relevent content/products etc.

Best Practices

  • Use single tag only one time.
  • Title should include all keywords.
  • Length should not be greater than 65 characters.
  • Title should not contain more than 15 words.
  • Often title is used as anchor text
  • Title is shown in title bar and browser tab
  • Title should be unique for every single page.

Use correct Meta-Description

Meta Descriptions, which are HTML attributes that provide brief explanations of the contents of web pages, Meta Descriptions normally used by search engines on search result pages to display preview snippets for a given page.

Best Practices

  • Use single tag only one time.
  • Should reflect the content of the page.
  • It’s highly recommended to place your keywords in the description.
  • Meta-Description should include all keywords.
  • Length should not be greater than 150 characters.
  • Meta-Description should not contain more than 30 words.
  • The description has no effect on Ranking.
  • Description should be unique for every single page.

Google announced in September of 2009 that neither meta descriptions nor meta keywords factor into Google’s ranking algorithms for web search. Google uses meta descriptions to return results when searchers use advanced search operators to match meta tag content, as well as to pull preview snippets on search result pages, but it’s important to note that meta descriptions do not to influence Google’s ranking algorithms for normal web search.

Use correct Meta-Keywords

Identify top used important keywords from your content of the page and use those as a keywords. Now most of Search Engines (Inclduign Google) are not consider keywords for ranking due to too much spam.

Best Practices

  • You should only use keywords which can be found in the content of the page
  • Don’t use more than 10 of them and write them all lowercase.

Provide robots.txt and sitemap.xml

Robots.txt is a text (not html) file you put on your site to tell search robots which pages you would like them not to visit. Robots.txt is by no means mandatory for search engines but generally search engines obey what they are asked not to do.

XML sitemaps are key to instructing Google and other search engines the page structure of your site, how often page content is updated, and when new content is added to the site.

Best Practices

  • Use Robots declarations to control Search-Engine access.
  • Offer a sitemap and submit it with Google Webmaster Tools.

Headline-Tags

Headline tags are, in many cases, used to size text on a web page. Technically, headline tags should be used to convey importance of the text. there is six types of heading tags, <h1> to <h6>

Best Practices

  • Use headlines to structure your content.
  • Use H1 only one time.
  • H1 should include all keywords.
  • Use H2 and H3 tags.

Page-Content

The content of your website is important for the search engines as they consider your website’s relevancy and importance based on both meta tags and content in relation to the important keywords etc.

Best Practices

  • Offer unique content on your page.
  • Prevent Duplicate Content.
  • Write your content in a clear and natural style.
  • Images should always have alternative texts.
  • Mention your keywords a few times.
  • Keep the links to a reasonable number (fewer than 100).
  • Make sure your code is semantic and valid.
  • Optimize page load time of your site.
  • Use microformats to mark up reviews, addresses etc.

Images

Would suggest use very less and relevent images untill your page require and follow below points.

Best Practices

  • Use the keyword(s) in the file name
  • Create descriptive alt text
  • The right anchor text
  • Make sure the image matches the content
  • Do not use heavy images unnecessary, comprais it as much you can

Domain

Google tends to give weight to keywords in the domain name. This increases the importance of selecting a good name. When choosing a domain name for SEO purposes, consider below points:

  • Domain should include all keywords.
  • Don’t use IDN domains (domains with special characters).
  • Use hyphens instead of underscores to seperate words.
  • Your domain should be older than 2 years.
  • Selfhost your domain to improve authority.

Path/Page URLs(/)

  • Try to keep the path short.
  • Don’t use dynamic parameters.
  • Use hyphens instead of underscores to seperate words.
  • Words in the path should be lowercase.
  • Path should not go deeper than 3 levels.

Social Media

  • Register your brand name on the major social channels
  • Distribute content via your social channels
  • Display your social media “connect” buttons on every page of your website

Optimize page load time of your site

Google offers an official Starter Guide focussed on on-page rules you should follow to optimize your page for search engines. there are many way to check your page load time and reasions, like..