This versions sees huge changes, both in terms of the design and the backend code that runs it. Below, I’ll go into a little more detail on each. But first I’d like to point out the happy little coincidence that sees that today is not just launch day for V3 of my website, but also the 10th anniversary of WordPress (the system I’ve been using for the last 4 or 5 years to build websites) AND that White Heat Design itself turned 5 years old this month :)

The Design

So this design is quite a leap from V2, which you can still see here. But then again, V2 was quite a leap from V1! I’ve thrown out the old logo, which I was never happy with. What I have now is simpler, clearer and classier. It’ll work well on any medium, will translate into different colours if necessary and most importantly – I’m finally satisfied with it.

As far as the colour palette goes for this version, using dark imagery and offsetting it with colour accents just felt right at the time. I initially set out to use mostly white with hints of pink and grey, but the dark images worked so well I couldn’t help myself. Image credits to mmarcotte51 and krystian_o for the beautiful images on the Portfolio page and Home page respectively.

One of the biggest features of this design is actually the underlying structure. V3 is now responsive and mobile-ready, meaning it should offer a much nicer reading experience on mobile devices and smaller screens than the previous versions. The unrelenting upward trend in mobile-device web browsing made this a priority.

The Technical Stuff

Some of you might be interested in the inner workings so I thought I’d map out the technologies used.

• WordPress – Similar to V2, I’ve used WordPress as the content management system to organise the website. This time however, I’ve made more use of WordPress’ power. I have custom post types set up for portfolio projects, information articles and a private client section. Custom taxonomies are used to order all of them and custom meta boxes are used for additional data. I also wrote a couple of plugins to manage aspects such as overwriting the WordPress branding in the admin, which should also be useful for future projects.
• Foundation by Zurb – Zurb’s Foundation framework is a god-send. It allows rapid HTML5 and CSS templating to quickly knock-up website structures that are mobile-optimised and semantically sound. Having a framework like this integrated into WordPress makes building page layouts so much more rewarding, quicker and relatively future-proofed. On top of this, I added a bunch of my own “utility classes” that can be applied to just about any element on the site for my own styling tweaks. This is particularly helpful for when you want to slightly alter the default Foundation layouts, but don’t want to edit the core CSS or html.
• PHP Mobile Detect – In conjunction with the structural framework above, I rolled in this lightweight PHP mobile detect script. This allows me to target mobile devices (general or specific). I’ve used this mostly to determine whether certain website elements should be loaded for smaller screens or not, but it has a whole lot more potential.

All in all, I’ve learned tonnes of stuff from this one project alone and it’s definitely increased my code library for future projects. It’s actually been very enjoyable, at least once I got past the initial design block that seems mandatory for designing your own website. It won’t be perfect, but I’ll continue to work on it over time.

Version 3 of White Heat Design is dedicated to the memory of an extremely close friend of mine who passed away in December 2012. I miss you every day.

The post WHD: Version 3 Re-design and 5 Year Anniversary appeared first on White Heat Design.

One of them pointed out how he felt it necessary to run his own dedicated mail server so that he had full control of his mail and could get to it or, if it ever became necessary, destroy it without needing to rely on somebody else. This got me thinking about what and who else we rely on.

Splintered data

Take a minute to think about how many web-based services you use. This can be anything. From Gmail for email, to Flickr for photos, to Delicious for bookmarks and just about any other service you interact with and record some form or other of data on.

Just glancing through the bookmark folders on my browser I can see that a conservative guess would put the figure at around maybe 50 for me. Conservative because I know for a fact that I have at least double that amount in random social networking profiles or file organisation and to-do type websites.

That’s pretty amazing considering I feel like I only ever use Twitter and Facebook.

But think a little deeper about the services you truly rely on. I use Gmail to collect all of my mail from various other web-based email clients and I also run approximately 10 more custom mailboxes though it. Google has control over all of that.

Facebook has owned the majority of my thoughts, activities and online social interactions from the last 7 years or so since I first joined.

Twitter has collected just short of 1500 of my brain farts and shared links.

WordPress CMS accounts for the vast majority of websites I build and therefore a significant portion of revenue I make on an annual basis.

The scary questions I’m forced to ask myself at this point are:

1. What happens when one of these services goes away for good?

and

2. What happens when I go away for good?

I tentatively admit that I might be able to cope without Twitter or Facebook. But Gmail? True, I could switch to another email provider, but not without massive upheaval and not without needing to transfer multiple gigage of data over.

WordPress

It’s no secret that I am a huge advocate of WordPress. Maybe it’s because I’ve been with it from relatively early stages when I didn’t quite understand what it was for to see it grow into what I believe to be one of the most unrelentingly innovative pieces of software freely available today and something that powers 14.7% of the top 100,000 websites on the net. I still cannot understand how I am allowed to download it again and again without penalty or charge.

