1.Google Analytics

Google Analytics is most comprehensive analytics tool for website owners and bloggers. It tells you how your visitors found your site, what they looked at, and how they interacted with your website.

All this information helps you plan and execute a content strategy that addresses the need of your audience at the same time helping you achieve your business goals.

2. Google Search Console (Webmaster Tools)

Want to know how Google sees your website? Start using Google Search Console (formerly Webmaster Tools). It is a comprehensive set of tools that you can use to improve your search rankings.

It can help you find out which keywords from your site are ranking higher, which keywords are clicked more often, and more.

You can submit XML sitemap to Google which will help Google discover and crawl your site better.

Most importantly, Google will notify you when there are problems crawling or indexing content from your site. Google will also show you errors and warnings with suggestions on how to resolve them.

This immense wealth of information is a must-have for all bloggers.

3. Google Custom Search

The default WordPress search is almost useless. With so much content on your blog, you need to give users a proper tool to search your site.

You have two options. You can either use a premium WordPress search plugin, like SearchWP, or you can add Google’s custom search to your WordPress site.

Adding Google’s custom search is easy, and you can design it to totally blend in to your website.

4. Google Tag Manager

Most successful bloggers use multiple analytics solutions and tracking tools to improve their sites.

These tools require you to add custom code to your WordPress site. Each of these custom code snippets basically loads an external script and it’s a pain to manage them all.

Google Tag Manager solves this problem by allowing you to manage all your external tracking codes from one dashboard. You will only need to add one Google tag manager snippet to your site and then you can manage the rest from tag manager dashboard.

5. PageSpeed Insights

Speed is one of the most important factor in user experience and SEO. Pagespeed Insights helps you find out how your website ranks in terms of speed, and what you can do to improve it.

It shows you results for both desktop and mobile. Breaking them into different sections. Each section will show you how different resources and practices are slowing down your website.

You can use one of the caching plugins like W3 Total Cache or WP Super Cache, and install MaxCDN to boost your site.

6. Google Mobile Friendly Test Tool

A great number of search traffic originates from mobile devices. Google is actively trying to improve the mobile user experience. This means that mobile friendly sites will be prominently displayed in mobile search.

Mobile Friendly tool allows you to test your site for mobile readiness. WordPress site owners can easily make their websites mobile friendly by using a responsive WordPress theme. If you do not want to change your site’s theme then you can make your WordPress site mobile friendly with WPtouch Pro.

7. Google AdWords Keyword Planner

Want to know what users are searching for? Google Adwords offers the insights into searches for advertisers with the keyword planner tool.

Using this tool, you can generate a list of keywords related to your blog and see which keywords are more often searched.

Keyword planner tool can also help you generate new blog post ideas, plan content strategy, and even run your own advertising campaigns using Google Adwords.

8. Google Insights + Trends

Google Insights offers tools to give you insights into search. You can use Google Trends, Google Correlate, and Google consumer surveys to get the data you need.

Simply enter a search term and see how it trends over time. You can compare different keywords to see how user interest developed or vanished on those topics. You can even focus on a geographic region to narrow it down.

9. Google My Business

Google My Business allows you to easily add information about your business in Google. It will help Google display your business information when a user searches for it. Google will also display your business across different Google products like Google Maps, Google Places, locations, etc.

If you provide services or run an store, then Google my business is something you cannot miss. It will not only boost your brand’s visibility in search, it will also bring you many potential leads and customers.

10. Google Docs, Sheets, Slides, Form, Calendar, Gmail

Google also offers a range of productivity apps for both desktop and mobile users. These apps include Google Docs, Sheets, Slides, Forms, Drawings, etc.

The main advantage of using Google’s productivity apps is the easy sharing on the web with full privacy control, unlimited revisions, inline comments, real time collaboration, without needing to hit the save button.

You can also get Google Apps for Work and get all these apps to work with your own branded email accounts, user control, and integrated apps for your own organization.

You can also embed these documents inside your WordPress blog posts.

11. Google Drive

All your Google Docs files are stored in your Google Drive. Each Google account comes with 16GB of free online storage. You can use this storage to save any files you want and share them across all your devices.

