If you wish to spread the word about this contest, you can digg the original article.

We created some great work at Omnicron and it will be difficult to start over again, but it seems that it is in my spirit to always look forward and search for something new. We all put a lot of effort so that Omnicron stands where it stands today – as one of the best web development companies in Istra.

But as I said – the time has come to move on and I’m really looking forward to new business opportunities that are awaiting me. All this time I had full support from my girlfriend and my true love Jasenka who always believed in me and some of this would never be happening otherwise (thank you for that ;).

In Extendis we will focus on creating some nice CSS-based layouts, graphic work (logos, stationery, visual identity …) and new media services, but we will never look away when something like PHP development knocks at our door. My main motto and the motto of Extendis will be to introduce innovation. If you have a job that is inspiring and demanding than we want to hear you!

So, if you would like to take a quick preview of what are we going to do, you can watch our showreel here at EmanuelBlagonic.com and for a high quality version visit Extendis.

[See post to watch Flash video]

Win a custom Wordpress template

If you’d like, you can participate in a contest at Extendis Blog and win a free custom Wordpress template.

I personally love XHTML and CSS combination even when we should achieve the same effect with Flash. This is partly because I never explored Flash so much. The client of ours – Oxy Polyclinic wanted for us to create a map of diving locations for their Ship “Borna”. We could create a map by using Flash, but we used simple XHTML and CSS instead. Why?

Well, one of the reasons, and not a small one was that we wanted to have links that can be followed by search engines. If we used Flash, the links inside Flash movie couldn’t be followed. The other reason was that we wanted the map to be viewed by as many visitors that shouldn’t be bothered with installing Flash plug-in. We know that today most users have Flash installed, but then, if we don’t care about those who haven’t, why should we bother with any other browser except Firefox and Internet Explorer?

The code

The code is very simple. The two differences you will notice from the previous article are: we used CLASS selectors on list-items. We used classes because we had two different diving locations to show, and by using classes we could style them differently. The second change is that we added a text that will be hidden until we went over him with a mouse. Let’s start.

<div id="map">
<ul id="locations">
<li class="ship" id="ship1"><a href="#" title="Coreolanus"><span>Coreolanus</span></a></li>
<li class="dive" id="dive1"><a href="#" title="Banjol Island"><span>Banjol Island</span></a></li>
</ul>
</div>

CSS behind the code

We have one DIV that we use as a container for our map. This is here because on Diving Borna web site we used the CSS map functionality elsewhere, for example to show the ships layout. So, in this first DIV we define the width and height of it, and we load the background image.

#map {
	width:350px;
	height:400px;
	background:url(istra-map.gif) no-repeat;
}

Next, we should define the list itself. Naturally, we don’t want to display the bullets. Also, we positioned the list relatively. It is very important not to forget this, because we will position the links absolutely to it. We should also reset the margin and padding values. If you don’t do this, you will have problems in Internet Explorer (unless you solved it by applying some other reset method).

#locations {
	list-style:none;
	position:relative;
	margin:0;
	padding:0;
}

Next, we will style the links. Every location is represented by different image (sunken ship uses light green, and dive location uses light blue). Because we wanted to make as few HTTP requests as possible, we created one image that contains icons for all the states (sunken ship, dive location, hover and selected state and already visited). Every icon is 10×10px and because of that we gave our link the same width and height values. Because every location is in different position, the links will be positioned absolutely.

#locations a {
	width:10px;
	height:10px;
	display:block;
	position:absolute;
}

Now it’s time to style the different diving locations. Every diving location is different and we know which one it is by different classes. We have two of them (ship and dive). Depending on a class, the link is styled differently and the background image is moved accordingly.

#locations .dive a 	{ background:url(icons.gif) no-repeat 0 0 }
#locations .ship a 	{ background:url(icons.gif) no-repeat -20px 0 }

We used the same approach for :hover, .selected and :visited states. If the mouse is over a link or the link is selected (we are currently viewing the diving location) the background-image is moved -40px to the left. If the link is already visited the image is moved -60px.