I’m not going to get into the GPL/freeware debate. That’s been done to death. I want to think more about where and how we rely on others to make stuff work for us. The significant rise of WordPress is due in no small part to the wealth of plugins available (snippets of code that can be easily clipped on to your WordPress site to add functionality). We rely heavily on those plugins. We rely on them to keep our client sites working and we rely on them to keep our own sites working. To keep this one working. With so much at stake you have to ask yourself why you allow yourself to do that. Not once have I seen a plugin author explicitly say they will support the growth of the plugin forever. How could they? Which means they could stop supporting it tomorrow. That means it can easily become outdated and “broken”. If you’ve been relying on that plugin to power multiple sites that means all those sites could eventually break. But you’ll still do it.

Now and next

Is it a by-product of today’s generation that we expect everything to be done for us and to work within a couple of clicks? At the expense of having full control of something ourselves? Have we regressed into a world of disposable information where we flit from one application to another until we find one that does exactly what we want, neglecting to clean up the data we left behind on the lesser apps? A username here, a password there – how much can that really hurt? Splintered data everywhere.

I find myself increasingly inclined to write as much website functionality as I can myself, before ‘resorting’ to a plugin. But with so many websites to maintain and so many rapid advancements in technology, is that feasible? At some point I’m going to come across something I don’t now how to do and have to find a plugin to sort it for me. Indeed, I already have. Many times. Every time I do that, I feel like I’ve lost a another little piece of control to something or someone external.

But what is it I’m trying to protect? What is it I’m trying to keep control over? How many tweets I’ve got about a particular article? Tweets owned by Twitter, not me. My bookmarks? Bookmarks externally hosted by Gimmebar. My Facebook pictures of ‘Rome 2011′? You get the idea.

Ultimately, this is the life I’ve chosen to live. This is the business I’ve chosen to work in. It’s fast paced, it’s disposable, it’s continually evolving. If I’m not comfortable with that, then I should change the way I live it. Delete my social profiles, transfer my bookmarks to my own computer, never get involved in online debates, revoke access from all apps on my phone. And whatever else it takes to regain full control of my digital self.

But where’s the fun in that?

Conclusion

Yes, we all rely massively on third parties. But what’s the alternative? Write everything yourself? Every script, every function, every plugin? Manage your own servers? Set up your own CDN? For the majority of us, this isn’t realistic, or in all honesty, particularly desirable. These third parties are far more advanced in what they do, to the point where I’m unlikely to ever match or better their service. And I’m ok with that.

So I’ll stick with jQuery. And I’ll stick with Gmail. And I’ll stick with Dropbox. And I’ll stick with everybody else I’ve invested a little faith in along the way.

At least until a better alternative comes along.

The post Scripts, Plugins and Relying on Third Party Vendors appeared first on White Heat Design.

Finally! I have a solution to a long term and quite frustrating problem. Part of my web design process when working with a client is to look for sites that inspire the client. Sometimes they want to see the kind of thing that can be done. Sometimes they want to see colour combinations. Sometimes they just want some ideas. Previously I’d have to dig out my bookmarks from somewhere like Delicious or Diigo and filter through them by what I think it is they want to see. Both are good enough at keeping my content organised. But both also lack that visual impact that’s necessary for the early stages of client interaction.

I took my frustrations online via Twitter. And luckily so. What I got was a reply from Nick Cernis about a service I remember hearing about a while back, but didn’t fully investigate for whatever reason.

@whiteheatdesign Try gimmebar.com — takes screenshots of sites you capture, auto syncs with Dropbox. Very neat.

— Nick Cernis (@nickcernis) February 1, 2012

Turned out, it was the perfect solution. Yay! Social media is useful.

Enter Gimme Bar

Gimme Bar allows you to create collections of bookmarks. Crucially, the javascript bookmarklet allows you to take entire screenshots. This is key for me. When I’m showing clients websites for inspiration, it’s useful to be able to see a whole moodboard of similarly styled or coloured sites.

You can add descriptions for each item you save and make it public or private. The only thing missing for me is tags. Collections are great but I’d like to be able to organise my bookmarks a little deeper. For instance, I’d like to be able to mark a particular screenshot as both ‘e-commerce’ and ‘blue’ without needing to add it to two collections. Still, it’s a fantastic free service (free for now at least).

Now, even if I don’t know what type of site a given client is likely to want to talk about going into a meeting, as long as I’ve spent a bit of time organising my Gimme Bar account, I’ll always have something relevant to show them.

Long term problem solved. Cheers @NickCernis

The post Moodboard Tool – Problem Solved appeared first on White Heat Design.

While everything I read is telling me that this is great and absolutely the way to be designing websites ‘these days’, I can’t shake this feeling that it’s only a matter of time before it goes the same way as every other website: outdated and running off now-frowned-upon code.

