Parallax Scrolling Banner

CSS3 seems to come round in waves, every month there seems to be 1 new effect or functionality that is used more than another. In my last blog post I showed an example of the transform and transition effects available in CSS3. Maybe it’s just my search patterns and the sites I come across, but this month I have come across more sites using Parallax scrolling than ever before. It’s often used to create some awesome transitions on single page sites, but it’s also useful for creating eye catching banners and content sliders.

Firstly, What is Parallax Scrolling? According to Wikipidea…

“Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol.”

So it’s been around for a while, if that’s the case why are we seeing it more today than ever before? Good ol’ CSS3! The introduction of animation in modern browsers allows us to create effects that weren’t possible before. Web Design has become more of an art than ever before and the more creative designers are starting to push the boundaries of what we expect from a site.

In this tutorial I’m going to show you how to create a parallax scrolling banner that brings your content to life.

The HTML

Here we are setting up the framework of the banner. Each slide contains a Header, a Paragraph, a Link and an image. We also have to include the arrows to allow the user to scroll through the banner.

<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>iMac</h2>
<p>Apple introduced the first iMac more than a decade ago. And the design philosophy remains the same: an all-in-one that's as powerful as it is beautiful.</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="images/1.png" alt="image01" /></div>
</div>
<div class="da-slide">
<h2>MacBook</h2>
<p>With its durable unibody enclosure, Multi-Touch trackpad, and energy-efficient design, MacBook Pro looks beautiful. And works beautifully.</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="images/2.png" alt="image02" /></div>
</div>
<div class="da-slide">
<h2>iPhone</h2>
<p>The dual-core A5 chip delivers even more power. The 8MP iSight camera with all-new optics also shoots 1080p HD video. And if there's anything else you need, just ask Siri.</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="images/3.png" alt="image03" /></div>
</div>
<div class="da-slide">
<h2>iPad</h2>
<p>Pick up the new iPad and suddenly, it's clear. You're actually touching your photos, reading a book, playing the piano. Nothing comes between you and what you love. </p>
<a href="#" class="da-link">Read more</a>
<div class="da-img"><img src="images/4.png" alt="image04" /></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>

The JS

There are 3 JavaScript files that need to be included to get our banner working correctly. We need to include jQuery, Modernizr to help out in older browsers and cSlider to create the parallax effect.

<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {

$('#da-slider').cslider({
autoplay : true,
bgincrement : 20
});

});
</script>

The CSS

There is quite a lot of CSS being used to style the banner as we want it so I won’t run through all of it here. I have added in some CSS animation to make the transition more interesting. For further information please check out the demo files.

How it works

The cSlider plugin will add different classes to the current slide and next slide so that the correct css animation is used. When clicking the left arrow the content will slide off to the right and the new content will come in from the left and vice versa. At the same time the cSlider plugin is animating the background image to move in the opposite direction, creating the Parallax effect that we are after.

Final thoughts

As with all new things the best way to learn is to get stuck in and have a play around. Please download the demo files and have a play around. The Parallax effect can be used in many different ways and adds a new dimension to your website. Try to be creative with your uses and leave a comment below if you have found this useful.

Digital Marketing Agency Elevate Local

CSS3 has given web designers some great new features to work with, from subtle text shadows to all out animation. As a web designer I always want to try new things and learn new techniques. I have found that working with CSS3 and all it is capable of, has forced me to think in a different way when working on websites. There is almost another dimension to think about. I have seen some really cool effects created just by using overflow hidden and simple animation of divs. What’s great is that it’s not even hard to achieve these great effects.

Today I thought I’d share with you a snippet of what can be achieved using a combination of border radius, transform and transition attributes.

Circle Hover Effect

Click here to see the demo. Click here to download the source.

Overview

This effect is created using a span and div wrapped in an “a” tag and turned into circles using border radius. The grey circle is the span and the image that appears when you hover over it is the div. The div is set to opacity 0 and is rotated 180 degrees to be upside down in its idle state. When you hover over the span the div is faded in over half a second and rotated back to 0 to be the right way up. I have also added some easing using the transition attribute.

The HTML