#locations .ship a:hover,
#locations .dive a:hover,
#locations a.selected { background:url(icons.gif) no-repeat -40px 0 }
#locations a:visited { background:url(icons.gif) no-repeat -60px 0  }

After we styled the links, we have to style the text. Now, if you just want to use some kind of simple text or an image, you don’t have to use SPAN for displaying text (take a look at the past article). But I used SPAN so I can hide the text until we came across it with the mouse. The text is hidden with #locations a span { display:none }, and it pops-up when the mouse is over a link with #locations a:hover span { display:block }.

The rest of the code is pretty easy to understand. We positioned the text relatively to the link (which is, BTW, positioned absolutely) just in case we want it a bit removed from the link (like I did in this example). We also defined the size and weight of the font, color and line-height. We made a box around the text by defining the background color and width and height of the SPAN. Text is a bit removed from the borders with padding. The opacity is defined just to make a box transparent (at least under Firefox, it looks cool :). You could use the Alpha filter if you want to achieve the same effect under IE.

#locations a span {display:none; }

#locations a:hover span { 
	display:block;
	position:relative;
	top:-5px;
	left:15px;
	font-size:1.1em;
	font-weight:bold;
	color:#CCC;
	line-height:15px;
	width:150px;
	height:30px;
	padding:2px 5px;
	background:#333;
	opacity:.7;
} 

Now, what is left is to position the links to its positions. By observing the code you will see that we used both ID and CLASS selectors on list-items. The ID selector is used for positioning the link to its position. Since the ID selector should be used to identify one element (at least if you want to validate a page), we used ID for positioning since every location is unique. Here is the sample code for this.

#ship1 a { top:70px; left:5px }
#dive1 a { top:125px; left:20px }

It seems that we did everything we could, but in the testing process I discovered a strange bug that bothered me both on Firefox and IE.

Some diving locations were visible even when the mouse was over other location, and that just wasn’t very nice. I solved the problem by defining the z-index:1 for a and a.selected and z-index:1000 for a:hover.

#locations a, #locations a.selected { z-index:1 }
#locations a:hover { z-index:1000 }

Take a look at example and live version

Example
Live version @ DivingBorna.com

Please note: Since the live version went live a few months ago, I made some slight changes in this article. If you would like to use this kind of approach for creating CSS Maps, you should always consider this article instead of live version. Live version is here only to demonstrate the possibilities behind this kind of approach.

How many times you wanted to create cool product box for some of your products? Sure, there are many ways, and with new Photoshop you have even more options to create boxes. But I wanted to show you how to create a “3D look box” in the 2D environment using Photoshop paths.

Where to start?

First, create an empty image in Photoshop. I created one 800px wide and 600px long. Now, we will create the guides like on the picture below. I moved the ruler to the first top position for easier viewing. We will create guides for the back (50×300px) and front side (150×300px). Now, create the horizontal guides on 10px, 20px, 280px and 290px. OK? Let’s move on.

Use the Rectangle Tool (U) to create the front and back box with the above values. Now, use the Direct Selection Tool (A) to move the point of the back and front sides like this: 0,0>0,10px, 0,300>0,290px for the back side and 200,0>200,20px, 200,300>200,380px.

You did this? You should now have something similar to the box on this picture.

Now, import your footage. I made my front side a little wider but with these values you should experiment on your own. My footage is as you can see 50×300px back and 200×300px front. If you are doing this for the first time, forget the writing on box and experiment with the pictures instead :)

Here is the magical part :). Select the first rectangle you created (to do this use your mouse, hold down the CTRL key (or COMMAND key) while clicking on the layer representing the rectangle (Shape1).

Now, use Edit > Paste Into (or SHIFT + CONTROL/COMMAND + V) to paste into the rectangle. Use Transform (CTRL/COMMAND + T) to transform the front and back side footage to move it to the place.

If you are new to this you might want to move your points to the position manually, but here is how I did that. First, move the right part to the right guideline, then click with your mouse on the top right corner (for the front side, off course). While holding your mouse, use the combination SHIFT+CTRL+ALT and move the right corner slightly down, really slow. If you did everything as mentioned, the bottom corner will move to the center as well. You should get something like this.

The last thing we want to do is to create some inner shadows for both sides (40% opacity, 0px distance, 20px size). You can also select both sides and create a white background in back of them. Now, apply the Drop Shadow to the layer with these values: 10% opacity, 10px distance, and 20px size. I also added an outside stroke with the width of 1px, white, to the same layer. Here is what it looks like.

You should try to experiment for yourself now :)!