What’s the problem?

I’m not happy with the website, despite it checking lots of boxes. I’m already looking forward and thinking ‘right, what’s next?’. Replace all images with SVGs? Change all links to be CSS3 animated? Cut down the framework to be even simpler and more lightweight? It feels like a never-ending cycle of pressure to update and improve every website I build, as they come along. There is no end. And I’m ok with that – I understand that mine is an insanely fast-paced industry with a virtually insurmountable breadth of avenues to explore and master.

But it becomes a problem when you don’t know where to start with your next project. It becomes a problem when there is a degree of choice-paralysis. More so when you don’t know the correct answer. And given the speed of development in web design, the thought of falling behind is petrifying.

I’m at the stage now where I feel like I need to just wait. To put off designing any more websites until the full spec of HTML5 has been scoped. Until there is a more efficient stylesheet reset. Until there is a standard level of browser support on every mobile device. Until a higher screen resolution is adopted across all smartphones. Until I know that what I’m creating now….will last forever.

And I know this is wrong. Because it isn’t possible. You cannot indefinitely design for the future in any one moment. More than anything it’s a mental block. For me at least. I find moments where it almost completely inhibits my productivity.

What’s the answer?

The correct answer is…. that there is no answer. Nobody is right. Because nobody really knows what lies in wait. The more experienced, educated, conceptualists amongst us will have their ideas. And they might be closer to the mark than you or I. But they don’t know.

Fear of working in the now for what lies ahead is a silently dangerous and debilitating state of mind. There will always be the option to wait it out and see what happens before you employ a new technology, technique or whatever it may be. But you can’t do this forever. Sometimes you have to take what you know, the hours of research you’ve put in, the lines and lines of text telling you what so and so considers the best approach – take it and run with it.

Work in the present – just do it the right way

There is little point in continually worrying over changing technologies. You can’t control that. What you can do is use the tools available to you, the most reliable resources and the most considered approach to everything you do.

There is so much content out there about what is the “correct” way to design for the future web. You won’t be able to read it all, digest it all, compare it all and then make the most informed decision. It’s too easy to lose sight of what you are trying to achieve in amongst all the noise and differing opinions.

Design for what’s in front of you. And do it with confidence. Because if you’ve done your homework and you believe in what you do, you’ll make the right decisions.

The post Future-Proofing Websites and the Fear of Working in the Present appeared first on White Heat Design.

We work very closely with our clients and by far the most popular request we get post-website-launch is help sending notification emails or regular newsletters to existing clients/customers/subscribers or recipients. This normally means looking to external software or applications, sometimes resulting in incompatibility issues or crazy high pricing.

We decided to bridge the gap.

MailStrike can run seamlessly and simultaneously with any website we build. Everything goes through us so you can guarantee it’ll not just work, but also perfectly reflect your brand and look super pretty :)

I won’t go into the nitty gritty of what MailStrike can do in this post (please check out the dedicated site for a full list of features) but here are a few of the highlights:

• WYSIWYG (what you see is what you get) email editor
• Drag and drop content builder
• No ugly logos or links – it’s all you
• Crazy-powerful reporting (down to who opened your emails and what they clicked on)
• All sorts of email personalisation
• Export and import email lists (unlimited)
• No send limits
• Pay as you go or pay monthly (email us to arrange a custom pay monthly plan)
• and plenty more…

Simple WYSIWYG email editor

Powerful, intelligent reporting

See who opened and clicked your emails and from where

If you’d like to find out more about MailStrike, you can visit the website. Alternatively, email us directly and we’ll answer any questions you might have.

The post We Are Growing – Welcome MailStrike Email Marketing appeared first on White Heat Design.

If you’ve ever looked at a website and thought it looks beautiful, but you couldn’t quite work out why, it might be worth looking at how it uses images. Something I’ve noticed is that a lot of designers tend to slice off a chunk of their images so they look incomplete. But not just any old chunk.

While much of the time the shape and space available to you in a webpage will dictate what size your image should be, it doesn’t necessarily dictate the content or composition. Let’s look at some examples.

gingermonkeydesign.com portfolio

The Ginger Monkey Design portfolio uses cropped thumbnails for every item of work. Such is the level of detail in each piece, it only needs to show a small area to entice users to click through.

Jesse Bennett-Chamberlain's homepage

Jesse Bennet Chamberlain‘s homepage displays some of his recent work using a porthole type effect. Combined with a slight inner shadow it really gives an illusion of depth and layering. This is an example of circular cropping. Not as common as regular square or rectangular cropping, but it’s a very nice effect all the same.

What makes a well composed image attractive?