You can connect Google Drive to your WordPress media library for easy file sharing. Google drive is also an ideal place to store your WordPress backups.

12. Google Photos

Google Photos offers free unlimited storage for your photos. If you decide to save your photos in original quality, then it will use your Google Drive storage. For just $1.99 per month, you can buy 100 GB storage.

What this means is that you will never have to delete any photo. All your photos will be automatically uploaded to the cloud. You can easily share these photos or download them. You can use the same Google account from all your devices.

13. Google Maps

Google Maps is the easiest way to embed interactive maps anywhere on the web. There are some great Google Maps plugins for WordPress which allow you to create beautiful maps and embed them on your WordPress site.

There are countless things you can do with Google Maps in WordPress. If you run a travel blog, then you can add interactive travel maps in WordPress with points of interest markers.

14. Google Alerts

Want to get instantly notified when you or your brand name is mentioned on the web? Create a Google Alert for your brand name or keywords and get instant email notifications when they appear on the web.

Google Alerts is an important tool to use for building a strong brand image. You will probably get a lot of useless alerts from content aggregators, but occasionally you will get alerts that you could not afford to miss.

15. Google Keep

The best way to keep your blog post ideas organized is to jot them down in notes. Google Keep allows you to quickly save your notes, lists, audio notes, pictures, and drawings. It will sync up on all your devices, and you can use it with the same Google account that you use for email, photos, docs, and everything.

16. Google Fonts

Typography plays a very important role in design and usability. Google Fonts is the best place to look for free fonts that you can use in your projects.

Google Fonts not only allows you to download and use these fonts, you can also embed them to your websites and serve them directly from Google’s servers. See our guide on how to add Google fonts in WordPress themes for more details.

17. Google Hangouts

Google Hangouts offer voice and video calls, messaging, and group calls. Perfect for conference calls with your colleagues and authors, running a webinar, or just having casual conversation with friends and family.

Using Hangouts on Air, you can broadcast live conversations to the world.

18. Google Adsense

Google Adsense connects bloggers with advertisers. It is the easiest way for bloggers to make quick advertising revenue. Google matches your site with the relevant advertisers and handles the display of ads.

There are some great WordPress plugins for ad management, which allow you to easily manage and display Google ads on your website. Combine Google Adsense with your other revenue generating programs and you can easily build a top earning blog in your niche.

Bonus Tools

There are many more Google tools that are free and can be immensely helpful with your WordPress blog. Some of them are:

• Google Groups
• Google Translate
• Google News
• Google Now
• Google Bookmarks

Google is often launching new tools and services and many of them are available for free or at a very competitive price.

We hope this article helped you find some new free Google tools that every WordPress bloggers should use.

1. Always Use Close Tags

Some of tags work if you not close them but always try to close the tags. In some of fields it could be make a problem.
Wrong way

<li>Some text here.
<li>Some new text here.
<li>Your idea.

Best way

<ul>
<li>Some text here.</li>
<li>Some new text here.</li>
<li>Your idea.</li>
</ul>

2. Declare Correct Doctype

Check your code and use correct doctype at the top of your html.

<!Doctype html>

3. Don’t Use Style Per Line

Don’t use style per line. It can make your code harder. Besides it’s not looking good.
Wrong way

<p style="color: red;">I'm going to make this text red so that it really</p>

It’s better to make a style for your all css code. Like

p {
   color: red;
}

4. Add All CSS Code in </head> Tags

If you want to load your website fast, add your all css code file in </head> tags.

<head>
<title>My Favorites Kinds of Corn</title>
<link href="path/to/file.css" media="screen" rel="stylesheet" type="text/css"/>
<link href="path/to/anotherFile.css" media="screen" rel="stylesheet" type="text/css"/>
</head>

5. Add All Javascript code before </body> Tags

It’s a good practise for all developer to add javascript code before </body> tags. It’s also help your website to load fast.

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. Include All your Javascript Code in One File

Try to make a javascript file and call your javascript code from this file. It will not only make your site loading faster but also save your bandwidth.