I realized if Google used web standards, than this would be a giant boost to the web standards community (which is, by the way, getting more important every day). What is the benefit to Google? What if I said to you that by using web standards Google could save up to 25% of the HTML file size?

Just a quick note

I wrote this article a few months ago, when I did a research on how would Google benefit from using web standards. I meant to show the final code and look of the page, but in the process I realized that I should read carefully the Google Brand permission of use. So, with this on, I couldn’t use the Google imagery as I wanted to show you how the “new” homepage would look like. Well, I used it for the research purposes when I recreated a homepage and result page, but not for public. What you can read in this article is what learned from implementing standards compliant homepage and result page to Google. Enjoy.

What are web standards?

You have most certainly read about web standards. By using the combination of XHTML and CSS we are separating content from presentation elements. So, how can we popularize XHTML and CSS and how will the people – both the readers and creators of web pages – benefit from implementing this into their webs?

The situation here is not so bright. There is a movement that is strongly for web standards and the other that is opposite. In my opinion, there is no alternative in creating a standards compliant page. By using it you are promoting accessibility (page is viewed on many Internet devices), usability (fonts are scalable, there are options for quickly changing the contrast and look and feel of the page), and helping yourself developing web sites more quickly and with reduced cost.

I decided to make a test wondering how Google would benefit from using web standards. I considered if I could make a homepage and search page that has less size (which means it consumes less bandwidth), that has cleaner code which could be changed easier with CSS, than this would obviously mean there is a prospect in it.

Old VS new

Google is mainly using tables for shaping the content of their pages. But today, we can use structural tags like divisions (DIV) for creating placeholders for content or spans (SPAN) for shaping the content furthermore. For displaying results we could use unordered or ordered lists and every result could become a list-item.

I used a modern web structure to re-create a Google homepage and search results page. I wanted to separate data from styling. My other task was to clean up the code and to use classes to re-use some elements in the page structure. This is best seen in displaying results. Google uses this structure:

<div>

<div class=g><!--m-->
<h2 class=r><a href="#" class=l>Title of the web page</a></h2>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td class=j><font size=-1>Description of the page …<br>
<span class=a>www.link-to-your-page.com - 42k - </span><nobr><a class=fl href="#">Cached</a> - <a class=fl href"#">Similar pages</a></nobr></font><!--n--></td>
</tr></table>
</div>

</div>

Instead of this, I’m using this one:

<ul id="results">

<li>
<span class="title"><a href="#/">Title of the web page</a></span>
<br />Description of the page …<br />
<span class="link">www.link-to-your-page.com/ - 42k - <a href="#">Cached</a> - <a href"#">Similar pages</a></span>
</li>

</ul>

What has changed? First of all (it looks prettier :), I used unordered list to display results. In this case list is behaving like placeholder for the results (in our case list-items). Instead of Heading 2 for displaying the title of the web page in results, I used <span class="title"> so I could style the title. I could also used Heading 2 or even Heading 3, but I used Heading 2 for displaying the name of the generated search (in our case we are just searching the web) which is displayed on a blue background on top of the results.

I decided that description won’t need its own SPAN so it is a part of the list-item itselft. For displaying the text that shows the link to the page you are trying to reach I used <span class="link"> and this also reflects to the last two links – Cached and Similar pages.

With the CSS I styled the class="title" to show the larger font and class="link" to show different link color than the rest of the page.

The challenge behind the job