If you can find the focal point(s) of an image, you can crop it to a dimension that will really impact on the viewer. It can be quite difficult to get the proportions right to begin with, but with practice you’ll begin to pick out these focal points and see exactly what shape and size the image should be before you start work on it.

When cropping your images you want to capture the most interesting part of the image and zoom in on it. But make sure your focal point isn’t directly in the centre, unless the image you’re using is very symmetrical. Also, don’t be afraid to cut off an area of the image that doesn’t add anything. Having an image slightly to one side and cut off hints at more outside the picture tempting the viewer to click through or continue browsing your site. It can really add interest to otherwise boring images.

Before

This is a photo of a little ginger guy I snapped on my iPhone while he was snoozing in the shade in a hotel in Cyprus. He’s cute, but he image itself is not particularly inspiring and it’s a little bit boring.

After

Taking his face and that upturned paw as the focal points, I’ve zoomed in on the image and moved his head (the primary focal point) off centre and to one side. You can see more detail in his face and although we’ve chopped off a large section of his slumped body, you still get a sense of all that laziness. This is miles better.

Banneton wood fired breads

The Banneton website uses close-up shots of the bread they make. Rather than showing whole loaves, they simply zoom in. From a user perspective, it shows the company has a genuine confidence in what they offer and it is therefore presented front and centre. If you look closely, every one of the slider images on the homepage is cropped and focused. None of them include a complete loaf of bread, cup or bowl.

Apple website uses plenty of cropped and incomplete images

Apple are known for producing beautiful, aesthetically pleasing products. But their presentation through the Apple website is also consistently appealing. They use plenty of zoomed in and close-up shots to give viewers a real sense of quality and luxury. Take a minute to click through the site and look at how many places incomplete images are used or cropping is used to focus the eye on a particular detail of a product.

What you might also notice is that images are rarely cropped at a 50-50 scale. As in, they are rarely cut directly in half or only show exactly half of the product/subject. The idea of the rule of thirds is regularly applied – something I intend to write a separate post on, as it is beyond the scope of this one.

Using ‘incomplete’ images to break the grid

Grid-based layouts are very popular across the web design industry. They provide a starting point at the beginning of a project and a reference point throughout. While many consider it to be a standard practice, not everyone wants their website to look ‘rigid’ or ‘boring’ as can happen if careful thought is not applied. One way designers get round this potential boxy appearance is by using large images that sprawl across the background of the page, seemingly transcending the grid. Normally they are quite subtle so as not to distract from the main content, but they are also sometimes used for impact.

The beautiful Love For Japan website has trees in the background that point inwards to help focus the eye on the main content. It still uses a 960 grid.

Another method that I’ve seen used is to rotate an image so it’s at an angle. This helps to break the grid visually without actually affecting the layout. A sort of ordered chaos.

The Promise Me Chocolate website uses angled, nicely cropped images. The focal point of the image (the faces) are also off-center, obeying the rule of thirds

Wrapping up

The point of this post is not to argue that every image should be chopped up and presented in the same way. It’s more to point out that you don’t have to use an image in its entirety. If it’s too long or too wide for a particular space on your site, don’t be afraid to open it up in an image editor and play around with cropping it to different dimensions. You might be surprised at what you can find. Sometimes the perfect detail or the perfect focal point is sitting right in front of you. You just need to find it.

Keep an eye out while you browse the web today. I guarantee you’ll see examples of this everywhere.

The post Cropping Images For Aesthetics appeared first on White Heat Design.

As it’s my first Mac, I need to learn a new OS, but that can only be a good thing. Previously, testing websites on anything other than Windows platforms wasn’t an option for me. While the differences have been fairly minimal up until now, they were differences all the same, and it’s good to at least be aware of them. Having an OS X machine to hand makes that possible.

So, what new process(es)?

Well, with my old Dell laptop, despite its supposed power, I really struggled to get work done on it. I treated it like a proper computer and added many of the applications and software I would on my main PC. It couldn’t handle that and became slow and unresponsive. It overheated and would shut itself down on occasions (it did this from the very start) and approximately 1 in 10 times that I started it up, it wouldn’t make it to the login screen, which meant it needed a forced shutdown and would then do a full blown crash recovery and restore, losing lots of my settings. Pain in the arse.

The MacBook Air is unbelievably quick. We’re talking around a 10 second startup and a 3 second shutdown. It makes you want to pull it out whenever you get a spare few minutes to work. This time I’ve loaded only the apps and software I really need. I want to keep it lightweight and flexible.

Slightly smaller than a pad of A4 paper

It simply isn’t possible to replicate my home setup on a laptop. So why strive for that? It’s a mobile device. As long as it can do the bare bones of my work in as simple, quick and effective way as possible, it’s fulfilling its purpose.

So this is my setup so far (I can’t promise it won’t change/grow though):