7. Validator Your HTML Code

Download html validator plugin like Firebug. It will help you to validate your html file.

8. Always Use Lowercase Tags

Always try to use lowercase tags like div/class/attributes
Wrong way

<DIV>
<P>Here's an interesting fact about corn. </P>=
</DIV>

Correct way

<div>
<p>Here's an interesting fact about corn. </p>
</div>

9. Use H1-H6 Tags

You can change your <p> tags to <h6>. By this way, you can get some SEO facility.

<h1>This is a really important corn fact!</h1>
<h6>Small, but still significant corn fact goes here.</h6>

10. Download yslow

Download yslow. It’s created by yahoo and it’s help you to make a perfect site.

11. Internet Explorer CSS Code

Create ie.css file which load external css code for ie browser. Some of code not work in ie browser so you need to think about it.

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

12. Use Good Quality Code Editor

Below are few links:

• InType
• E-Text Editor
• Notepad++
• Aptana
• Dreamweaver CS4

13. Compress your CSS and Javascript File

Javascript Compression Services

• Javascript Compressor
• JS Compressor

CSS Compression Services

• CSS Optimiser
• CSS Compressor
• Clean CSS

14. Image “ALT” Use

Use alt in all of your image. It’s good for SEO.

Wrong

<IMG src="cornImage.jpg"/>
<IMG src="cornImage.jpg"/>

Right

<img src="cornImage.jpg" alt="A corn field I visited." />

Consider how many forms you may have filled out over the course of your Internet history. There are countless examples of these from forums, message boards, blogs, and so many more. In this article we’ll be taking a look at some great tricks to designing your in-page forms.

It is wise to consider some of the items here from an objective perspective. Although many login and registration form work well with one type of site, there is no final judgment call on what’s the “best” solution. Use your design intuition to apply bits and pieces from forms you aspire towards.

Consider Multiple Inputs

To start things off consider a small contact form from Foundation Six Web Design. Yes this isn’t a login form so it may steer a bit off topic. However, their page design is very impressive and it shows you what a little creativity can achieve.

Each of the input fields offer room for you to type personal contact info – name, e-mail, etc. The styles go far beyond ordinary, offering user input in a type of handwritten calligraphy. This type of formatting will keep your users in a state of wonder and achieve a goal of much higher design standards.

You’ll want to implement styles like these similar to all of your login pages. I certainly wouldn’t recommend sticking with the same style of input text and option/select menus. When jogging your brain for creativity, consider how each element should be layed out: plenty of space between layers, large easily-readable text, and even sidebar links to their direct e-mail line.

jQuery Login Boxes

This has been used on countless websites in the past and will surely be seen within new-age designs. Long gone are the days where standard practices would bring users onto a new page for each step of the login process. Normally this would mean a page to input your data and also a new page for processing login information.

Pixel2Life offers some fantastic insight into a new field of data input. From their homepage you can click the login link and bring up a dynamic jQuery-powered login box. This form contains an Ajax call to an external PHP script which checks the credentials of your login info and, once processed, either grants or denies access.

Going another step further the astute may notice a registration link directly below the login box. This offers a much smoother user experience for those looking to sign up for the website but unable to locate the registration link.

If a user doesn’t have an account but would like to make one, this brings them onto the registration page without any buggy page glitches. The login box would still be a viable option for accessing your own account, however allowing the option gives way for greater returns and higher volumes of new registrants.

Simple One-Page Registration Form

Another shifting paradigm we see is the lacking in such detail for new account registrations. This isn’t necessarily a bad statistic assuming users are growing impatient towards filling out data. The numbers actually suggest websites with shorter registration pages garner heavier lists of new users on a daily basis.

Sikbox offers a lightweight option for visitors to create their own search box for a website. The only requirement is your own custom domain which to provide search results for. The input fields are large, text is very simple to read and there are absolutely no advertisements to distract users from the task of building their search form!

Now this isn’t the best form to build off when creating your own registration form page for a forum or blog archive. These will, by standard definition, at least require some type of e-mail address/username combination along with a password. Some new-age web applications will generate dynamic passwords for users just to make the registration process quicker.

