The website we are talking about was build back in 2001. As you would understand we are talking about a heavily-aged website that had the following ‘problems’ or difficulties:

• using some CSS, but mainly tables
• the menu is a separate JS file: easy to maintain, but it doesn’t look too good
• a few years ago I added the rounded corners (using JavaScript) and the red backdrop/border, but that doesn’t look too flashy either
• the source is not W3C compliant (outdated code like <br> – instead of the current <br/&nsbp;>)
• the footer is embedded in each page (hard to update for about 100 pages)
• in general, look & feel is not ‘up to date’
• the enquiry form uses a JavaScript file that is no longer supported
• in Firefox, the banner is not centered (in IE it is…..) and looks like this (also in a table – probably easy to fix, but never got to it):

For a website in the modern internet world, that is not acceptable. For this reason, I compiled a list of features I would like to have on the modern, good looking website.

Site Features we Need

• W3C compliant code
• CSS and HTML in separated files
• browser compatibility
• rounded corners & drop shadow
• 1 central menu file
• JavaScript support (instead of using several separate scripts that (might) interfere)
• structured design (layout without tables)

Where to Start?

Last year I read this very useful article about building HTML/CSS sites using a template. This template has a grid CSS layout and the jQuery framework build in. I had seen those before, but was not yet using them in combination with WordPress.

I also found this site for dropshadow & rounded corners. As I wanted to avoid too many jQuery plugins, I didn’t use jQuery for the round corners. So far my experience is that jQuery rounded corners can interfere with other plugins, needing too much work to fix (and warrant) it.

For this reason, the no-Java-script solution seemed preferable. Provided, it had worked – it did not – as it uses several <divs>, it messed up the Blueprint classes, it didn’t display properly ‘underneath’ the header images etc. The typical pain when it comes to CSS and different techniques in different browsers.

So…. dropping Blueprint? Or dropping the very sleek (and easy!) rounded corners? Dilemma there….. Until playing around with Blueprint a bit more…. as it comes with grid.png, to display the columns for design purposes, which you can switch off when you go live. But then, if you can remove that backdrop, why not adding your own???? Using my own image I had created for the initial technique, but thought useless now, it worked flawlessly!

Here is what I did – in the Blueprint folder, there is a screen.css – just add one line and comment the grid-line – that’s all!

In your container-DIV, just add the ‘showgrid’-class: (you need that anyway, if you want to display the Blueprint-columns):

The grid.png is repeated both horizontally & vertically, but my one large image is not, so it fits perfectly – I stretched it to 1600px, as the backdrop is hardly ‘repeatable’: it is a scanned letterhead-paper with a unique texture – using only a small slice/strip and repeating that would make it look unnatural. And I use a footer-image – including it in php, it neatly fits underneath the length of the actual content – not the full background image of 1600px – it ‘stretches’ to the maximum height, but resizes to the needed height.

I wanted to use this menu for this website. One problem though: it has no single menu file (eg. menu.php) you can add to your website. After building that menu.php file myself, the jQuery menu worked perfectly.

When I created the header.php and footer.php files and included in the website using PHP, they are easily updated in those 100 different pages. Depending on the page of the website, I can now include different images via one page. Pretty efficient.

The Template

