Selling Flash Files, Icons, Scripts and other web content
To start the new year, we have officially launched OOF Media as a marketplace for buyers and sellers of all kinds of digital media.
We created OOF with a few simple goals in mind:
- Creating an attractive, interactive & professional website should be simple.
- Searching for media should be fun, not depressing and mind-numbing.
- Stock media should be affordable. You shouldn't need to get a loan to buy a web template.
- Media authors should be compensated quickly for their hard work.
- Authors should be able to sell flash files, sell icons, sell code scripts, sell web templates, and sell domesticated jungle animals.
- Authors do the heavy lifting and should be compenstated appropriately.
- Buyers should not be forced to deposit $20 into an account, just to purchase a $2 product.
- A marketplace that does not adhere to the above principals should be shut down and fed to a llama.
We demand that you bookmark our site. With our rediculously good seller incentives, we'll have great new products available for you on a regular basis.
Also, feel free to contact us for any reason at all, including:
- To ask a question
- To brag about how great you are
- To provide negataive or positive feedback
- To tell us what you ate for breakfast
Thanks for OOFing!
CSS and Browser Compatibility
We've all spent sleepless nights trying to get a website to look identical in Firefox as it does in Internet Explorer. Now with Safari and IE 7 on the rise, we have even more compatibility nightmares to contend with. Let me share a few tips that might make things a little easier for you.
First, design the HTML and CSS for Firefox and test the everything looks the way it should.
The next step is to create an alternate stylesheet for Internet Explorer, call it IEFix.css.
Now, between your <head> tags, place the following code snippet:
<!--[if IE]>
<style type="text/css" media="all">@import url(http://www.mysite.com/IEFix.css);</style>
<![endif]-->
This code will be executed only within Internet Explorer browsers. Now you can modify IEFix.css to make any corrections that might be necessary for IE. Test your site in IE and make sure everything looks ok.
To take this one step further, now apply that same concept to Internet Explorer 7 to really fine tune your website's compatibility:
<!--[if IE 7]>
<style type="text/css" media="all">@import url(http://www.mysite.com/IE7Fix.css);</style>
<![endif]-->
Create another CSS file called IE7Fix.css and modify it until your site is fully "browser-compatibized"!
Use CSS to reduce server load
A couple weeks ago I talked about reducing server load by using JavaScript. Let's take a look at another technology, CSS, that can also help reduce server cycles otherwise used for presentation or style.
I'll introduce one example to show the power of CSS and will leave it up to you to further research the full capabilities of the CSS specification.
Assume that we want to display a list of links with initial capitalization, that is, the first letter of each word is uppercase. With PHP, we might be inclined to write a function and call it each time a link needs to be 'initial capped':
<ul>
<li><a href="http://www.example.com"></a></li>
<li><a href="http://www.example2.com"></a></li>
...
</ul>
<?
function initCaps($text) {
$tok = strtok($text, "_");
$phrase = '';
while ($tok !== false) {
$word = strtoupper(substr($tok, 0, 1)) . substr($tok, 1);
$phrase = $phrase . $word . ' ';
$tok = strtok('_');
}
return $phrase;
}
?>
In the case above, your web server is working overtime to execute thousands of lines of code just to capitalize each word in a link for any number of users currently visiting the website. Meanwhile, the client's PC is only required to parse and display one web page.
Let's give that client just a little more work to do. I introduce the CSS text-transform property:
ul li a { text-transform: capitalize; }
It's that simple. CSS can do a lot more for you in the way of presentation. Make your web server happy and skim through the CSS specification.
Using JavaScript improves usability and reduces server load
One thing most workstations have that web servers don't is free processor time. Give that, it makes sense to me to share as much work as possible with the user's workstation. Using JavaScript instead of server-side processing is one way to help out our overworked web server.
If you're website requires heavy interaction with the user to accomplish tasks, it possible to use javascript to load your page up with as much information as possible before making the next page request from the server.
As an example, let's say we have a shopping list where user's are able to add items to a list stored in a database table on the server. The simplest way to approach this is to offer a text box to enter a new item and a submit button to add the item to the list:
<form action="add-item.php">
<input type="text" name="item" />
<select name="list">
// generate list items
</select>
<input type="submit" value="Add" />
</form>
add-item.php
// add item to database ...
// redirect back to add form ...
The method above requires a page two server page requests for each item added to the list. This places unnecessary load on the server and wastes the users time.
By using JavaScript, we can generate the entire list, appending an item to the list each time the 'Add' button is pressed. Then, an additional 'Continue' button will send the entire list to the add.php script to store to the database. The following functions will help:
<script>
function AddListItem(list, new_field) {
var addFieldList = document.getElementById(list);
var objItem = document.createElement("option");
objItem.value = new_field;
objItem.innerHTML = new_field;
addFieldList.appendChild(objItem);
}
function RemoveListItem(list, optionIndex) {
var removeFieldList = document.getElementById(list);
removeFieldList.remove(optionIndex);
}
</script>
Images and blank space in HTML
Yesterday I was coding a simple HTML page that had just few images on it. When viewing the page in my web browser, I realized that one of the images had a small, 1 pixel high line above it, separating it from the object above it. This brought me way back to the first time this happened to me, before the days of Google search, I had to try every trick in the book to get rid of that white space.
For those of you who are encountering this problem for the first time, let me help.
First of all, the problem is specific to Internet Explorer. Other standards-compliant web browsers such as FireFox and Safari handle images they way they should be handled.
Let’s say we have some HTML code as follows:
<div id="header">Welcome</div> <img src="logo.jpg" alt="Logo" />
Viewing this in internet explorer (assuming you’ve applied some styles to the header id, you should see a small line just above the logo, separating it from the header.
For the longest time, I was using a line break to deal with this, which for some quirky reason, seemed to solve the problem in Internet Explorer:
<div id="header">Welcome</div> <img src="logo.jpg" alt="Logo" /><br />
Later on, in an attempt to clean up my code, I made it common practice to omit all line break tags from my documents. But when it came down to it, I need those breaks to fix the 1 pixel line of white space above my images. This led to further research. I discovered that the reason Internet Explorer is so quirky is that it doesn’t like white space. You’ll notice that there are two line breaks between the header and the logo in the HTML code. By simply removing those breaks, the image will line up nicely against the header:
<div id="header">Welcome</div><img src="logo.jpg" alt="Logo" />
Although this goes against your every instinct when trying to keep your HTML code clean and readable, sometimes you just have to make the sacrifice if you want to support multiple browsers.
Designing with the user in mind
I recently borrowed a book from the library called About Face 2.0: The Essentials of Interaction Design
After reading just the first few chapters, I realized that I've been approaching web design in the worst way possible - from a coders perspective. As a coder, I see only what a website needs to have to function properly: information and navigation. Because the file structure of our website is in hierarchical form, I'm tempted to replicate that idea in the website navigation. Forget that this may not be intuitive to the user, it makes sense to me!
For my most recent web project, I left the design aspect in the capable hands of a professional designer. I have not one regret. Creative designers are not as attached to the code as I might be and can therefore separate themselves from any of the models that the code must follow.
Granted that a professionally designed site may be more difficult to implement, it really pays off in the end for your users who enjoy a more pleasant experience.