Of course, the trade-off here is lacking control on the user’s end to generate their own password which many people are accustomed to.

Build off Flashy Effects

One of the greatest signup experiences I’ve ever had was creating my first Tumblr account. The home page of their site offers both a login and signup form placed directly beneath each other with new CSS3 highlight/fade effects.

This systematic approach is similar regarding Pixel2Life’s jQuery login area. However, the difference with Tumblr is the network cannot offer any content to those without a blog (aside from browsing others accounts). The real benefit from tumblr is creating your own blog and following others – thus your main objective on the front page is either to create an account or log in.

There are some bugs with this system. Most notably within IE6/IE7 not supporting these new CSS properties. Also used on the home page is a system for adding label elements into form input values – basically overruling the “default” characters used for email/password boxes.

These labels fade away on focus in modern browsers such as Chrome/Firefox. But no such luck with the deprecated browsers which, as you can imagine, is quite annoying trying to re-read your own input!

10+ Examples of Beautiful Login and Registration Form Design

Below is a quick roundup gallery of some fantastic login form designs. These have been picked from around the web and include numerous forms of web applications. If you have suggestions for other sites feel free to share them in the comments section below!

While browsing the net we can find sometimes surprising solutions that are programmatically correct, but are designed in a way that most likely makes many users abandon the site because of the poor user experience.

If our forms are designed well, we will be able to not only please our users but also the backend team who can deal with much less user input errors. Thus, in this article, we’re going to have a look at how we can minimize user input errors and still keep our users happy.

Anticipate User Needs

Websites and applications have different user bases & goals, and even the same location can host many forms that collect different kinds of data, just to name the most frequent ones:

• Login forms
• Registration forms
• User profile forms
• Newsletter signup forms
• Checkout forms
• User surveys
• Contact forms
• Comment forms
• Search forms

All these form types require different things. When designing a checkout form it’s crucial to credibly assure users about security, while in the case of comment forms it’s a good idea to add emojis or other methods that enable users to express their actual mood.

However even similar form types may need to be designed differently, as all sites have their unique user base. Before embarking on the design process, it’s always a good idea to anticipate what our users need, and design accordingly.

Example: Social Logins Targeting User Needs

Codepen‘s login form contains three social logins with Github at the top. This choice would be unreasonable for most sites.

But it’s perfect for Codepen, as their user base consists of developers, many of whom will want to login with their Github accounts, or connect their development accounts with each other at once.

Think Mobile-First

Mobile and desktop users have different needs, but as completing forms is a much bigger challenge on a mobile screen, using hand gestures than on a physical keyboard, a mobile-first approach can take us further when we want to design usable forms.

Moreover, many form UI patterns that work well on mobile will work well on desktop as well.

Example: Tappable Controls

High quality mobile forms cannot be imagined without visible controls on which mobile users can easily tap with their fingers.

The newsletter signup form of the web design conference An Event Apart adapts to the way mobile users access the screen – it contains two easy-to-tap input fields and a fingertip-sized button.

The text input fields are higher as usual so that mobile users can easily tap on them, and the big, orange button with a tick icon further encourages users to submit the form.

The desktop version of the site uses the same form design, as it also looks good and works well on larger screens.

Example: Expendable Input

When designing forms for mobile, it’s always important to consider how we can minimize the space we use. The expendable input UI design pattern has become quite popular lately, and it works especially well on mobile.

Booking.com leverages this pattern in the search form on its mobile site. When the user taps into the search field it expands in order to leave more space for gestures, and a select list with recommendations also appears below it.

When the user taps out of the field, it shrinks, and the extra information disappears.

Example: Morphing Button

Morphing buttons take the expendable input pattern one step even further, as users first see a button, which then morphs into a form when they tap on it.

The screenshot below is from The Startup’s brilliant article on innovative form design, which presents many other creative solutions as well.

Facilitate Input Take-In

Lengthy forms tend to deter users. The best we can do is to only ask for the input we really need. This is not only important from a user experience perspective, but users can also hesitate to give out too much personal information because of privacy concerns.

