Draw Something Pictures

By Pete | @kingpetey | 07 Apr 2012

Some of the best Draw Something pictures I've either drawn or have been sent:

It's ten times harder to build your own website. With a customers site you can find out exactly what they want, make suggestions of what they could do and come up with a specification covering the site plan, design, structure etc.

When building your own website however you already know what you do as you do it every day yet it seems a whole lot harder turning that into an appealing website. 

As with most of our projects we turned to our designer to put together the graphical elements. We've been slowly building on our marketing material over the past 18 months with folders, business cards and more recenltly our brochure so we had a good selection of branding material to base the design on.

Next we turned to our copy writer to help turn what we knew so well into content that would be informative and appealing to the reader. We spent a lot of time working through every paragraph to minimise the jargon and waffle.

Finally we needed to turn the design and text into a website. We went through several iterations with some of the finer elements, the block at the top that fades between services took us especially long to get right.

The end product we hope showcases the business in the way we want it to be seen, the balance between professional and business IT services works well and compared to the local competition we feel we've got a really strong offering.

Let me know what you think and find out more at www.info-sol.co.uk.

 

Here are some of the projects we completed at The Web Orchard in 2011:

AAIB Travel Insurance

The worlds first travel insurance website for people visiting Iraq & Afghanistan. We built a complex quoting, purchasing and policy generation mechanism allowing for the easy purchase of online policies.

www.aaib-insurance.com/travel

Build It International

The Shrewsbury based charity manage building projects in Zambia. We built a Drupal based content management system allowing them to easily update their website with the latest project news.

www.builditinternational.org

Alfaevac

Jordan based Alfaevac provide evacuation services to some of the most remote regions of the world. 

www.alfaevac.com

It's a nomad life

Shrewsbury based Its a nomad life sell a range of tribal art and antiques. The Web Orchard provided a Drupal & Ubercart based E-Commerce system.

www.itsanomadlife.com

Smoke & Pickle

Smoke & Pickle are a Shrewsbury based fine foods producer. They turned to The Web Orchard for a content management system to help their online presence.

http://www.smokeandpickle.co.uk/

Severn Magazine

A new exciting magazine for Shrewsbury. The Web Orchard helped bridge the gap between printed magazine and online publication.

www.severnmagazine.co.uk/

Iraq Business News Marketing

We've been working with Iraq Business News for almost two years now, in Oct 2011 we built a microsite specifically for marketing.

www.iraq-businessnews.com/marketing/

Be part of The Web Orchard 2012

Find out more today: www.theweborchard.com

Following on from my post at the weekend about Responsive Design, a fellow blogger Tristan Bettany has emailed in his example for detecting either the iPad or the iPhone and the screen orientation.

It uses a small amount of PHP to detect the device then CSS to detect the orientation. Copy and paste the following into the head of your page.

<?php
//Functions to check user agent for iPad, iPod, iPhone
function iPadCheck(){
return preg_match('/(iPad)/', $_SERVER['HTTP_USER_AGENT']);
}
function iPhoneCheck(){
return preg_match('/(iPhone|iPod)/', $_SERVER['HTTP_USER_AGENT']);
}

//Set correct css files based on detected device
//orientation property supported in mobile safari to change layout on rotation
if (iPadCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPadPortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPadLandscape.css" />
';
} else if (iPhoneCheck()) {
echo'
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="iPhonePortrait.css" />
<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" href="iPhoneLandscape.css" />
';
} else {
echo'
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1199px)" href="minDesktop.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="fullDesktop.css" />
';
}
?>

The script detects the device then includes the associated stylesheet depending on the orientation.

Any questions add a comment.

AttachmentSize
Package icon Apple Device Orientation Example4.56 KB

Responsive Web Design

By Pete | @kingpetey | 22 Jan 2012

Responsive design is the idea that web site layouts should change based on the users choice of device. Depending on the users environment the design may adapt to the screen size, platform or orientation. 

I've put together an example that you can use in your own web sites. Look what happens when you resize the page horozontally in your web browser or on your mobile.

View now - Responsive Design

Feel free to inspect with Firebug and copy into your own project where suitable.

It uses a condition to tell the web browser which stylesheet to include:

