Back to the basics pt5
Hopefully everyone has kept up with what we have discussed so far. Let’s look at some often used tags and css. The <div></div> is typically the most used tag. This get used a lot to divide structure and sequence information into formatting that makes sense. Want to insert an image, well we need the <img> tag. This on is a little different. A standard formatting would look something like this. <img src=”images/logo.jpg” id=”logo” class=”logoimg” alt=”A logo tagline” /> Notice there is no separate ending slash tag, its included there at the end. What we have is an instance of an image. We are telling the HTML to look in a folder called images for a file called logo.jpg. Spelling is extremely important here, since the instance name and actual file have to match exactly. We have given it an id of logo and a class of logopic. These are important in styling them using css. And finally, we have an alt specification. This is the “alternate” text value for the image. This should probably be a very short explanation of the image, since search engines can’t really see images, only text. To help loading time quicken, you may want to add width and height tags also, so the browser doesn’t have to scan the image and generate this information itself. You would simply add width=”200″ height=”150″ inside the tag (that will denote a length in pixels).
This is one way to insert an image file inside HTML. Another would be using the background reference from css. Any tag that can be set dimensions to, can also have a bg. You could create a div <div class=”logopic”></div>. With css, define the class and create a bg. It might look something like this.
.logopic {
background-image: url(images/logo.jpg);
width: 163px;
height: 69px;
}
Now I have told the browser that anytime it sees a div with a class of logopic, it needs to generate a 163 pixel wide 69 pixel high div and display the image logo.jpg as the background. Keep in mind that the default for a bg is to repeat both along the x and y (up and down) unless otherwise stated. So if I don’t want to create a checkered repeating picture of my image bg, I need to tell css- background-repeat: no-repeat;. Or if I want a pattern repeated across the width of the div- background-repeat: x; or from top to bottom, background-repeat: y;. This is telling the browser to repeat the image across the respective axis’. This is how you create repeating patters, like tile work on a bathroom floor. Repeating patters are great for saving space. It takes more time for the browser to load a 1000 pixel wide 100 pixel tall image of a gradient than to load a 1 pixel wide 100 pixel tall slice of the image and repeat it across 1000 pixel wide div. I hope this makes sense, you have to think about how the images is sliced and how the browser will be repeating it.
Well, there are two methods for generating images in HTML. There are a few others, but these are the most common. If I need to go in depth more regarding repeating bg, please comment back, and I will try to explain more.
Back to the basics pt4
Now we are going to look at parts of the html that are not visible when looking at the page i a browser. These are extremely important to the performance of the browser. I guess we should have started here, at the top of the html document. First things first, we need to declare what type of HTML. This is handled with the html <!doctype> declaration, the very first line, there to tell the browser what version of markup language we will be using. It might appear as.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
The part we want to focus on is the part after /TR/. Our options are
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
- XHTML 1.0 Strict
- XHTML 1.0 Transitional
- XHTML 1.0 Frameset
- XHTML 1.1
To find out more about what each of these means, check out the w3c.
Right under the doctype, we actually start denoting html coding with the <html> tag. Inside at the top starts with the head, not to be confused with a header. It’s contents are not displayed. It is denoted with <head></head> tags. The head contains information like the title of the webpage, which usually appears in most browsers above the toolbar. But more importantly, the title tells search engines information about the page (more on that later). Title tags look like this <title>Welcome to webpage, where you can find something</title>.
Also residing in the head are meta tags. These are extremely important in telling search engines like Google, Yahoo, and Bing, how to handle your web page, as well as how to rank it with others. This is where you input things like
- description- a small paragraph representing why users want to find your site
- keywords- relate to what people are searching for by word
- index- wether you want the search robots to follow your links to other pages with relevant information
Along with this basic data, you can also delve more in-depth with tags to tell the robots when to expire the information as well as when to come back and visit for fresh data. The meta tags are very important with regards to your ranking with search engines, but by no means are the end. Google has spent a lot of money and effort to create smarter ways to index websites, so a few of the “black hat” tricks with meta data that used to guarantee rankings don’t work anymore. They are more focused on how relevant the actual information on your site is helpful to people searching, not on how clever your keywords are. Which in my opinion, is the best way to rank sites.
Typically inside the head, you also include the reference to other items crucial to operation and styling. Like referencing that css sheet we created earlier, or actual css coding. A css reference might look like this <link href=”styles.css” rel=”stylesheet” type=”text/css” />. The href points to where the document physically sits in relation to the web page and what its name is. You might choose to link to scripts here also, depending on your choice. I sometimes link to javascript language (we will go in depth on java later, thats a whole can of worms by itself). A java ref might look like. <script language=”javascript” src=”jquery.tweet.js” type=”text/javascript”></script> I told the browser to look for the source (src) and what language type (javascript). Don’t fret over details yet, we are just looking at things that occur in the head tag for now.
Now, the next tag will contain actual displayed content. And it begins with denoting the body of the page with, you guessed it <body></body> tags. Inside those appear all your HTML stuff we discussed earlier. Here is a pic of what we have discussed so far.
Back to the basics pt3
Let’s talk a little about div structure and how css rules formulate it. So we left with a <div id=”title”>My name is Bob</div>. Now we have a reference to a css instance called #title. The width and height are a numeric value and a unit. The options for units are
- em (ems, the height of the element’s font)
- ex (x-height, the height of the letter “x”)
- px (pixels, relative to the canvas resolution)
- pt (points; 1pt=1/72in)
- pc (picas; 1pc=12pt)
- -+%(percentage usually relative to the item its nested in)
So the width and height are stated. Now we can explore the margin and padding statements. Margin deals with the margins around the div. If you want empty space between two divs, the margin option is the one to use. This can be stated in any of the afore mentioned units. The margin statement has no effect to the div other than moving its placement relative to others. The padding statement is a little different. Padding deals with the area inside the div. Think of it as padding in a box that keeps things from touching the sides. Now when you declare a padding statement, it physically changes the size of the div. A 480 pixel wide div is 480 pixels wide, until you add a padding to each side of, let’s say 10px. You essentially have added 20px total to the width, which ends up being actually 500px wide. To compensate for padding you have to change the div size statement, if you want to keep the original constraints. Both margin and padding can be applied to all sides at the same time or side specific. Let’s look at that now.
To add a margin to all sides equal, you simply state margin: 10px;. This will add a margin of 10px to every side. You can also state a clockwise starting with top. So that would look like, margin: 10px 30px 10px 15px; which is 10px at top, 30px on the right, 10px on the bottom, and 15px on the left. You can shorthand this to only 2 if the left – right as well as top – bottom measurements are the same. Like margin: 20px 50px; that will give you 20px top, 50px right, 20px bottom, and 50px left.
You can also use them independently like this.
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Hope this does not leave you in the dust, more to come late.
What’s up Big Foot?
Has anyone else noticed the use of oversized footers in design lately. I think its awesome. What do you do with all that real estate? Here are a few things others have done.
Why make people dig through your navigation to find a “contact us form”. Put a small version in the footer. Its quick and easy and makes good use of space.
Back to the basics pt2
Alright, so we learned what a web page does. Now let’s drill down a little deeper into what makes it tick. The whole premise of layout is based off of elements called tags. Did you play with leggos when you were a kid? Think of them as tags, you have an assorted size of rectangular boxes that stack from top to bottom. Thats right, everything is a rectangle. You can denote how wide and how high, where each sits in relation to another, and on a front to back axis, which sits in front of another. Thats it, boxes positioned in place. Now these tags may have varying content, images, text, video, you name it.
Tag structure – just like a capital letter and a punctuation mark denote a sentence, beginning and ending statements complete a typical* tag. In HTML, the open arrow < opens a statement, then oddly enough, the closed arrow > ends it. So it might look like this. <tag type>. That is the beginning of a sentence. The punctuation is typed as follows </tag type>. So a real example would be something like this.
<div>Content goes here</div>
There are many different types of tags based off type, here are a few that I use on a daily basis.
- <A HREF=
URL> </A> - <BODY></BODY>
- <DIR> </DIR>
- <DIV> </DIV>
- <DL> </DL>
- <DT> </DT>
- <H1> </H1>
- <H2> </H2>
- <H3> </H3>
- <H4> </H4>
- <LI> </LI>
- <UL></UL>
*Not all tags require an ending statement, and the new HTML5 standard typically does not require them. But for now, let’s stick to just using them for older browser compatibility.
Referencing with css – Now that we have a tag statement, now its time to mess with it. Stated in the head of the HTML document is a reference to your css document location (most popular use is in a separate css document – more on css and referencing later). Now that the browser knows where to locate and match information regarding styling the tag, you can change the parameters of that tag. Lets say you have a div tag, one of the most popular tags, short for logical division. <div>My name is Bob</div> You have a couple of options for referencing to a css styling for this div tag. You can use the id statement to identify it. <div id=”title”>My name is Bob</div> Now the browser is going to look at the HTML coding and reference the css document for an instance of #title. In my css doc, I may denote that I want a grey background, arial black text in 24 pixel size font, and it needs to be 400 pixels wide and 120 pixels high. Then the css instance of #title might be.
Back to the basics.
I would like to take the next few posts and go back to the basics. I know some of this may be remedial for most, but knowledge is power, and I want you to be informed. Especially if you are looking for a web designer/developer, its good to know a little behind what we do.
What is a browser?
A browser is a piece of software that resides on your computer. It reads files from folders stored remotely on other machines, and forms a representation of those files we see as a web page. Think of a word processing software, let’s say, Microsoft Word for instance. It takes a file and formulates a word document. It may include images and text formatting. This is the same principal behind a web browser, it takes html and css files, reads them, and creates the web page. Google has some great information on understanding browsers on their blog- People say “I know which Car i drive but when asked about which browser you use they are confused about web browsers — even though the browser is one of the most-used programs on computers.
What is HTML?
Hyper Text Markup Language. This is the coding, the inner workings of a web page. This delineates what text is a header, a title, a paragraph, a link… HTML is made up of boxes called divs that allow the developer to box text together in the correct groups. There is a whole lot more to HTML, but I’m trying to keep it simple, so we’ll leave it at that. Want more info check out the w3c.
What is CSS?
Alright, CSS or Cascading Style Sheets is where we get into the fun stuff. CSS allows you to format those blocks of text in the html code. CSS can reside imbedded in the html document, or in most cases, is referenced from a .css file on the server. Look at the difference between these two contact us pages.
Both of these contact forms are built from simple input text tags in html, the difference is CSS styling. Background color, background images, borders, shadows, font color, font size, and general layout. These are all handled by CSS, and it’s changing every day. New and exciting CSS features are adding to user experience and allowing designers to create beautiful and stunning pieces of online art. But…..
This is also where the most issues occur. Just like the many word processing software, there are many different browsers. Each of them handles CSS a little different. Mostly its about when the browser version was deployed, and when each adopted it’s CSS standards. There are still a few folks out there who use IE6. This is the bane of any developers existence. IE6 does not support the most current version of CSS or HTML. You can’t leave these people out, so we have workarounds designed to overcome the expired browser limitations. People don’t really think about their browser or about updating it, but if they thought of it as a car, the dealer is giving you an upgrade for free, to a faster, more sleek, and more colorful version of what you have been using since 1998. OK, enough ranting about old browsers. For more info on CSS check out wikipedia.
Well, there is your glimpse into a developer’s world, and a very simple introduction into what happens when you type “facebook” into the bar on the top of that web thingy.
What you need to know before hiring a web designer.
You own a business or have a really good idea you need to promote. What’s next on the list in generating a buzz? A website of course. Here are a few things to consider before investing in a web design.
- You get what you pay for, most of the time. A good design and smart development takes time. Time equals money. Money makes the world go round, and you need to to be realistic in a budget for your website. A 5 page simple site usually starts at about $1500. Custom script features such as shopping carts, content management, and database services push the costs higher.
- Communication is key. It needs to be a two way street. Hold your designer accountable on time constraints, but also remember that he needs materials from you in a timely manner also. A typical designer is not a content writer. If you don’t have all the copy (written materials) for you site, and you are having trouble writing it yourself, hire a content writer.
- Research what your competitors are doing. Check out what’s going on in your field or industry. Feel free to over communicate what you like and dislike about their sites. This will greatly help narrow down ideas.
- Set a realistic launch date. Mark a date and work towards reaching that with a plan and time line. The major steps are Plan – brainstorm about layout and color and light mockup. Design – build a mockup of the final site. Develop – build the functioning code from the sliced design. Test – evaluate and check cross browser usability. Deploy – put it live! Remember the typical time from most design houses is around 3 months
So to sum it up, look for someone who fits your style, is easy to work with, has good references, and hire them, just be realistic about your expectations. You and the designer will be happy in the end.
Brand New Design
So we have upgraded the Saviour Six website to something a little more 2.0. It also has way better use of current html and more importantly, css. It has a much smaller footprint, almost 1/3 the size. Let us know what you think.
www.savioursix.com
Welcome back, welcome back, welcome back.
For those of you who are too young to remember “Welcome Back Kotter” then you will be totally amiss to the song that is stuck in my head. I know it has been a long while since I have blogged, a bad no-no in the realm of blogging. But here I am, hopefully to redeem myself and continue on with this endeavor.
Firefox turns 5 this month. Thats like 64 in web years. What important role has mozilla played in the goings on of the web, you ask? Why have they generated so much buzz? Why are they quickly becoming the top browser of choice? Well, here are a few reasons.
How about the extensive plugins available that work right there in the browser. The new and improved adons manager is a wonderful way to discover and implement the plugins. My personal favorite is the youtube video downloader. As you surf youtube it adds a simple button under the description that allows you to download that video in a multitude of formats. Forget the sketchy keepvid and the likes. Download speeds and responsive times have increased, not to mention the wonderful customization through themes. For those of you who don’t have a download manager on your computer of choice, firefox has one built in. You can track or cancel multiple downloads. Recently viewed tabs is helpful if you hastily close things (as I have been known to do(ADD is another topic all together)) will recall last pages opened. You can download custom fonts, for those tweakers in the crowd that like to fool with css, but don’t understand what I what css is. Speaking of css, its 3.0 compliant. And finally, firefox operates the same on mac, pc, or linux. So there you go, some reasons to have a birthday party for our foxy friend, mozilla’s firefox.
Web Design, choosing the right color palette.
Do colors make a difference in conveying your ideas? Of course they do. You should be very intentional in choosing a color scheme to display your media in. A good designer should steer you in the proper direction, but here are some things to consider.
First and foremost, choose a strong contrast between text and background. ”Every visual presentation involves figure-ground relationships. This relationship between a subject (or figure) and its surrounding field (ground) will evidence a level of contrast; the more an object contrasts with its surrounds, the more visible it becomes” (from worqx). Further along in the article it shows the difference between strong contrast as opposed to weak. In a nutshell, choose a strong contrast because it’s easier to read, and causes less eye strain.
Use consistent colors. Typically, most effective designers choose 4 to 7 colors, and use them concurrently and systematically throughout their designs. Use contrastive shades of one color and choose the way the different colors blend together.
Here are some color meanings according to Webdesign.org
Here are some things to consider when choosing colors. In general one can say that the risk of using too many colours is greater than the risk of using too few. Too many colours will make the page feel too busy and it usually makes it harder for the viewer to find the information he or she wants. It is also more tiring to the eyes.
A page with too few colours, on the other hand, risks being seen as a bit boring, but this need not always be the case. One commonly used rule in these matters is to use three colours. Primary colour: … the main colour of the page. It will occupy most of the area and set the tone for the design as a whole. Secondary colour: … usually there to “back up” the primary colour. It is usually a colour that is pretty close to the primary colour. Highlight colour: … used to emphasize certain parts of the page … contrasts more with the primary and secondary colours … should be used with moderation.
Like I stated before, a good designer can direct and steer you in choosing colors that blend together as well as convey your products and services, and targets your audience most effectively.
