In this tutorial we will be creating a login form using only CSS3 and HTML5, we will be recreating Orman Clark’s Elegant Login Form.

We will create this login form in three separate steps, the first step will deal with the HTML Markup, while the second step will focus on the positioning of the elements, finally the third step will focus the styling of the different elements. Next week we will show you how to add a sign up page to your login form so be sure to check back.

Step 1: The HTML Markup

The first thing we will add is the HTML part, this part will create the actual login form, and will consist of a container, a form as well as some inputs.

<div id="container">        <form> <label for="username">Username:</label> <input type="text" id="username" name="username"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <div id="lower"> <input type="checkbox"><label for="checkbox">Keep me logged in</label> <input type="submit" value="Login"> </div><!--/ lower--> </form> </div>

If you entered the code above correctly then your login form should now look like this:

So now that we have gotten this far let’s start styling the different input areas, we will do that by adding the following code:

/* Basics */ html, body {    width: 100%;    height: 100%;    font-family: "Helvetica Neue", Helvetica, sans-serif;    color: #444;    -webkit-font-smoothing: antialiased;    background: #f0f0f0; }

If you added this correctly your login form should now look like this:

Step 2:  Positioning the Elements

Now that we have our actual login form created let us start with the styling of the form, the first thing we will do is specify the basics such as font color and so forth, then we will position our login form in the center of the page.

#container { position: fixed; width: 340px; height: 280px; top: 50%; left:...

As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you’ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and 8. We have had a ray of hope with the shunning of Internet Explorer 6 as it has now begun to join Netscape in the graveyard of browsers past.

I understand, getting Internet Explorer to comply can be infuriating at times. And I’ve had to take a stance against developing in Internet Explorer 6, as we all should, but there is help and I hope this article points you where you need to go. One of the first steps when putting the project together is figuring out what browsers you need to develop for. If you ask the client, 9 times out of 10 they’ll say “All the browsers!”. You’ll need to take a step back and examine who their target audience is. Are most of their users tech savvy and use modern browsers like chrome? OR will their users be accessing the site, often at work, behind some sort of firewall system, and forced to endure a browser like Internet Explorer 7 or 8 due to corporate security reasons?

Chrome, while great, at times can make us see our sites through rose colored glasses. It understands HTML5 tags, has little to no compliance issues, and makes everything right the first time. A lot like a warm development security blanket. Depending on how you built your site, particularly in this case dealing with WordPress, there is a good chance that everything will not be as kosher when you view it in Internet Explorer 7/8. That doesn’t mean you’ll have to toil day and night trying to sort out all of the compatibility issues, trust me I’ve been there and done that. Then there is that eureka moment where it all starts to come together.

I will admit it did take some honest feedback and a hard look at how my code was structured and a fair amount of research on a previous project to get it to even look half way decent in Internet Explorer. Instead of sweating the details over positioning and floats, IE likes elements that stack well together. In this case it was a background image in a featured area. I was trying to wrap everything under one .container class when I should have created 3 different stackable divs with a width of 100% and margins left and right to auto. That being said, if your audience will be viewing the site in IE 8 or 7 it might be a good idea to tackle building for those browsers first, then branching out into Firefox, Safari, and Chrome.

In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers. The use of conditional tags to target specific browser cannot be stressed enough in this article. Much like media queries, the conditional tags that can be found in your <head> section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:

<!--[if IE 6]> <style type="text/css"> #browserWarning { display: block; } <h1 id="browserWarning"> Still using Internet Explorer 6? Don't you think it's time for an upgrade? Download <a href="http://chrome.com">Chrome today.</a></h1> </style> <![endif]--> <!--[if IE 7]> /*Do Something Cool*/ <style type="text/css"> #browserWarning { display: none; } </style> <![endif]--> <!--[if IE 8]> /* Do Something */ <style type="text/css"> #browserWarning { display: none; } </style> <![endif]--> <!--[if gt IE 8]> <!--> /*This is where your HTML tags for modern browsers would go*/ <style type="text/css"> #browserWarning { display: none; } </style> <!-- <![endif]-->...

The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?

New Content Tags

One of the biggest new features in HTML5 is the new set of markup tags. These tags have been designed to reflect the new state of web content, such as articles, sidebars, headers and footers. Many of these tags replace or supplement the <div> tags from HTML4 with additional functionality

Tag: <header> Page Function: Similar to <h1>, <h2>, etc., but can also contain a logo and navigation data. SEO Function: Just as with the <h1> tags, the <header> tags inform the crawlers that the contents are highly relevant to the page content. Example:

<header> <img src = “images/company_logo.jpg”> <h1>Main Header</h1> <h2>Subheadline</h2> </header>

Tag: <nav> Page Function: The <nav> tag allows designers to separate the major navigation functions from the page content. The <nav> tags typically nest inside the <header> tags at the top of a page. SEO Function: Links enclosed in a <nav> tag inform the spiders about the major sections of a site’s content. Example:

<nav> <ul> <li><a href=”/dccomics”>DC Comics</a></li> <li><a href=”/marvelcomics”>Marvel Comics</a></li> <li><a href=”/imagecomics”>Image Comics</a></li> <li><a href=”/darkhorsecomics”>Dark Horse Comics</a></li> </ul> </nav>

Tag: <article> Page Function: The <article> tag contains independent, self-contained content. Although the content in the <article> tags can relate to the other content on the page, it can also stand alone. SEO Function: Since “content is king” for search engines, the primary target for crawlers will be within the <article> tags. Example:

<article> <h1>Superman</h1> <h2>Origin of Superman</h2> <p>Rocketed as a baby from the doomed planet Krypton, Kal-El was adopted by Jonathan and Martha Kent, a childless couple from Smallville, Kansas, and named “Clark...

With hundreds of millions of users entering hundreds of billions of queries into major search engines such as Google, Yahoo and Bing, the importance of designing a site to be search-engine friendly cannot be underestimated. However, even the most experienced designers and developers can make simple mistakes that can cost their site thousands of views and (potentially) uncounted revenues.

HTML Issues

Sometimes, the “old-fashioned” methods are still the most effective. While many SEO experts have debated the degree of effectiveness of old-school metatags and how they affect search engine rankings, the common belief is that their presence is helpful, especially since spiders often crawl through much of the text content of each page they index.

Page Title

The first place most spiders crawl through is the page’s title tag. When a search engine finds a word in a title tag that matches the search terms, the results page displays that title in bold text. The bold text catches the reader’s eye and causes a nearly instinctive compulsion to click on that link. As the specificity of the search terms increase, so does the importance of the title tag.

Description Metatag

The next area of the page that the spiders will visit is the content within the “description” metatag. Unfortunately, many so-called “black hat” SEO specialists take advantage of this situation by spamming the title and description tags with keywords that are either tangentially related to the page’s content, or completely irrelevant but filled with “hot” keywords in order to boost traffic. Description content should be relevant, clear and precise.

Headlines and Subheaders

In HTML4, the header (<h1>,<h2>, etc.) tags specify the headlines and subheaders within content. Not only do search engine crawlers view the content within these tags as important, the tags also help the viewer find the the information they need without scrolling through the entire article. Wikipedia uses this technique to great effect when breaking down its lengthy and specific content.

Architecture Factors

While content is an important component of search engine optimization, the other key part lies in the design and architecture of the site itself. Spiders must be able to navigate through a site and index all its relevant pages quickly and efficiently. Also, the URLs that link pages together within the site can be used as search engine material.

Navigation

Since search engines view pages in much the same way as the least sophisticated browser, an overly complicated navigation scheme (or one that his highly dependent on user input) will hamper the spider’s ability to index pages. Most site architects believe that a site’s navigation structure should resemble that of a cake: two layers is good, three is better, four or more is too much.

Speed

Search engines also place a high priority on how fast a page loads. While Flash-heavy pages can produce stunning animations and eye-catching designs, they also slow down a page’s load speed. Search engines, like users, won’t wait forever for a beautiful presentation: they both want content and they want it now (if not sooner).

URL

Which link tells you more about a product? www.blahtech.com/product.asp?id=234 www.blahtech.com/moisture-balance-il-160.html Most developers understand how to assign a URL to a dynamic page. These links will enable the spiders to collect content and index the page much more quickly.

In a future article, we will address how the new tags in HTML5 will help with search engine optimization.

...

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible.

To do this, use the code snippet below:

//keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); //if top of element is in view if (wintop > elementPosTop) { //always in view $('#sidebar-ads').css({ "position":"fixed", "top":"10px" }); } else { //reset back to normal viewing $('#sidebar-ads').css({ "position":"inherit" }); } }); }); })(jQuery);

The above code can also be made into a JQuery plug-in and used on WordPress sites.

Here is the plug-in version of the above code:

/** * jQuery keep element in view plugin. * * @author David Gitonga * @copyright Copyright (c) 2012 DeveloperDrive * @license Licensed * @link http://developerdrive.com * @since Version 1.0 * */ (function($) { $.fn.keepElementInView = function() { var elemPosTop = this.position().top; $(window).scroll(function()...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...

It doesn’t matter whether you’re an SEO, a developer, designer, information architect or any other myriad of digital based roles, we all want the same outcome; to do the best we possibly can for our websites.

As an SEO myself, I’m interested in growing the performance of my client’s website in organic search. This is not something that I (or any other SEO for that matter!) can do single handed. We also rely on the skill of the web developer to implement and carry out our recommendations and technical requests.

With this in mind I wanted to introduce some comprehensive tips that you can inject into your projects that will improve the performance of your websites allowing them, their SEO and you as their developer maximum control and ultimately search engine performance.

On page: title tags

Fundamentally the single most important part of a page with regards to SEO is the title tag. You want to make sure you have the following covered off for maximum impact:

Each page’s title tag is editable There are no dependencies between the title, the H1 or the URL of the page Every title is unique and relevant to the page Try and keep the titles under about 65 characters which will ensure the whole thing is clearly picked up in the search result pages and seen by users

On page: meta descriptions

Although these little chaps don’t carry massive weight in terms of achieving rankings, they are still relevant:

Make sure each page has an editable meta description Each one is unique For extra punch, encourage the addition of USPs and a powerful, persuasive description. For example “Brand new range of aeroplane models from small to large now with FREE delivery and up to 20% off retail price! The best price, highest quality plane kits online!” Keep it within the 170 characters to get the whole thing showing in the results pages

On page: dependencies

Depending on the CMS being used or general technical specifications of the site in question, sometimes there are dependencies that creep in. Most commonly, these are between the page title tag and the page H1 but I’ve also seen them between the title, the H1 and the page URL too. Although you might think it would be logical to have all three elements interconnected because the context of the page content is only about one thing, it doesn’t allow full control. Try to allow each of these elements to be independently changeable to really help maximise the search engine friendliness of your site.

On page: URLs

I’m sure you’ve heard about friendly URLs in the past, in fact Jeff mentioned them back in January. In their ‘raw’ format, many CMS’ will render page addresses as a series of variables and characters logical to the platform. Unfortunately a page called www.example.com/?id=1234?ads_9c.php doesn’t have quite the same user friendly ring to it as www.example.com/our-services/! So adding in those friendly URL rewrites is not only great for SEO benefit, but users will much prefer them to.

Speed: Google Analytics

No, I’m not going to tell you that implementing Google Analytics will speed the site up, well, kind of, there are two variations of GA; the old urchin style and the new a-synchronous. Double check the site has the new version of the code on the site. It’s much more load time friendly than the old urchin code and will help keep page load times down.

Speed: Sprites and Goblins

Just sprites actually. Where possible, combining CSS imagery into a single file and using CSS positioning can really help speed things up on a page. Google uses page loading time as a factor in deciding how to rank a page (a bit like you going to a restaurant, ordering and waiting 2 hours for it to arrive on the table, you probably wouldn’t recommend it to your friends) so we need to think about this. CSS sprites can really help reduce the number of HTTP requests a browser makes when requesting files from the server. This will help keep load times down and hopefully aid those rankings!

Speed: Image optimisation

Ever been in the situation where you or another person creates a new page, puts an awesome photo up on the site, you visit it and it takes over 5 seconds to load as you watch the image render line by line? Yep. Me too. Not only should you optimise your images (Photoshop has an awesome built capability for this but there are tools I like to use on the web that effectively do the same thing) before uploading but think about having a tool within the site that automatically reduces images that are too big (I like this image optimiser for WordPress). This is great if you have users on the site that aren’t immediately aware of the problems that can be caused from uploading a 2,500 pixel width image into a 400 pixel space!

Check back next week for part 2 where we tackle some more advanced techniques.

...