On 18 February 2009 I was a proud man. I just registered my company DivitoMedia and I was ready to conquer the world and the web. As this was the first company I started – without any experience – things didn’t run as smooth as I wanted to see.

In this article you will learn from my mistakes. The problems and struggles I had during the last 18 months are great practical information for you to learn from. This helps the web professional to become more productive and avoid certain pitfalls.

Clean Your Office

My room was a mess, my writing desk was a complete disaster. I couldn’t find the stuff I needed and the disorder made me unable to focus on work. This has great influence on your productivity.

Photograph by Aditya Bhelke

A clean workspace makes you able to think clear. You don’t see the stuff around you that you don’t need and you can focus on the things that you need to finish. This allows you to become more organized and productive, so get your Swiffer and clean up!

Get YOUR Money

On the web, there are a lot of opportunities available to get some freelance work. I do my part as well, and after discussing the job, price and budget the work can start.

Once the job is done though, you have to get paid as well. I always tend to become a little bit lazy after the actual work is done. I expect people to pay their bills as easily as I do myself, but on the web this isn’t as obvious as it seems. People simply don’t pay when you don’t ask them.

Here are a few tips to make transactions go smoother:

• Up-frontal deposit. Clients who are willing to pay a percentage from the quote upfront are usually serious about their business. It’s a good insurance to make sure they do not fly the scene. That’s a good thing to know before you start on a project.
• Don’t send the work before they paid for it. Pretty obvious, but this tends to slip when you have clients you know for a longer time.
• Bill them. Simply as that, just send them your bill where you state they have to pay in 14 days. They usually pay these bills easier when they have it in writing.
• Call them. E-mailing will simply not cut it as they don’t reply. Asking people to pay in real life will have more effect.

Photograph by Cleebster

You have to remember that money that is still in the accounts of your clients is not your money yet. You can not pay the bills with this virtual money. I tend to forget that…

Finish Projects

DivitoDesign has been an ongoing project for me since the day I started in the web world. My knowledge grew over the years and the web was constantly changing; and so did the blog. DivitoDesign is a project that goes on; it is never complete or done.

This isn’t a problem of course, but it is great to finish things. Your project is done and your head is clean. You don’t have to think about it anymore, because it’s done. Time to move on to the next one.

Learn to Finish

• Make a list – when you have things mapped out on paper, you don’t need to think about them anymore. You just watch you list, do the thing and tick what you finished.
• Small steps - Your big project is a series of small steps. These steps are usually pretty small and easy to do. Split up your project in these steps and finish them one by one.

Keep your Files Secure

Your files should be secure and backed up. You never know what is going to happen with your situation and an accident or problem lies in a small corner. When your WordPress blog gets jacked or your hard-disc crash, you loose everything. All the work you did.

• WordPress Backup Plugin – This plugin makes a backup of your MySQL database (which your WordPress site runs on) and send it to your email address.
• Burn DVD’s - When you burn a DVD once in a while with your personal photos, work files and backup files, you always have that when your computer crash.
• Dropbox – This great tool is excellent to store files online and secure. Works easy for project management too.
• Secure your website – There are so many threats out there on the internet that it is necessary to secure your website. There are multiple security tips available for WordPress. To make other websites secure I recommend this website security expert.

Photograph by CarbonNYC

Do YOUR own thing

In the last year I didn’t do my own thing. I like almost everything I do, I like to help people and I am loyal. That’s combination happens to be a pitfall for me. On school, people asked me to build stuff for them, and I didn’t say no.

One friend I know from ‘the streets’ was dragging me into carpfishing. As I always like everything and I didn’t want to disappoint my friend I kept going with him. It was all I did for a time, but now, I decided to take a stand. I have to do my own thing to get there.

That’s the lesson I would like to give you: do your own thing. Once you focus on the things that you need done, stuff you like and your thoughts you have, you are ready to get somewhere. That is exactly what I am going to do. And so should you.

What do you think?

I hope this helps. Please leave your thoughts and suggestions in the comments, looking forward to read them.

Over time, I have been testing websites for compatibility issues on different browsers and devices. Back in the days, when your website renders flawless in Firefox 2.0, Internet Explorer 6.0 and 7.0, you was there. Today, Browser Compatibility goes much further.

We are now not only talking about different browsers and their different versions, but the screen size of your visitor is as important. With the rise of mobile phones and smartphones, we have another device that can cause troubles for your websites.

One of those devices is the recently released Apple iPad. With over 3 milion iPad’s sold we have a device to keep in mind. The iPad has the browser Safari installed by default, but there are a few alternatives available. Pretty difficult to keep up with all those browsers, but fortunately the support for HTML/CSS is pretty alright.

There are a few difficulties along the way as I found out today. Take a look below to read a few tips to make your website iPad compatible.

Testing Stage

How do you solve compatibility issues for the iPad when you don’t have one? Fortunately, there are always nice people that develop an app that help: iPad Peek. All you have to do is enter your URL and you see how your website looks on the iPad. Great tool, check it out.

Browser Compatibility Testing for the iPad

Safari Adds Default Styling to <input> Elements

Safari on the iPad adds specific styling the buttons. When you try to add your own style declarations to your button, the default styling overrides that. So how can we change that behavior?

This solution should work.

input {    -webkit-appearance: none; }

Detect iPad for Different Stylesheets

To add a stylesheet specifically for smaller devices (as the iPad and iPhone), add this between your head tags:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

You can also use this for larger devices:

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">

This gives you more control over the look of the website for both type of devices. Pretty handy of the iPad isn’t working with you.

That’s it for today, I hope this helps.

Once in a while I have those ideas for DivitoDesign. Usually the motivation is large, the execution a little bit of a problem. One idea that I definitely had to make possible is the launch of the new DivitoDesign.

Please take a look. The goal was to build a website that was structured, modern and to-the-point. A website where everyone can find information and enjoy design. A community where web professionals can get opinions, tutorials and resources. Where we talk to each other.

Let’s introduce a few new features for you. More is in the working!

AdvertArt

On the web, companies advertise on all sorts of websites to get their name out. Usually, these advertisiments are experienced as annoying. I challenge these companies to design their own 950x300px header to entertain the crowd. Take over the full header.

Let’s wrap up some things:

• We call this: AdvertArt
• Where: Top Header
• Runtime: 1 week
• Space: 950x300px
• Vote: Visitors can rate your AdvertArt to see how they like your design
• Gallery: AdvertArt’s go right into the gallery
• Price: 50$ per week
• Interested? Contact me

Community News

The community news section has had an upgrade. My good friend Frank Verhoeven has totally rebuild his Community News plugin and I have the opportunity to test it out. I believe that we all should learn from each other, so the community news section of DivitoDesign is the place to get your articles, resources and write-ups out there. We all learn from a healthy community!

Forums

One thing I want to introduce for a long time is a meeting place. A place to discuss articles, talk to each other and get to know fellow web professionals. Community Forums will be there in a very short time. Let’s talk to each other.

Members

Thank you for those that already registered and became a member on DivitoDesign. You might have noticed the login form in the right sidebar, it is now possible to get a membership. Registering gives you an account on DivitoDesign and makes commenting on articles and replying on the forum possible. Become a member.

Guest Writers

I hope to achieve a more consistent stream of articles, inspiration and resources. My plan is to do this together with the community. The more voices and opinions, the more we learn. I try to write a lot of new stuff about my own expertise as well, but I can definitely use some help. Please apply.

Not everything is finished yet?

I know myself. My motivation is usually better when there are deadlines, in this case a published blog post remembering me to finish things.

Let me know what you think about the new look. A lot of work gone into this hussle.

The second you launch your website online, you’re instantly accessible by an estimated audience of 1.8 billion people (internetworldstats.com). The thing is, 78% of those web surfers don’t speak English as a first language – in fact, Chinese is close to becoming the dominant language of the internet, with 407 million online Chinese speakers quickly closing the gap with the 499 million online English speakers.

If your website is in the business of selling, then these statistics become especially important when you consider that research has proven that 85% of online consumers will not buy a product if they can’t read about it in their own native language (Common Sense Advisory, 2006).

When you’re first looking at the design and outlay of your site, you’re likely to be thinking more about how to be innovative, how to accurately communicate your brand’s message through design, and how to facilitate a smooth and pleasant interaction experience, rather than how easily your website can be adapted to suit the different languages and different cultures of foreign countries.

However, with a little bit of pre-planning, you can create a website design that can be easily adapted to the requirements of any foreign language and culture, expanding your online audience to, potentially, every web surfer in the world.

