Dragonfly CMS v9 ⇒ Themes v9 ⇒ Theme design vs Browser, a nightmare or heaven? ⇒ Community Forums ⇒ CPG Dragonfly™ CMS
Forum IndexThemes v9

Theme design vs Browser, a nightmare or heaven? Reply to topic

I've seen so many websites, also designed and modified loads of them, and always came to the same solution:

Nothing is perfect 😢

Isn't it your incredible skills in HTML then it's a browser that screws up your life.
Due to that i have found many flaws in many browsers and in many designers, including myself. So here's a small write-up for all of you to start of designing your own incredible layout without screwing it up Very Happy

The Design

Before you start modifying a theme or directly go xhtml'ing your ass off, you need to know the basics.
  • Decide whether you want fixed width layout or variable width.
  • Scratch on paper how you want it and what "theme" you want it to be.
  • Open your famous paint application (Gimp, photoshop, paintshop, etc.) and click the [new] button.
  • Pick an incredible big size that is twice as big then your monitor resolution (3200x2400 on my screen as example)
  • Start drawing each part bit by bit (head, left, middle, right, bottom)

When you're done with the design you must cut it into pieces by thinking the HTML way of design.
This means in squares and rectangulars since svg, vrml and x3d are not html, they are other cool ways to create websites.

To get the hang of the HTML squared design you should first get the hang of all of all the possibilities on how to cut and paste stuff.
Therefore things like CSS, paddings and margins should become your best friends in this area.
To get the hang of it, the Mozilla JavaScript DOM tutorial provides you incredible examples of what each part actualy is.

CSS background property is your other best friend, since it allows you to put your cutted graphics on the background so that text and other information can be shown on top of it.

Cut the Design

Now that you start cutting, make sure to cut out all the needed border as separate images. If you don't some browsers may haunt you, ESPECIALLY when someone with bad eye sight resizes the font so they can actually read stuff (i will talke about that later).

Image to html

Now comes the tricky part that will explain why i said you should have a huge image.
Many people include many screen sizes from 640x480 up to 3200x2400 or wide screen like 1680x1050 (which seems to be "hot" although i hate them. Why? that's for a different topic).

To get the images properly inside the html you must consider the following issues:
  • Screen sizes
  • Buggy browsers (like IE which is a browser, but not a (X)HTML viewer)
  • People with inabilities

If you think hard you will notice that all 4 things don't fit together on a website, if you don't then i will list a few bugs:
  • IE doesn't understand em sizes which are very important to show a website properly to people inabilities like bad eyesight
  • Screen sizes give a totally different look/impression of your website.
  • Most monitors are never properly configured to show the right colors (brightness, contrast, tone, gamma, etc.)
  • Mozilla features like transparency eat CPU

Now go back to "The Design" and change your theme so that it has sharp colors and less colors.
This does provide benefits Smile

When you're done i would gladly help in teaching CSS Wink

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Just found this great tutorial: webstyleguide.com/

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Sadly enough, but it is true. Thanks for the info. Very Happy

Lead Theme Designer - WebSiteGuru Designs

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Linux 2.6.9 / Apache 2.2.6 / MySQL 5.0.27 / PHP 5 / DF Version 9.2.1

Very important, specially to me !
Thanks a lot.

The truth is to stop thinking and start living

Please enter your server specs in your user profile! 😢

If we are going to list good websites that gives tricks and thoughts on making websites, then here are my favourites:


And plenty of others, can't remember them as I don't have to visit them so much anymore actually.

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):

Update: here's a list of cross-platform font configurations.
They are combined based on width, height and serif type.
Therefore they should occupy the same space in a block of text without messing with the size.

Note: line-height is not counted in this configuration!

Linux fonts come first since GNU/Linux allows you to use Windows fonts but somehow they differ in size then on Windows itself.
.f_arial { font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation sans", Garuda, Utkal, FreeSans, sans-serif; } .f_tahom { font-family: Tahoma, "Luxi Sans", Geneva, sans-serif; } .f_trebu { font-family: Trebuchet, "Trebuchet MS", "DejaVu Sans Condensed", sans-serif; } .f_luc_s { font-family: "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; } .f_verda { font-family: Verdana, Geneva, "DejaVu Sans", "Bitstream Vera Sans", "DejaVu LGC Sans", sans-serif; } .f_c_new { font-family: "Nimbus Mono L", "Courier New", FreeMono, Courier, monospace; } .f_luc_c { font-family: "DejaVu Sans Mono", "DejaVu LGC Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", Monaco, monospace; } .f_times { font-family: "Nimbus Roman No9 L", "Times New Roman", Times, FreeSerif, serif; } .f_palat { font-family: "Bitstream Charter", "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Times, serif; } .f_georg { font-family: "Century Schoolbook L", "URW Palladio L", Georgia, Times, serif; }

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):
Fedora 25 / Apache 2.4.27 / MariaDB 10.1.26 / PHP 7.1.10 / Mercurial

Here is a great, quite advanced tutorial on how to make your whole website:

Server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS):

All times are UTC

Jump to: