enhance your css
Writing css code isn't that hard, it's easy, clean but can be a pain in the ass to keep it readable when you have hundreds or maybe thousands of lines of code.
When sticking to specific rules it can all be made a bit more readable:
- always use a reset of some sort
- alphabetize
- write comment
- consistency
- start in the right place
- Understanding Class and ID
- Power of li
- CSS Debugging Tools
read the full text to enhance your css code
5 Ways to Instantly Write Better CSS (click here )
20 Useful CSS Tips (click here)
why emails get blocked by spam filters
How is it possible that my emails are blocked by spam filters?
I got this question from a few friends and a client and this are the things you can do:
Check your newsletter/email on a spam checker tool
Programmers heaven spamchecker
Lyris contentchecker
The problem for the client was the subject line, in order to get a correct and acceptable subject you need to think carefully about it.
A spam filter recognizes capitals and exclamation marks and blocks your mail on them, so try to avoid that.
Make sure your mail/subject doesn’t contain the words on the list you can find here
And also a few others:
- Try not to use attachments
- Avoid bcc (blind copy) to send your mail
- Don’t create an all image email, this big email, that contains all the text in your email, will probably be blocked. Another important issue is that a firewall sometimes removes images from emails so your recipient gets a blank email.
- So try to create a text-based email. Best thing to do is to provide an html AND text based version of the email.
Good luck.
layout inspiration
A lot of programmers seem to hate the layout part of the job. Well if you work in a big company you probably won’t do the two jobs, but in some cases, or when you work in a small company (ex 1-5 employees) you have to do them both (layout and programming). And for those guys, it isn’t always easy to have inspiration right away, well there is a solution.
Here are a few sites that have a huge portfolio with nice layout sites. You can grab the css in some cases, and that’s the interesting part of it.
Take a look at them.
cssmania
cssremix/
cssimport
designsnack
Anyone got a better idea to get inspiration? Feel free to add your way of working in the comments.
basic tips and tricks: 3.Forgotten form attributes
A lot of people create easy forms but don’t think it trough before designing the page. I listed 5 useful attributes/elements a lot of people intend to forget or simply don’t know why they are using it.
Use get or post to send a form
Get will append the form data to the URL that is set in the action attribute of the form and is used when the form is idempotent. For example on search forms.
Post will not append it to the URL but sent it in the body of the form. It should be used when we are modifying a database or doing a subscription.
What is enctype?
This attribute is used to submit the form to the server; it is only needed when using post. Whenever you use a file field in your form you should set the enctype value to multipart/form-data, otherwise it uses the default value application/x-www-form-urlencoded.
Use tabindex
This creates an order when going from one field to the next using your tab button. When creating complex forms, this might come in quite handy. It creates the opportunity for the developer to indicate the order the form needs to be completed. Every field in the form gets a ‘tabindex’ value starting from 0 with a maximum of 32767.
Connect a label to a field
It’s always handy to have a label for each input field, so you can click on the label and the cursor automatically gets positioned in the input field. The only thing to do is put a ‘for’ attribute in the label and give it the id of the corresponding field as value. Easy and Handy for users
Fieldset and legend
This allows you to thematically group your form elements. The ‘legend’ element gives you the opportunity to create a title on each fieldset and has to be put in between the fieldset tags. Use css styling to create a nice design for the fieldset.
Greetings K.
basic tips and tricks: 2. DIV vs. TABLE
A lot of people don't really know when to use what kind of elements to build up an HTML page therefore I would like to take the time to explain tables and div elements.
Tables are created to display data, they are built for it and that's the only thing they are good for. To explain this we can take a look at the elements that a table can contain. Thead (again in tags <thead></thead>) contains the header row information of a table, tfoot contains the footer or bottom row of a table and tbody contains the body or data of a table. The easy thing about tables is that you can change them very easily without breaking out of the design, the height is fit automatically and data is displayed correctly the first time you show it. Off course with a little bit of CSS you get the layout just like you want it to. For more information on this you can take a look at my earlier post (http://www.devexp.eu/?p=50)
Now what are div tags actually and why are they better to create a layout?
Div tags are nothing but logical divisions within the content of a page, they are built up with the <div> tag and make it easy to manage and style your HTML page just as you like. The cool thing about div tags is that you can name them individually, so you can affect them with CSS. As you can see the div will react a lot better with layout and give you all the possibilities you need.
The problem with tables is how unreadable and unusable they make your code. When you use a table as base to start from and create different rows and columns you will probably create other tables inside that table to display some content. And maybe you'll end up with 3, 4 or even more tables within each other. When you have a page like that, please do take the time to look at the code and you'll notice right away that it became very unreadable. When trying to change 1 column or 1 row you'll see how complicated it gets. This method was very often used 3-4 years ago in web development but div tags are now getting the bigger hand in this now.
Let's create a little example to illustrate this issue. This example will create data displayed like this:
| This is a Title | |
| aaa | bbb |
| cccc | |
<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td colspan="2">This is a Title</td> </tr> <tr> <td width="50%">aaa</td> <td width="50%">bbb</td> </tr> <tr> <td colspan="2">cccc</td> </tr> </tbody></table>
When we try to create this same view built up with div tags you will get:
<div style="width: 100%;">This is a Title</div> <div style="width: 50%; float: left;">aaa</div> <div style="width: 50%; float: right;">bbb</div> <div style="width: 100%;">ccc</div>
I guess the example makes it pretty clear, you write less code and you are very flexible while using the div tags and it makes it very readable.
When creating pages, be sure to think about your design before starting and think of tables as data displayers, not as design tools. It will ask a lot of exercising when you're not used to work with div tags, but after a while, you'll see all their advantages. These tags and tables are built with a cause, tag for creating divisions in your page, tables for displaying data. Don't mix them up.
basic tips and tricks: 1. Basic HTML
There seems to be a big lack of knowledge in the field of basic web design, therefore I decided to write a step-by-step web design tutorial. Every post will be a new chapter in development; I will try to give you a fresh view on what really matters and is interesting for starting users. We'll start with the basics like tags in html and go on with CSS; the future will tell us how far we get. The point is to share my experience with you guys, not to teach you every detail, if you are completely fresh to HTML and CSS; you better take a look at w3schools first. (http://www.w3schools.com)
So let's start off with our first post: BASIC HTML
First off all, if you want to learn HTML and CSS, try not to use the design view of programs to often. It's very easy to create simple pages with those design views, but you won't learn the code, and that's the important stuff you need to know. So let's take a look at basic fresh html code generated by Dreamweaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
So what is really important in this example?
As you can see, html is completely built up with tags and every tag is written inside the tag it is containing to. You can see that the head and body tag are within the html tag, because the html tag is the whole page and the header and body are in it.
The head tags are simply to give information like the name of the page (now ‘Untitled Document') and include the necessary files (that's for later). The real important one is the body tag because that is what the user will see. Whatever you will write within these tags, will be displayed on the screen of the person that visits your website.
So if we write <body>test</body> the user will get an empty, blank screen with test written on it. Easy, isn't it? So now you can write whatever you want in the page. The tricky part is the layout of the text.
Layout of a text is also done with the tags as they are written in the first example. So when you want to write for example this is bold this is italic and this is underlined, you will have to write this:
This is <b>bold</b> this is <i>italic</i> and this is <u>underlined</u>
As you can see every type of layout has its own specific layout tags b for bold, I for italic and u for underline. When using tags, be sure that you always close the tags just as in the example.
Like there are tags for text layout, there are also tags for line breaks and paragraphs. When you are writing long texts with paragraphs in it, always try to write your text within the <p></p> tags. Don't use 2 <br /> tags instead; this is a very often made mistake. This is for the simple reason that <br /> isn't the same as a paragraph, it doesn't react the same way for every user, a paragraph tag does. So use your <br /> tags wisely within the <p> tags like so:
This is a long text and when we go to a new line within the paragraph we use a line break So this will be displayed on a new line within the same paragraph This is a second paragraph that will be displayed
This will result in:
This is a long text and when we go to a new line within the paragraph we use a line break
So this will be displayed on a new line within the same paragraph
This is a second paragraph that will be displayed
The last thing for today is the headings which are used to display titles. Just like the paragraph tag you can use the heading tag: <h1></h1><h2></h2>. H stands for heading and the numbers are the scale that the heading is displayed in, 1 being the biggest and 6 being the smallest.
That was it for today my friends, this was the easiest part, in next lessons we will talk about topics like:
DIV vs. Tables
CSS and how to use it properly
debugging and testing
and much more
To reinforce our IT team, we are hiring a colleague (M/F)
As we are growing we are in need for a new junior developer to create and maintain websites. If you or someone you know is interested in this job feel free to contact us. The company is Step-@-Site and we are located in Brussels (Vorst/Forest). Our portfolio contains websites/newsletters/intranet sites for small and big companies, for example;
Your profile:
- Bachelor studies in ICT (junior)
- PHP, MySQL, ASP, JavaScript, HTML and CSS
- Thinking in terms of performance, response time and usability of interfaces
- Systematic and dedicated personality
Offer:
We offer an interesting salary and fringe benefits, linked to your personal competencies and your experience.
Feel free to contact me on kennethvr [AT] devexp [DOT] eu
Stop JPEG and GIF, start PNG
It’s already clear that we are constantly working on applications for internet, and often those applications or websites use images. Over the years it became an evidence to use png images instead of jpeg or gif. How comes:
Jpeg covers 16.7 million colors and are without any doubt the best for photographic images, but when it comes to website images like buttons, icons, etc, they mostly suck. They are mostly 3 or 4 times the size (kb) of png images, and don’t even think about using shadows or transparency without a background.
Gif is great, without any doubt the most popular on the internet, but they only cover 256 colors, and that’s a huge pain in the ass. When a gradient is in images, you always get these awful lines in the image. The only advantage gif has, is animation.
So why use png?
- They are 25% more compressed then gif’s (don’t even mention jpeg here)
- Save, restore and resave will never degrade the quality of the image
- PNG is recommended by W3C since 1996 (already 12 years ago)
That already should be convincing, isn’t it…
Kenneth
Symfony: How to refactor
Last year, my team and I, needed to create a new web application. We decided to make use of a well known PHP framework called Symfony. Not because some say this is the best framework, but because ...
- It is Enterprise Ready
- Has many plug-ins available
- It is Actively developed
- (most important) A great community and documentation
- Integrated Unit Testing
Although symfony has a good implemented MVC architecture with a lot of helpful functions, it is still very easy to make some design mistakes, like the DRY (Do not Repeat Yourself) principle. Fabien Potencier, lead developer of symfony, recently refactored an existing web project which he wrote down in the symfony blog.
If you work with symfony, you really should read this refactoring session because I’m pretty sure somewhere in your code you made the same mistake(s).
Call the expert: A refactoring story (Part 1, Part 2, Part 3, Part 4, Part 5)
Tables: use or don’t use
When creating a more complex table the last few days, I noticed that it is very useful to create them with the different additional elements: tbody, thead, tfoot, col, th, td, etc…
In order to create a table in your webpage, it is not required to use these elements but when using css and trying to put a layout on a table, they are very handy.
For example you can, by using the display property, specify the function of all the elements:
- TABLE { display: table }
- TR { display: table-row }
- THEAD { display: table-header-group }
- TBODY { display: table-row-group }
- TFOOT { display: table-footer-group }
- COL { display: table-column }
- COLGROUP { display: table-column-group }
- TD, TH { display: table-cell }
- CAPTION { display: table-caption }
TFOOT will always be displayed as the bottom row of a table and most of the time contains totals.
THEAD contains the header information of a table.
Not really a very interesting post, but I just love it when using a bit more complex css on tables. It makes the tables easy to manage and they are tons more readable in code.
The thing me and my colleagues noticed is that tables aren’t very good for web design; they are created to display data and not a whole site or newsletter. A few years ago everybody started creating sites in tables because they were easy to set up, and looked great in a few hours. But the horrible time starts when you need to change layout after worth. In the most cases you’ll end up with a table that contains a table that contains another table. I guess you get the picture and that they are very difficult to manage. By experience we can tell that they are not very layout friendly and readability sucks.
We started using divs and with good css you can do anything.
Take a look at it, we recommend it.