There are a lot of different countries and cultures on the web

Consider your potential audiences

Before you even start thinking about the design of your website, it’s helpful to consider which foreign language markets you might want to adapt your site for further down the line. Thinking the Chinese market might be a wise decision? Then put a little time into researching what’s popular in Chinese website design and what their e-commerce habits are.

Different cultures have been proven to have different ways of processing information, and different aesthetic preferences as far as design, color schemes and navigation go, (especially between eastern and western cultures) so it can only be to your advantage to learn about the e-commerce and design preferences of each of your future markets before you start structuring the site.

Create a flexible design

Your next step is to consolidate everything you’ve learnt about design trends and shopping habits in your desired markets, and then use this information to come up with a website design that has strong, consistent branding, but is also flexible enough to be adapted to different Top Level Domains (TLDs) for each foreign market without losing its ‘sense of self’.

Take into account how the imagery will need to change to be relevant to each market, what sections you will give prominence to on each site (for instance, will your front page feature ‘About Us’ text or will it get straight to the products?), how your color schemes will change, how you will use multimedia for each foreign market and even how large and long your lines and grids will need to be to accommodate different language scripts (and in which direction the languages will be scrolling).

Use the right tools

If you’re changing the language of your text regularly between sites and pages, you don’t want to have to rebuild each page from scratch using a different text encoding tool. Using Unicode UTF-8 as your character encoder will save you trouble – it has individual codes for each character in over 90 different languages, is supported by all the commonly used browsers and operating systems, and is compatible with your standard web design programs, including Dreamweaver and Microsoft FrontPage.

Furthermore, using CSS, with its capacity to keep your content separate from your design, will make your life a lot easier when it comes to switching around the language of your copy between localized sites.

Translate your text

Even more important than making sure your design is appropriate for each foreign market is making sure that your text is appropriate. Language is a tricky area – it is fluid and ever changing, and the differences can often be great even between dialects within the one language. The potential for mistakes and confusion is great, and nothing will turn a reader away from your site faster than incomprehensible or incorrect text – it destroys your image of reliability and credibility.

Therefore, it’s essential to have your text translated by an expert working into their native language – not only will that ensure that the idiom and expressions are correct, it will also help you to ensure that the actual tone, style and content is appropriate for the culture of your audience – the last thing you want is to inadvertently offend a potential customer.

Target your SEO for each market

Once you take the step of creating localized and optimized websites for foreign markets, your next step is to make sure people can find them. This is where localized SEO comes into play – you need to make sure you’re focusing your SEO efforts on the algorithm of the most popular search engine for your target market (Google may be king in the English market, but many other languages have their own equivalent, such as Baidu for China and Yandex for Russia).

More importantly, though, you need to make sure your keywords are localized for each market – the direct English translation of a term is not always the correct one. Research your keywords on a keyword tool like Google’s and you’ll quickly find out what the most popular local search terms are for anything from car insurance to club sandwiches.

Jacques Soudan, a client and friend I met through DivitoDesign, sent me an email with a guest post about a case study on revamping his outdated site. Enjoy reading his process:

Below is a case-study on how I used the Blueprint CSS Framework and jQuery JavaScript library to rebuild an outdated site – somehow you helped me with it, so in return I share my work, hoping it can be of future use. Thank you!

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/>)
• 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).

<!-- 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.

Good afternoon!

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!

This week, I had to work with a team for a study project. We had to build the promotional campaign of our study and the end results have turned out absolutely amazing.

Usually, I work on my projects as a one-man team. However, working in a group or team is an other situation and works completely different. I enjoyed working with this large group, but it also caused some management problems. A lot of files were needed by everyone working on the project, and that wasn’t easy to organize with 16 people in one team.

Until I remembered Dropbox.

Dropbox works like this:

1. Download the Dropbox app
2. Create a folder
3. Invite team-members to your folder via email
4. Your whole team can access/modify/add project files.

You can see the advantages, right? Everyone has full access to the folder, so your whole team can add, modify, download and manage the project files. It works fast and is very useful for any team-project.

Dropbox is the ideal solution. Check it out!

This is a guestpost from Joanna from Webhosting Search.

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.

Grids are used in newspapers and book design, but also on the web. On the web however, grids are used differently. Web designers have a lot of possibilities to use the grid for ordering information and content.

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.