Google Updates Adwords Logo, Dashboard User Interface and Color Scheme for improved usability.

It appears that Google has just updated their logo, UI and color scheme for its Adwords Dashboard.

So far as I can tell, the updates are simply a new icon, a blue color scheme instead of green, and a new sleek, stripped down menu area, but these few updates go a long way.

First, from an aesthetic standpoint, the revamp is simply cleaner. Adwords is a tool, and should be designed with maximum usability in mind. Simplifying the design, and cleaning up the colors has made it far more user friendly than the previous ‘blocky’, green layout. The “Tools” drop down options have now also been made available only by click as opposed by hover. Again, as this is a literal tool, not an informative or e-commerce website, this is the ideal functionality, as it reduces any errors or lost time that could be created from accidental and/or unintentional hover.

The click-to-dropwdown feature is also an improvement as far as usability goes. Unintentional moving your mouse over a drop down, especially when your computer or browser is slow moving, can be anywhere from annoying to absolutely frustrating as far as overall lag/load time goes. By changing the drop down feature to display only when clicked, it only improves the efficiency of the tool in it’s main goal, delivering detailed search information as quickly as possible.

All in all I’m glad to see Google moving forward with these updates as the more user friendly it’s platforms become, the more users it will attract.

View the new changes at AdWords

SEO How To: Writing the Perfect Title Tag

In this SEO How To I’m going to discuss how to write a page title for better search results. No matter whether you’re creating a page title, an article title, or a blog post title, it’s important that you give it some thought and include keywords that are not only relevant to the content but that also contain exact keywords.

When choosing these keywords, you can use the Google Adwords Keyword Tool to get an idea for competition and search volume. Choose a few keywords that have a good search volume and aren’t too competitive. Then pick a keyword and formulate an article title where the keyword is used in it’s entirety.

It wouldn’t be an SEO How To without at least one example, so if the keyword I was targeting was “Prescription Glasses Online” my headline could be: “5 Things You Should Know Before Buying Prescription Glasses Online”.

It’s best practice to make your titles no longer than 60 to 70 characters as they will be truncated by the search results. Also, it seems at times that the more concise the title, the more quickly it will rank for the exact keyword match.

Once you have the title formulated, write an article that is as informative as possible. Make sure to include your exact keyword in it at least 2-3 times. It’s best practice to aim for 500 words in your article. But if you fall a bit short it’s not that big a deal in my opinion. A decent article should fall pretty close however.

Make sure that the article title is also included in the page title section in the, the meta description, preferably at least one hyperlink in the content, and ideally a header 1 tag or header 2 tag. By implementing your target keyword in these areas, you will have a much better chance of ranking for that keyword, and more quickly.

Where you fall in those rankings will be dependent upon the amount of indexed content you’re generating in relation to the keywords, amongst several other things of course. But in general, if you create 5 articles with that exact keyword in the title, content et al., but in genuinely different articles (don’t want to violate duplicate content), the more pages you will have indexed for that keyword.

All in all the article title along with the actual page title is a very important factor in optimizing your pages. And the more exact keywords you start to rank for, no matter how long tail, the more traffic you will drive to your site.

Fort Lauderdale Magento Websites

If you’re looking to sell products or services online, there are several e-commerce platforms that are available to you, but none of them are as powerful or robust as the Magento e-commerce platform.

Magento websites are perfect for companies that need to maintain a large variety of products, large quantity of products, have the need for a lot of customization of functionality, or wish to be able to easily manage products, customers and more through a database.

Building a Magento website usually takes between 4-6 weeks for production and then another 2-3 weeks for product creation, but that timeline is usually dependent upon the client, and how involved they are with the project.

We create high-end Magento websites and Magento extensions for our clients to meet any need that they may have. As we are located in South Florida, our Fort Lauderdale Magento websites production can be done in person. If you are located anywhere else in the world, email us to set up a skype appointment to discuss your project.

Php Tutorial: Getting All Files Within A Directory and Echoing In A Page