• Photoshop – for image work. It’s a necessity. I looked at Pixelmator briefly, but it’s missing some critical features and I’ve always used Photoshop. No reason to change if the laptop can handle it.
• Coda – for web dev work. I’m still considering swapping for Dreamweaver, but I feel I should take the opportunity to get to know more software. I’ve yet to really get into it but it looks nice and simple to use.
• Dropbox – helps with the portability ideal, allowing me to sync files across my laptop and main working computer. The plan is to move everything to the cloud over time, allowing me complete freedom in where and when I choose to work.
• Firefox – I hear and read lots of talk of designers and developers switching to Chrome for various reasons. I can’t do it. Firefox is too flexible. It’s too customiseable. And we’ve been going together for years.

So while the majority of the software I’ve installed is the same as I used on my old laptop, the MacBook just makes it feel easier to use. It’s way more responsive and it has completely removed all frustrations I had previously with working away from my main desktop. Mobility and economy are absolutely key to getting work done when you’re out and about and the MacBook Air has it all tied down.

Incredibly thin

The positives of switching to this machine continue to mount up. Here are some off the top of my head:

Positives

• It forces me to learn another OS. This is good for the CV but it’s also useful in general to have a wider knowledge of what’s available to you
• It allows me the ultimate setup for cross-browser and cross-OS testing on websites. Windows on one maching, OS X on the other
• It opens up a world of new apps that are only available to OS X users
• It’s incredibly quick. Startups and shutdowns are almost enjoyable now!
• It’s incredibly beautiful. It’s just nice to look at
• Despite the ageing Intel Core 2 Duo processor, it handles multiple applications with ease – no lag and no freezing so far
• It’s super light and super slim
• The battery life is very good (around 5 hours) and easy to manage using the preferences system
• The trackpad is excellent. The multi-touch feature forces it to be a relevant point here. Scrolling has never been so easy or natural.

Negatives

• It’s bloody expensive.

Conclusion

Overall, so far, it’s been refreshing and rewarding to use not just a new, quicker laptop, but to also experience OS X for the first time. It’ll take some getting used to and learning the shortcuts will definitely require some serious cognitive priming – there are four fairly similar (from what I can gather) operator buttons in a line in the bottom left corner of the keyboard, all used in conjunction with the rest of the keys to perform innumerate tasks.

Bit thicker than a pencil

But this thing is genuinely satisfying to use. Which does matter. If I didn’t already enjoy my work, this little Air should breathe new life into it.

The post New Laptop, New Process appeared first on White Heat Design.

When I mention to people in passing that I’m trying to manage a lot more of my business ‘in the cloud’, most people offer up a rather blank expression. Followed by one that says “I know I don’t need to know about this, but I’m guessing I’m about to hear about it anyway”.

The first and most obvious question that comes to people’s mind is ‘What is the cloud?”. So…

What is the cloud?

There are lots of explanations on the web that you could look up for a definition or to get a historical breakdown of how cloud computing came about. Forget that. You’ll get bogged down. Simply put, the cloud is space on the internet to put your stuff. Anywhere that you upload files normally stored on your home (or any single) computer/device to somewhere on the internet, that you could later access using another entirely different computer/device over the internet….is cloud computing. You already use it with Facebook and Youtube. The complexity with which you access and manipulate your stuff is the only thing that makes it any more complicated.

Just think of it as a big space up there in the ether where you can put things you want to be able to access from anywhere in the world using just a browser.

Why do we need it?

I can’t vouch for everyone because everyone has different and varying needs when it comes to managing their files and documents. But there are a number of circumstances when having access to cloud storage would be extremely helpful.

Mobility

The primary reason for using it is mobility. If all of your files are centralised up there in the cloud, as long as you can get to a computer/mobile device with a browser and internet access, your physical location is irrelevant. Which means no need for remembering to transfer everything to a USB stick, no more emailing yourself files from home so you can pick them up in your email at work, no more “Ah crap, it’s on my home computer” moments. It makes you prepared and it makes you flexible.

Security

Storing files with reputable cloud storage services is arguably more secure than keeping them on your home computer or USB stick. You can delete files from your computer and they are gone forever. You can lose a USB stick and they are gone forever. Because cloud storage services are handling other people’s (sometimes extremely important/sensitive) data, they are very hot on security and use high end data encryption making it almost impossible for other people to find and get access to your files. Now ask yourself what could happen if someone sat down at your computer and guessed your girlfriend’s/boyfriend’s/pet’s name to log in. Ask yourself what could happen if you lost your USB stick or it broke. Scary isn’t it.

Nearly all cloud storage services allow you to recover deleted or modified versions of your files. So even if you accidentally deleted one, you can get it back.

Using the same practice as above, you can also keep track of changes made to your documents and roll them back if you were happier with previous versions. While this is not considered full-on, business-level version control, it certainly gives you enough to manage your files safely and securely. More so than your home computer at least.

