Responsive Web Design, or RWD, is a relatively new concept in web design, first making an appearance in 2011. It was listed in the top 2 of Web Design Trends 2012 – so it’s a big deal in the web design world. But what is it, and what does it mean for your website?

Basically, RWD means a website ‘responds’ to the device it is being viewed on. Tablets, smartphones and other devices are becoming increasingly more popular than traditional desktops and laptops, meaning more and more people are viewing websites on these devices. While most devices will fit websites onto their screens, it’s often too small, especially on smartphones, and users are having to zoom in to read or view websites properly.

The solution to this problem is RWD. A website will be designed for large, desktop screens as normal, but in addition, the designer will develop a few more layouts for different screen sizes (ie. small screens, tablets and smart phones). Depending on what the user is viewing the website on, will determine which layout of the website is loaded.

A quick way to check if a site is responsive is to shrink your browser window – if the site ‘changes’ to adjust to the width, it’s responsive.

In the past, when phone’s first started becoming more popular with web browsing, two sites were designed. The normal site and a mobi site, but even mobi sites are limited to devices and a certain size. RWD can cover as many sizes as the developer wishes to accommodate.

We recently completed a responsive website – motorvaps.co.za. If you shrink your browser right down, you will get a preview of the layout on a smartphone. Here are some screenshots as well:

Desktop (left) vs Mobile/Smartphone (right)

Unfortunately, it is not an easy thing of just taking your existing website and making it Responsive. RWD needs to be kept in mind before the site is even designed, as RWD relies on sizes and percentages of the web page. If you have a website that is a year or more older, it’s likely it will need to be redeveloped if you want it to be Responsive.

If you want more info or are interested in getting your website developed for RWD, email me directly on lisa@casson.co.za and I’ll be happy to assist.

In 2009, I wrote an article on my blog called “How to Protect your WordPress Website“. It provided instructions to help make your WordPress site a little less ‘hackable’. Unfortunately, hackers are smarter and more and more WordPress websites are being compromised. Here are some old tricks that still apply, as well as some new ones.

If you are not a web developer and have no idea how to implement any of the following, please contact us. We offer affordable WordPress security packages that include backups.

1. Change the Default ‘admin’ Username

This is the easiest way for a hacker to get into your website because they know most of the login usernames are ‘admin’. They run a password script on your site, and they’re in before you know it! Log into your site, click on ‘Users’ on the left, create a new Administrator username (that has NOTHING to do with your site) and choose a difficult password (try this Password Generator). Log out of your ‘admin’ profile and login with your new details, then DELETE the ‘admin’ profile.

2. Keep WordPress and Your Plugins Up-to-Date!

Another common security risk is not maintaining your WordPress version and plugins. Always make sure you have upgraded to the latest version of WordPress and that all your plugins are up-to-date.

3. Install Security Plugins

Despite all my efforts to keep my websites safe, hackers still get into my sites, in ways I cannot even begin to imagine. They can get in through a compromised hosting provider, cPanel, malicious scripts, you name it! My best defence has been these two security plugins:

• Wordfence Security: A nifty plugin that scans your site for malicious code, let’s you permanently block IP addresses from accessing your site and emails handy notifications (like if someone is locked out from trying to log into your site). It then gives you the offending IP to block. They also have a paid version that let’s you block countries (Useful if you’re audience is local, then you can block common offending countries like Russia and China).
• WordPress Firewall: Exactly what it says it is – a firewall for WordPress. Make sure you set up notifications for blocked attacks. You can then permanently block the IP from accessing your website with Wordfence. (Although outdated, it is still one of the most useful plugins I use)

4. Backup Your Website!

No matter how much security you put into place, there is always a chance your site may still get hacked, WordPress or not. Make regular backups (depending on how often you update your website) or check with your hosting company to see if they make backups. This is also useful if an upgrade goes wrong or you make a change you cannot undo.

This post will give you step-by-step instructions for setting up WordPress on a domain you own (as opposed to a free domain hosted with WordPress). Previously, I wrote an article on how to install WordPress with websites with cPanel.

In this article, I will be showing you how to install WordPress on other servers that don’t have cPanel (This method works for ALL websites, using cPanel is just easier in some cases).

You need a basic understanding and access to the following for this tutorial:

• A hosted website with at least one free database
• FTP Access
• Domain support (if your client owns the domain, make sure you are a technical support contact on their domain)

Step 1: Download & Upload WordPress

