• Tweet

• Tweet

Motivation for writing

Two weeks ago a friend of mine asked me if I knew someone who can help him create his website. I usually delegate such requests to designers that I know, but this time I decided to be a little bit more… creative. By doing that myself. For the sake of experience.

So these days I’ve been working on a static website utilizing HTML5 and CSS3. In this article, I’m going to share few observations of issues that I worked around. From a developer perspective. ;)

 

  

Why using Flash for a static web page is not a good idea

  

In fact, my friend’s website was already created, but it was created with Flash. There were few fundamental mistakes that the creator of his site had made.

• The power of Flash is in its dynamic capabilities

The power of Flash is in its dynamic nature. The incredibly rich user experience that can be achieved with the use of this technology is the main reason people use it for movie sites, banners and games, for example. In this case, my friend’s site consisted of few static web pages which required an extensive amount of CSS, not Javascript or Flash.

• It requires a special plugin to run in

Much like the Applets in Java (which are not more used, in fact), Flash requires its own environment to run. In desktop browsers it’s usually not a big deal to download that extension, but still some users don’t do it. Which reminds me of the second point, which is…

• Not all mobile devices support Flash

The truth is there is a tendency to move from proprietary to standardized solutions like HTML5. More and more manufacturers simply don’t include support for Flash in their devices because of this one reason.

• Hard SEO optimization

I said hard, not impossible. The search engine crowlers usually search for parsable text. In the case with Flash, there is no such text due to its container-based design.

• Not all browser functionality will work by default

Because Flash runs in a plugin container, it’s understandable why the Back button of the browser will not work by default.

• The programs written in Flash are compiled

Which means that you should have the sources in case you want to make any editions. 

But all of that doesn’t mean HTML5 will throw Flash away. It will simply alleviate its use. For great dynamic user experience like game applications, catch-the-eye banners and very cool movie-related dynamic websites, Flash is still the right choice.

The biggest problems in my case were :

• The site was not displaying correctly on mobile devices
• I had access only to it's compiled image. I guess there was a way to decompile it, but it wasn't worth the time. Which defines the third problem…
• The Search Engine Optimization was practically impossible

 

Creating a static website using the right tools

So I decided to create the site from scratch using some standard technologies, let’s say – HTML and CSS. The next step was to choose the right tool to help me with that. 

 

The WYSIWYG editors

The What You See Is What You Get editors allows you to simply draw your program, or at least see what it would look like, at design time. Examples for WYSIWYG editors are QT Creator, Visual Studio (when designing Win Forms/WPF or Web Forms applications), CoffeeCup Visual Site designer and Adobe Dreamweaver.

 

  

Choosing the right editor

  

At first, I visualized the process of creating the web site with a designer like CoffeCup, by simply drag&dropping the parts of the page. I soon realized that it was not going to work as expected.

 

 

 

Why WYSIWYG tools are good for desktop apps, but not for web apps

 

 

Editors like QT Creator (which is a tool for creating multi-platform desktop apps, but not only) work by generating domain specific language (usually related to XML or XML itself), and after that compiling it to actual code that renders the screen. WPF works in the same way. And these kind of editors, in my opinion, work nice for desktop applications.

But the web is an entirely different world. Web apps are usually created using HTML and CSS and, believe it or not, it’s really not so easy just to “draw” your divs and spans and leave all like that.