Synchronicity

One of the coolest features of services like Dropbox and Box.net is the sync feature. What this means is that, with Dropbox as an example, if you open up a file you have stored on their server and edit it, once you save and close the file it gets synced across all computers and devices where you have Dropbox installed. So the next time you open up the file from another location, it will be the most up to date version with all your latest changes. All you need to do is save and close – like you would do anyway :D

Service/product improvement

One of the limitations with using software stored on your computer (like Microsoft Office for example) is that you’re tied into it. Those products won’t improve until a big update is pushed. Quite often people run into problems when running those updates as their computer or OS has changed in ways that can affect the upgrade process.

If you use a cloud-based service like Google Docs (a direct alternative to MS Office), updates are rolled out quicker, more frequently and usually with little or no interruption to service.

Companies like Google recognise the importance of the transition from static file management to something entirely more helpful and flexible and therefore make services like Google Docs compatible with MS Office. What this means is that any document you created with an MS product – like Word docs and Excel spreadsheets, can be opened, modified and saved in Google Docs, totally seamlessly. Also, files created with newer versions of MS Office (with extensions like .docx and .xlsx) won’t even open on some computers with earlier versions of the same software (MS Office 2003 for instance) without the user downloading an addon. How mental is that?

Google Docs has no such limitations, allowing you to do what you like with any versions of MS Word, Excel, Powerpoint etc docs, from any computer, anywhere. Sweet.

Levelling the playing field

Cloud computing can really level the playing field for smaller companies and startups. Those companies can leverage the power, technology and wealth of much larger companies by renting storage space, functionality or just about any kind of service now.

Renting near unlimited amounts of disk space in the cloud is just one example of the benefits of cloud computing, but what else can you do with cloud computing?

You’re already using it manage your social profiles on sites like Facebook and Twitter. But you can also rent your own help desk and integrate that into your company website. You can make real-time video and audio calls over Skype to anybody who also has Skype installed for free. You can manage your entire business’ financial accounts and invoicing on services like Harvest and Freshbooks. You can manage any type of project with multiple users on applications like Basecamp, Lighthouse and Active Collab. If you’re a web developer, you can even manage your entire development environment online through services like Coderun and Kodingen. The possibilities are endless.

How to get it

There are plenty of cloud storage services on offer. Some are free and some require a (usually small) monthly fee.

Free cloud storage space:

• Dropbox (up to 2GB, up to 8GB if you refer friends)
• Box.net (up to 5GB)
• Google Docs (up to 1GB)
• Windows Live SkyDrive (up to 25GB)
• Memopal (up to 3GB)
• ZumoDrive (up to 1GB)

Paid cloud storage space:

• Dropbox
• Box.net
• Amazon S3
• ZumoDrive

As you can see, most services offer a free trial or small amount of free storage to entice you to upgrade to their premium packages. This is cool because you can then sign up for a free trial and play around with it to see if you like it enough to upgrade to a paid service. Or you could stick with the free version if you don’t need a lot of storage space.

Basically

This is the future not just of the way we work, but eventually the way we live. More and more aspects of life in general are being pushed online through web and mobile apps, and services are cropping up all over the place to cater for things you didn’t even know you needed or were possible. As it becomes easier and quicker to get a net connection from almost anywhere, the barriers to entry of becoming cloud-focused get smaller and smaller. It’s not something to be afraid of. It’s an endless supply of opportunity and it’s something to be embraced. The quicker we get on board with it, the more chance we have of staying flexible and agile in our working and living arrangements – whatever they may be.

Check out these posts for further reading on cloud computing and its uses:

• 50 Great Web Alternatives to Desktop Software
• Salesforce.com: What is Cloud Computing?
• How Cloud Computing Can Help A Small Business Get Out of the Recession

The post The Cloud – What it is and Why You Should Consider Switching to it appeared first on White Heat Design.

The post is divided into two sections – Errors upgrading plugins and errors upgrading the WordPress core. I’ll first list the symptoms of each potential error, and then suggest workarounds and fixes. Good luck in finding yours!

Errors upgrading plugins

Upgrade says ‘Downloading update from ‘url’ but actually hangs

Starts off well enough, but quickly goes nowhere

You’ve hit upgrade on your plugin and it looks like it’s about to start downloading but doesn’t seem to get any further. This normally happens because the plugin is clashing with another active plugin.

Check the bottom of your browser - probably says 'Done'

The Solution

Deactivate all active plugins. Since WordPress version 2.7, they’ve included a helpful “Recently active” table, so you don’t need to worry about remembering which plugins you had active. Once you’ve deactivated them, go back and upgrade your plugin(s). Then go to the recently active plugins link and re-activate them again.

