Posts Tagged ‘Web Design’
Posted: 08.10.2010
In today’s tough economy, you have to set yourself apart from your competition now more than ever. And while price is a major deciding factor for many consumers, a large majority of people make their decisions based upon other factors. Quite commonly, your website is the first thing consumers see or learn about your company. And considering this powerful marketing tool is available to potential customers 24 hours a day, if your website is ugly, hard to use, or just plain broken, it is time to look into upgrading. Think about it, if you are currently losing customers because of an ugly or broken website, you’ll never know because they will simply leave your site and never return, there is no feedback to learn from, nor complaints to address; and you’ve most likely lost a customer for life.
We all know it’s a tech-driven world, so there is no excuse for having an un-usable website, or worse yet, no website at all. According to Google, in 2008, 75.9% of people in America had access to the internet. And with the popularity of internet-capable smart phones and smaller laptop computers, this number can only continue to increase every year. Today’s consumers expect to have the ability to visit a company’s website and learn more, or sign-up for a membership, or purchase a product. Bottom line, if your company is not catering to these millions of visitors, they will find another company who can.
Did you know 156 Billion dollars were spent online in 2009? If you’re retail business is currently selling products, just not online, you’re missing out on a huge sales and marketing opportunity. A shopping cart website can allow anyone to purchase your goods, at anytime of the day, any day of the year. Online stores offer powerful benefits like preventing the need for additional employees or overhead associated with a traditional “brick & mortar” building. You also have the option of selling not just locally but globally; something that was practically impossible for small businesses to do even just a few years ago.
As for cost, once you start to compare an E-Commerce website to traditional forms of both retail sales and marketing, an E-commerce website is a bargain. For the cost of a complete turn-key website, you would only get a few months (if that) of traditional billboard advertisement. Or, maybe a month or two of rent and utilities in a traditional store. Once a website is in place, it can serve informational, marketing, and retail sales duties with no additional fees (aside from 3rd party hosting/security fees) for years and years to come.
Posted: 02.19.2010
About a year ago, I posted a blog entry outlining some of the design related websites that I check on a regular basis. After further thought, I was a bit disappointed that I didn’t post more links. So with this post I want to offer a few more of my favorites links. This collection includes all kinds of sites including tutorials, blogs, roundups, reference sites, graphics links, and more. They also cover a wide range of skill levels so there should be something for everyone. Some are old, some are new, but all have been helpful to me in the past so I offer them in the hopes that they might help another. Even if someone only finds one new site or idea from this post, I’ll be glad to have helped.
Blogs I frequent:
css-tricks.com
scriptandstyle.com
buildinternet.com
speckyboy.com
smashingmagazine.com
cssglobe.com
sixrevisions.com
noupe.comk
design-newz.com
underconsideration.com
sharebrain.info
instantshift.com
line25.com
webdesignledger.com
alistapart.com
General design:
Mastering CSS
CSS Backgrounds
Sitepoint reference
Advanced CSS selectors
Firebug – a must have!
Designers Talk Forum
Smashing Forum
50 New CSS techniques
Mega CSS roundup
Floats & advanced styling:
Negative margin guide
Sticky footer
Float info
Hacks:
10 CSS hacks
IE CSS bugs
jQuery:
Plugin roundup
Another Plugin roundup
Yet Another Plugin roundup
Great Lightbox Matrix
jQuery Tools
Getting started with jQuery
Fonts:
Great Font Matrix
Great free fonts
Even More free fonts
You get the idea
Vectors:
Vector source roundup
Great free vectors
More free vectors
Icons:
My fist stop for icons
Another great icon source
Textures/patterns:
Great texture roundup
More textures
Free & awesome textures
Great resources for backgrounds
Inspiration galleries:
patterntap.com
siteinspire.net
bestwebgallery.com
designbombs.com
cssmania.com
Posted: 02.15.2010
We build a lot of data driven web applications and we are always working with tabular data. I am not a big fan of styling tables, but with DataTables and jQuery UI themes this is a piece of cake. I will show you how you can make a beautiful table in just a few minutes. First you will need to download DataTables. Unzip the download and grab the DataTables.js and jquery.js files and put them in your public_html folder or htdocs folder for the site you want to implement DataTables on. Then we want to include those two files in the head of our HTML document as seen below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>DataTables Demo</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script> </head>
<body> <table id="users" cellspacing="0" cellpadding="0"> <thead> <tr> <th>ID</th> <th>User</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td>1/24/10</td> </tr> <tr> <td>2</td> <td>Dave</td> <td>2/15/10</td> </tr> <tr> <td>3</td> <td>Chris</td> <td>2/22/10</td> </tr> </tbody> </table> </body>
Then we will add a bit of css to our stylesheet.
#users { width: 400px; text-align: center; }

Next we will go over to the jQuery UI site and download one of the pre-made themes or roll your own using the theme roller. You can download all the pre-made themes using this link jquery-ui-themes-1.7.2.0.zip. Now lets unzip the downloaded themes zip file and grab the images folder, the jquery-ui.css file, and the ui.theme.css file from the theme you want to use and copy these to your public_html folder or htdocs folder. Then we want to include the jquery-ui.css file and the ui.theme.css file in the head of our HTML document as seen below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>DataTables Demo</title> <link type="text/css" rel="stylesheet" href="jquery-ui.css" /> <link type="text/css" rel="stylesheet" href="ui.theme.css" /> <link type="text/css" rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script> </head>
<script type="text/javascript"> $(document).ready(function(){ $("#users").dataTable({"bJQueryUI": true}); }) </script>
/* Wrapper created by DataTables */ #users_wrapper { width: 400px; }
Now we just need to add some styling to position the elements added by DataTables. They add ids to all the elements for easy styling. You can inspect the elements you want to position with FireBug to get the ids, or refer to the styling documentation on the DataTables website. In the main stylesheet for our site lets add the following.
/* Show # of entries element created by DataTables */ #users_length { float: left; padding: 5px; } /* Search element created by DataTables */ #users_filter { float: right; padding: 5px; } /* Table information element created by DataTables */ #users_info { float: left; padding: 5px; } /* Pagination element created by DataTables */ #users_paginate { float: right; padding: 5px; } /* Pagination previous element created by DataTables */ #users_previous { float: left; } /* Pagination next element created by DataTables */ #users_next { float: right; } /* Sorting arrows class created by DataTables */ #users .css_right { float: right; } /* Even row class created by DataTables */ #users .even { background: #999; }
Here are the files used in the demo. dataTables_jQuery-UI_demo