Sometimes, however, we still have to go along with longer forms. In this case it’s a good idea to slice them up into smaller chunks, and serve the chunks as successive screens.

Many e-Commerce sites (e.g. Amazon) use this solution in order to reduce cart abandonment rates.

If we want to ease completing form fields, the rule of thumb is to reduce both distractions and user actions as much as possible.

Example: Personalized Input Picker

Different content pickers, such as date pickers or color pickers, don’t only make it easier to take in the right input, but they also make the form more attractive, and significantly reduce user errors.

The Todoist list-taking app gives personalized hints inside its date picker when the user hovers over the days.

For instance on the screenshot below, the user can see that for Aug 31 she already has 2 due tasks, and can take this information into account when deciding the right date for tasks. It’s an excellent idea for an app where productivity is the user’s main concern.

Example: Drag-and-Drop Input

Drag-and-drop designs usually work well with file upload fields, especially where users are supposed to upload images.

They probably don’t reduce user actions that much compared to the ordinary Upload A File button, but they make it much easier to choose which file the user wants to upload, therefore reducing the chance of submitting a wrong file.

WordPress.com provides an elegant and intuitive drag-and-drop user input interface in its post editor form. The little thumbnails and the visual representation of the already uploaded files further help users quickly execute the upload.

Example: Overlay to Remove Distractions

If users are distracted while completing our form, they are more prone to errors, and also get annoyed more easily

Content overlays are a great alternative to minimalist form design. They are used by more complex sites that want to display different kinds of information on the same screen.

On the screenshot below, you can see the desktop version of Booking.com. When users hover on the search form the rest of the content gets covered by a greyish overlay to help them keep focused on the form filling process.

Give Feedback to Users

Giving the right feedback at the right time can significantly improve user experience.

In form design, there are two kinds of user feedbacks:

1. Feedback given before form submission – in order to reduce errors andform abandonment rates, such as progress trackers, instant input validation that immediately rewards users for the correct input, or helper tooltips
2. Feedback given after form submission – in order to let users know they committed an error, such as error messages

The kind of user feedback our users need highly depends on the characteristics of our target audience, and the goal of our site.

Example: Progress Tracker

Forms longer than one page, such as surveys and most e-Commerce checkout forms can take leverage of the progress tracker design pattern. Progress trackers give an instant visual feedback to users about their status, and encourage them to move on with the process.

The SnapSurveys survey creator web app shows a little progress tracker right above the submit buttons so that users can naturally catch sight of it.

he progress tracker doesn’t use any labels, but the way it’s designed makes its goal clear – the number of circles indicates the number of steps, the already executed steps becomes blue, and users can easily see how many steps are still ahead of them.

Example: Real-Time Validation

The Body Shop cosmetics retailer uses real-time validation on its User Profile form to eliminate errors and improve the UX of the form completion process.

Inputs are checked while users complete the form, and the right and wrong answers are immediately indicated by easily distinguishable icons a little bit further on the right but still in the visible area.

Example: Expressive Tooltips

Understandable microcopy is also an essential part of successful user feedback in form design. By definition, the microcopy of a website consists of small chunks of text used in different elements – labels, buttons, error messages, tooltips, etc.

In its login form, the Barclay’s banking group replies to the questions users potentially may ask with the help of well-designed tooltips that include easy-to-understand microcopy.

The tooltips are hidden behind little ? icons not to distract users who know how to complete the login form, but to be always present for users who are unsure.

Some of the tooltips even contain a little visual of an annotated debit card so that users can easily find the data they have to enter into the login form.

In terms of web development, the most remarkable manifestation of this shift is the emergence of a new field—user experience (UX) design.

User experience design grew out of web design, and while still too many people thinks it’s just a new shiny name for the same old thing, UX design does indeed need a different mindset, a broader methodology, and a handful of new tools.

As there’s a high demand for talented UX designers, in this article we’ll have a look at what UX design is, and what you need to know if you want to become one.

What’s UX?

There are three concepts that are frequently used interchangeably: user interface, usability, and user experience—however they’re not the same thing.

