We all have our favorite client stories, embarrassing design flaws and never-ending user requests which are all just a part of what we, as designers and developers, encounter very often in our daily work routine. In this new post series on Smashing Magazine, we’d like to put some of these situations into the spotlight and discuss them with you. The cartoons are all dedicated to Web design and also have a comic twist about everything happening around the Web and latest trends.
The main character of the cartoons is Fleaty, a talented, hard-working designer with big ambitions yet not that much luck when it comes to clients. Hopefully, Fleaty will put a smile on your face and maybe remind all of us of the flaws we have, and help us finally get rid of them. The creative mind behind the Smashing Cartoons is our talented illustrator Ricardo Gimenes.
We’ll be adding a new cartoon every week; the latest cartoon is presented on the Smashing Magazine’s sidebar as well as on the Smashing Cartoons page. There you will also find all previous issues of the Smashing Cartoons series for your convenience.
Fleaty’s experience in May:
Responsive Web Design
Mobile Design Strategy
Online Reading Experience
Web Design Trends
Web Typography
Tell Us Your Story!
Have you experienced something similar to what Fleaty has experienced? What’s your ultimate client story? Do your clients also want a responsive design with rich typography? Share your story with us in the comment section below!
Whether you’re using WordPress as a CMS, a blog or somewhere between the two, as a portfolio site, making sure your site runs quickly is absolutely paramount in this day and age. This article and screencast combo takes you through how to use a variety of tips, tricks and techniques in order to make your WordPress powered site load faster.
Since last year, page load speed has been included in Google’s ranking algorithm. Thus, it’s become absolutely vital that your site, regardless of its usage, loads as fast as possible.
The first thing we’re going to do is test load speeds to see what point we’re starting from. I’ve taken two sites — my fairly heavily optimised WPShout and my friend Marco’s blog, which runs a normal premium theme from ThemeForest.
We’ll be using a tool called Pingdom throughout this article in order to test the speed of our site.
To start with, we’ll compare the two sites — the fairly heavily optimised WPShout and Marco’s blog, a normal WordPress blog running a premium theme.
Clearly, WPShout loads far faster than Marco’s blog and there are a number of reasons for this:
Fewer files: WPShout loads with only a handful of CSS, Javascript and image files whereas Marco’s blog has a lot of CSS, Javascript and then a load more images added on top. We’ll cover optimising images later
Faster files: WPShout is using a Content Delivery Network, or CDN in order to deliver the files faster. More on this, later.
Cached files: you’ll note that images don’t show up as being downloaded again. This is because files which aren’t changed regularly are stored locally and so don’t need to be downloaded again. We get to caching later.
Custom theme: WPShout runs a custom theme, whereas Marco’s blog runs an out-the-box premium theme. The pros and cons of each method are weighed up in the next section.
It’s obvious, but I’ll say it regardless: an out-the-box theme, free or paid, won’t get anywhere near the performance of a well made custom theme. Even premium themes from some of the largest marketplaces have horrendous performance.
However, help is at hand!
We can using something called a caching plugin in order to save a copy of your site and then show that when people visit, thus circumnavigating the problem of out-the-box themes using up a lot of resources.
Imagine you had a written document and wanted to give copies to everyone who visited. At the moment, you have to write it all out by hand, but if you use a photocopier, you just need to do the work once and give out copies!
A caching plugin is like the photocopier — it loads the page once and then distributes copies of the page to visitors, meaning the page loads faster as visitors don’t have to wait for the server to load the page — or for you to write out the document.
There are a number of caching plugins available and we’ll visit them later.
Images are likely to be the single biggest factor that slow down your site so are well worth taking the time to optimise!
If you’re running a blog or magazine style layout, unoptimised images are likely to be your downfall. A couple of years ago when I used my first WordPress powered magazine theme, I remember being astounded at how slowly the site loaded. The culprit, of course, was having huge file sizes for images.
The following screencast runs through ways of optimising your images.
I use something we’ll call the 30%, 30kb rule. Images should be at 30% quality and/or no more than 30kb large. Whilst images containing text might need to be larger, as a general rule it works well in keeping file sizes down. Of course, you also need to make sure images are no wider than your post’s content area.
CSS Sprites let you combine what would have otherwise been multiple images — and multiple downloads — into a single file.
We can also use image sprites in order to combine multiple images into a single file. Chris Coyier has an excellent post on CSS-Tricks explaining “what they are, why they’re cool and how to use them�.
The graphic above shows the image that forms the CSS Sprite for WPShout. The top row is icons and social media buttons and the two rows below are the logo and hover state for the logo which show up on the coloured background on the site (I’ve added in a background here but on the site the sprite is a transparent PNG). Instead of five files at 100kb, I’ve got one file at just under 20kb. The savings are obvious so there’s no reason not to try out sprites on your site.
A great tool for quickly making a sprite is “SpriteMe�, a bookmarklet you can just click and it does all the work for you! This is a great way of avoiding getting stuck into CSS if you’re not too confident with them.
You can go further with your image optimisation, though. Yahoo has a service called “Smush.it� which takes your images and optimises them, keeping the same quality but lowering the filesize.
It would be a pain to individually optimise each image so thankfully there’s an excellent free plugin called “WP Smush.it� which automatically runs all your images through Smush.it when you add them to a post or page.
Lots of plugins dosn’t necessarily mean your blog will load slowly, but one may lead to the other.
Plugins which make lots of database queries aren’t a problem if you use a caching plugin.
It’s a common myth that having lots of plugins = your site loads slowly. One doesn’t necessarily imply the other, but often the two are linked, hence the myth.
It is true, though, that having a lot of plugins can both be a security risk and just a pain when upgrading to new versions of WordPress (you’ll have to check they’re all compatible with the latest version). It’s easy to get carried away installing plugins that do jobs you think you might need, but it’s considered good practice to keep the number below ten.
Jeff Starr ran a very interesting poll on Digging into WordPress a couple of years ago which is still relevant today. Just about two thirds of respondents used up to ten plugins, with only ten percent using more than twenty. Those who used a lot of plugins ran with the argument that their plugins didn’t hinder their site’s performance so using them was fine. Whilst this is true in the majority of cases, this isn’t necessarily always true.
The first plugins to reconsider using are ones which add Javascript. Load your homepage and then view source. In the section, look for Javascript and see if you can find any plugins. If you can, it’s time to reconsider whether you really need that plugin as it’s adding to the load time of every single page.
However, the big culprits are plugins which use the database a lot. Joost De Valk has a post, explaining how you can use the Debug Queries plugin in order to work out which plugins are causing your server a lot of work. In Joost’s case, it was the Yet Another Related Posts Plugin that was causing the problems. I’m using the same plugin on WPShout but decided to keep it as it’s so powerful and so any performance lost can be justified by extra user experience gained. Speed shouldn’t be the only factor you consider when deciding whether to keep plugins or not.
There is hope, though. You can create a cache using a caching plugin in order to save a copy of your page — and thus database queries.
And now for the big one: caching plugins! These will give you by far the biggest performance boost but there are lots of plugins to choose from so it’s vital some time is spent comparing the performance of each on your site.
Whilst there are a good number of plugins available, there are a couple of main ones:
I switched to W3 Total Cache from WP Super Cache about a year ago after testing out various options and it’s been absolutely fantastic. That said, it’s not necessarily fastest on your site so it’s important you try out a couple and compare the results. Tutorial9 has a really good post comparing the different plugins available, but I must stress it varies from site to site which ones work best. However, I’ve found W3 Total Cache to be consistently fast on various set-ups so we’ll explore how to use it here.
Installing such a complicated plugin is surprisingly easy. Total Cache installs like most other plugins — under the plugins tab, do a search for W3 Total Cache and it’ll show up as the first result. Click “install nowâ€� and then activate the plugin.
However, the plugin isn’t set up yet! You’ll see a new tab on your admin bar “Performance�. Open this up.
Total Cache does some impressive detective work and gives you some recommend settings. It’s now just a case of going through all the settings, activating each one and seeing what performance boost each option gives you. Some may decrease performance so it’s vital you test.
Total Cache has some excellent documentation built in — select the various options under the Help tab. The FAQ is brilliant at going through more or less every single question you could possible have and answering it clearly.
However, there may be some extra set up required. You might get some messages popping up at the top of the page telling you you need to add some code to a file called .htaccess. .htaccess is a file which allows you to locally configure your Apache settings, and thus is impressively powerful. To access it you’ll need to log into your site’s FTP and then navigate to the root. If you then can’t see it, show hidden files.
Download it (again, show hidden files), make a copy as a backup and then load it in your text editor. Add the lines of code to the bottom of the file, upload again and you’re done! Make sure you try loading your site immediately to check it still works. If it doesn’t, check you’ve copied all the code exactly and you haven’t deleted any other code in the file.
“A CDN can increase a website’s performance by serving items from the closest possible location to the visitor.
For example, let’s say that you have a web server in Los Angeles. A visitor from the United Kingdom wouldn’t get the best possible performance, because images and other content would go through many “hops” and a lot of distance to get across the USA and the Atlantic Ocean.
With CDN, those items would be served from a location much closer to the visitor, e.g., Amsterdam. The web server would still provide the pages, but images and other larger items would be served from the CDN.�
Mark Bailey, WPCDN
Essentially, a CDN, or content delivery network, takes all your static files you’ve got on your site (CSS, Javascript and images etc) and lets visitors download them as fast as possible by serving the files on servers as close to them as possible.
CDNs used to be for the elite, but in the last 18 months have become available to the masses and are now something I thoroughly recommend to anyone and everyone. The first thing you need to do is to find a CDN provider!
CDNs to consider
I use WPCDN on my sites and I’ve been very pleased with it, but by no means are they the only CDN providers! There are a fair few, but these are ones I’ve been personally recommended by others or use myself:
If, as I suggested, you’re running W3 Total Cache, setting up your site to utilise a CDN is really easy. Go to the CDN tab and then tick the boxes you want and simply fill out the Configuration section with details provided by your CDN provider.
If you’re not running W3 Total Cache, a plugin such as My CDN will also do the trick.
Hopefully this article has been valuable in giving you some tips on how to run your WordPress site faster. I can’t stress enough how important a fast loading site is in this day and age. If your site hasn’t loaded within three seconds, a good chunk of your search engine traffic will have left and gone onto the next search result. Not only will having a faster site get you more visitors, but it’ll also help you rank higher as Google now takes site speed into account in its search algorithm.
I recently had to design a couple of teaser pages for a client and a personal project, and this led me to think about what exactly makes for a good teaser page — or to be more precise a “coming soon” page that companies often put up before they’re ready to launch their product. After careful research and many scientific tests in the brand new field of teaserology, I’ve developed a patented Teaser Effectiveness Analysis Matrixâ„¢, consisting of four elements. The perfect teaser page must score high on all four axis of the following:
Memorability,
Virality,
Desirability,
Data collection-ability.
I know that “data collection-ability� is not proper English, but inventing new words is one of the perks of being a scientist. As we’ll see, most teaser pages focus strongly on two or three of these elements but rarely hit all four.
Why Do I Need A Teaser?
Even though people seem to put out a teaser website for anything these days, let’s step back and think about why one would need a teaser. After all, putting one together takes time and energy, and you could argue that the effort would be better spent on the product itself.
But a teaser can go a long way to ensuring a successful launch. Raising awareness of your product long before it ships makes sense: people are more likely to interact with your app if they’re somewhat familiar with it, so letting them hear about it as soon (and as much) as possible helps. Ideally, you would create a climate of anticipation, and make people look forward to the release date. People love to know in advance about the next big thing, and you can use it to your advantage.
A Powerful Motivating Tool
Another factor that is not as obvious but perhaps even more important is motivation. When you’re working hard on something, without any guarantee of success, doubting yourself and losing motivation is easy, and this circumstance often leads people to abandon otherwise promising projects.
Raising awareness and collecting email addresses long before launch does two things to combat this lack of motivation. First, by putting the project out there, you make it much harder for yourself to quit, because we all hate to let people down. Secondly, pre-registering users shows you that there’s actual demand for what you’re building, which goes a long way to silencing those gnawing doubts. In this context, the teaser is a vital part of any product’s Web strategy.
Now that we know the why, let’s look at the how, and analyze a few strategies.
Teaser Page Strategies
Create a Strong Identity
As stated, the first dimension of a good teaser is memorability. One way to achieve this is with a strong brand. By “brand,� I mean all of the visual attributes that people associate with your product: logo, colors, style, etc. Once you launch, the website could end up looking very different than the teaser page, so having a strong brand is a great way to maintain continuity.
Many websites combine an attractive logo and strong color scheme to establish the brand’s identity, without even telling you what they do. It doesn’t have to be just color or a logo, though.
As for Piictu, nothing in its teaser stands out at first glance, but the care given to the overall design (from the subtle background pattern to the combination of typefaces and colors) is memorable in itself, putting the application in a class of its own.
Talkbee (see the screenshot below) is a personal project of mine. I decided that I wanted a strong design with bright colors and a memorable logo to differentiate it from the competition.
The logo is prominent on Talkbee, and the whole page is designed around it.
Use a Gimmick
One design detail trumps even great branding: a gimmick, something special that people haven’t seen before. One of the most famous examples of this was the teaser page for Silverback, which included a CSS parallax effect (you can still see the effect on the current website if you resize your browser window). The website went viral in social circles and became hugely popular on the strength of that little CSS trick alone.
The Kickoff‘s teaser page features a subtle yet nice illustration and a small email subscription box..
One popular technique that you could use to achieve a “gimmick” is animations, today usually created with CSS transitions and CSS animations. Animations could quickly get overwhelming and frustrating on “realâ€� websites, but they’re appropriate in small doses in teasers. Recent examples of teasers with animation are Cloudring and Kickoff.
Another interesting techniques is to use vertical scrolling to tell a story. The poster child for this is certainly Ben the Bodyguard which doesn’t provide all information right away but rather unfolds a story using animations and scrolling.
A very similar idea was used by Dayri and the beautiful Youzee. The technique is successful because storytelling helps people make sense of their environment in a logical and linear way. A linear story hooks us much more effectively than disjointed facts.
Leverage the Power of Social Circles
A more interesting recent development in design of “coming sooon” pages is to include viral mechanisms in the pre-registration process itself. The simplest form of this is a simple “Tweet this pageâ€� button on the page.
LaunchRock, a service that lets you quickly generate a teaser page of your own, takes this a step further. After registering for a LaunchRock-powered website, the user gets a personalized link to the teaser. The more people register through this link, the sooner the user gets access to the website. In fact, LaunchRock itself uses this technique: in order to create your own teaser website through LaunchRock, you need to get three other people to sign up to the service… Confused yet?
Another interesting idea is used by the “king of viral sign-ups” Dabble.in. Sharing Dabble.in’s link won’t get you early access. Instead, if multiple people request the same user name when signing up (say, “Johnâ€�), then whoever gets more people to sign up wins the user name, while the others have to settle for less desirable alternatives (like, say, “John1986â€�).
If you’d rather not go to these extremes, then simple “Tweet� and “Like� buttons are still a good way to encourage people to spread the word. Of course, the easier it is for visitors to share your link, the more they’ll do it.
Give Something Back
Probably the most effective way to make people share your teaser is to not just help them reserve a special spot, but also give something in return. For example, if enough of your friends sign up, Fab.com gives you up to $50 in website credit.
Fab.com knows that nothing motivates people like money.
But you don’t have to offer money. You can imagine all sorts of deals: free icons, WordPress themes, etc. Even better, offer the product itself. For example, for every person you refer to its service, Dropbox credits you both with extra storage. The best part is that this strategy won’t cost you anything until you’ve actually launched, and even then, because it’s your own product, the costs remain low.
Make People Want It
A word of warning. No matter how clever the viral trick, it won’t matter if people don’t actually want to use your app. As smart as Dabble.in’s sign-up process is, nothing on the website hints at what the app actually does. The effect is that many users might find no incentive to share the teaser, because they’re not even sure why they’d want access to the website.
This is why the vast majority of teasers fail: they simply don’t make you want to use the product. The easy solution is to just come out and say what your product does. Show screenshots, post a short video or write some killer copy.
Youzee’s teaser is so full of eye candy that you can’t help but be curious about the app.
Even if you’re restricted in how much you can say about the product, you still need to make people care. You can do this through exceptional design, as Piictu, Youzee and Kickoff do. People will naturally assume that if your teaser is well designed, the product will be, too.
Collecting Data
Of course, if the teaser is successful and goes viral, you’ll face another problem: what to do with all of these visitors? The easiest thing would be to just collect email addresses and add them to your mailing list. You can use services such as MailChimp or Campaign Monitor to manage your list. Both services make it easy to embed and style a simple form on your page; and then you leave the rest to them.
Prefinery promises to make you happier by removing alien probes from your brain.
You also have more advanced options. For example, Prefinery promises to streamline the pre-launch process, taking care of everything from email collection to beta management. But obtaining data doesn’t necessarily mean collecting email addresses. You could poll visitors on your teaser page using a service like KISSinsights, or use Olark to let visitors chat with you in real time.
A Teaser Template
The teaser should be all about your product and should be tailored to your goals. That being said, I’ve designed a generic template for you to study, adapt and use as is in your own project. (Thanks to Sharypic for letting me use its screenshots.) You can download and use the PSD template for free in all your private or commercial projects.
The teaser is just one piece of the puzzle. Other important parts of a successful pre-launch campaign are a Twitter account, Facebook page, blog, and others. Unlike on a teaser page, which is usually a one-way medium, people can reply to your tweets and leave comments on your blog. These channels are valuable because they help you get feedback on new ideas and maybe even correct course to better target your market.
As we move forward leaving our history behind us, time takes its toll upon that which we have left there. For centuries people have been building structures that have weathered and ruined over time, and in those ruins is more than a rich reminder of our past. There lies an abundance of inspiration just waiting there to be tapped by anyone who happens upon them.
With so many classic examples of solid, pristine structures evolving into grunge ridden ruins holding attitudes and tones they once failed to possess. All imparted by the degradation time has inflicted upon them. That is what we find ourselves in search of today. That attitude and tone that grunge can impart for our design works.
By browsing through these fantastic photographs of ruined remains, we hope that you can find all the inspiration you need to get your grunge ridden design project on its proverbial feet and running! With so many amazing textures and corrupted compositions displayed through the hands of decay, inspiration should be flowing freely for you in no time.
Many clients are still asking for various bookmarking widgets for social media. You know, the kind that shows a bunch of icons for Twitter, Facebook, email, etc. Two popular examples are ShareThis and AddThis, but there are others.
What bugs me with every social media sharing widget I have looked at is that they are not very keyboard friendly, i.e. they are difficult or even impossible to use without a mouse. They also tend to use invalid, obtrusive markup.
