EmanuelBlagonic.com » Something about web design

For just a few more days (until this Friday) you can enter the competition to win custom designed Wordpress template/theme. To participate in this competition you should post a comment to the article and ask for the template. Then the visitors will vote the best comment that will win a custom designed Wordpress template/theme. Good luck!.

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

A few months ago I wrote an article about how to use CSS to create a nice looking map. The process was (I think) well explained in that article, and now I want to show you the real example – or how to use CSS and unordered list to create live, nice looking CSS map (that hopefully rocks :)

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?

Continue reading »

Photoshop is a powerful tool for almost everything you need in graphic and web design. This article explains how to use Photoshop to create product boxes.

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.

Continue reading »

Google homepage has 5 KB in size and the search results page less than 20 KB. Both pages don’t use standards compliant coding that separates data from presentation. This is not a problem because Google looks the same in all browsers and loads pretty fast. But, what if we used standards compliant code? How should we benefit from that?

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?

Continue reading »

These past two month I was very busy doing many designs, redesigns, logos, layouts, etc. I didn’t have much time to write an article on my blog and I’m sorry for that. In the past few weeks I sliced a lot of layouts and built a lot of new pages with much content.

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

Continue reading »

There are several techniques for laying out the image gallery (using list-items, simple IMG tags or using links when you create a “clickable” gallery). If you use any of available techniques, you should get the same or almost same effects. And everything works nice as long as you stick with the thumbnails of the same size. But from my experience when working with different people with different computer skill, you can expect almost anything. First of all, they won’t upload the photos of the same size, so everything you worked on falls apart – floats, sizes, aligns.

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.

Continue reading »

If you designed a web page that is supposed to be used as a part of Content Management System, than you should already be familiar with the difficulties and limitations of those designs. There are many variables you should think of when designing for Content Management Systems – what are the maximum image sizes, which kind of users will be using CMS, how much HTML do they know, will the page validate after the users input their text etc.

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.

Continue reading »

Once in a while, we all have an opportunity to work on something unique and very encouraging. My opportunity was the project we started working on last September. Its called Istrian dictionary, and it is an online collaboration project with the aim to take from the past our dialect words, to remember our elders and the way they had spoken. The Istrian dictionary project is a big step in saving our national and regional spoken heritage.

Continue reading »

Just a few months ago when I created any design, I didn’t practice a grid system. I didn’t know much about it so I thought that I can live without it. Yes it’s true. You can live without a grid system, but should you? Why is the grid important? I will try to answer to all of your questions in this article.

Continue reading »

For one of my personal projects, I needed to create a nice-looking map and position the elements in it. In the past, I would use Photoshop, and sketch the elements on layers that I can move, but today I will use (definitely) CSS. We will create an unordered list to achieve that. Nothing complex, just pure simplicity (and it will look nice too :)

There are so many things we can accomplish using CSS positioning. For example, we could provide the background image of a map, and put the elements (in our example – cities) in it. The cities will be absolutely positioned on our map to the places there actually belong. I used a map of my region Istra for this example, and a few cities.

Continue reading »

A few days ago I stumbled upon an interesting news site called Daylife. Its front page (Covers) is something like an internet/TV hybrid, with its flash intro page that displays most recent news. To say the least, I am a fan of Flash, as of JavaScript and other technologies, but I think that the same (or almost the same) “vow” effect could be done with XHTML/CSS combination as well.

This front page is loading very slowly, and I think it would be better that they considered some XHTML/CSS/AJAX stuff, that would be faster.

In this article I will show you how to create this kind of front page using only XHTML/CSS. As I am not the JavaScript/AJAX expert (yet:), if anyone else would like to expand this article furthermore (to create that expanding effect), please do so.

Continue reading »

If you want to create a dropped shadow background than you could just add a drop shadow layer effect to a specific layer. But what happens when you would like to create a dropped shadow background that fades with the background itself. The easiest way is to use Photoshop “power”.

I am talking about Photoshop masks, and in this illustrated tutorial I will show you how to use masks to create faded shadowed background and also how to use masks when dealing with header images like in the example just bellow.

Continue reading »

In you read the article about creating simple contact forms than you know what the most web designers will ever need. For those of you who need some advanced forms, this is the article for you. In this article I will not cover many things, because if you know the basics you could combine the knowledge for creating more powerful forms. When you’re done reading this article you will be able to create advanced forms such as registration form. I wanted to show you how to create nice looking form including text inputs, textarea and checkboxes. I will also show you how to group checkboxes and create description text for the text inputs.

Continue reading »

Back in the “old days” of the web, tables were used for creating page layouts ranging from complex to simple (for example – creating a contact form). Today, we use DIVs and SPANs instead, and we should use tables only for displaying tabular data. In this article I will show you how to use tables (we will use <thead>, <tfoot> and <tbody>), display a caption and style it up with some CSS.

Continue reading »

In this brief and illustrated tutorial you will learn how to create most commonly used web graphics in Photoshop. Techniques explained in this tutorial, can be used in other similar programs as well. In this tutorial I will try to explain how to create a menu, like the one explained in the article “CSS image replacement techniques” and then I will guide you through the process of creating a custom submit button.

To complete this tutorial you should be familiar with the basics of Photoshop like dragging guidelines, creating layers and applying the effects to them, changing opacity, and using a Tool Menu.

Continue reading »

One obvious and another less obvious steal or rip-off (as you wish to call it) came to my eyes recently. In article “Is this a rip-off?” I pointed obvious one, and in the comments to the article I pointed one less obvious. Both of them are inspired by this design. What’s wrong with those people? Do they know how to design a blog or what? Well, since these two are the first rip-offs of my blog design, I decided to write an article about designing with passion, maybe the guys will learn something :)
And yes, there is no easy way of designing a “killer website”. Here are few tips that help me design.

Continue reading »

When you are engaged in web design process, one of the most helpful things is CSS image replacement technique. In this article, I will show you the basics you should know for replacing text with images. I will show you how to use a logo for Heading 1 (which is widely used for displaying company logo), how to replace different headings, and the last but not least - how to use this technique to display engaging and beautiful navigation.

Continue reading »

Drop down menus are among the coolest things on the web. Beside that they are also very good for creating navigations that contain many elements. The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element.

Continue reading »

How to create image with textual description, and keep it simple? Maybe some nice text decoration? If you are wondering about that, this is the article for you, and it’s not even very long and difficult.

Continue reading »

Although not many people today are surfing using older versions of Internet Explorer (like IE 5.01 and IE 5.5), it is not a bad idea to test your web site with these versions too. There are many ways to test your website with older versions of IE like having multiple partitions with different Windows installations, but that is definitely not the best solution. In this article I will show you the best way of testing your sites with IE 5.01 and IE 5.5 under Windows XP, but will also tell you the disadvantages.

Continue reading »