Probably the most important thing to know is that UX is not UI; on this websiteyou can download a “UX is not UI” poster in different sizes, just to keep a reminder for yourself. Let’s quickly see a mini-glossary of these three terms.

User Interface (UI)

A set of visual elements that allow users to interact with a website or an application, such as buttons, icons, navigation elements, tooltips, user profiles, etc.

Usability

A qualitative measure of a UI that estimates its effectiveness. According to the Nielsen Norman Group it’s defined by 5 components: learnability, efficiency, memorability, user errors, and user satisfaction.

User Experience

The sum of the postive and negative emotions and attitudes a product invokes in a user. The goal of UX design is to create as good experience in users as it’s possible by making simultaneous use of multiple fields, such as visual design (UI design), business analysis, marketing, content strategy, user testing, engineering, and others.

If you are interested in how practicing UX professionals define user experience, the User Testing Blog has a great post in which they asked 15 professionals what UX design really means.

On the screenshot below you can see one of these definitions, but the others are also worth having a look at.

So how UX design is different from web design?

Do you remember the time when most website were static? And then dynamic websites, offering a two-way communication, began to appear? The same thing has happened in the field of design.

Web design is more of a one-way communication channel, the artwork of the designer, if you will. UX design puts human-computer interaction into the focus, and makes designers regularly analyze and reevaluate their designsbased on the measured success of this two-way communication.

Apart from creating visually appealing designs, UX designers are also supposed to take user needs and business goals into consideration. They need to be aware of the constantly changing context in which their design exists.

Job responsibilities & deliverables

The job responsibilites of a UX designer are not set in stone, and highly depend on the needs of the particular company.

Smaller organizations may look for someone who concurrently performs the tasks of an UI and an UX designer (usually advertised as a UI/UX designer), while bigger companies may further segment the field into the roles of UI designer, UX designer, interaction designer, customer experience (CX) designer, and others.

Generally, a UX designer is responsible for the operation of the UX process. According to UX Mastery, this process consists of the following 5 key phases:

1. Strategy Phase – deliverables: documents detailing the priorities, long-term goals, and resources of the organization, and the measurements of success
2. Research (Discovery) Phase – deliverables: user interviews, user surveys, competitor researches, etc.
3. Analysis Phase – deliverables: personas, scenarios, storyboards, user flow, etc.
4. Design Phase – deliverables: moodboards, wireframes, mockups, prototypes, etc.
5. Production Phase – deliverables: high-fidelity design, content and digital assets.

The phases can overlap, and as it’s the user who is at the core of UX design, each phase needs to be validated by relevant user feedback, such as usabilitiy testing, A/B testing, and others.

Note that many organizations use the Agile workflow in UX design as well, so more often than not the UX process is implemented in an iterative way (with frequent beta releases).

In 2015, The Nielsen-Norman Group conducted an interesting research among UX designers about the deliverables they regularly ship, and they found a great variety. You can see the 11 most frequently produced UX deliverables on the chart below.

Skills & qualifications

Although UX designers come from varying backgrounds, such as graphical design, product design, business, marketing, or psychology, there exist specific UX-related degrees as well.

Some job ads require bachelor (rarely master) degrees, especially for senior positions, but if you have the right skillset and some practice (and a good portfolio) as a designer, you secure a UX designer job without a degree as well.

In addition, you can choose from many UX-related online courses where you can also acquire the knowledge you need.

To be an UX designer, you need to be able to use different tools that are used in the UX process, most importantly design and prototyping applications, such as Sketch, Balsamiq, Axure, Omnigraffle, Invision, or Adobe Illustrator. You don’t need to know all of them, but it’s crucial to be proficient in a few.

Having a strong understanding of web technologies and principles, such as design principles, mobile and desktop usability, native app experiences, web accessibility, and others, is also an indispensable skill.

Whether UX designers should need to know to code or not is a debated topic, however most job ads do require a basic knowledge of front-end development, i.e. HTML, CSS, and JavaScript.

Finally, user experience design is a field where soft skills, such as problem-solving, communication and collaboration skills, are also a real asset.