<div class="ch"><a href="#">
<span>Next</span></a></div>
<div style="background: url('images/1.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/2.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/3.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/4.jpg');"></div>
<!-- cn-nav -->

The mark-up is very simple and there is nothing out of the ordinary. You may have noticed that the background image of each div is coded inline instead of in the css file. This is so that a simple class can be used to display different images. It also makes the animation a little smoother when changing the size of the element.

The CSS

.ch > a {
height: 220px;
width: 220px;
position:relative;
display:block;
float:left;
margin:10px;
}
.ch a span {
height: 150px;
width: 150px;
position: absolute;
top:50%;
left:50%;
display: block;
margin:-75px 0 0 -75px;
opacity: 0.9;
background: #666 url(../images/refresh.png) no-repeat center center;
text-indent: -9000px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.ch a div{
height: 150px;
width: 150px;
position: absolute;
top:50%;
left:50%;
margin:-75px 0 0 -75px;
opacity: 0;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.ch a:hover span{
width: 220px;
height: 220px;
margin:-110px 0 0 -110px;
opacity: 0;
background-color:#666;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.ch a:hover div{
width: 220px;
height: 220px;
margin:-110px 0 0 -110px;
opacity: 1;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
border-radius: 110px;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

The first rule is some basic layout styling to set the A tags out on the page. We then style the span tag by centering it in the “a” tag and making it a circle using border radius. This is also where we include our transition statements to create the easing effect. After this we are styling the div tag. The main difference with the div tag is that it is rotated 180 degrees and hidden using opacity 0.

Then we come to the hover rules. The span is increased in size slightly and faded out. At the same time the div is rotated back to 0 degrees and faded in. Very simple stuff but it creates quite a neat effect.

Final Thoughts

This little effect is just a fraction of what can be achieved using some of the simple CSS3 attributes available. If you’re new to CSS3 take the source code and tinker with it. You will be surprised what you can learn by being hands on and playing around. If you have any questions please leave a comment below and I will be more than happy to help.

Digital Marketing Agency Elevate Local

There is no denying that we live in a world that is driven by technology and connection. Social networking sites like Facebook and Twitter allow stories to explode at a rapid pace. We are constantly feed news and gossip and such a pace that it’s sometimes hard to take in. Rarely is the internet used for a good cause and rarely is it done well. Last night I saw what I personally think is the best use of the internet and social media to date.

Disclaimer: Before I start to talk about the Kony 2012 campaign I must admit that I know little about its past and the Invisible Children organisation. I am aware that there is opposition to this campaign for various reasons and am analysing the campaign purely on its use of social media and the power it has had in an incredibly short amount of time.

On the 5th Mar 2012 a video was uploaded to YouTube. The aim of this video is to spread the word and “Make Famous” Joseph Kony. It’s a very wide spread opinion that this man must be arrested for a multitude of unthinkable crimes. The Invisible Children’s aim is to use the internet to make the world aware of this problem. On the morning of the 7th of March I myself became aware of this video. Various comments on the video have stated that the number of views that morning were around the 54 thousand mark. With the ability to share YouTube videos on Facebook and Twitter combined with a compelling message, the video had hit 1 million views by the time I had viewed it a few hours later.

When I got home last night I showed the video to a friend. At 9pm on the 7th of March the video had hit 9.9 million views on YouTube and 8.2 million views on Vimeo. An outstanding accomplishment and what must be one of the fastest growing videos ever. I can’t think of another example of social media been used to spread a positive message so effectively. The only recent example coming to mind being the London riots clean up that was started on Twitter. The internet had defiantly ”woken up” to this video and if you thought it had hit its peak think again. At the time of writing this (11am) on the morning of the 8th of March the Kony 2012 video currently sits at 21,107,207 views on YouTube.

I genuinely believe that this single video is a lesson in what good can be achieved using the internet. The video itself strikes all right tones to get people talking about it. Its slightly rebel nature and calling together of community and countries seems to have frenzied vast support. It uses every angle possible to make people care about their cause. The use of the directors child, the harrowing imagery, the infographic nature of visualising the statistics, there is no doubt it is a very well thought out and put together video. We are yet to see how effective the campaign itself will be, but whatever the outcome the driving force behind it is undoubtedly the very visible power of social media.

Digital Marketing Agency Elevate Local

From time to time all web agencies will be faced with projects that have little to no budget. It’s all too easy to turn these projects down in favour of larger projects that yield a higher return. It’s also easy to forget that turning these projects down adds up. Projects with budgets of around £1,000 to £2,000 may seem like more effort than they are worth but with a good design process and a strict plan these projects can yield a higher return than you may think.

Process is key

Your starting point should always be to set clear boundaries on a project. As profitable as the little projects can be, you are always going to encounter over demanding clients (Champagne tastes on a bear budget). There can always be a happy medium but this needs to be clear from the start and you will have to walk away from a project once in a while.

Write down your processes and create yourself a how-to for building sites on a budget. It may take a few projects before you get this right but note everything that can help you save time. Save all of your code, previous work, snippets that will make you work faster in the future.

Controlling the client

Standardizing basic business practices for all of your clients will ensure that your projects run smoothly. Make sure that you keep your projects professional and set a tone form the very first meeting. Everyone needs friends, but friends ask favours. Choose your friends wisely! The less time wasted on dealing with project deliverables and bickering over payment means more money saved and also a more enjoyable working environment.

There is a thin line to tread here, rudeness is unacceptable. Offer clients more realistic solutions than a plain no. Showing websites with a similar budget and having the client prioritise will help you deliver the best site within budget.

Frameworks are your friend

The web today is a treasure chest of frameworks and streamlined solutions, such as WordPress. The key is to use these tools to develop great sites with little effort. Whatever your platform of choice, grab yourself a starter theme that gives you all the basics needed to get a site up and running fast.

For WordPress you have themes like Carrington JAM, a blank theme with a lot of the heavy lifting already handled. If you aren’t using a CMS, check out the HTML5 Boilerplate.

Themes

There’s no shame in using a pre-built theme to construct a website for a client, as long as you don’t lie. Using a theme can cut build time by more than half. Instead of spending 20 hours coding a website, you would be spending 10 hours fine-tuning a theme, tailoring it to your client’s branding and inserting content. This won’t always be an option but is an avenue worth considering. There are a gazillion brilliantly designed and coded themes out there that can be purchased for pennies, why re-invent the wheel?

Modules

Generating a code library of all previously coded features can be invaluable. If you find yourself building an image slider from scratch every couple of weeks, save it! Create a generic version that with a little tweaking can stop you repeating yourself in the future. The same goes for navigations, galleries, frameworks, blog styles, social media elements, you name it! Over time you will almost be able to slot together a site like a jigsaw puzzle.

That’s all folks

I hope after reading this article you have a different view on the “less appealing” projects that often rear their heads. If you cover your bases and work smart you can turn around great sites in less time. Just think, 10 projects turned down a year with a budget of £1,500 could be another £15,000 in the bank. With a web full of freebies and open source projects, there’s no excuse for not turning potential into profit.

Happy Coding!

Digital Marketing Agency Elevate Local

Perks for influencers on PeerIndex?

I am firm believer that Peer Index is the leading light in measuring a user’s social influence. You may have read a series of posts on our blog before about how it is possible to “Game” Klout and influence other social metric sites. To give you an idea, I spent a week away from the social world recently with very minimal activity. In that time Klout increased my score by 8 points. Hmm… PeerIndex however has held firm, make less knee jerk decisions about how influential an individual is on certain topics. This is why I was happy to discover this little gem on my peer index Dashboard…

How could I resist? It would seem that if you are considered influential in music by PeerIndex you can get a month’s free unlimited subscription to Deezer, a relatively new music streaming service to the UK.

They say that nothing in life is free… It turns out they were wrong! I’m not one to let an opportunity like this pass me by! So, Ladies and Gentlemen, I give to you… (Insert Drum Roll here).

Elevate Locals Deezer Review courtesy of PeerIndex.

Firstly I would like to mention that I am already a premium Spotify user so naturally I will be comparing the two in a head to head, VS, Duel type thing.

An introduction to Deezer

Unless you live in France the chances are that you hadn’t heard about Deezer until late in 2011, if at all. I guess it can be considered one of the new kids on the block but Daniel Marhely has been chipping his way into the music industry since 2006. Deezer.com was launched in 2009 in France and only in 2011 was it made available in the UK.

Deezer by Numbers (Taken from their website)

• 20 million users
• 6 million unique visitors per month
• over 1.3 million subscribers to the Deezer Premium services
• more than 400.000 Facebook fans
• more than 100.000 Twitter followers

I am informed (by Wikipedia) that Deezer currently has 15 million licensed tracks, and more than 30.000 SmartRadio channels.

The web Interface

Deezer, unlike Spotify, is a 100% web based music streaming software. Meaning there is no need to download any software. At first glance the interface is quite pleasing. The top of the page is always taken up by the music player, and various player controls. It also displays the current track and a simple search facility.

The Deezer Dashboard

You get the feeling that Deezer have tried to make the process as simple as possible. The player is instantly loaded with Deezer’s own “What’s Hot” playlist giving you some popular tracks to listen to. The Artist and Album pages are very “Apple” in their design making them feel very familiar to the iPod/iPhone owners amongst us.

The Deezer Artists Page - Kings of Leon

One of the more interesting features is the Radio Channels page. Upon visiting the page you are met by a wall of images each representing a different Deezer radio station. The Stations are made from a selection of tracks based on an Artist a Genre or real life radio station. While listening to a station you are only allowed to skip a track 5 times in any 60 minute period. This can be a double edged sword, it’s great way to discover new music you may have normally passed up on, but if you do really dislike a track you will be more inclined to stop listening.

The Deezer Radio Channels Page

The mobile app

For Deezer premium+ members there is a multi-platform app in the offering. I am a proud iPhone 4s owner, often too quick to snap up any free apps pointed in my direction. Deezer’s mobile app is certainly one of the slicker music apps I have encountered. It is essentially a slightly scaled down version of the web app with a very tasty added feature. The mobile app provides the ability to download any Albums or Tracks directly to your phone. Great for those times when there may not have a 3g or Wi-Fi connection available. The download process is handled very nicely in the background and is very fast over Wi-Fi.

Deezers iPhone app - Dashboard, Download screen and Radio screen

I’m happy to say that the UI consists of larger buttons avoiding the pitfall that so many apps fall into. I have never understood why app developers create buttons that are smaller than my fingers surface contact. Touch screen devices only succeed if they are easy to use! +1 to Deezer for their efforts.

One observation I have made whilst using the mobile app is that it is only possible to have 1 track being played by any 1 account at any time. If you are currently using Deezer’s web app and start to play a song in your mobile app, the web app will stop playing instantly, and visa-versa. So think twice before sharing any login details with a close friend.

As a side note I have been listening to Deezer’s “Electro” Radio station whilst writing this review and haven’t felt the need to skip a track yet. Maybe the limited skip feature isn’t as much of a hindrance as first thought. Though I wouldn’t have put all of these tracks into the “Electro” category myself, each to their own.

Deezer VS Spotify – The Duel

I guess the time has come… Unfortunately due to Spotify’s success, all music streaming services, at some point, will be compared to the big green giants.

The accounts used in this comparison are Spotify’s Premium account and Deezer’s Premium+ account.

As you can see there is very little to difference between the two. The only difference worth noting really is the fact that Spotify requires a software download to use their service. Although the software is very well made I do have my reservations with Spotify. More than once I have had problems streaming music caused by the connection to Spotify’s servers. They also force updates on a regular basis. I am sure this is to make improvements and fix any bugs but it seems a little too often for my liking.

In the short time I have been using Deezer I am yet to have any issues streaming music or downloading tracks. That said I do think Deezer’s service is slightly cheapened by it being browser based. I find myself using the mobile app more than the web app. There is nothing more annoying than closing your Deezer tab mid album by accident. A premium music streaming service should feel robust and weighty and although it may take a little longer to set up, and it isn’t 100% perfect I think I will be sticking with my Spotify subscription.

Conclusion

The truth is, Deezer is a very good product. The only reason I can see anyone not being fully satisfied with its offering would be because it’s browser based. The interface is still very slick, the streaming quality is excellent, download speeds are ample and the mobile app does a very good job.

I would suggest that anyone looking for a premium music streaming service gives Deezer a chance. Being a Web Designer I am impressed with what they have achieved. The same way I was impressed when the Hype Machine was launched.

It’s not every day that you are given something for free so I can’t end this piece without saying thank you to PeerIndex for this lovely perk. I’m not sure if this is something they will be doing more of in the future for different influence topics but I certainly hope so.

Digital Marketing Agency Elevate Local

Ever wanted to add a next and previous author button at the bottom of your WordPress author pages. Look no further! I knocked this code up a few days ago and thought I would share should anyone else need this functionality.

How the fnished code will look

The code below will get a list of all users, work out which author page is being viewed and note the previous and next authors alphabetically. It will then display a link to each author page with the relevant gravatar.

The PHP

<?php
global $wpdb;

if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;

$users = $wpdb->get_col("SELECT * FROM $wpdb->users ORDER BY display_name");
$i = 0;
foreach($users as $user) {
$user = get_userdata($user);
if ($user->first_name . ' ' . $user->last_name == $curauth->first_name . ' ' . $curauth->last_name) {

$curauthornum = $i;
$prevauthorid = ($i-1);
$nextauthorid = ($i+1);

if (get_userdata($users[$prevauthorid])) {$prevauthor = get_userdata($users[$prevauthorid]);}
if (get_userdata($users[$nextauthorid])) {$nextauthor = get_userdata($users[$nextauthorid]);}
}
$i++;
}

if (isset ($prevauthor)) {
echo "<div class=\"left prevauthor\" ><a href=\"".get_author_posts_url($prevauthor->ID)."\"><strong>Previous Author</strong>";
echo get_avatar( $prevauthor->user_email, $size = '50', $default = '<path_to_url>' );
echo "<br/>".$prevauthor->first_name." ".$prevauthor->last_name."</a></div>";
}

if (isset ($nextauthor)) {
echo "<div class=\"right nextauthor\"><a href=\"".get_author_posts_url($nextauthor->ID)."\"><strong>Next Author</strong>";
echo get_avatar( $nextauthor->user_email, $size = '50', $default = '<path_to_url>' );
echo "<br/>".$nextauthor->first_name." ".$nextauthor->last_name."</a></div>";
}

echo "<div class=\"clear\"></div>";
?>

This code needs to be put in the author.php file above or below your loop.

The CSS

/* PREVIOUS AND NEXT AUTHOR BUTTONS */
.prevauthor, .nextauthor {
width:150px;
text-align:center;
margin:4px 0 12px 0;
font-size:12px;
}
.prevauthor a, .nextauthor a {
display:block;
}
.prevauthor a strong, .nextauthor a strong {
margin-bottom:5px;
display:block;
font-weight:normal !important
}
.prevauthor a:hover, .nextauthor a:hover {
text-decoration:none !important;
}
.prevauthor avatar-50, .nextauthor avatar-50 {
margin-bottom:2px;
display:block;
}
.clear {
clear:both;
}

This code needs to be placed inside your themes style.css file.

Any questions or comments, please write a comment below. Happy coding!

Digital Marketing Agency Elevate Local

If you haven’t checked out the multi purpose jQuery slider “SlideDeck” before… you should!

Once you have checked it out and are undoubtedly using said slider, here is a free skin to get you on the way. Designed lovingly by myself for all your light coloured website needs.

Download here » 

Digital Marketing Agency Elevate Local

I love WordPress as a platform, but one of its downfalls is that it is a big target for spammers and bots. Today I’m going to share a couple of tips with you on how to minimise if not eradicate spam comments and the potential weaknesses that are targeted by bots.

Register your site with Akismet

First things first, don’t forget to register your site with Akismet. This will give you a key for the plugin that should automatically be installed with WordPress. It’s there for a reason and is great at stopping widespread spam.

Using .htaccess to prevent spam bots accessing your comments file

One trick that spam bots use is posting directly to the wp-comments-post.php file of your WordPress theme. This allows them to post comments without loading the site potentially avoiding any front end security measures you have put in place.

We can stop this by blocking access to the file directly using the .htaccess file. This can be found at the root of your WordPress install. Open the .htaccess file and paste in the following code at the bottom. Don’t forget to replace ‘yourdomainname’ on line 5 with your websites domain name.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*yourdomainname.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]
</IfModule>

Remove autolinks in comments

When a comment is posted that contains a url, wordpress changes this into a link by default. This is something that bots and spammers use to their advantage. We can stop this very simply by adding the following line of code into your themes functions.php file.

remove_filter(‘comment_text’, ‘make_clickable’, 9);

This will remove wordpress’s automatic linking function.

With these 3 simple tips, you will be well on your way to stopping spam comments and link injection.

Digital Marketing Agency Elevate Local

In a recent venture into the world of HTML emails I discovered that all is not quite what it seems. I am of course talking about the vast differences between the ways some mail clients can display email. No matter how much of a CSS genius you are you will never get your beautiful designs to look exactly the same in all email clients, but below I have outlined you some tips that will help you minimise the differences.

• A lot of CSS properties (such as font, color and border) work fine across many of the most popular email clients. Get familiar with what works and what doesn’t by using campaign monitors Guide to CSS Support in email.
• When a CSS property doesn’t work so well, there are often workarounds (such as using cellpadding in tables instead of padding).
• When workarounds don’t exist, focus on graceful degradation.
• Your design will never look exactly the same across all email clients, no matter how you use CSS. Once you (and your clients) make peace with this, I guarantee you will sleep better at night.
• Keep it simple. The less complicated your design and layout, the less likely something will go wrong. Favour table layouts over divs, and make sure your message is readable (which means text, not images).

One of the most evident things you should realise after reading the guide to CSS in email is that most of your problems will come from Outlook 2010, Lotus Notes and Gmail. These browsers are playing hardball when it comes to CSS support. Fear not young designer, good will prevail and the darkness will be lifted in time.

Looking at the data from over 3 billion emails you can see that the use of mobile clients is on the constant up rise! In fact, one in five emails are now opened on a mobile device. This is good news!

Data from Smashing Magazine

Data from Campaign Monitor

Most mobile email clients including iOS (which accounts for 75% of mobile email) run off the webkit rendering engine. Webkit supports many CSS3 features such as animation and media queries. The latter can be extremely useful for re formatting emails to suite mobile devices. With apples mail on mac and iPhone we are able to format emails especially for iPhone users. See the example below.

Digital Marketing Agency Elevate Local

When Google added its search by image functions a month ago I didn’t really see much use for them. Why would I want to find an image that was similar to the one I already had? It was only a few days ago that I came across a possible use for the search by image.

Whilst purchasing a stock image for a client, I wondered if the same image had been used many times on other websites. Using Google’s search by image I decided to drag a watermarked copy of the image in from iStock, only to find that the search returned many high res un-watermarked versions of the same image. To see if this was a one off I decided to test with a completely different image and low and behold I was given full high res versions of that image also. Previously if you were to find a nice stock image that you wanted to obtain unlawfully you would have had to search for it using words to describe the image. This was obviously flawed as many web developers name their images in a non-descriptive way. What Google has created is a way of turning all stock image sites into a catalogue of easily obtainable images. At this point I must refer you to the disclaimer at the bottom of this post.

I’d be interested to see the long term effects of this on stock imagery companies. I for one would be coming up with a new way of making my watermarked images not so easily recognised by Google. The alternative would be to make them less easily downloadable but this would stop people being able to use comps in their mock ups.

Below is proof of how easily the above can be achieved and in this case would have been just as quick as purchasing the image legally.

Dragging the watermarked stock image into Google's image search

Search results containing all un-watermarked images

A high-res version of the stock image within 3 clicks

Disclaimer

I must state that I and elevatelocal do not condone the use of image search in this way. The image in the example above was purchased legally and the concept was merely an observation and not intended to be an instruction of any sort.

Digital Marketing Agency Elevate Local