SEO & Responsive Design

SEO – Search Engine Optimization

Search Engines are looking for: Relevance

Authority How does a search engine measure authority?

Why design a keyword plan? It helps you understand: What are people searching for? With what frequency are they searching? How competitive are those terms? For your organization’s objectives, what is the relevance of these terms?

Designing a Keyword plan What services does your organization provide? When you are developing ideas for keywords think from a user perspective versus an insider perspective. Eliminate jargon that is used by a small segment of the industry.

Designing a Keyword plan Volume - is the number of searches per month for a particular keyword. If you use a tool like the Google Keyword Planner, it's represented as the average number of searches for the last 12 months. Relevance - Does the keyword you found accurately reflect the nature of the products and services you offer? Competition - how difficult it will be to rank in front of your competition on a search engine results page

Designing a Keyword plan Long tail keywords

The term became popular from author Cliff Anderson writing in Wired magazine, it has since been applied to SEO. This shape is referred to as a power law graph.

Designing a Keyword plan One common strategy for developing your keyword plan is to use insights from the “long tail” and use more descriptive phrases that will have: High relevance Low competition These will tend to have lower volume for searches but often deliver higher click through because they are more targeted to the users interest. This approach is also low cost.

Tools for Keyword Analysis Google Keyword Planner Google Trends

Web Crawler “A Web crawler is an Internet bot which systematically browses the World Wide Web, typically for the purpose of Web indexing (web spidering).” - https://en.wikipedia.org/wiki/Web_crawler

Search engine indexing “Search engine indexing collects, parses, and stores data to facilitate fast and accurate information retrieval.” - https://en.wikipedia.org/wiki/Search_engine_indexing

Optimizing A Website for SEO URL Title Description Headers Body Text Images

Optimizing A Website for SEO URL – make your html file name be your keyword.

(ex. green-juice-cleanse.html) Title – make the title of your document the keyword, this goes in the head section of your site (not the body). <title>green-juice-cleanse</title> Description – this is not read by web crawlers but can help with click throughs because the text is seen in the search results and may entice a person to check out your site if it is relevant for what they are looking for. It also goes into the head, this should include the keyword but add additional helpful information. <meta name="description" content="Thirsty for something healthy? Try our green juice cleanse from Awesome Juice."</>

Optimizing A Website for SEO Headers – your h1 tag should have your keyword in it. Many web developers only like to have one h1 tag per page

<h1>Green Juice Cleanse - from Awesome Juice</h1> Body Text – your paragraph text on the page should relate closely to what your keyword is. This can be an area where the additional text that you researched in your planning stage can also be included. In our example we may want to use the terms “healthy” and “organic” in these descriptions. Images – make sure to name your image with the keyword and add the alt text, this is read by web crawlers as well.

<img src="images/green-juice-cleanse.jpg" alt="super awesome green juice cleanse"> </img>

Optimizing A Website for SEO Another important aspect to driving increased traffic to your site is activity. A site that is consistently being updated with new content will have higher traffic. How can you have a more active site, without spending all the time in your day writing content?

Optimizing A Website for SEO Another important aspect to driving increased traffic to your site is activity. A site that is consistently being updated with new content will have higher traffic. How can you have a more active site, without spending all the time in your day writing content? Think about working with user generated content. What kind of framework can you set up to have interested participants contribute and be part of a dialog about a particular subject. In our juice example, maybe you can ask for people to post about their favorite recipes or discuss the time of day to best benefit from your juice (morning, after a work out, etc..)

Optimizing A Website for SEO Optimizing text around an image User-generated content

Optimizing A Website for SEO Click through CTR = click through/impressions

Responsive Design

Responsive Design

Is the term for when a web browser adjusts to the the screen size of the user based on the device they are accessing the site on.

Creating a website that has a responsive design means that you optimize the look and location of the elements based on the screen width.

Responsive Design A media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Using the @media rule, the code below is saying, change the background-color to lightgreen if the viewport is 1000 pixels wide or wider:

@media screen and (min-width: 1000px) {

body {

background-color: lightgreen;

}

}

Reference on @media rule:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

The 960 Grid http://960.gs/ The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

The 960 Grid http://960.gs/ Example of a twelve column grid

The 960 Grid http://960.gs/ Example of a 16 column grid

Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs http://getbootstrap.com/

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub. In June 2014 Bootstrap was the No.1 project on GitHub.

Grid Classes The Bootstrap grid system has four classes: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops) The classes above can be combined to create more dynamic and flexible layouts. First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.