<link rel="stylesheet" type="text/css" media="screen and (max-width: 660px)" href="1col.css" />

In the above example we are saying to include 1col.css when the media is a screen and the maximum width is 660px.

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px) and (max-width: 1200px)" href="2col.css" />

Here we are saying to display 2col.css when the media is a screen, the minimum width is 1000 pixels and the max-width is 1200 pixels.

Any questions I will try to answer in the comments.

Update: When setting the viewport you might want to detect the device with PHP first otherwise the viewport will be set too small on the iPad.

 

An Updated Path

By Pete | @kingpetey | 03 Dec 2011

Back in November 2010 a new iPhone app launched with a fair amount of publicity called Path, its aim I thought was to link together the various social networks making sharing easier; besides did we really need another social network platform? Path's ideas didn't feel complete and as a consequence apps such as Instagram filled the void for cross network sharing.

Last week Path 2.0 was released, tech journalist MG Siegler summed it up nicely and I agree that what really stands out was how well thought out and designed the updated app is. 

With Path 2.0 you can now share anything, from photos, messages, location, music or even when you're sleeping. 

A really nice touch is when you scroll through you path, the way the clock spins as you go back and forward in time. 

The new Facebook application has so many features, there are so many updates from people, companies, organisations, news sites that its easy to get overloaded, Path doesn't feel like it suffers from this clutter.

When web development moved into the Web 2.0 era the empathises was on the interface detail, I'm not talking about gradients and big margins but the way design and JavaScript could be used to make small usability improvements. We saw the same sort of improvements in OS X over its iterations, Path feels the same and I hope it ushers in a new movement in app design.

Path 2.0 feels a fresh start, its simple, well made and a pleasure to use - now I just need more than two friends using the service. Path is available for iPhone or Android. 

www.path.com

We've had a busy week at The Web Orchard with three of our projects going live:

Tuesday - Libya Business News

With the National Transitional Council putting together an interim goverment the oil rich country will soon be a hive of business activity. Based on the sucess of Iraq Business News, getting over 100,000 monthly visitors, we were asked to design and develop the platform for Libya:

www.libya-businessnews.com

Wednesday - Sports Booker

An exciting midlands based startup has developed online software allowing gyms, personal trainers and a range of other sports activities to take bookings and payments online. We were asked to develop a website to help demonstrate how easy to use and powerful their software is:

www.sports-booker.com

Friday - It's a Nomad Life

It’s A Nomad Life is an ecommerce website showcasing an eclectic collection of globally inspired goods from the ancient Neolithic period to the edgy 1980’s. Using Drupal and Ubercart we developed a sophisticated ecommerce website allowing easy viewing and purchasing of products as well as an easy to use administration system allowing for quick management of products.

www.itsanomadlife.com

To see what we can do for your website - visit us online or call 01743 367927!

Tim Barnes and Simon Berry, both 24, have raised almost £600 for The Alzheimer’s Society with a 24 hour podcasting marathon.

The podcasters, both from Shrewsbury, began their marathon at 10pm on 27th September, recording and releasing a new podcast on the hour, every hour, right through until 10pm on Wednesday 28th, with no sleep.

Tim and Simon’s Podathon gained an army of followers across the world and found itself on iTunes, as one of the top 20 comedy podcasts in the country, by the time the marathon had finished.

 “We like to keep our shows light and funny, the real challenge for The Podathon was keeping the podcast funny when we had been awake for 30 hours” said Simon, of the challenge.

The pair, who recorded The Podathon from Tim’s flat in Shrewsbury, have set a target of raising £1,000 for The Alzheimer’s Society.

“£600 is a lot of money, but we know we can raise more, if every listener donated just a pound we would smash that target to pieces, and probably raise a lot more” Said Tim, of the money raised so far.
Tim and Simon are already successful in the podcasting world with their other podcast ‘Tim and Simon’s Brain Spill’, which has now been downloaded around 100,000 times and has itself been featured on the iTunes podcast page.

For more information on how to donate and to listen to The Podathon itself, please visit www.timandsimon.co.uk/podathon.

Here is everything I’ve learnt recently in trying to debug a Wordpress sites performance problems. The site runs on a dedicated server however a lot of these also apply to shared hosting. Remember to please take backups before trying any of these.