N.B – When a plugin has been inactive for more than 7 days it gets moved to the inactvie plugins table so be sure to sort your upgrades before then or you’ll have to check manually for the plugins you want to be active.

Errors upgrading WordPress core

Unavailable for maintenance

Stuck in a loop

This normally occurs when you accidentally break the upgrade cycle mid-process. So if you click away from the upgrade page while it’s still processsing, any page you subsequently click on will come up blank with this message (including admin pages) and you’ll be caught in an unbreakable cycle. What could be more fun.

The Solution

First, calm down – it’s an easy fix ;)

The only way to break this loop is to log in to your FTP account and hunt down a .maintenance file located at the root of the install. Delete him and you’ll be able to start the upgrade process again. The file will be hidden so you’ll have to enable hidden files to see it.

Upgrade starts but does not complete

Similar to the plugin upgrade error above, WordPress attempts to upgrade and says downloading from such and such, but never completes.

WordPress pretends it's up to something...

...but is actually doing diddly squat

One common explanation for this is surplus temporary files from previous plugin/core upgrades interfering with the current upgrade process.

Solution one

Log into your FTP server again and look in your wp-content folder for files such as wordpress-3.tmp. You can safely delete these as they are the result of previous failed upgrades. Go back to your admin and be sure to temporarily deactivate all active plugins before you do your core upgrade again. It should fizz through with no problems this time.

Get rid of these guys

Solution two

Similarly to the above, WordPress also creates temporary upgrade folders. If you’ve removed your .tmp files and are still having problems, try removing the upgrade folder inside the wp-content folder.

Get rid of this

N.B – removing the .tmp files and upgrade folder should be safe enough providing you are not doing so in the middle of an active update, but just to be sure, it’s always good to back up/copy any files you delete to somewhere safer first.

Conclusion

If you’re really unsure or worried about doing these upgrades, you can try installing the WordPress Automatic upgrade plugin which will help you along the process and offer some helpful tips at the same time. However, as long as you remember the following points, you shouldn’t need too much help if/when you run into upgrade issues:

• Backup your database and files before all major updates
• Deactivate all active plugins
• Only install reputable plugins from reputable sources
• Check for leftover .tmp files on your server and delete them
• Check for leftover Upgrade folder on your server and delete it
• Check for .maintenance file (hidden) on your server and delete it

Running into upgrade problems is thoroughly annoying and can be quite alarming when working on client sites if the sites stop functioning and throw up big error messages. But we have to remember that these upgrades are there for a reason. They come with the territory of using open source software and are only there to improve such things as security and performance. They are neccessary evils. But if you’re decent enough at combatting upgrade errors, they needn’t always be so evil.

Here is your mantra: Deactivate | Update | Reactivate (DUR).

Good luck with the WordPress 3.1 update :D

The post Fixing Upgrade Problems in WordPress appeared first on White Heat Design.

An admin site is something I’ve needed for a long time. It had to work the way I expected, the way I wanted and the way that made sense to me. And I thought I’d make use of all these new WordPress features while I was at it. Two birds, one stone.

The aim: to be able to add clients and projects as elements in their own right

What for?

New Clients and Projects custom post types

Previously you would need to add a ‘post’ that had been coded up to function how you wanted. A bit of hackery was involved to make them appear as something very customised and display them where you wanted, especially if you were running a blog as well (WordPress blogs use posts as the default display method)

What did I do?

Set up a new custom post type for clients. With a few lines of code in the functions.php file it’s pretty easy to do this.

function wpt_client_posttype() {
    register_post_type( 'clients',
        array(
            'labels' => array(
                'name' => __( 'Clients' ),
                'singular_name' => __( 'Client' ),
                'add_new' => __( 'Add New Client' ),
                'add_new_item' => __( 'Add New Client' ),
                'edit_item' => __( 'Edit Client' ),
                'new_item' => __( 'Add New Client' ),
                'view_item' => __( 'View Client' ),
                'search_items' => __( 'Search Client' ),
                'not_found' => __( 'No clients found' ),
                'not_found_in_trash' => __( 'No clients found in trash' )
            ),
            'public' => true,
            'supports' => array( 'title', 'editor', 'thumbnail', 'comments', 'custom-fields' ),
            'capability_type' => 'post',
            'rewrite' => array("slug" => "clients"), // Permalinks format
            'menu_position' => 5,
            'register_meta_box_cb' => 'add_clients_metaboxes'
        )
    );
}

add_action( 'init', 'wpt_client_posttype' );

Now you’ll have a new section in the left nav of you WordPress admin where you can view clients and add new ones. How satisfying is that! All you need to do now is create a new single-clients.php and customise the hell out of it until you get the kind of page you’re looking for.