There were quite many challenges when redesigning any web page including Google. The first one was how to create a home page, and how to position the elements. Search field had to be centered, but the Advanced Search, Preferences and Language Tools link had to be on the right side of it. Now, they are using tables for that, but I wanted to position the links relatively to the form. This is OK, but when I tried to enlarge the fonts, the links were on top of the search field and search button. The max-width:351px solved that.

The second one was how to recreate the paging on the bottom of the results page. The idea behind the paging is that you can click both on the number and on the “O” letter in the Google logo. This looks great and I used unordered list for that. To each list item I gave the fixed width and a top padding that would shift the number on the bottom. With the background positioning I positioned the image depending on the class of the number (if a number is selected I moved the image so the red letter would show up) or the .start and .end classes for the first and last list-item.

Final challenge was how the page will look in different version of Internet browsers. I tested this one in Firefox and IE and I tried to enlarge the text up to 3 times. I had no problem with Internet explorer when enlarging text, but with Firefox I had a problem with the extra links on the right of the search area. I “fixed” this by using CSS-property max-width that will limit the search field to 351px. Second thing I noticed was the problem in IE that for some reason didn’t position the links where they should be. I used different value for IE with conditional comments.

Test results

As I finished the work on the homepage and result page, I took the time to calculate how much KB was saved in the process. In the case of the homepage, we’ve saved almost 1 KB (4,61 KB before, 3,73 KB after), while in the search result page we’ve saved 2 KB (18,2 KB before, 16,3 KB after). This doesn’t seem much, but you should now that I didn’t use any other saving method (like optimizing CSS or the HTML code). What I did is – I used a different syntax to achieve the same thing (i.e. Google used classes for links, and I removed that. I used instead these code to achieve the same thing #main a {...})

You can explore test files here (no images included at this point).
Homepage - Search result page

The conclusion

When talking about web standards, we are almost always taking as advantage that use of web standards produces cleaner and better code. Is there a better place to test the use of web standards than search engines? Should Google use web standards?

I think it should, and it will most certainly be a giant challenge for whoever will work on that. Not just because they can save at least 1 GB of bandwidth on 1 million homepage loads, but because it will be a giant wind in the back of web standards community and it would clearly state - Web standards SHOULD BE USED, BECAUSE THEY HELP TO CREATE A BETTER WEB!

Research parameters

In order to truly recreate the Google homepage and search result page, I used the same links (not the "#" sign) as in the original document. I also used the Google code whenever possible (if not for design purposes), to get the most precise result.

I would like to hear your thoughts on this topic :)

Doing that I found some tips (rather than techniques) very useful in the process. So, let’s get immediately to the matter.

Do you get lost in your XHTML code?

I got lost numerous times, so I figured out how to mark various elements of my code. I tried different approaches, but this one seemed best.

<!-- HEADER -->
<div id="header"></div>
<!-- /HEADER -->

So, from know on, I am commenting the start point of the element (i.e. “header”) with an comment and I’m finishing with one as well. This is more than helpful when I want to move the elements such as Contact information from one part of the page to the other. I just select it from <!-- CONTACT INFORMATION --> to the <!-- /CONTACT INFORMATION -->. I suggest you use this kind of “semantic”, because this way, you won’t get confused.

What about CSS?

Well, it is good to use CSS comments /* */ to write which part of the document you are in (i.e. /* HEADER NAVIGATION */). You can find a very good article on how to find sections of your CSS code at StopDesign.

Personally, I prefer to name my section with two and more words describing it, but these tips are also great.

The second thing you should do is group your CSS rules. I prefer to group them like this:

1. Ungrouped styles - I use Global white space reset and also I like to apply different styles to the Body element (main color, background, font and text align).
2. Logo - After that, I’m usually grouping the styles to show H1 as a logo.
3. Main elements – Here, I’m grouping all the textual elements (H2, H3, H4, P ….) and even tables and lists. I noticed that it is best to use margin-bottom:value to remove the elements one from another, and here I also like to group this style for all the elements that should be removed from each other (i.e. h2, h3, h4, p, table, #content ul { margin-bottom:10px }). You could also use this area to group different aspects of the textual elements like colors, line-height etc. (i.e. p, #content li { color:#777; line-height:1.7em; font-size:1.3em }). It is important for you not to apply rules to the elements that are called elsewhere like list-items, so it is a good practice to apply the styles to the specific elements (#content li { ... }).
4. Links – After main elements you should redefine the links. For me, this is the natural order, but after all – you should find what suits you best.
5. Main structure – After the main elements are already defined, I usually define the structural elements like #container { width:770px; margin: 0 auto } or #content { float:left; width:400px; text-align:left }.
6. Other elements - With the first 5 steps we’ve defined all the main elements in the page. For me, there is no specific position for the other styles. You should position them whatever suits you. But you should also take into consideration the position of the elements in the page structure (i.e. if you have a navigation in header, then you should put the “header navigation” styles before the footer styles.)

I hope you found these tips useful. If you have something to share with us, please do so :).

Further reading

70 Expert Ideas For Better CSS Coding from Smashing Magazine

If you use some kind of CMS or your own news script, you can the solution explained in this article. I will show you how to create an image gallery that doesn’t falls apart when different sizes of images are loaded and with no images being distorted.

What are we supposed to do?

We are assuming that our clients have unequal computer skills. They know how to upload a photo, but they don’t like the idea of using a program to prepare it for the web (i.e. make the pictures of same dimensions). So what should we do? If we want to create an image gallery using one of standard techniques, the gallery will fall apart on the picture that is higher than the rest.

I came up with an idea to create an image gallery that will crop the images, so if the image is larger than specified proportions, the overlay won’t be visible. This way, we will create an image gallery that rocks with all the modern and nice things we all use these days :)

The theory

We will create two DIVs that will “contain” the image inside it. This is the code we will be using:

<div class="image"><div><a href="#" title=" Image 01"><img src="image1.jpg" alt="Image 01" /></a></div></div>

You could use only one DIV if you just want to “crop” the image, but I used two instead, so I could create a border around the image that will be 1px outside the image. I used the link so you could link the image with some external big image of your own. You could use just the two DIVs and an image if you’d like – that’s up to you. Let’s style this gallery, shall we?

Styling the images

First of the two DIVs you have for any of your images should have a class. We gave ours class="image". This way you can control the behavior of image gallery and any of the images in it. So, you should decide which width and height you want to use in your gallery. I used the size of 80px for this, so I gave it this width and height. I also gave it a border of 1px. Since I want my images to be apart one from another 10px I used margins (right and bottom) of that value. We also used float:left so our images are aligned to the left. Don’t forget to use position:relative. Without it, we cannot remove the border from the image.

.image {
	width:80px;
	height:80px;
	border:1px solid #CCC;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	position:relative;
}

OK. And now is time for a little CSS Magic. We added second DIV to “crop” the images. We will do that by using overflow:hidden at this point – everything outside this DIV won’t be visible. We gave this DIV a smaller width and height (i.e. 1px right and 1px left = 2px) because we wanted to “remove” the border from the image for 1px. If we didn’t want to remove a border, or we just wanted to use plain and simple border or no border at all, than we could put the overflow:hidden to the first DIV instead.

Now, as we wanted to move the border away from the image, we positioned this second DIV absolutely. This is possible because we positioned the first DIV relatively.

.image div {
	width:78px;
	height:78px;
	overflow:hidden;
	position:absolute;
	top:1px;
	left:1px;
}

For the last part, we removed the border from the image itself with (obviously) .image img { border:none; }.

The example

Take a look at the example.

Eventual problems

As far as I tested this image gallery on different settings, it works fine, but there is something you should take care of. If you are using some kind of PHP resize script that resizes the image on the fly, you should arrange that both X and Y axis of the image doesn’t exceed the size of the actual “cropped” thumb, or you will finish with the white space on the bottom or in the right of the picture.

If you have any questions or suggestions, don’t hesitate to make a comment.

It is easy when you design a static page, but there are many obstacles, difficulties and limitations when you design for Content Management Systems. This is like a coin – it has two sides. I personally love the challenge that this kind of work puts in front of me, but nevertheless it is exhausting and sometimes painful.