Download the latest version of WordPress from wordpress.org. Upload the contents of the ‘wordpress’ folder to your server via FTP. Once you’re done, your FTP should look something like this:

Step 2: Setting up an empty Database

I am by no means an expert with databases, so don’t get discouraged if you don’t understand why or what these are for. All you need to know is that WordPress requires one to work.

The easiest way to set one up is to ask your hosting company! Email or phone your website hosting provider, let them know you are setting up WordPress and ask them to create an empty database for you. They will then send you the following details:

• Database name
• Database username
• Database password
• Database host (IF applicable – most servers don’t require this)

Step 3: Run the WordPres Install

Double check you have uploaded your WordPress files correctly, make sure you have the database details on hand and visit your website. WordPress should prompt you to create a config file. Click ‘Create a Configuration File’ and enter all the database details as required.

If everything is entered correctly, you will be presented with the ‘Welcome’ screen from WordPress.

Congrats! You have successfully installed WordPress! Now pat yourself on the back and enjoy your new WordPress website.

If you’re still struggling to install WordPress or simply don’t have the time to set it up yourself, I will be happy to assist you. You can email me here for my costing.

We work closely with many companies and individuals who often bring us web design work. OneStream is one of those projects that was handled by a good associate of ours, but designed and developed by us.

When we first received the project, the client had a very clear idea of the type of website he wanted. He was determined to have his website looking very similar to an example he had sent us, but once he had received our design, he was happier.

Originally, it was a black-themed design (based on the site he liked) with touches of blue and yellow from their logo, but it soon changed to the final blue design with touches of yellow you see below. The client was very happy with the overall look and feel and user-friendly layout.

For us, it was a reasonably quick and easy project (although I can’t say the same for our poor project manager! :))

Here is the completed new website:

Client Information:

Company: OneStream Software
Website: www.onestreamsoftware.com
Design Type: WordPress Design
Platform: Full WordPress CMS Solution

The latest version of WordPress, 3.3, was released earlier today and has been called “Sonny” in honour of the jazz master, Sonny Stitt. It is ready for download on the WordPress website, or within your WordPress dashboard (We ourselves have a ton of websites to go through and update this week!).

There are some incredible improvements on the latest release. Here are just some of the main new features:

• WordPress 3.3 now has a much better user experience within the WordPress dashboard
• It has a revamped “Welcome Screen” with a basic overview and some tips getting started
• It has ‘Feature Pointers’ which are basically tool-tips that point out new features
• An improved contextual help with a breakdown of all features for the current page you’re on to quickly solve problems
• New dashboard menu no longer works like an accordion, but rather a drop-out menu (yay)
• Dashboard header and admin bar have been combined into the new “Toolbar” found across the top of the dashboard
• Drag-and-Drop Upload: This is my favourite update so far – The image, audio and media uploaders have been combined into one button, and the uploader now supports Drag-and-Drop. You can drop multiple file types at once, and it will upload them all together.
• Finally, they’ve improved the touch support on the iPad and other tablets

All in all, a very exciting release! I’ve updated already and am enjoying exploring the new dashboard. Have you updated yet?

Autosure was originally only a SEO client. They had ongoing search engine optimisation as well Adwords management (I wrote a case study on their Adwords Banners a few weeks ago) headed out by our SEO Specialist, Bryan Casson.

After the increase of clicks with his newly designed Adwords banners, we then gave his Facebook page a facelift, and after a few weeks they decided to give us their website to redesign.

Below is their original website design:

The original website was built in old code (tables) and was terribly hard to update because of it’s structure. Updates that should’ve taken 10 minutes took an hour or two. The forms were also not functioning properly.

We proposed a completely new design, built into WordPress with a new structure. The forms were redone (we added spam protection, a submission page and wrote the info to a database), we added photo’s, made the text layout more appealing and overall tried to make the website better in terms of user-friendliness and SEO compatibility. We also added Social Media sharing as well as beautiful call-to-actions, such as the SMS button.

The WordPress platform allows for quick and easy updates by the clients and is also a very SEO friendly platform if the right measures are put in place.

Here is the new and completed design:

Client Information:

Company: Autosure
Website: www.autosurewarranty.co.za
Design Type: WordPress Design
Platform: Full WordPress CMS Solution
SEO Package: Advanced SEO

One of our clients, Autosure Warranty, has on-going SEO. We provide on-site optimisation, keyword analysis etc. for them each month and are also in the process of developing a new website for them. Another service we offer is Adwords Management. They already had existing Adwords Banners but because of the  old artwork, their click-through ratio was appalling. To help with the click-through ratio, we redid the designs to something more modern and classy and added some basic animation.