The main reason for that are the various ways in which a page can be constructed, along with the various ways by which a page can be visualized. A page can be created without CSS, all the fonts can be embedded in the HTML itself (although it's really not recommended). And you usually want your site to look and behave the same way across different desktop and mobile browsers. Which is hard. There are different screen resolutions, different bugs and different hacks that might be needed to achieve a consistent user experience across browsers – both desktop and mobile. And maintenance is a whole different thing to worry about, and it’s important.

Tools like CoffeCup can be used to simply draw your site, but nothing more. I quickly realized that I’m not gonna get away with that. Which leads me to my next point, which is…

 

 

Adobe DreamWeaver is not a simple WYSIWYG tool

 

If you imagine yourself drawing your favourite div in DreamWeaver, forget it. The truth is that DreamWeaver is a professional web design tool, which requires a decent knowledge of CSS and HTML to operate correctly. Although I can utilize approximately 10% of its functionality, I decided to use it instead Notepad++.

 

Few basic CSS hints

Of course, writing CSS was not as easy as it seemed. In the following sections I’m going to show you few workarounds that I had to apply to achieve a decent look of my not-flashy site. Let’s consider the following simple example :

HTML :

        <div class="container">
	        <div class="centralize">Some text here.</div>
        </div>

CSS:

.container {
	width: 50%;
	height: 100px;
	background-color: #000CB2;
	border-style: ridge;
	border-width: 5px;
}
 
.centralize {
	background-color: #D50000;
	width: 50%;
    height: 20px;
}
 
.container, .centralize {
	border-style: ridge;
	border-width: 5px;
}

Result :

 

How to center a text in a div

Centralizing a text in a div is easy. Simply use the text-align property in your CSS.

.centralize {
	background-color: #D50000;
	width: 50%;
	text-align: center;
    height: 20px;
}

 

 

which results in 

 

How to center a div horizontally inside another div

 

In order to centralize a div in another div horizontally, we’ll need to adjust the margin properties of the inner div like this :

.centralize {
	background-color: #D50000;
	width: 50%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
    height: 20px;
}

 

 

How to center a div vertically inside another div

Centralizing a div vertically is a little bit tricky. In fact, there appear to be multiple ways to achieve this, each holding its pros and cons. The method I choose is the following : 

HTML :

        <div class="container">
                <div class="floater"></div>
	        <div class="centralize">Some text here.</div>
        </div>

CSS:

.floater {
	float: left;
	height: 50%;
	margin-bottom: -20px;
}

.centralize {
	position: relative;
	clear: both;
	background-color: #D50000;
	width: 50%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
}

Result :

  

Using this method, we create an empty div – the floater – with the following properties :

 

.floater {
	float: left;
	height: 50%;
	margin-bottom: -20px;
}

The margin-bottom property is actually the height of the inner container. On the .centralize class we add the following properties :

.centralize {
	position: relative;
	clear: both;
        ...
}

I admit it's kind of a hack, but it seems this is one of the best ways to do it. You can find more information regarding the other methods of centralizing a div vertically here.

 

How to brighten an image on hover

Lightening up an image on hover can be used when you have a menu and you want to add an effect of brightening when the user hovers over one of the items. This can be done with the following class :

#myImage:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Another way would be to create another brightened image, but I think this one is the more elegant way.

 

Difference between static, absolute, relative and fixed position

As far as I understand, the differences between these are as follows :

• Static positioning

This the default position value, the element is rendered where it should be according to the natural document flow. Static elements are not affected by the top, bottom, left and right properties.

• Relative positioning

Using this positioning, the element is displayed relatively to its normal position. By default it complies to the normal document flow rules, but the top, bottom, left and right properties might be used to further adjust its position.

• Fixed positioning

Elements of this type are positioned relatively to their parent element. The fixed position takes the element out of the document flow.

• Absolute positioning

Same as the fixed positioning, but the element is set relatively to the browser window itself. The absolute positioning also takes the element out of the normal document flow.

 

Using a Javascript framework to further improve the CSS maintainability

There are Javascript libraries such as LESS, SASS and xCSS (also known as CSS pre-processors), which extend the default CSS functionality with the inclusion of concepts like procedures, for example. With their help, you reduce the unnecessary code duplication a lot, following the famous DRY principle. It enables you to use nested rules, to place one class properties into another (the concept of Mixins), even writing procedures and passing parameters to classes.

I didn't use such a frameworks in my website, of course (because it'll be an overkill), but I thought it'll be a nice point to note. I will not give you examples, you can check one nice tutorial on LESS here.

But I'd like to give my humble opinion on the matter. The idea of such frameworks is great;minimizing the code duplication is indeed a problem in CSS (but not so much in CSS3, as I understand). But utilizing the DRY principle, implementing strong cohesion and loose coupling can often confuse the untrained eye. The concept of variables, functions and mixins might, undeniably, appear more complicated to some designers than the standard CSS features. Frameworks like LESS are still not widely used, meaning that other designers might have problems understanding the code.

Another issue that concerns me as developer is the fact that such pre-processors translate the "meta" CSS code you write into standard CSS code "on the fly". I'm not sure if there will a considerable delay when processing larger CSS files on the client machine. 

Yet I'll leave this concern to the professional designers out there. :)

Google+