Basics

1. Run Wordpress Updates
Often performance issues will be fixed in newer versions of Wordpress, plugins and themes. This may not always be straight forward as it depends on the plugins you have installed and the theme you use.

For all plugins you need to check they are compatible with the latest version of Wordpress, fortunately you can easily see this on Wordpress.org and on the Updates page in newer version of Wordpress.

When I come to run updates I usually take a snapshot of the site to run locally. I can then test and debug any problems before running them on the main site.

2. Empty Caches
Caching can be a great way of speeding up your website however it can also get in the way when trying to debug other problems. When trying something new always clear your caches to make sure cached data doesn’t interfere with anything you’re trying. Most caching plugins have the option to disable caching for authenticated users.

Plugins

3. Disable unused plugins.
If you’re anything like me you will always be trying new plugins for that extra bit of functionality. Check to see if there are any plugins you have that don't add to the value of your site or don't fit in with what your site offers.

4. Enable Caching Plugin
For years I’ve been using WP Super Cache as its easy to setup and works really well. However as I was troubleshooting around this area I found W3 Total Cache, this has more configuration options and the ability to configure a Content Delivery Network (explained below). Most of the default options are a good start however its worth going through every one to see how it affects your site.

5. WP-Optimize
WP-Optimize gives you access to a number of database tasks without needing PHPMYADMIN. Among other features it allows the easy removal of post revisions, comments in the spam queue, and unapproved comments.

Config

All of the following are changes you can make to the wp-config.php file (not to be mixed with wp-config-sample.php).

6. Limit number of revisions
The idea behind this one is that as your site grows by limiting the number of revisions an article can have the wp_posts table grows at a slower rate meaning any SQL queries take less time to complete. The WP-Optimize plugin mentioned above also lets you remove unwanted revisions if you wanted to do this manually.

define('WP_POST_REVISIONS', 3);

To disable post revisions all together add:

define('WP_POST_REVISIONS', false);

7. Increase memory limit
While not strictly for performance if you get out of memory errors you can add the following:
ini_set('memory_limit', '128M');
(This can also be set in php.ini and .htaccess - some shared hosting may not let you overwrite this).

8. Enable Wordpress Caching
There are different levels of caching available - to enable the basic built in caching add:
define('WP_CACHE', true);
(Caching plugins often do this for you.)

9. Add Blog Address and Site Address
Each time a page is loaded it looks up these values from the database - the idea behind hard coding these is that its one less SQL query to do.

define('WP_HOME', 'http://www.imafish.co.uk'); // blog url
define('WP_SITEURL', 'http://www.imafish.co.uk'); // site url

Once these are set in the wp-config.php file they will be greyed out in the Wordpress Admin General settings page.

10. Add Template and Stylesheet Paths
As above this adds in the paths for the template and stylesheet to stop an SQL query to find it.

define('TEMPLATEPATH', '/absolute/path/to/wp-content/themes/<theme>');
define('STYLESHEETPATH', '/absolute/path/to/wp-content/themes/<theme>');

This will disable the ability for you to change themes unless you remove these two lines.

Content Delivery Network (CDN)

11. Use a CDN
A CDN allows you to serve static content such images, scripts and stylesheets locally in a geographical sense to the user. So if the server is US based and the visitor is from the London they would get these files from a server close to London. The idea being that as the data is being served from a fast server/network close to their location loading time will be reduced.

CDNs have been around for a long time however only more recently have they become very easy to integrate with Wordpress. The service I tried was MaxCDN they offer 1TB of bandwidth for $40 making it cheap to play around with. Before you can setup MaxCDN with Wordpress you need to install the W3 Total Cache plugin and you need access to your domains DNS.

11a. Login to MaxCDN go to Manage Zones and click create pull zone. As the name suggests a pull zone will copy content from your site so you don’t have to worry about uploading it to multiple places.

11b. Enter your blogs name for the pull zone, your blogs URL for Origin Server URL, something like cdn.yourblog.com for the Custom CDN Domain, something that describes the zone for Label and tick the compression box.

11c. Maxcdn will give you a URL for your CDN that you need to setup as a cname in your sites DNS. This may take several hours to propagate.

