Tag Archives: design

A look at your most important design decision – font, and size

Posted on by
1

Let’s take a code break for a minute and discuss fonts, target audiences, and why a screen will never equal a piece of paper. When you are designing your pages, the choices that you make regarding fonts and font sizes are some of the most important. Why? First, computer screens by design are going to be harder on the eyes than paper, as paper reflects light, where computer screens emit light and are constantly being refreshed, this means that as a designer you should make every effort to ease the strain and make your site as readable as possible. Take a look at the image below:

The x-size, which is literally the size of the small x in the font family, where the point size is the distance from the top of the ascender to the bottom of the descender. This is the reason that some fonts just look bigger than others when you place them in your code using the same point size in your CSS. For a good example take a look below:

Hey I’m 12 point arial, how do I look?
Hey I’m 12 point times new roman, I know I was designed for newspapers, but how do I look on the screen?
Hey I’m 12 point veranda, how do I look on the screen?
Hey I’m 12 point tahoma, how do I look on the screen?

There you have it, not only does size matter, font style plays an equally important role, but that’s not all …

Notice that some of the fonts are Serif, with the small lines on the ends of the characters, and some are Sans Serif, without the decoration. So what does this mean to the programmer? For the web designer, it’s easier on your audience if you go with a sans-serif font style, which is the opposite of traditional printing. The reason is the dots per inch or dpi on a screen is much less than the dpi when printing, the fonts seem to scale better.

Everything you need to know about web standards and design in 3 minutes!

Posted on by
Reply

I am working on updating some slides for an upcoming HTML course and stumbled across this brilliant video that explains everything you need to know in about three minutes, including why you need to use a standards based approach to design.

Here’s the lyrics

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
use with moderation
cause search engines can’t index the information
display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation
every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination
but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
design done, congratulations but it’s time to start construction
follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time
make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat,
tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate
check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox
title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong
when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker
design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter
if you trying to grow your company will get bigger
design and code right man can you get with it

Building a menu on top of Jon Rohan’s Triangles in CSS post with facebook style callouts using javascript for animation

Posted on by
Reply

Jon Rohan posted an excellent article on the ability to create triangles and other shapes simply by manipulating the borders of div tags, as it turns out it’s not that hard to put a callout effect on any plain rectangular div without using images. The original post is here (http://jonrohan.me/guide/css/creating-triangles-in-css/) . So what about taking this a bit farther and turning it into a fully fledged menu system where the selected element has the callout, and on rollover the callout follows your mouse up and down the menu? Take a look at the sample below, which will be explained in this post.

Try it out here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html

First, there is the css that will give us the tabs, triangles, which when placed almost over one another form the callout, and the content boxes.

 
	body{
		font-family:Arial, Helvetica, sans-serif;
	}
	.chat-bubble:hover{
		cursor:pointer;
	}
	.chat-bubble {
	  background-color:#EDEDED;
	  border:1px solid #666666;
	  font-size:14px;
	  float:left;
	  line-height:1.3em;
	  margin:10px auto;
	  padding:5px;
	  
	  position:relative;
	  text-align:center;
	  width:120px;
	  -moz-border-radius:10px;
	  -webkit-border-radius:10px;
	  -moz-box-shadow:0 0 5px #888888;
	  -webkit-box-shadow:0 0 5px #888888;
	}
	
	.chat-bubble-arrow-border {
	  border-color: #666666 transparent transparent transparent;
	  border-style: solid;
	  border-width: 10px;
	  height:0;
	  visibility:hidden;
	  width:0;
	  position:absolute;
	  bottom:-21px;
	  left:30px;
	}
	
	.chat-bubble-arrow {
	  border-color: #2e6a8e transparent transparent transparent;
	  border-style: solid;
	  border-width: 10px;
	  visibility:hidden;
	  height:0;
	  width:0;
	  position:absolute;
	  bottom:-19px;
	  left:30px;
	}
	#content{
	display:block;
	width:500px;
	float:left;
	}
	
	.content_box{
	  width:100%;
	  height:300px;
	  border:1px solid #060;
	  float:left;
	}

Now, inside the tags of your page you will need to place the