With all this now in place, this is how the code looks like (this is what I will use as the ‘page-template’ (there is some test copy in, to show in Blueprint columns – all the ‘body-text’ for an individual page is placed within the <content-div> (both <span>-classes, in blue) – everything remains in place, no fluid/stretched text (in different browsers).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!-- blueprint -->

<!--[if IE]>
	<link rel="stylesheet" href="supportfiles/css/ie.css" mce_href="supportfiles/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

<script src="supportfiles/js/jquery.js" type="text/javascript"></script>
 <script src="supportfiles/menu/menu.js" type="text/javascript"></script>
<div id="container" class="container showgrid">
<div id="header" class="span-24 prepend-top">
<div class="prepend-1 span-22 append-1"></div>
</div>
<!-- end header -->
<div id="CONTENT" class="prepend-1 span-22 append-1 prepend-top">
<div class="span-17">
<h1>Main content</h1>
Put your main text here (17 columns wide).

</div>
<div class="span-5 last">
<h3>Sidebar</h3>
Some sidebar on the right (5 columns wide).

</div>
</div>
<!-- END CONTENT -->
<div id="footer" class="span-24"></div>
<!-- end footer -->

</div>
<!-- end container -->

Blueprint-grid enabled:

And this is how it looks like (pictures not optimized yet):

I need to finalize the CSS and do some tweaks here and there, but the very flexible yet sturdy framework is there. You can visit the live version of the website right here to check how it works.

Thank you – I hope this is of help to you – let me know if you have any questions or feedback by adding a comment.

At this right moment, I am working very hard crafting and building the new DivitoDesign. That means there is absolutely no time to write any articles for the blog, I am sorry for that.

The content flow has been pretty slow lately and that is something I want to improve for a long time. Now is the time. As I don’t have the time to do things myself, I want to call out for guest bloggers!

If you want to write an article for DivitoDesign, this is your chance to get your article published in front of thousands of visitors. You will receive the proper credit and links to your website in the article. I hope you can help me out!

What Should I Write About?

DivitoDesign is a webdesign blog providing tutorials, how-to’s, articles and resources for web designers. Preferably, you can write about CSS, Typography or Design, but any of the other subjects of the blog are fine too.

For example, you can write about the following subjects:

• Howto: Implant CSS Attribute @font-face in your website
• Howto: Build a CSS Menu with jQuery
• 19 Most beautiful online Magazines
• 19 Resources to submit your design news
• The 25 most beautiful photos on Sport.

If you think you are up for writing an article for DivitoDesign, please drop me a line or leave a comment. Thanks!

When you are a web designer and you are really devoted to your profession, you live on the Web. This is quite normal – pros are like that. If you want your life on the Net to be comfortable, you need to find a nice place for you – i.e. a good web site hosting offer where to host your and your clients’ sites.

With tons of offers for business website hosting and for web site hosting in general, there is no reason to complain about not having alternatives to choose between. However, when there are so many options to choose from, the choice isn’t easy.

Sure, you can pick one type of web site hosting with a provider you randomly choose but if you make the wrong choice, migrating your sites later won’t be much fun. This is why it is much better to do some research before you sign up for a web host as you will become aware of what web hosting options that are good for you as a designer.

What are our Options?

Basically, the options for web site hosting are shared hosting, dedicated hosting, VPS (Virtual Private Server) hosting, and reseller hosting. In theory, you could choose any of these but in reality shared hosting and reseller hosting are really the best alternatives for you. Dedicated hosting and VPS hosting aren’t to be totally excluded but for a web designer they often aren’t the best alternatives.

Picture by LBhosting

For a Web Designer, Shared Hosting Is a Cheap Alternative

Shared hosting is the most popular type of web site hosting and there is for a reason this. This form of hosting is especially good for personal hosting but for it could also be considered for small business website hosting. Here are some of the features of shared hosting you as a designer can benefit from:

1. Shared hosting is cheap. The low price is obviously one of the great advantages with shared hosting. With monthly fees in the low single digits (i.e. $3-5 dollars a month or even less), shared hosting is pretty much unbeatable in regards to how much, or little, money you will have to spend.
2. Shared hosting is hassle-free. Unlike unmanaged dedicated hosting and reseller hosting, where you are in charge of the administration of your server, with shared hosting you don’t have to deal with configuration of the operating system or the web server. The only thing you administer is your account and your sites.
3. Shared hosting gives you all you need. The fact that shared hosting is cheap doesn’t mean that it is of no use. For a small business site and for almost any personal site (i.e. a portfolio one or a blog) shared hosting is exactly what you need.

You can start with shared hosting. If you notice that shared hosting is a limitation for you, you could consider VPS, which is also a form of shared web site hosting but it offers more (and costs much, much more than shared hosting). However, if you plan to get really serious and if you have clients whom you can resell business website hosting, reseller hosting is a much better option for you.

Reseller Hosting Is Business Website Hosting for Web Designers

Reseller hosting is the best option for web designers that have a large clientele. Reseller hosting is dedicated hosting plus the right to resell the space and bandwidth, making it possible to offer clients a complete package. Here are the advantages of reseller hosting for web designers:

1. Reseller hosting gives you freedom. You get the whole server and administer it the way you like to. Well, if you aren’t willing to be a webmaster on a large scale, this kind of freedom can be a burden.
2. Reseller hosting makes it easier to administer client sites. When your clients’ sites are hosted on your server and you have full control over them, these sites are much easier to administer because you don’t have to deal with third parties (i.e. another web site hosting provider where your clients host their sites).
3. Reseller hosting is a chance for an additional income. With reseller hosting you pay for the whole server and then you sell space and bandwidth to your clients. This is really a way to make $100-200 or more a month from one server. The money might not be a fortune but everything counts.

Reseller hosting is a much better option for a web designer, especially if he or she will use it as business hosting. Still, the risk you need to be aware of is that if you can’t find clients to whom you will be able to sell the web hosting space and bandwidth, you might get stuck with lots of it and you will be paying for something you don’t need.

For this reason, I have gathered 9 websites with grids used out-of-the-box to show you what is possible and what works best. Enjoy these websites!

1. Form+Logic is an identity studio whose website uses a nice grid to display their latest clients. By using enough space between the different projects, the layout appeals quiet and relaxing.

2. Max Voltar – the personal blog of Tim van Damme – just had a re-design. The new design features a sleek grid design for the homepage and a very smart sidebar.

3. Ate Bits is the home of three important products. These products are pushed forward by the great use of the grid in this layout.

4. Swish Life Magazine offers a somewhat classical grid, with a lot of content. The colors and whitespace used are perfect for an online magazine.

5. Art in my Coffee features a collection of “Coffee Art” in a graphical rich grid layout. The colors are well chosen and the listed photographs are beautifully designed.

6. These Software developers did structure their website correctly and know the way grids work on the web.

7. Kari Jobe is an Christian singer. The website features a grungy look fitting perfectly in the 3-column grid, which makes the site structured and clear.

8. The Versions website is there to sell the Versions app. All the information needed for potential clients is fit in a black and lovely-looking grid.

9. TracerMedia offers one product, and that’s featured before the fold. Under that, they explain a lot of information about their company in a lovely 5-column grid.

10. Great Works is a webdesign studio located at four locations, and that’s why the 4-column grid really works for this website.

Live in Montreal? Check out Montreal web design services by RPMstudios.

Over the last couple of months, I have been switching between a few wallpapers. They all look beautiful. I have gathered all these wallpapers in an inspirational post by DivitoDesign.

Take a look at the copyright licenses the designers gave to the wallpaper over at the DeviantArt page. Enjoy these wallpapers, but don’t steal.

In the time I have been hosted with WPwebhost, I have tried many aspects of their hosting to see if they are really any good. I’ve always wanted a solid webhost and WPwebhost proved to succeed in any aspect of my wishlist.

In this article, I will explain what you should look at when choosing a webhost yourself.

The Wishlist when choosing a Webhost

Webhosts always promote the hundreds of features that you will receive when ordering a plan with them. Many of these features however, are not needed and necessary for your website(s). For this reason, choosing the host with the largest plans and features will not always benefit you. That’s why you need to make a good selection of those features that you need. Let’s list them.

Bandwidth

Bandwidth is the number of bytes your have that ‘you can transfer’. Meaning that all bytes transferred from pages, images, videos or anything else to the computer of your visitor is bandwidth. Some hosts try to seduce you with terabytes or unmetered bandwidth, but that is not needed: you will never use it. Of course, when you have a websites that push those numbers of bandwidth you should not choose a shared hosting plan, but look for dedicated hosting.

Recommended is to choose a plan with enough bandwidth that gives you the possibility to grow. A normal blog or website (with around 500 pageviews a day) usually only push a couple gigabytes a month. Try choosing something that is around 30 to 50 gigabytes transfer, as that will allow you to start other websites in the future.

Recommended: 50 GB

Web Space

You can see webspace as the hard-disk space you have available on your computer. Usually, not more than a few gigabytes are needed to provide you with enough space to host multiple websites. For example, 10 websites generally only cost you 1 gigabytes of space, so don’t get seduced by hosts offering you 100+ gigabytes. You just don’t need that.

Recommended: 5 GB

Add-on Domains

Many plans out there try to limit the number of sites, and therefore only allow one (or very few) domain names. If you are looking to publish multiple sites, the number of domains you can add to your plan is important. Depending on the number of domain names, usually 10 add-on domains per account is plenty to deal with.

Recommended: 10+ Add-on Domains

Control Panel

A control panel for shared plans is where you can control anything that happens on your website. Usually, you can add MySQL databases, add email addresses, add domains and a lot more, so it’s important to have a control panel that is easy to work with. Cpanel is the control panel I feel most comfortable with. Most webhosts give you the possibility to sneak peak in the control panel, so be sure to check it out before ordering.

Recommended: Cpanel

Other important features

How many email addresses are you looking to use? Usually, the maximum is around 10, however, many hosts offer unlimited email addresses. That way you can create plenty of email addresses for every site you build.
Same goes with MySQL databases, you can never have enough. It is recommended to use a new database each time you build a new website, so try to find a host that – at least – offer you 10 databases.

Recommended: unlimited email addresses
Recommended: 10+ MySQL databases

What about service and support?

There comes something that is very important also. What service do they offer when you get stuck? What about the time they need to reply to your email? Do they have a phone number that you can call anytime?

When something happens (like a server fail), it is important that your webhost help you out immediately. Your website is your business, so getting back online is needed as soon as possible. Your webhost should help you with that right when something happens. Before you can see how the support team react if something happens (you aren’t signed up yet, right?), you should test them.

“Your-host Sucks”

When people are not satisfied with the services of a webhost, they will comment about that. Google will help you search for these reactions. Try searching for “the-name-of-your-potential-host Sucks”. Don’t forget the quotes (“”). The number of results you will get will indicate the number of people that have bad experiences with your potential webhost.

Servers Status

To see if your webhost is accurate and is fair about the 99.999% uptime guarantee, look for a servers status page. This page will give you a direct look at the status of the servers and how long they have been online.

Support Forums

Browsing the support forums of your webhost will give you a good indication of how fast and how accurate the support team answers questions from (potential) clients. You can also ask them a few questions yourself, to see how fast and good they are.

Money Back Guarantee

You should always pick a webhost that offers – at least – 30 days of money back guarantee. In this time, you can check the performance, the quality of the support and everything in general. If you don’t like their services, just ask for your money back.

DivitoDesign’s Recommendation

Like I’ve told you in the intro of this article, DivitoDesign (along with my other sites) are hosted on WPWebhost for two years now. During this time, I have tested many aspects of their hosting to see if I could recommended their plans to you.

I believe I can recommend you WPWebhost. Remember, my experiences will not always be an indication of how happy you will be with WPWebhost, as each situation will be different.

The “freedom” plan that powers DivitoDesign offers 50GB of webspace, 500 GBs of monthly bandwidth, 50 add-on domains, unlimited email and MySQL databases and a 100 days money back guarantee for only 5$ a month. With the coupon code divito30, you will receive an additional 30% discount on any plan, which will get you the plan for only $3,50 per month (yearly payment).

WPWebhost is not only a WordPress related hosting website, but their plans can be used for almost any kind of site. Their support team can help you with a lot more. I’ve asked questions on PHP errors and databases problems and they answered them accurate.

For all of these reasons, I highly recommend WPWebhost.