11d. Go to Manage Account > API and add a key. The description can be your blogs name.

11e. Login to Wordpress and go to the W3 Total Cache Performance section. Scroll down to Content Delivery Network, tick enable and select NetDNA/MaxCDN.

11f. Go to the Browser Cache Settings tab and change all three options for ‘Cache Control policy’ to ‘cache (“public”)’

11g. Go to the Content Delivery Network tab in W3 Total Cache and add the API ID and Key provided by MaxCDN. Add the cname you setup under Replace site’s hostname with.

Refresh your cache and visit your site. If everything has worked you should see the urls of your stylesheets, scripts and images have been replaced by the cname URL you setup in MaxCDN.

Server - Apache

The following tips require server level access and are for more advanced troubleshooting and performance tweaking.

12. Enable compression
mod_deflate allows the server to send compressed files to the supporting browser, it will increase CPU slightly however should decrease the amount of time a client is connected to the server, a full tutorial can be found here.

13. Hostname Lookups
Turning off DNS lookups can help make your server capable of handling more traffic.
To do this add to your httpd.conf or Apache2 file (often found in etc/apache/httpd.conf or /etc/apache2/apache2.conf):
HostnameLookups Off

(There are a lot more Apache tweaks however the above two often get good results).

Server - PHP

14. Setup an opcode cache such as APC 
If your sever has APC installed you can take advantage of this with APC Object Cache Backend plugin.

15. Memcache
Memcache is another type of caching for PHP, again there is a plugin - Memcached Object Cache.

16. Batcache
Again Batcache is another caching module - Batcache Wordpress plugin.

(I will confess I didn't try any PHP caching techniques in my recent troubleshooting however where I've used them in the past there have been significant performance gains).

Server - MYSQL 

There are a number of tweaks for mysql.

17. Enable Query Cache
This will cache results to help speed up queries.
In my.cnf find or add:
query-cache-type = 1
query-cache-size = 20M
query-cache-limit = 2M

18. Setup logging of large queries
In my.cnf find or add:
log-slow-queries
long_query_time = 1

Enabling logging of large queries ultimately helped me fix the performance problems with my site. For instance I noticed a query for counting comments to determine popular posts was taking over a second to complete (since the site was now getting a lot of comments). By rewriting this query and setting it to run on a daily cron job I could still generate a list of popular posts without the query running every time the page was loaded.

19. Optimize/Repair Database tables
In PHPMYADMIN or using WP-Optimize you can optimize and repair database tables. Remember to take a backup of these tables first.

Server - General

20. Running Top
While not strictly a performance tip, running top or task manager can help you troubleshoot when the CPU is being used excessively for PHP, Apache or MYSQL.

21. Using ab or siege
Following on from running top tools such as ab or siege can help you test how any of the changes you make affect the performance of the server.

22. Checking with server admin/hosting company
If your server is managed by another company it’s often worth checking with them if there are any performance problems on there. On shared hosting another account maybe be culprit and causing issues so checking with the provider can often fix this.

Theme Optimization

23. Theme Performance
A simple way to see if your current theme is causing problems is to change to another one. If with the new theme the performance is significantly better you can then start disabling plugins and widgets until you diagnose the problem.

Firebug/YSlow

Firebug and YSlow are great browser addons to help diagnose performance issues:

24. Minify/Combine Files
Plugins such W3 Total Cache allow you to minify and combine scripts so that the browser has less and smaller files to download when requesting.

25. Optimize Images
The net tab in Firebug lets you see exactly what is downloaded when loading the page and the total size of all the files. You’ll be able to see any particularly large images and scripts and optimize accordingly. 

I hope you've found this list helpful - if you have any tips please leave them in the comments.

With the start of the new year it's a great time to start new ventures and one of the best ways to tell the world is with a website and your own @yourdomain.co.uk email address.

To try to make the cost to entry as low as possible we're offering 20% off with the code SAVE20 on top of our already low prices!

All our accounts come with unlimited email addresses, forwarders and a host of one click install scripts including PHPBB (for a forum), Wordpress (for a blog) and Drupal (for a full featured content management system)

Signup today at www.switchweb.co.uk
 

Pages