Web Design Survival Guide – Back to basics web design

If you were to throw a Web Designer onto a deserted island with nothing but a laptop with no software and a wireless internet connection, could they survive? More importantly, could they still build your website?

Well, some of the more experienced web designers out there are probably resourceful enough to build you a great website with nothing but a laptop and an internet connection. As for staying alive while stranded on the island, that’s another question. Most of us Web designers survive on pizza and Chinese take away, which I don’t think will be in plentiful supply on the island!

A lot of Web Designers these days are very reliant on specific software (like Adobe Creative Suite, Dreamweaver, Photoshop etc) and without it they just don’t know where to start. As Web Designers it’s important to be adaptable so that if one day you do end up stranded alone on a deserted island (and it could happen), you will still be able to create great websites! For those Web Designers that don’t yet have the budget for expensive design software, this survival guide should also help you design and build a website using totally free web design tools.

So how would you do it? Stranded on a deserted island, alone, no money, no design software, just a laptop, a wireless internet connection, the sand under your feet and the wind in your hair. Let’s assume that your client is expecting a full corporate website design with a blog and CMS (Content Management System) and that you are stranded with a laptop running Windows XP.

If it was me out there on that island, this is how I’d do it.

Web Design Survival Guide

Devise a strategy:

wordpress-logoI would build the website in WordPress as the client needs a blog and CMS. That way all I need to do is create a WordPress Theme. It’s a quick, simple and effective way to satisfy the client’s brief.

Design the mock-ups:

I would design the homepage and content page mock-ups using a free image editor possibly along with some free stock images.

picnik-free-image-editor

Setup WordPress:

I would download and install WordPress. You could install WordPress directly onto your hosting server and work on the live site but I prefer to create a development version on my localhost as it allows for a faster build and is generally better practice. To setup your localhost you can install Wampserver which will equip you with PHP, Apache and MySQL. Once I have finished working on my website I will move the files onto the live server using a free FTP client. (I’ll assume that you or your client already have a web host, although there are free web hosts too).

Build the website:

aptana-free-text-editorTo build my website in WordPress I basically just need to create a WordPress theme. I could either use a WordPress Theme Framework or simply start with a very basic free theme and modify it. To build my theme I will need a free text editor to edit the code.

Preview and Test the website:

I will of course need a browser to view my website. To ensure that my website is cross browser compatible I would download and install the most common web browsers Internet Explorer, Firefox and Safari. You can even test out your website in ie6 if you’re feeling game. Here are some more cross browser compatibility resources to try out if you really want to get serious.

Debug the website:

firebug-web-development-toolbarWith any website you create you are bound to have some bugs. Luckily there is a great Firefox plugin called Firebug that will help you analyse and edit your website in real time. You can analyse and edit CSS, HTML and Javascript on the fly while you are browsing. It can save you heaps of time, I can’t live without this great little web development tool.

Yay! All done!

I have tested and debugged my site and it’s looking great. Now all I need to do is FTP the files onto the live server and I’m done! Hopefully the client will be happy with their new website. I’d use the client’s payment to rent a helicopter to fly me off the island. I might also order some pizza for the trip home, I’m starving!

How would you do it?

So how would you build a website out of nothing if you were stranded on a deserted island? And how would you get off the island?

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Will on August 20, 2009

    These tools are really useful man!!!

    Question, what if it’s a mac?

  2. Cre8ive Commando on August 20, 2009

    Thanks! For this post I am only covering free website tools for a PC, although a lot of the tools are web based, hence the OS doesn’t matter. :-)

  3. Grégoire Noyelle on August 30, 2009

    Hi Adham. Thanks for sharing
    @ Will : on mac you have MAMP : http://www.mamp.info/ instead of Wampserver

  4. Maya | Dubai Web Design on October 29, 2009

    Thanks for posting. The featured resources are really useful.

  5. Joseph McCullough on February 4, 2010

    Right on man! This right here is basically why I made my blog in the first place. Web programmers need to learn how to program!

  6. Zbynek on May 18, 2010

    Thnx, man. I’m using an old mac and I’m happy. MAMP, GIMP, basic text editor. That’s all.
    I will stay rather on island and order pizza :)

  7. Frank on May 24, 2010

    Great article!

    Gimp (raster), Inkscape (vector), stock.xchng (photos), and for a deeper, more complex CMS I’d head over to Concrete5; they host, too. Need to source content, hit a very reliable site like Textbroker and set your rate, you’ll get the quality articles you pay for. Paypal, Skype, timezone manager, good to go!

  8. Cre8ive Commando on May 25, 2010

    @Frank – Thanks for the great tips! :-)

  9. Anton Hilman on August 4, 2010

    nice post. blogwalking from padang, indonesia

  10. Oscilloscope on November 22, 2010

    i like wireless internet because you can surf anywhere and you can avoid those ethernet cables ;**

  11. Alta Hemler on June 2, 2011

    Wow! what an thought ! What a idea ! Gorgeous .. Remarkable …

  12. Mutuelle famille on July 25, 2011

    Interesting website. Very helpful, great share. Thanks for sharing this nice post.

Trackbacks

  1. [...] Read more:  Web Design Survival Guide – Back to basics web design | Cre8ive … [...]

  2. [...] Web Design Survival Guide is an article that highlights free software, tools and methods that will allow you to build a website from scratch. The article focuses on PC design applications, but the methods described are universal. [...]

  3. [...] Web Design Survival Guide is an article that highlights free software, tools and methods that will allow you to build a website from scratch. The article focuses on PC design applications, but the methods described are universal. [...]

  4. [...] Web Design Survival Guide is an article that highlights free software, tools and methods that will allow you to build a website from scratch. The article focuses on PC design applications, but the methods described are universal. [...]

  5. [...] Web Design Survival Guide – Back to basics web design | Cre8ive CommandoÄhm. [...]


Have your say!