I ran into a few problems once the new banners were completed. I soon discovered that Google has a lot of restrictions on the animation of Adwords banners. You can read all their Advertising Policies here. Some more specific problems I ran into included the following:

• My animation was too long – Limit is 30 seconds
• Animations are not allowed to repeat
• The file was too big – limit is 50kb

I reckon the above are quite common, in .gif and Flash animations, and it is very limiting but it stops users from really abusing the animations. Anyway, once I was finally compliant, we completed six brand new banners for them.

Before we redesigned the banners, the click-through ratio was about 0.09% and after the new designs it went up to 0.80% (Remember, these are display banners a good percentage is about 1%. From 0.09% to 0.80% is a huge improvement for display banners).

Some of my completed banners are below (to see the animation, refresh and scroll down quickly):

Casson Media are proud to announce our newest WordPress website that was “Designed for SEO” – Mogs International

This project began in March 2011. Our client wanted SEO but his current website had very outdated coding (tables) that Search Engines don’t like. We therefore had to redo his entire website. In April, we presented a new design to him which he signed off on immediately and built in WordPress. The client then proceeded to populate it himself.

We installed a gallery and a news section (which uses WordPress’ blogging functionality) as well as simply plug-ins for a contact form and search bar. He had Flash video’s which we loaded into a very slick lightbox (view here).

Once the new site went live, we optimised it for SEO (the layout of the homepage was specially done for SEO – it contains small excerpts and links to his services). He took the advanced package which includes features such as keyword analysis, content optimisation and making his site “Search Engine Friendly”.

Here is the completed website:

Client Information:

Company: Mogs International
Website: www.mogsil.com
Design Type: WordPress Website
SEO Package: Advanced SEO

Casson Media are proud to announce the launch of another WordPress website for Emil Trautman & Associates.

In late March 2011, I got an enquiry from my design blog for a WordPress website. A financial planner, Emil Trautman, had seen one of my other completed websites (Blink Consulting) and loved the design (he is also in the same field and required a lot of the same features, such as the Budget Planner). Emil knew exactly what he wanted from the start and even the many pros of using WordPress.

We met with Emil immediately and in mid-April we sent the first proofs for his new design, which he loved. He purchased relevant stock images and after a few small changes we proceeded to build the site. Once built, Emil actually populated the website himself and I went in to do the last style changes once he was done.

Emil’s website contains many tools and features. We created a lovely visual overview of his services in the sidebar, added his Budget Planner widget and created his Latest News blog.

Before we launched the site, we prepared the website for SEO and with this head start, Emil’s website listed very well almost immediately. Emil now maintains the website with relevant articles that boosts his rankings in Google. A combination of our SEO setup and Emil’s dedication to his website will get him the results he wants.

Here is the completed website:

Now that his new website is live, we are proceeding to design for some of his Social Media platforms, such as Twitter and Facebook.

Client Information:

Company: Emil Trautman & Associates
Website: www.trau.co.za
Design Type: WordPress Website
SEO Package: Advanced SEO

I am proud to announce our latest completed website project for Blink Consulting. This was a lovely project with an amazing client!

In September 2010, I got an enquiry from my Design Blog for a brand new website design and basic company identity. My client, Heather Raath, required a new logo and a website she could update herself. She had a set budget and we worked a logo, email stationary and a full website into it.

We began with her logo and I supplied several concepts. She chose a design, which was a emblem-type logo of her “B”, and we developed it further. We decided to go with a completely black corporate identity with one other strong colour. I presented several options and she decided on the rich red she has in her logo today. In the final proofs, we decided to have the word “BLINK” as the main logo, with the “B” slightly off center to the right, exactly like a “Power To” symbol.

Her identity then developed around the colour black, with hints of red in places. For her website design, we did a completely black design, and things like the links and headings were in her deep red. The end result was a strong website with a lot of contrast.

Heather chose to use stock images that related to her business, and each header of the website had a different photo. She also had stunning testimonials, which are different on every page. These small elements made her website more dynamic and interesting to page through.

She filled her site with stunning content, including a blog which she populated with stories from her newsletter. She now maintains the website herself through WordPress.

She was a great client from the start and the entire project was completed over email. We spoke over the phone for the first time after the website went live so I could begin showing her how to update the site.

Here is the completed website:

Client Information:

Company: Blink Consulting
Website: www.blinkconsulting.co.za
Design Type: WordPress Website
SEO Package: Built for SEO