There is a HTML5 templates generator provided by Initializr. Navigate to their advanced custom page to see what fancy features they had made.
Category: Web Design
Simple Web Form Showcase
As I am in the journey of learning web page design, now I am in the stage of designing web form layout. There is a long run of research on the web form layout such as the place where the label to be put, the font size or font weight of the text should be put, and etc.
By referring to the Luke W Research and UxMatters Blog, I have found some useful information that can help me to design a web form.
I have created a sample web form layout and I am now going to show the design for the reader. But please be noted that what I show here is not the final decision and will be changed later. Try give me any comments after you have tested it.
Screenshots
First, let us see the screenshots of the web form layout:
HTML / CSS
Second, let us see the HTML / CSS coding that make the above web form layout real life.
HTML
<!– form –>
<div class="form">
<h2>Sample Form</h2>
<p>
<label>Name: </label><span class="required">(Required)</span>
<br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here. </span>
<input class="text" type="text" value="Default" />
<br />
<div class="fieldinfo">You cannot put illegal name here</div>
</p>
<p>
<label>Name: </label><span class="required">(Required)</span>
<br /><span class="error">test </span>
<textarea class="text">Default</textarea>
<br />
<div class="fieldinfo">You cannot put illegal name here</div>
</p>
<p>
<label>Name: </label><span class="required">(Required)</span>
<br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. Error Message Here. </span>
<input class="text" type="text" value="Default" />
<br />
<div class="fieldinfo">You cannot put illegal name here</div>
</p>
<p>
<label>Hobby: </label><span class="required">(Required)</span>
<br /><span class="error">Error Message Here. Error Message Here. Error Message Here. Error Message Here.Error Message Here. Error Message Here. </span>
<span class="group">
<span class="pair"><input type="radio" /> One </span>
<span class="pair"><input type="radio" /> One </span>
<span class="pair"><input type="radio" /> One </span>
<span class="pair"><input type="radio" /> One </span>
<span class="pair"><input type="radio" /> One </span>
<span class="pair"><input type="radio" /> One </span>
</span>
<br />
<div class="fieldinfo">You cannot put illegal name here</div>
</p>
<p>
<label>Like: </label><span class="required"></span>
<span class="error"></span>
<span class="group">
<span class="pair"><input type="checkbox" /> One </span>
<span class="pair"><input type="checkbox" /> One </span>
<span class="pair"><input type="checkbox" /> One DDSFSF </span>
<span class="pair"><input type="checkbox" /> One sfsdfsfsf</span>
<span class="pair"><input type="checkbox" /> One </span>
<span class="pair"><input type="checkbox" /> One </span>
</span>
<br />
<div class="fieldinfo">Just choose what you like</div>
</p>
<p>
<input class="button" type="button" value="Submit" />
</p>
</div>
<!– form –>
CSS
/* form */
.form {border:#CCC solid 1px;padding:0.5em;}
.form h2 {text-align:center;font-size:1.3em;}
.form p {margin:0.8em auto 0.8em auto;clear:both;}
.form label {font-weight:bold;}
.form .required {color:#666;font-weight:bold;}
.form .fieldinfo {color:#666;font-size:0.85em;clear:left;margin-top:1em;}
.form .error {color:red;font-size:0.8em;float:right;width:20em;margin:1em auto auto auto;text-align:justify;}
.form .text {margin:1em 1em auto auto;width:20em;}
.form .button {width:auto;}
.form .group {margin-bottom:2em;width:20em;display:block;margin-top:0.5em;}
.form .group .pair {display:block;float:left;}
Web Design Learning Journey 1
As I now try to research some web design blog and article, to learn something about web design. What I learnt I will put in this blog content.
1. Resize Text in Typography
The research from “How To Size Text in CSS” tells us that, not every browser supports pixel in text size, however we can use em to specify the text size. It had gone through six iterations, such as “text size in pixels”, “text size in ems”, “body sized as percentage”, “setting line height in pixels”, “setting line height in ems” and “the Safari monospace problem”. By doing this, we can get something like this:
<style type="text/css">
body {
font-size:100%; /* retain all font sizes first */
line-height:1.125em; /* 1.125 x 16 = 18px */
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
Here we have Complex Example (A List Apart, n.d.) that showed us the way in sizing text. Refer to its CSS file, we can see that font-size, line-height, margin, both of them are using em to resize. We can refer to this in doing typography.
I have found another articles Line Spacing (Typographyforlawyers, 2008) tells us the optimal line spacing is usually between 125% and 140% of the font size. It is meant that for 12 px font, the font size must be somewhere between 15px to 17px.
I recently found that “Type is the backbone of good web design” (TheDesignCubicle, 2009), it gives web designer some hints on designing the typography. I have summarized the important point that is found from there.
Line Height
.bodytext p {
font-size:1em; /* 1em=16px */
line-height: 1.5em; /*1.5em of a 1em (or 16px font) = 24px
}
What he recommended is the line height we can just set to 1.5em, however, I have learnt this technique before, but here is the good explanation why we should put this. 1.5 em is the good and readable line height for body copy, it said.
Letter Spacing between All Caps and small caps
It said that we should introduce one px letter spacing for all caps and small caps because it bring a long nice balance of the web.
.bodytext p {
font-size:1em; /* 1em=16px */
letter-spacing: 1px;
}
Comfortable reading measures (45-75 characters)
“The Elements of Typographic Style Applied to the Web” (Webtypography.net, n.d.) tells us the comportable measure for the text, for single column that is 45-75 characters for one line, 40-50 characters for multiple columns. The CSS we can put is something like this:
DIV#col1 {
width:400px }
DIV#col2 {
width:50% }
DIV#col3 {
width:33em }But it tells us no matter how reader increases the text size, the width of the box that set in em will always introduce 66 characters per line. Therefore it is recommended we set em in width of the box.
Hierarchy and Contrast
Other than that, it also told us hierarchy and contrast is important in the web page. We should give readers to digest information in chunks, to allow them to retain more information and stay longer on our site.
On Web Typography (Jason, S. M., 2009) told us that contrast is important, even the font face we use. We can try to write down our general description of the message and find one suitable font face that can give qualities to that message. It is recommended using Sans and Serif to give cohesive look. However, there are also other typefaces pairing for example Perpetua and Gill Sans or Meta Sans and Meta Serif. Finding two divergence typefaces can create new meaning or an interesting juxtaposition, as long as the contrast is strong.
Layout
960 Grid System used by TheDesignCubide.com where it employs 960px for the width of the web page. It is a good system that enhance good layout. Looking into, we can find Custom CSS generator, HTML Layout generator inside. There also have some good examples on how to set 12 col and 16 col in grid system. Better we get reference inside.
1KB CSS Grid System is another recommendation from me that, we can choose number of columns, column width and gutter width, then we can download the resulted CSS files without tricky code. Good Recommendation when we need structuring a website.
Do’s and Don’ts of Effective Web Typography
Other than this, Mike Smith had written good posts “20 Do’s and Don’ts of Effective Web Typography“, something had repeated as above, that meant it is agreed by most of the professional web designers. In summary:
- we should not use too many different font faces on the page
- we should planning for font size increase by the viewer
- we should not use Sans Serif for large bodies of text
- we should not over emphasis (make bold) in our text
- we should remember to use font stacks (in case some face is not owned by some users)
- we should use CSS text transform uppercase instead of typing UPPERCASE directly in our text
- we should use line height in our text
- we should have proper text colors on the page background, it is recommended we using off-white (#F8F8F8) font on a black background or a dark gray (#252525) font on a white background.
- we should use proper hierarchy for our web pages, such A List Apart.
- we should make use of baseline grid, consistent vertical grid will help readability and increase visual appeal of the overall design
- we should use shade variation to make some areas stand out more, such that our body text is black in color, sidebar gray in color, it is able to increase the speed of text reading.
- we should have proper letter spacing and make use of typographic scales in our CSS codes.
Other than typography, another “20 Do’s and Don’ts of Effective Web Design” by Mike Smith, we can also reference to there.
ColourLovers contains generated palettes, patterns and colors for web designer to use.
Lastly, this blog article is not still finalized and maybe refined later.