Flash is open source… nothing has changed.

Design, development, web 2.0 May 8th, 2008

Simply put: Flash will not replace well-designed web sites based on html/css. To elaborate:

Saw this gentleman’s article on Technorati, and the title caught my attention.

Adobe recently announced that Flash and related files are going to be open source. This means that pretty much anyone can write and develop a program to author flash files. So what? This changes nothing.

My honest opinion is that the argument of Flash taking over the standard web page is moot. There are practical, well executed uses of flash, and there are practical, well executed uses of any of the other technologies mentioned. However, it seems that there are at least as many poor uses of each.

Flash has it’s place: Interactive, colorful, design-rich web applications, games, demontrations, advertisements, web intros, and so on. The key is that flash files use up bandwidth and computing power, and if used when not needed, can actually harm the user experience and usability. Flash files are also not indexed in search engines, which means that in order to have the page relevant on the web, the designer/developer must include additional content indicating what is contained in the flash movie/video. If the entire site is in flash… then no search results.

AJAX has simliar problems, and should be used when appropriate. The large-content AJAX staple “iframe” won’t be indexed, and users without javascript enabled (many office computers, terminals especially) cannot use the AJAX content at all. This means that developers must write code twice: Once for the general population, and again for those that can’t use the technology. Either that, or they stand to lose 1 out of 10 potential users of their software.

I hate flash. I hate how easy it is to make a really ugly navigation menu in flash. I hate how easy it is for anyone who … Let me interrupt myself here. I hate that because I have a web page open in the background that has a flash movie running, my browser just shut down, and I lost two sentences that I wrote because of it. I hate that 90% of flash applications could have been done better, faster, and cleaner using web standards, and without alienating those with slow computers, or those who can’t install flash at their office.

But just remember: I love a great looking flash-based website. Just a random search on google found me this site: http://www.singularitydesign.com/ . Very well done. The flash file is only 202K, which is much smaller than even the Yahoo! homepage. The content is clean, and flash is used to show off how flashy this particular web design company can make your site look.

Simply put: Flash will not replace well-designed web sites based on html/css.

Tags: , , ,

No Comments

How to clear floats for proper footer placement

Design, css December 31st, 2007

Most novice CSS users have never even heard of the “clear” property. I know in the past, I hadn’t, and racked my brain for hours trying to get my layout to display correctly with a floating sidebar. Here’s how it works:

When rendering divs, the browsers normal flow is to place one, then afterwards in the normal flow of things, place the next one. When you want to have divs side by side, the usual solution is to add the “float” property to them. In the case below, both the “left-nav” div and the “content” div have the property “float:left;”. We can then put content inside the floated divs, and have a happy layout. The problem is, there is nothing in the normal flow of things to continue the layout, so we need to tell the browser to push things down. Note these two examples:

Incorrect: 

<div id="wrapper">
   <div id="left-nav">
       ....
   </div>
   <div id="content">
       ....
   </div>
</div>
<div id = "footer"><p>All of this text is hidden underneath the
floated divs!!</div>

Correct: 

<div id="wrapper">
   <div id="left-nav">
       ....
   </div>
   <div id="content">
       ....
   </div>
   <div style="clear: both;"><!-- clear floats --></div>

</div>
<div id = "footer"><p>My footer now displays below the
floated elements!!</div>

That one little line tells the browser to “keep going”, and moves the flow down. The easiest way to test this is to give “wrapper” a background color, and look at the difference in the two code pieces when there is content in each element.

HIGH TECH WEB 2.0 INTERACTIVE EXAMPLES:

Example 1 (Incorrect):

+--(#wrapper)---------------------------------+
|   +-----------+    +--------------------+   |
+---|           |----|                    |---+
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    | #left-nav |    |      #content      |
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    |           |    |                    |
    +-----------+    +--------------------+

Example 2 (Correct): 

+--(#wrapper)---------------------------------+
|   +-----------+    +--------------------+   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   | #left-nav |    |      #content      |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   |           |    |                    |   |
|   +-----------+    +--------------------+   |
|                                             |
|   +---clear: both-----------------------+   |
|                                             |
+---------------------------------------------+

Tags: , ,

No Comments

Cascading Style Sheets

Design, css December 22nd, 2007

CSS. Cascading Style Sheets. Why are they named that?

This is a tutorial on how the cascading part of CSS works, and how to work with multiple classes.

The main thing to remember is the basic trump rule. Any newly defined properties overwrite any previously defined properties. Example:

p {color:red;}
p {color:blue;}

Having these two statements in a stylesheet will ultimately result in the <p> tag with blue text. Remembering this basic principle of “overwriting” will keep you on the right track. Here’s a real world example of this:

CSS:
.class1{ font-size:12px; color:#00ccff; font-weight:bold }
.class2{ color:#800080; text-decoration:underline }
HTML:
 <span class = "class1">Something like this would be good to <span class = "class2">emphasize</span>
importance in a sentence</span>

And heres how it looks: Something like this would be good to emphasize importance in a sentence

Not the prettiest looking thing in the world, but it gets the point across. The font size and the font weight remains constant. The color is overwritten when the “class2″ tag is implemented, and the new underline property is added as well.

Now an example of using multiple classes in a single tag. For simplicity, I’ll use the same tags.

HTML:

<p> This time, we are using a standard font, and instead want to emphasize
<span style = "class1 class2">this point</span> and <span style = "class2 class1">
this point</span> as well.</p>

Here’s how it looks: This time, we are using a standard font, and instead want to emphasize this point and this point as well.

Notice the difference, and remember the basic trump rule. The only similar property in both classes is the color, so whichever is the last listed is the one that will be shown.

There are some advanced tags and rules that can modify the basic trump rule, and I will post on those tomorrow.

Tags: , ,

No Comments

Easy CSS fixed footer

css, development December 9th, 2007

I’ve seen a lot of tutorials out there for how to have a fixed footer using CSS. Most of them require all kinds of nested div’s, wrappers, and so on. It’s really very simple, and this code can be copied and pasted into almost any website template without modifying the entire set up. See below.

CSS file:
.footer_spacer{
height:60px;} /* This height should be equal to or greater than the
footer. his ensures content is not cut off by your footer */
#footer{
position:fixed; /* keeps it from moving at all */
bottom:0;  /* keeps it at the bottom of the screen */
width:100%; /* stretches to fill the width of the body tag */
height:30px; /* sets the height. should be equal to or less than the
footer_spacer height */
}
HTML:
<div class = "footer_spacer"></div> <!--Nothing goes in here. This is
just a spacer. -->
<div id = "footer"> Enter Footer Content Here </div> <!--This is the
actual footer. Use CSS to style to your needs -->

And that is it. The footer_spacer div creates a “buffer” below the rest of your page for the footer to rest in, thus eliminating any content from being cut off. If your webpage uses floats, read on. If not, then you should be able to copy and paste this into your exisiting web page with no problems. Tested in IE7, FF2, FF3 and Safari. Should work in IE6 as well.

If you use floats, as some of my pages do, you only have to make one small modification. The footer_spacer div may need to be increased to accomodate the position of your floats. Also, be sure to add a <div style = “clear:both;”></div> before the footer_spacer div to make sure it is positioned correctly. Any issues getting this up and running, feel free to e-mail me at dcostalis@gmail.com.

Tags: , ,

6 Comments

Creating a website template you can work with

css, development, web 2.0 November 3rd, 2007

Everyone wants a site that looks good, loads fast, and is easy to work with. It really isn’t as hard as one might think, as long as you follow some of the basic rules of design that you would with any development project. With this, I’m going to assume you’ll be writing a PHP based site, but the same principles can be applied to another server side language.


If all or most of your pages are going to have the same header or footer, why not separate it out? This way, you only have to update links or other changes once. a simple <? include “header.php”; ?> can save you headaches throughout development. If you decide later on down the road to change it, you only need to edit one file. The best part about this method, is that search engines don’t know that your content is generated on the fly, so it will index the full page. I also like to make a links.php file and a footer.php file. The links file lets you make sure that your link bar up top is always up to date. I’ve seen plenty of (FrontPage) sites where it seems like every single page has a different set of links. The footer file is great for all of your static copyright and privacy policy links. This won’t change much, but it keeps your template nice and clean. a good template could look as simple as this:

<? include "header.php";  ?>
<? include "includes/standard_functions.php";  ?>
<div id = "linkbar">
  <? include "links.php"; ?>
</div>
<div id =  "content">
  <!-- content -->
</div>
<? include "footer.php" ?>

The <html> and <head> and <title> tags can all be housed in your header.php file. All pages should have all the same information in those tags anyways, so it will save you a step. All of your stylesheets can be included from here as well. If you want to have each page with a different browser title, there is a very easy modification you can implement. Make the top of your template file look like this:

$page_title = "This page title"
<? include "header.php" ?>

Then in the header.php file, change the <title> tag to this:

 <title><? echo $page_title; ?></title>

Nice, easy, simple, clean. I’ve used this or a similar method on many sites.

In the standard_functions.php file, you can pretty much put whatever you want. If you need to connect to a sql database, you can include another file from there, you can use it to declare variables, or use it to define functions that will be used throughout your site (rotating sponsor link on the sidebar for example).

The links and the content div shouldn’t need any styling in the page itself (that’s what stylesheets are for!), so even if you COMPLETELY change the look of your site, you’ll be able to do so with the editing of only the stylesheet file. Keep in mind, that the html code itself is not used to define the look and style of the site; html should be used to create a shell, and to enumerate content.

The footer is where you are going to be including the </body> </html> tags, and thus any javascript that needs to be run site-wide (such as google analytics). It’s always good practice to include javascript code directly before the </body> tag, to reduce perceived loading time. (Browsers will stop loading elements until the script has finished excecuting).

Your template might need some tweaking from the basic outline shown above, and here are some alternate options for you to start playing with:

A more stylized content area:

$page_title = "template";
<? include "header.php";  ?>
<? include "includes/standard_functions.php";  ?>
<div id = "linkbar">
  <? include "links.php"; ?>
</div>
<div id = "wrapper">
  <div id =  "content">
    <!-- content -->
  </div>
</div>
<? include "footer.php" ?>

A float template:

$page_title = "template";
<? include "header.php";  ?>
<? include "includes/standard_functions.php";  ?> 

<div id = "wrapper">

  <div id = "linkbar">
    <? include "links.php"; ?>
  </div>

  <div id =  "content">
    <!-- content -->
  </div>

  <div style = "clear:both;">

</div>
<? include "footer.php" ?>

More elaborate (keep in mind, having the four divs that are in the sidebar in the main template reduces the ability to change it sitewide later… this is really just to show a possibility:

$page_title = "template";
<? include "header.php";  ?>
<? include "includes/standard_functions.php";  ?> 

<div id = "wrapper">

  <div id = "sidebar">
    <div id = "linkbar">
      <? include "links.php"; ?>
    </div>
    <div id = "categories">
      <? include "categories.php"; ?>
    </div>
    <div id = "sponsors">
      <? include "sponsors.php"; ?>
    </div>
    <div id = "current_charity">
      <? include "current_charity.php"; ?>
    </div>
  </div>

  <div id =  "content">
    <!-- content -->
  </div>

  <div style = "clear:both;">

</div>
<? include "footer.php" ?>

Tags: , , , , ,

2 Comments
« Previous Entries