This post will cover getting all of the files as an array and then echoing them in a web page. In this example we will be using it to populate a slider with all of the images within a website subdirectory ‘/images/’.

The first things you will need to have is your slider set up, and all of the images you will be using in the ‘/images/’ folder. For the purposes of this example, this will be the markup for the slider:

<div id=”slider”>

<div class=”slide”>
<img src=”images/image1.jpg”>
</div>

<div class=”slide”>
<img src=”images/image1.jpg”>
</div>

<div class=”slide”>
<img src=”images/image1.jpg”>
</div>

</div>

Once your slider markup is in place we will replace the “.slide” child div’s with a block of PHP.

<?php
foreach(glob(‘./images/*.*’) as $filename){
echo “<img src='” . $filename . “‘ />”;
}
?>

If you have the images in another directory, let’s say “slider” inside of “images, you would just have the code look like this:

<?php
foreach(glob(‘./images/slider/*.*’) as $filename){
echo “<img src='” . $filename . “‘ />”;
}
?>

If your directory is set up properly your page should then pull in all of the images in that folder dynamically.

Jquery Slider Tutorial For Beginners

This is a simple jQuery slider tutorial for beginners that will first cover the logic behind the slider and how it functions, and then cover how to construct the code.

The slider we’ll be building will be a fairly simple, slider that will fade from one block of content to the next. Each block of content will be able to hold as many HTML elements as you will need. As this is just a simple example, we will only be focusing on the fade transition for this slider.

Most of the work for this slider will actually be done by our CSS file which controls all of the styling.

First, we will establish our slider dimensions, for this example we’ll use a width of 940px and height of 350px. This means that each of our slides in the slider should have the dimensions 940px by 350px as well.

Each slide will be housed inside of a ‘<div>’ element, so that the HTML structure looks like this:
<div id=”slider”>

<div class=”slide”>

Slide 1

</div>

<div class=”slide”>

Slide 2 Goes Here

</div>

<div class=”slide”>

Slide 3 Right Here

</div>

</div >

You can fill each div with as much or as little code as you’d like, whether it be an image by itself, or a full php contact form on top of a background image and accompanied by text.

Inside of our CSS, we are going to set the class “slider” to a relative position, and each of it’s child div’s will be set to an absolute position. This will cause all of the div elements inside of the #slider div to be stacked one on top of the next. The CSS should look like this:

#slider {
width:940px;
overflow:hidden;
margin:0px auto;
position:relative;
height:350px;
display:block;
}

#slider > div {
position:absolute;
top:0px;
width:100%;
}
.slides {
width:100%;
display:block;
overflow:hidden;
}

There are a few other styling elements thrown in above to help the styling, but they will be covered in another tutorial. It’s also best practice to use CSS to make the images uniform by making sure the image width will always fit 100% of the slider container. This is achieved like this:

.slides img {
width:100%;
height: auto;
}

Now that we have our slider HTML structure and CSS styling set up we just need to set up our jQuery to make it all work. First, you will want to make sure you have a jQuery library installed on your site. To get the latest version, just head to www.jquery.com, scroll to the bottom of the page, and you will see “Quick Access”. Just copy that code into a script tag so it looks something like this:

This script needs to be included before the script for your slider. Now create a new javascript file and call it “slider.js” and save it in your website directory. Now with a couple of lines of jQuery we are going to simply have all of the div elements inside of the div “slider” fade from one to the next. That code will look like this:


$(function() {
$("#slider > div:gt(0)").hide();

setInterval(function() {
$(‘#slider > div:first’)
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo(‘#slider’);
}, 5000);

});

The only values in this block of code that you may want to change are the fade in and fade out speed and the length of the pause between transitions. The fade in and fade out speed are defaulted to 1000ms or 1 second. If you’d like the transition to move more quickly or more slowly, just adjust the values as needed. The default slide pause speed is set to 5000ms, or 5 seconds, but you may want to have them run for longer depending upon the content you are using. Now you can save your slider.js file and head back to the main file where your slider will be displayed. Underneath the script that includes the jQuery library, you’ll want to now include your slider script. It will look something like this:

Once this script is included, save all of your files, view the file with the slider inside of it in a browser, and you should see the slider fading from one div to the next.

You can download the source files here to use for a demo

Magento Tutorial – Get Combined Price of All Products In Magento Bundled Product

Magento is a great open source ecommerce platform but every now and then I’ll come across a feature that seems to be missing.  Recently, when developing a website that intended on using Magento’s bundled products to create product kits as single items, I realized that the price was nowhere to be found on the bundled product page.  Unfortunately, this is on purpose because the user is meant to select each individual item or product they wish to include in the bundle.

In order to work

Quickly and Easily Resize Text with CSS & jQuery

A great new trend in web development is responsive design. This means your site’s elements, and proportions are responsive, or re-sizable, dependent upon the size of the browser, by using percentages for height and width dimensions, as opposed to fixed dimensions in pixels, i.e. 250px wide. Once you have an understanding of how responsive layouts work, it’s fairly easy to build them out as all of your div’s and images can be easily made responsive. One problem people often run into though, is how to make the text responsive.

You would think the simple solution would be to set your text size as a percentage, but percentages will not work well for all font-sizes. What some may do instead is set your text size using em instead of pixels, which is very similar to a percentage but instead of based on the container it is inside of, it’s based on the core font size of the file. So if the main font size of the document is 16px, 1em would equal 16px and 2em would equal 32px. Once all the font sizes are set in em, you would need to create quite a bit of drawn out and complicated jQuery to first identify the fonts, and resize them dependent upon several factors.

Instead of spending the time resetting all of your font size values and creating a new jQuery file that will attempt to make all of your font sizes responsive, we’ve created a jQuery file that makes it considerably more simple. The following code performs two actions; first, it finds the width of the entire browser window, then dependent on browser size, it will rewrite the CSS for the text you are targeting to whatever size you’d like. So for instance, if you see that in browsers between 1000px and 1200px your font is best viewed at 40px, you can simply rewrite the font size to 40px using our code.

Here is an example of the code:



$(document).ready(function(){
if($(window).width() < 980) {
$('.polaroidTitle h2').css('font-size', 35);
}

else if($(window).width() < 1100) {
$(‘.polaroidTitle h2’).css(‘font-size’, 40);
}

else if($(window).width() < 1200) {
$(‘.polaroidTitle h2’).css(‘font-size’, 43);
}

else if($(window).width() < 1281) {
$(‘.polaroidTitle h2’).css(‘font-size’, 43);
}

else if($(window).width() < 1367) {
$(‘.polaroidTitle h2’).css(‘font-size’, 43);
}

else if($(window).width() < 1441) {
$(‘.polaroidTitle h2’).css(‘font-size’, 45);
}

else if($(window).width() < 1700) {
$(‘.polaroidTitle h2’).css(‘font-size’, 50);
}

else if($(window).width() < 1800) {
$(‘.polaroidTitle h2’).css(‘font-size’, 60);
}

else {
$(‘.polaroidTitle h2’).css(‘font-size’, 60);
}
});

In this case, we’re resizing the text within the h2 tag inside of the class “polaroidTitle”. Using this file, if for instance the browser window was between 1282px and 1386px all of the font sizes within that specific h2 and class will be resized to 43px. You can tweak the font size pixel points and targeted classes or id’s to fit your needs, but I’ve found these browser dimensions work pretty well. If you find you need to tweak those too, you can without worry of breaking the script, just make sure everything maintains the current formatting.

This isn’t the cleanest or most creative code, but it is easily implemented and works very well. It also keeps you from having to spend too much time reconfiguring all of your fonts to use em and working your way through a complicated jQuery solution. Feel free to drop us an email with any questions.

Bricks & Mortar Client, WeWOOD Watches, Featured In Financial Times

Our favorite Wooden Watch Company, WeWOOD, has been featured in Financial Times. Featuring the companies wooden watches, philosophy and eco-chic styles, FT brings WeWOOD into a section of the mainstream marketplace it has never reached before.

You can read the full article here.