Custom post types in-depth: Six Revisions: WordPress Custom Post Types Guide | Justin Tadlock: Custom post types in WordPress

Bonus: Use this Custom Post Type UI plugin to speed up adding and editing custom post types.

The aim: add new ways of filtering content through custom taxonomies

What for?

Multiple new taxonomies for Clients

In the same way categories and tags are ways of grouping related content, taxonomies are your opportunity to make a new kind of group. Using taxonomies I would be able to add groupings such as location, package type, company type etc etc. I would then be able to associate each client to each of these.

What did I do?

Instead of setting up tonnes of categories and tags which all have inherently the same value, I registered some new taxonomies in the functions.php file. To add a taxonomy use the following code:

add_action( 'init', 'create_company_type' );
function create_company_type() {
 $labels = array(
    'name' => _x( 'Company Type', 'taxonomy general name' ),
    'singular_name' => _x( 'Company Type', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Company Types' ),
    'all_items' => __( 'All Company Types' ),
    'parent_item' => __( 'Parent Company Type' ),
    'parent_item_colon' => __( 'Parent Company Type:' ),
    'edit_item' => __( 'Edit Company Type' ),
    'update_item' => __( 'Update Company Type' ),
    'add_new_item' => __( 'Add New Company Type' ),
    'new_item_name' => __( 'New Company Type Name' ),
  ); 	

  register_taxonomy('company_type','clients',array(
    'hierarchical' => true,
    'labels' => $labels
  ));
}

You’ve just registered a new taxonomy to your previous custom post type of clients. That means you can now enter as many different types of company as you want through the WordPress admin, as you would with regular categories, and then select which one your client belongs to. Imagine how far you can take this…

Custom taxonomies in-depth: Six Revisions: A Guide to WordPress Custom Taxonomy | Justin Tadlock: Post types and taxonomies: Linking terms to a specific post and Custom taxonomies in WordPress 2.8

Bonus: Use the same Custom Post Type UI as above to create new taxonomies and link them to specific post types.

The aim: add truly custom meta boxes that display only when adding or editing clients

What for?

I say ‘truly’ because by default WordPress offers a custom fields box which you can manipulate to do anything with. But if you want to add custom fields that have their own title and input field, and that are only displayed when adding a new client, you have to be a bit more clever. For example, if I wanted to add a website address for a client – the website would not need to be a taxonomy or category in itself because I would never sort clients by website address. So they would go in as flat data using a custom meta box.

What did I do?

Use the functions.php file to add a bunch of meta boxes to the custom post type of ‘clients’. The code is as follows:

// Add the Clients Meta Boxes

function add_events_metaboxes() {
    add_meta_box('wpt_website_address', 'Website Address', 'wpt_website_address', 'clients', 'side', 'default');
}

This will add a nice and neat little box to the side of your main content area where you can enter a website address for the client.

Custom meta boxes for client info

Custom meta boxes in-depth: Shiba Shake: Add a Standard WordPress Meta-Box | Farinspace: How to Create A Custom WordPress Meta Box Instead of Using WordPress Custom Fields

Bonus: Use the Verve Meta Boxes plugin to add all sorts of new meta boxes.

The (nearly) finished product

Mixing all of these features together and with some customised single.php and taxonomy.php templates, this is what I ended up with. It’s not finished (probably won’t ever be as I continue to add functionality/improvements) and I’m still uploading content, but at least I now have a platform I’m comfortable with and that does the majority of what I need.

Client page using native WordPress featured images

Single client page

Client details

Projects page sorted by progress and showing project type (taxonomy)

Single project page showing filterable taxonomies such as server numbers, domain renewal dates and documentation provided

File repository for templates and re-usable docs (looking a bit bare at the moment)

Integrated Google calendars for schedules page and knowledgebase page

It was actually really enjoyable to build for many reasons. Partly, because my primary browser is Firefox, so I didn’t need to concern myself with Internet Explorer and cross-browser compatibility (although it does render pretty neatly outside of FF). But also, manipulating your own data rather than a clients’ for a change is actually very satisfying because you know exactly how it should work and be used. The only restraints are ones you decide to impose on yourself.

This is nowhere near finished and I intend to work on it over time to build up to a more robust and complete system.

Conclusion

This is obviously not a comprehensive post on how to combine custom post types, taxonomies and meta boxes. More an indication of how they could be used to compile something very customised.

While the introduction of these new features certainly improves the WordPress system as a whole, the features are not entirely complete and small bugs do exist. Though I have no doubt they will all be squished over time and hopefully some nice UI built into the core to add and manage them all. Still, these features alone have taken WordPress from awesome blogging platform/potential CMS to fully-fledged CMS as far as I’m concerned. Good work guys.

The post Building an Admin System in WordPress With Custom Post Types, Taxonomies and Meta Boxes appeared first on White Heat Design.