tags that will make up the tab boxes, as well as the content panels that will be switched out on mouseover using javascript.

<body onload="javascript:hover('1');">
    	<div id="tab_panel">
            <div class="chat-bubble" name="1" id="1" onmouseover="javascript:hover(this.id)"  style="padding-left:10px;">
                Tab 1
              <div class="chat-bubble-arrow-border" id="1_tri" ></div>
              <div class="chat-bubble-arrow" 		id="1_arr" ></div>
            </div>
            <div class="chat-bubble" name="2" id="2" onmouseover="javascript:hover(this.id)" style="border-left:none">
                Tab 2
              <div class="chat-bubble-arrow-border" id="2_tri" ></div>
              <div class="chat-bubble-arrow"		id="2_arr" ></div>
            </div>
            <div class="chat-bubble" name="3" id="3" onmouseover="javascript:hover(this.id)" style="border-left:none;">
                Tab 3
              <div class="chat-bubble-arrow-border" id="3_tri"  ></div>
              <div class="chat-bubble-arrow" 		id="3_arr"  > </div>
            </div>
            <div class="chat-bubble" name="4" id="4" onmouseover="javascript:hover(this.id)" style="border-right:1px solid #666666;border-left:none;">
                Tab 4
             <div class="chat-bubble-arrow-border"  id="4_tri"  ></div>
              <div class="chat-bubble-arrow"  		id="4_arr"  ></div>
           </div>
       </div>
       <br clear="all"/>
       <div id="content">
       		<div id="content_1" name="content_1" class="content_box" style="display: none;background-color: #E5872C">
            	Page 1
            </div>
            <div id="content_2"  name="content_2" class="content_box" style="display: none; background-color: #3E4E6C">
            	Page 2
            </div>
            <div id="content_3"  name="content_3" class="content_box" style="display: none; background-color: #92CF00">
            	Page 3
            </div>
            <div id="content_4"  name="content_4" class="content_box" style="display: none; background-color:#333">
                Page 4
            </div>
       </div>
           
           
</body>

Finally, there is a script block that you need to put in the of your page right under the

tag that will control the changing of the tabs, callout triangles, and the main content.

<script>
	
	var last_hover_id = 1;
	
	function hover(id){
		
		var tri_obj= document.getElementById(last_hover_id + '_tri');
			tri_obj.style.visibility = "hidden";
		var arr_obj= document.getElementById(last_hover_id + '_arr');
			arr_obj.style.visibility = "hidden";
		
		document.getElementById(last_hover_id).style.backgroundColor = "#EDEDED";
		document.getElementById(last_hover_id).style.color = "#000";
		
		document.getElementById('content_' + last_hover_id).style.display = 'none';
		document.getElementById('content_' + id).style.display = 'block';
		
		var tri_obj= document.getElementById( id + '_tri');
			tri_obj.style.visibility = "visible";
	 	var arr_obj= document.getElementById( id + '_arr');
			arr_obj.style.visibility = "visible";	
		
		document.getElementById(id).style.backgroundColor = "#2e6a8e";
		document.getElementById(id).style.color = "#FFF";
		
		last_hover_id = id;
	}

</script>

You can see that the names of the content blocks as well as the id's of the tab boxes are no coincidence, this only works if the content boxes remain "content_x" and the id of each tab box is a numerical number that matches the content box.

The full source is here: http://www.learnsomethings.com/testsomethings/rollover_tabs.html

A new way to look at the Heat vs Mavericks NBA Finals Games 1 – 4

Posted on by
Reply

OK sports are great for the fact that they are a statisticians dream, so many numbers, so many angles, who could blame them. I just came across this impressive set of graphs in the Washington Post that depict the NBA finals this year, where the Miami Heat are struggling against the Mavericks despite the fact that they seem to have a dream roster. The large graphs depict the flow of the game through the 4 quarters showing the total points per team, time that the teams led during the game, and final score. Directly under each of the graphs you see 4 bar charts that represent each quarter and display the minutes that each team led, and finally under the bar charts is a pie chart that shows the total minutes that each team led during the game. This is an excellent example of an executive dashboard, and turning mundane statistics into information.

A good example of an executive overview