Posts Tagged ‘learn HTML’

JQuery: Hiding And Showing Part Of A List

I’ve encountered many situations where I don’t have quite enough space to show all the items in a list, but I still want them to be available. The best example I can give of that is actually in my sidebar to the right! You’ll notice my popular posts and blog categories show less than half of the full list. I definitely wanted it to be easy to access all the categories and my most popular posts, so I didn’t want to have to limit the list. I also didn’t want to make my sidebar overwhelmingly long, causing my skyscraper ad to get pushed to the bottom of the page and below the main content entirely. The best solution was to use JQuery to automatically hide some of the list items, and then toggle them on hover.

This tutorial is a little bit different, but not by much. Instead of using the hover, we’ll actually use a link that needs to be clicked. The hover introduces an extra layer because you have to handle the hover on the list and the hover on the "view more" text added underneath. With a link, you can avoid that extra layer. Here’s an example of what we are making:

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

And more importantly, here’s how it works. First you’ve got to start with some HTML, a list in particular, either ordered or unordered. It is important to have the full list show by default without javascript. We’ll make sure that only if a user has javascript enabled on their browser will we hide any list items (because they wouldn’t be able to show them without javascript).

The HTML:

<ul class="collapse">
     <li>item number 1</li>
     <li>item number 2</li>
     <li>item number 3</li>
     <li>item number 4</li>
     <li>item number 5</li>
     <li>item number 6</li>
     <li>item number 7</li>
     <li>item number 8</li>
     <li>item number 9</li>
     <li>item number 10</li>
</ul>

Next, we move on to the javascript. Just to clarify for anyone that missed the post title, this requires the JQuery library, so make sure to include that! After that, this code is really quite simple actually. The first thing we’ll do is add a wrapper div which we’ll be using to manipulate the visible height of the list. Then, when the document has finished loading, we’ll immediately collapse the list to the desired height (in this case 45px), and add a link to show the hidden items. By using this method, we’ve made sure that the list is still accessible to those without javascript.

After that, we’ll write a function to get run on the click event of that link we inserted. It’ll check, if the link has the class “expanded”, then collapse the list to the given height, change the link text, and remove the “expanded” class. Otherwise, the list will get expanded to its full height, the link text will be changed, and the “expanded” class will be added.

The Javascript:

$(document).ready(function () {
	$('ul.collapse').wrap('<div class="collapseWrapper" />');
	$('div.collapseWrapper').css({ 'height' : '45px' }).after('<a href="#" class="collapseMore">view details . . .</a>');
	
	$('a.collapseMore').click(function () {
		if ($(this).hasClass('expanded')) {
			$(this).prev().animate({ height: '45px' }, 500);
			$(this).text('view details . . .').removeClass('expanded');
		}
		else {
			$(this).prev().animate({ height: $(this).prev().find( 'ul.collapse' ).outerHeight(true) }, 500);
			$(this).text('hide details . . .').addClass('expanded');
		}
		return false;
	});
});

And finally, you’ll need some CSS to define the wrapper div, and basic styling of the list and link.

The CSS:

ul.collapse{  }
ul.collapse li {  }
div.collapseWrapper { overflow: hidden; }
a.collapseMore {  }
a.collapseMore:hover {  }

It really isn’t that bad is it? Now if you want to expand on this, you can. I actually wrote a JQuery plugin to collapse lists to a given number of list items because I felt the hard-coded height was a little bit hacky. It is free, and very easy to implement with just a single line of code! Questions and comments are welcome.

Email Client Compatibility – HTML Friendly Emails

As a web designer, I actually do not frequently find myself working with email designs. So when my employer requested some HTML email templates, I had to do some research. I found a fantastic article on HTML emails that really helped me out. It was a bit long though, and I discovered some additional things along the way that I thought I’d share.

The first thing you have to do as a web designer when working with HTML emails is forget everything you know about modern coding standards. HTML email is years behind the curve. You’ll find yourself using inline CSS with limited shortcuts, tables instead of divs, and even deprecated attributes that haven’t been used in years.

The second thing you have to do is settle on a simple design. If you thought cross-browser testing was a miserable experience with four to five browsers (Safari, IE, Firefox, Chrome, and maybe Opera… plus mobile if you desire) try the dozens upon dozens of different email clients that all render differently! There are some good resources out there for cross-email-client compatibility testing such as Campaign Monitor or Litmus, but most charge, and if they don’t, they have a lot of restrictions like frequency of checking.

So here are the secrets to making your emails look good across all of your major email clients:

1. Use Tables For Layout because floating and positioning doesn’t work all that well. If you need something to appear next to another item (such as an image next to text) you should still divide that up into two tables. I know I know, it goes against everything you’ve ever known about modern coding standards and practices. But trust me, it’s the best way to go.

2. Use Inline CSS Only unless you don’t want your emails to all look the same. Some email clients will strip out the head tag or any external style sheet references, and others anything within a style tag. Keep in mind, many of these email clients are browser based, meaning they have their own custom CSS. To protect that CSS, they’ll strip anything out that could interfere with it before displaying it. And don’t even think about javascript…

3. Don’t Shy Away From Deprecated Attributes like width and border for your tables. When in doubt, just include it, because W3C standards do not really apply in the same way for emails as they do for websites. I always double my declarations. If I want my table to have no border, then I put that in my inline style declaration, and as a border="0" within the tag.

4. Avoid CSS Shorthand like "font: 14px Arial;" and instead do it longhand like "font-family: Arial; font-size: 14px;". Some email clients won’t read the shorthand CSS, though admittedly a majority do.

Here’s a bare, one column template that you can use with a single h1, h2, p, and a tag. Notice the XX and YY for your own personal preferences. The 98% width on the main table prevents email client bugs that create horizontal scroll bars.:

<html><body>
<table style="width: 98%;"><tr><td valign="top" align="center">
<table style="width: YYpx;"><tr><td valign="top">
<table width="YY" cellpadding="0" cellspacing="0">
  <tr>
    <td style="width: 600px;" valign="top">
      Header Content Goes In Here
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" align="left" valign="top">
      <h1 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Header Here</h1>
      <h2 style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Subheader Here</h2>
      <p style="font-size: XXpx; color: #XXXXXX; font-family: XX;
        margin: XXpx XXpx XXpx XXpx;">Enter Your Main Content Here</p>
      <a href="" target="_blank" style="font-size: XXpx; color: #XXXXXX;
        font-family: XX; margin: XXpx XXpx XXpx XXpx;">Enter Your Link Here</a>
    </td>
  </tr>
  <tr>
    <td style="width: YYpx;" valign="top">
      Footer Content Goes In Here
    </td>
  </tr>
</table>
</td></tr></table>
</td></tr></table>
</body></html>

In a future post, I’ll discuss ways to avoid getting your email marked as spam, as well as other best practices for making a good marketing email.

HTML For Beginners

I’ve been inspired to write an explanation of how HTML works, and how webpages are created in general, so that the average person, computer-savvy or not, can understand, and even do their own work with HTML. But, I’m gonna start at the WAY beginning, so if you already sorta get it, then don’t start here.

So first, an explanation of what HTML is. HTML is what us web designers and developers use to tell a person’s internet browser how to make the webpage look. How about an analogy. Say you just painted a room in your house, and to do it, you took everything out of the room and put it in a pile. Now you need to put all the stuff back into the room, all in a specific place. Certain things need to look certain ways. Pictures need to be hung on the wall, furniture needs to be up against the wall, books need to be on shelves, and lamps need to be plugged in. Now think of the webpage as the room, and all the things you have to put in your room are the pictures and text and links you want in your webpage. All those different things have to look certain ways, and for a person’s browser to know where to put everything on the page, it needs HTML to explain it.

Let’s get a bit more specific. Every webpage you ever look at has HTML in it. The basis of HTML is something called a tag. The tag is what you put around different types of things on your webpage so the internet browser knows what to make it look like. There is a tag for paragraphs, for images, and for links, in fact there are about 100 different types of tags (Here’s a list of all HTML tags). Really, only about 20 are commonly used though, so don’t worry. All tags look something like this (but for the example, this is a paragraph tag):

<p>Your paragraph goes inside here.</p>

You’ll notice the paragraph tag opens, then you put in the paragraph, and then it closes with the slash you see above. You can also put tags inside of other tags. In fact, that is really the basis of all HTML pages. Say for example you wanted a link inside of your paragraph. You’ll obviously have a link tag inside your paragraph tag. That would look like this:

<p>Your paragraph goes inside here. And here is a <a href="www.google.com">link</a></p>

The a means a link, and href is where you put the destination of the link. Similarly, images are put into tags. Images have the img at the beginning for image, then the source (src) where the image is (if you copy and paste that url into your browser, you’ll visit a page with just the image), then the height and width of the image (in pixels), and then alternative text (alt) if the image doesn’t display.

<img src="/images/tutorials/stickyFooter.gif" height="251" width="351" alt="Sticky Footer Tutorial" />

Now you’ll notice that there is no closing tag for the img tag, because nothing goes “inside” of it. So, it closes itself at the end with a slash.

Some other common tags you’ll see, and what they mean:

<html></html> <!--The entire HTML page is wrapped inside an html tag-->
<head></head> <!--Things like the title and description of the page go in the head tag-->
<body></body> <!--The body tag contains all the displayed HTML-->
<table><tr><td></td></tr></table> <!--This is a table like in Microsoft Excel. First you open the table, then you have as many rows as you want (tr) with as many columns as you want in each row (td).-->
<ul><li></li></ul> <!--This is an unordered list (ul) with lots of list items in it (li). Unordered lists have bullets. Ordered lists (ol) have numbers.-->
<h1></h1> <!--This is a header tag. Titles and bigger text go in here. There are 6 header tags that display smaller as you increase the number (h2, h3, h4, h5, and h6).-->
<div></div> <!--Think of the div tag as a two-dimensional box. You can put stuff in it, tell it how big to be, and tell it where to show up on the webpage. This is probably one of the most common HTML tags, and also the hardest one to understand.-->

Alright, that’s enough of those for now, because those are the major ones. Browsers have default ways of displaying those tags. Then, what web designers do, is they apply special rules to those tags so they display just how they want them to. That’s what makes different websites look so different! Those special styles are included in different files called CSS files, or Cascading Style Sheets. I’ve written many posts on CSS, here’s the CSS Back To Basics post. Any questions, feel free to ask! And if you are ever curious how a webpage is written, you can go to your browser, click the view menu, and select to view the source. That will let you see all the HTML that makes the page you are viewing! Don’t get overwhelmed though, just give it a shot and take your time.

The Pros and Cons of Tables

When I started my job as a fulltime web designer, I discovered that my boss used tables for everything. This wasn’t that surprising considering he is a back end developer as opposed to a front end designer. I of course yelled at him (in my mind so as not to get fired) about how horrible tables are. Since then, I’ve settled more in the middle, and I figured I should offer my two cents on the debate of Tables Versus CSS for layout purposes.

First let’s take a look at the oh-so-obvious faults of tables, and why these cons are such an issue.

Con 1. Tables are incredibly rigid. Short of moving the content from one cell to another, changing the layout of anything within your table is incredibly difficult. Especially since you won’t want your layout to look like it uses a table, you’ll end up with rowspans and colspans everywhere.

Con 2. Table code can get messy. If you use tables for all your layout, then you’ll end up with nested tables all over the place. The code becomes hard to read, and almost impossible to edit.

Con 3. Tables have different default settings in different browsers. If you want your site to look the same no matter what browser your user is viewing it through, then you’ll have to go through at set padding, margin, border, et cetera to the values you want them to be. This is a hassle because of all the tags associated with tables. You’ve got table, tr, th, and td. Mind you, even if you don’t use tables, you should be setting default CSS values anyway to avoid cross-browser issues.

Con 4. Tables increase the size of your files. That’s right. Tables just often require more code. Even though the difference in load time for most people is negligable, it is still something to consider.

Alright, and now the benefits of tables, and why it is important to set aside your bias against tables and accept these pros.

Pro 1. Tables can be very helpful for certain design elements. Take rounded corners of any box for example. Though you’ll need anywhere between 1 and 8 images to make a rounded corner box (1 if the box does not need to expand, 3 if it expands in one direction, and 8 if it expands in two), tables will make the implementation of this a lot easier. Of course, you can use divs for this, but you won’t need to edit this table, just the content and images inside. Divs can float incorrectly in different browsers, ruining your rounded corner box, but the table won’t break.

Pro 2. Tables are great when you need to show… tables. That’s right, sometimes the best way to display information is in a table, and obviously the best way to implement that in the web is using… you guessed it, a table!

Pro 3. Tables make certain difficult CSS issues much easier. With tables, you can easily vertically center text, or ensure that two separate sentences of text will always appear next to each other horizontally. Obviously, there are tricks in CSS around this anyway. To vertically center a line of text, you can set the line-height to the same pixel height as the div it is in. So clearly, there is always a way around this problem.

When it comes down to it, every pro or con you find for tables doesn’t really matter. For every pro, using a little CSS magic, you can work around it. For every con, using a little effort or time can work around it too.

In the end, using floating divs is a much safer route to go for your layout. You can change the location of content very easily, your code will be cleaner, and make more sense logically when reading through it. But don’t knock down tables. Use tables for your overarching page layout (header, body, footer for example). These things won’t change as much, so tables are a clean and safe solution. Basically, tables aren’t 100% evil or amazing. Use them when appropriate, and don’t overdo it, and you’ll be just fine.

Dreamweaver Versus Notepad

So whenever I tell people that I write my markup in a txt editor, they immediately ask why I don’t use Dreamweaver. I think that the debate over using a prepackaged HTML/CSS/etc. editor versus a plain old text editor is a very interesting one. However, because I’m right all the time, I’ve got the answer!

It seems to me that when you are learning HTML or CSS, or even Javascript or PHP, you should really learn in a text editor like Notepad. This is how I taught myself almost everything I know today, from scratch. The text editor will offer you no guidance. It cannot check your code for missing closing tags or quote marks; it cannot validate your markup, and it won’t auto-complete anything. In my opinion, this is the best way to learn a language. It truly forces you to understand what you are doing, and encourages you to write clean code because admittedly, the process is more arduous. I find that my understanding of HTML and CSS came out of having to track down my missing tags or incorrect CSS.

Now luckily, there are some proprietary editors out there like Dreamweaver. I’ve used Dreamweaver many times, and find myself using it more and more often. Once you feel you have mastered whatever language you are learning, then you should feel comfortable moving towards one of these proprietary editors because they do have a lot of benefits. Now that you are careful in your coding, you can reap the benefits of Dreamweaver automatically closing tags, checking for errors, validating your code, and autocompleting many other things as well.

Dreamweaver is especially nice when working with multiple files (like if you are using PHP with array and master/template files). It colors different parts of your code to help your mind parse the information out more easily. It even has a split view so you can see the end result along side your code. I personally don’t like this feature because it just encourages backtracking in your already well learned coding skills.

So, my advice? Learn in Notepad, then move on to Dreamweaver!

HTML – Getting Started

So, just getting into the game huh? Well let me leave the scolding for later. Let’s pretend that your mother’s dog doesn’t have its own blog and personal myspace page. Let’s pretend that your grandpa didn’t make a facebook account last week. Let’s pretend that every small business out there hasn’t realized that having a website is always an improvement over the yellow pages… Oh wait, they haven’t gotten to that point yet…

At least you’ve caught on. Getting into web design is no easy task, but it isn’t all that difficult either. I am about 98% self taught in everything I know about web design and coding. So here are a few tricks you can use that will help you learn:

1. The best way to learn is by doing. Try making your own site. Open up a good old text file, and start writing. If you save the text file as .html instead of .txt, then any web browser will read it (assuming you wrote it correctly)!

2. Imitation is the sincerest form of flattery. If you see something you like on another website, then be inquisitive! See how they did it. If you go to your browser’s menu screen, click on View, and then View Source. This is the code that the browser reads to display the website.

3. Use the resources that have been provided to you. There are tons of great websites out there that can help you. What are you struggling with? Code? Try w3schools, the place that helped me learn most of what I know. They have a tutorial for every web language you could imagine. Start with HTML and CSS. Difficulty with design? Find other sites that you like the look of. Try the CSS Zen Garden which shows the power of CSS or CSS Beauty which shows… the beauty of CSS. There is a ton out there, just google it!

4. I guess you could take a class, but that didn’t do crap for me.

5. When in doubt, Google it! If there is ever anything I’m not sure how to do, or something that is broken that I can’t seem to fix, I Google it. Someone has written about it somewhere. You can always try asking someone that does it for a living… cough cough… and hopefully they might have the answer!

6. Get the greatest tool EVER! If you don’t have firefox as your default browser, fix that problem first. Then, download the add on entitled “Web Developer”. It has the best tools for web developers including tools to outline your divs and tables, resizing your window, viewing source, and even editing the CSS for other people’s websites! That’s right, you can edit the CSS for facebook or google or cnn. I know right?!

7. Still not sure how to get started? Well stay tuned, I’ll be writing more about HTML and CSS basics. I will interject with other topics like special CSS tricks as well, so you’ll have to bare with me…

Thanks for reading. Questions? Just ask!