In this article I will try to show you how to overcome some of the difficulties that will eventually come up when you design a page that is supposed to be edited by different people with different level of HTML knowledge.

There are two kinds of users

First, there are users that don’t know anything of web design, HTML and CSS. Those users didn’t hear about validation and it means nothing to them – just the opposite – they don’t understand why the validation is important and how this helps them (but this is not an article about validation :-). They may also like green text on white background. Tough one.

Second type of users is those who know what to do. They may or may not know the HTML, but if you give them opportunity to explore, they could ruin your masterpiece.

Validation errors

We could talk about how validation is important, but I will not discuss it here in this article. I love validation and I think it is very useful both when developing web site and later when you use it. So, how to prevent the page from not validating?

It is not an easy task if your page is maintained by users who don’t understand code syntax. The solution is rather easy to implement. You should use WYSIWYG editors in your administration whenever possible. It is also a good idea to disable all non essential options in the editor.

It is the habit of your users to use as many options as available, so limit the options to most common ones (headings, paragraphs, bold, italic, underline, lists, tables). If you allow them to input images into the editor, you should limit the image width to the maximum width of the layout DIV the image will go into.

Remember to use an editor that will create a code that validates. One of the best editors out there is TinyMCE and it’s free.

Page doesn’t look so nice anymore

OK, you used WYSIWYG editor on your CMS administration, and now what? You got pages that are all messed up, floats are not working correctly, and everything is upside down. First of all, use fixed width DIVS and overflow:hidden whenever possible for layout. This way you prevent your page from falling apart in cases like when your users upload very big images, or create tables that just don’t fit in. This is better than scrambled page.

The next thing you can do is to define maximum sizes of images and tables in your CSS (i.e. #content img { width:200px } – this piece of CSS resizes the image within #content DIV). This works well for images (browser will resize the image to fit proportions defined in CSS), but you should know that CSS cannot resize the image using constrain proportions, unless the size of the image is strictly defined and you can define smaller proportions with CSS (i.e. #content img { width:160px; height:120px; } – this will create a resized image from 800×600px). This won’t work for tables though, because browser renders table with the data there is already present. So if there is many data in the table, it will go beyond your desired and predicted space.

Remember to style the code

Because of CSS, there are many possibilities to style the code once the browser requests the page. Remember to style the code and you could even differently style the headings, paragraphs, images or tables in the section that is edited by others via CMS.

This way you can recreate a “static view” of the page that is not manually edited, and make a page look more professional.

As you may know, I live in a small Croatian region called Istra. Istra is well known as a tourist destination, cultural heritage including many ancient Roman monuments, cuisine and natural beauty. In Istria people are speaking a mixture of Croatian and 6 local dialects.

Istrian dictionary is a project from well known local publisher Histria Croatica – C.A.S.H. (famous by the series of books with great design and photography, describing Istrian past, monuments, tourism and people).

The aim was to take from the past our dialect words, to remember how they were spoken and what do they mean. We wanted to preserve a part of us while preserving the local vocabulary.

From September until know, we at Omnicron developed both front-end and back-end user and security interface, which allows a few levels of protection. The administration itself is built with the idea of user with administration permissions who has the authorization to create, edit and delete users and their privileges.

The whole site was built with the idea of users collaborating on entering new dialect words, suggesting the meanings of different words, and the administration area in which the administrators (depending on their permissions) can allow or deny different words, sort them and change them accordingly.

The administration interface is designed to take advantage of large screen resolutions. It has liquid layout, multi-selection usability which allows the administrator to make multiple tasks at the same time and numerous sorting and filtering methods. Nevertheless, the administration will work fine on lower resolutions as well in both Internet Explorer and Firefox.

In the upcoming years, when the database will be complete with words, the idea is to print the Istrian dictionary as a book. This way, all the contributors will have their place in a book what is, in my opinion the best cooperation between the Web as a media in one side, and the printed media in the other.

Visit Istrian dictionary, and take just a little breath of past. Although this is a Croatian site, you may find its design interesting.