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:...

When it comes to design the key is to do more with less. Too much makes a page look cluttered, too little makes it look like you are back in the 90s.

Luckily web developers can do some amazing things with CSS3 that give a page, or content within a page, that extra “pop” needed to make things stand out and look great without making the site look busy and thrown together.

The next time you need to call attention to something on a page, try this cool effect in CSS3 that makes it look like an element has been sewn onto the page!

.stitched { height:100px; width:500px; padding: 5px 10px 5px 10px; margin: 15px; background: #e2e2e2; border: 2px dashed rgba(255,255,255,0.4); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5); }

Here’s an example of what it will look like:

DEMO

...

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.

...

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties we will be using, but users with non-supporting browsers will still be able to see and interact with the button.

This is how the button will look in its initial and hover states, with a moment during the transition captured in-between:

Create Your Page and Link

Let’s start by creating an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

In the body section, insert your anchor element inside a container element as follows:

<div id="container"> <a class="anim" href="index.html"> <img src="note.png" alt="link"/> <span>Music</span> </a> </div>

The anchor contains an image and some text in a span. We include a class name for the anchor, which we will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration.

We will be using four images for the link button, so download them now, or use your own if you prefer. This image appears within the button and will be rotating on hover:

This is the main background image for the button:

These are alpha transparent gradient images we will display on top of the main background image:

Insert General CSS Properties

Before we get to work with animated properties, let’s get the basic CSS properties for the button sorted. In the style section of your page head, add the following to style the container element:

/*basic properties*/ #container { padding:20px; background:#FFCC00; width:300px; }

The color and width have been chosen to suit the images we are using, but feel free to alter them. Next style the link with basic properties:

/*link*/ a.anim { margin:auto; display: block; background:#FF0000; width: 200px; height:60px; text-align:center; text-decoration:none; color:#000000; font-weight:bold; font-family:sans-serif; font-size:large; border:2px solid #FFFFFF; }

These properties are all pretty straightforward – the dimensions are again chosen to suit the background image we are working with so you will need to alter them if you are using a different image. Let’s add another couple of lines in this section before we move on. With CSS3 we can use rounded corners, so before the closing bracket for the “a.anim” section:

/*rounded corners*/ border-radius:15px; -moz-border-radius:15px;

The border radius specifies the extent to which the corners should be rounded. The vendor prefix version is for older versions of Firefox. After this section, position the image within the link as follows:

/*position img*/ a.anim img { margin-top:5px; }

Now set the basic styling for the text inside the link:

/*link text*/ a.anim...

In previous years, many of the major search engines were not fully equipped to read anything on a page aside from the text within the tags. Most of the “spiders” that “crawled” through web pages only viewed information at the most basic level. As technologies such as Javascript took over the web site design field, the search engine programmers found that their creepy-crawlies had to evolve in order to extract the most pertinent information from the sites they visited.

Here are some DO’s and DON’Ts to ensure that pages that utilize Javascript are still designed with SEO principles in mind.

DO keep it simple.

Although search engine spiders are now equipped to read Javascript code, they still cannot perform many of the major tasks that a full-service browser can when implementing that code.

<script language=”Javascript”> document.write(“<h1>Here is the SEO content.</h1>”); </script>

The spider can now read the contents of simple Javascript methods as HTML.

<script language=”Javascript”> window.open(“http://www.developerdrive.com/author/gerald-hanks/”); </script>

The spider will execute the method and follow the link. However, the spiders tend to slow down when methods introduce multiple parameters.

DON’T put lots of Javascript code on a page.

From an application development standpoint, any heavy Javascript code sections should be placed in a separate file for easier management. From an SEO standpoint, the separation of code-heavy Javascript files from the page undergoing the indexing process will save the search spider time and prevent it from indexing keywords that are not relevant to your page. The harder the spider has to work, the lower your potential search engine rank.

DO replace Javascript menus with CSS menus where possible.

One of the most prevalent uses for Javascript has been the creation of dynamic navigation menus. As we saw in an earlier article, CSS can accomplish many of the same dynamic menu displays as Javascript, while CSS is also much more search-engine friendly than Javascript.

DON’T sacrifice Javascript functionality for page rank.

On the one hand, a client may offer a Javascript calculator that they wish to use as a marketing tool to draw visitors and convert them to customers. On the other hand, the spiders won’t read a lot of complicated calculation routines, and they certainly won’t index most of these routines into their search databases. The solution is to create the marketing content within the page that describes the calculator’s functionality, while placing the code in an external file.

DO turn off Javascript when testing pages.

If the developer is not sure if their Javascript content is crawlable, the best option is to remove as much of the searchable content from the Javascript methods as possible. Barring that, the testers can turn off Javascript in their browsers and view the results. The Javascript shutdown will give users a true insight into what the spiders see (as opposed to what users see).

DON’T forget the spiders.

Many developers and site designers get caught up in the various technologies (Javascript, AJAX, Flash) that can produce fast results and spectacular visual effects. They want to give the audience a memorable experience with each visit. Developers must cooperate with SEO experts to insure that their beautiful and efficient creation attracts the audience that it deserves.

...

The move towards developing responsive websites has introduced a set of new tools that help can developers learn the ropes fast and start producing cross-browser and non-device specific websites quickly and more efficiently. Let us see some of these tools and resources that you can leverage as we get deeper into responsive web design:

Adaptive Images

Your website is increasingly being viewed on smaller screens that consume low bandwidth. In addition to other challenges associated with developing for small screens, image resizing is one of the things to take into consideration. Fortunately, Adapative Images, a PHP script that works on any website, can help in this regard. Adaptive Images detects screen sizes abd re-scales versions of your HTML images, ultimately helping you deliver small images to small screens.

FitText

Have you ever desired to have scalable headlines that fill the width of parent elements when developing fluid layouts? The JQuery plugin will allow you to resize your fonts and ensure that they fit where they are supposed to regardless of the device or browser.

PhotoSwipe

Did you know that you can deliver fancy image galleries common on desktops to mobile devices? This free HTML/CSS/JavaScript library enables developers and designers looking to add the look and feel of native apps on their websites the ability to provide visitors with an intuitive interface to interact with images on your mobile website. It is compatible with all popular Javascript libraries and frameworks.

Less Framework

When building websites with multiple layouts, it is important to maintain consistency. By having a layout based on the same grid, it is possible to reuse elements by simply adjusting widths, font sizes or other small detail. This is the whole idea behind Less Framework. Having a common baseline grid allows everyone the freedom to keep writing code their own way while ensuring consistency.

Check out our series on Learning Less from Alex Ball.

Skeleton

By use of CSS files, it is possible to design responsive sites rapidly. Skeleton makes this possible by use of a lightweight 960-grid as its base that allows elegant scaling down from laptop browser windows to mobile window screens in both landscape and portrait format. It comes with lightly styled forms, tabs, buttons and other elements that form the basic foundation of any mobile website.

Responsive Testing Tool

Now that you have your responsive site under development, how do you test during development? It turns out that browser security will not allow you to navigate through frames. Matt Kersley, a designer and developer, has designed a testing tool to help you with that. The tool can be downloaded from Github and installed on your website hosting to allow testing during development.

Inuit CSS Framework

With HTML5 support, inuit.css comes with a custom grid builder for developing fluid grids. The framework is progressive and flexible; it sets sensible boundaries to what you can do while giving you total controltfo what you can do.

Please feel free to share some of your favorite tools for developing responsive web sites as well.

...