What Width or Size Should I Design the Web Site For?

It's a question that comes up time and time again: "What width or size should I design the web site for?" Unfortunately, the answer is always the same, "it depends."

It depends on what? Well, it depends primarily on two major considerations:

  1. Your target audience's screen resolutions
  2. The amount of space needed to display the information in a readable format

If you don't know the screen resolutions of your target audience, then take a look at W3Schools Browser Statistics and specifically the Browser Display Statistics page. There, you'll find some fairly good information based on their log-files. Of course, if you have access to your client's web stats, check there first.

Keep in mind that if you intend to use the entire display width, be sure to leave room for the scroll bars and such. For the most part, simply subtract 20 pixels from the width to determine your maximum design width. For example, if your intended audience is using 800x600, then your maximum width should be 780 pixels.

I'm all for web site usability and would rather not have to force a visitor to scroll to the right to see important information simply because their monitor's screen resolution was set lower than the width of my intended layout. However, if your target audience utilizes for example 1024x768, then by all means, feel free to use the extra real estate ... but only if you need to. This might make sense in a corporate environment where you are designing an intranet and you know for sure what dimensions the employees are/would be using.

People are also visiting the web with their cell phones, PDA's and other handheld web-enabled devices at an increasing rate. By using Cascading Style Sheets (CSS), you can create an entirely different display to accomodate these visitors. So keep this in mind when planning your design.

One thing I try to bring up to my design collegues, is to think about how you personally use your web browser(s). Do you expand it to the entire width and height of your available display? I don't. I usually have several windows open at the same time and rarely do I expand the application to my entire available display. Why do I bring this up? Well, if my display is 1024x768 and the web site is using a full 1004 (or more!) pixels, then I'm probably having to scroll right to see any content.

So, whilst I'm standing on this soap box, I'll try to throw in one last thought here. If you are designing a web site for the general public, I would recommend keeping the width within 780 pixels. Why? Because as of January 2008, according to W3Schools Browser Display Statistics, approximately 8% of visitors are using 800x600 displays. I know, you're saying, "but that means 92% are using 1024x768 or higher!" You would be correct. However, I believe 10% is a significant number. Would you be willing to simply ignore or turn away 10% of your paying customers?

Did I Say That?

I completely forgot about an interview I had back in 2004 and stumbled across this morning. I never did get to see the finished piece and thought it was interesting. Enjoy!

FindArticles - BACK ON THE BUS Credit Union Management, Jun 2004, by Pratt, Laura

Launched Reese and Reese Site

We launched www.reeseandreese.com on Thursday last week. The site was designed by a co-worker (Jaci M.) and I built it out with CSS and HTML (and a little ColdFusion for the Contact Form).

The site was optimized to be edited by the client using Adobe® Contribute® CS3.

Reese & Reese
Designer: Jaci M.  |  Developer: Steve Withington

User-Defined Function (UDF) Using CFSwitch and CFIF to Dynamically Generate a Document Icon

Have you ever needed (or wanted) to dynamically generate an icon that represents the document type in your document management system? Maybe you just didn't have the time (or want to take the time) to write a user-defined function (UDF) that would accomplish this. Well, have no fear because I've already started the process for you.

In order to use the UDF, you will need a couple of items:

  • A database with a table named "tblDocuments"
  • The table should have at least two columns:
    1. DocID (the primary key)
    2. DocFilename (contains full name of the document including extension)
  • Document icons stored in the "/assets/icons/" directory
  • The UDF listed below
    • Update <cfquery name="getDocType" datasource="#APPLICATION.dsn#"> with your own datasource

 

<!------------------------------------------------------------------------------------------

   Document:      /extensions/includes/getIconFromExt.cfm
   Author:         steve@stephenwithington.com (sjw)
   Creation Date:   May 7, 2008
   Copyright:      (c) 2008 Stephen J. Withington, Jr. | http://www.stephenwithington.com
   
   Purpose:      User-Defined Function (UDF) which queries tblDocuments to obtain
               file extension to generate icon to use.

   METHOD(s)/VAR:   1) getIconResult   |   returnIcon
   
   Example Usage:   <img src="/assets/icons/#getIconResult(DocID)#" border="0" />

   ASSUMPTIONS:
                  a) icons listed in the CFSwitch below are stored in
                     the directory '/assets/icons/'
                  b) database with a table named tblDocuments
                  c) at least two (2) columns:
                     1) DocID (primary key)
                     2) DocFilename (contains full name of the document including extension)

   NOTES:         This UDF does NOT include all available document types. If another
               document type is needed, simply add the icon to the "icons" folder and
               create a new CFCase. If the three (3) right-most characters of the extension
               are already in use, then simply nest a CFIF statement similar to DOTM and POTM.
   
   Revision Log:   
   MM/DD/YYYY - sjw - comments.

-------------------------------------------------------------------------------------------->
<cffunction name="getIconResult" access="public" returntype="string" output="no">

   <!---
      DocID is required
   --->

   <cfargument name="DocID" type="string" required="yes" />

   <!---
      Scope variable
   --->

   <cfset returnIcon = "" />

   <!---
      perform the query
   --->

   <cfquery name="getDocType" datasource="#APPLICATION.dsn#">
      SELECT DocID, DocFilename
      FROM dbo.tblDocuments
      WHERE DocID = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.DocID#" />
   </cfquery>

   <!---
      Check the file extension and assign an icon and ALT tag
   --->

   <cfswitch expression="#right(getDocType.DocFilename, 3)#">

      <!--- DOC --->
    <cfcase value="doc">
         <cfset returnIcon = "doc.gif" & """ alt=""DOC" />
    </cfcase>

      <!--- DOCM --->
    <cfcase value="ocm">
         <cfset returnIcon = "docm.gif" & """ alt=""DOCM" />
    </cfcase>

      <!--- DOCX --->
    <cfcase value="ocx">
         <cfset returnIcon = "docx.gif" & """ alt=""DOCX" />
    </cfcase>

      <!--- DOTM and POTM --->
<!--- warning: this is the same as POTM (powerpoint template master for office 2007) --->
    <cfcase value="otm">
    <cfif right(getDocType.DocFilename, 4) EQ "dotm">
            <cfset returnIcon = "dotm.gif" & """ alt=""DOTM" />
         <cfelse>
            <cfset returnIcon = "potm.gif" & """ alt=""DOTM" />
    </cfif>
    </cfcase>

      <!--- DOTX and POTX --->
<!--- warning: this is the same as POTX (powerpoint template for office 2007) --->
    <cfcase value="otx">
    <cfif right(getDocType.DocFilename, 4) EQ "dotx">
            <cfset returnIcon = "dotx.gif" & """ alt=""DOTX" />
         <cfelse>
            <cfset returnIcon = "potx.gif" & """ alt=""POTX" />
    </cfif>
    </cfcase>

      <!--- HTM --->
    <cfcase value="htm">
         <cfset returnIcon = "htm.gif" & """ alt=""HTM" />
    </cfcase>

      <!--- HTM --->
    <cfcase value="tml">
         <cfset returnIcon = "htm.gif" & """ alt=""HTML" />
    </cfcase>

      <!--- JPG--->
    <cfcase value="jpg">
         <cfset returnIcon = "jpg.gif" & """ alt=""JPG" />
    </cfcase>

      <!--- JPEG --->
    <cfcase value="peg">
         <cfset returnIcon = "jpg.gif" & """ alt=""JPEG" />
    </cfcase>

      <!--- MDB --->
    <cfcase value="mdb">
         <cfset returnIcon = "mdb.gif" & """ alt=""MDB" />
    </cfcase>

      <!--- MOV --->
    <cfcase value="mov">
         <cfset returnIcon = "mov.gif" & """ alt=""MOV" />
    </cfcase>

      <!--- PDF --->
    <cfcase value="pdf">
         <cfset returnIcon = "pdf.gif" & """ alt=""PDF" />
    </cfcase>

      <!--- PPAM --->
    <cfcase value="pam">
         <cfset returnIcon = "ppam.gif" & """ alt=""PPAM" />
    </cfcase>

      <!--- PPS --->
    <cfcase value="pps">
         <cfset returnIcon = "pps.gif" & """ alt=""PPS" />
    </cfcase>

      <!--- PPSM --->
    <cfcase value="psm">
         <cfset returnIcon = "ppsm.gif" & """ alt=""PPSM" />
    </cfcase>

      <!--- PPSX --->
    <cfcase value="psx">
         <cfset returnIcon = "ppsx.gif" & """ alt=""PPSX" />
    </cfcase>

      <!--- PPT --->
    <cfcase value="ppt">
         <cfset returnIcon = "ppt.gif" & """ alt=""PPT" />
    </cfcase>

      <!--- PPTM --->
    <cfcase value="ptm">
         <cfset returnIcon = "pptm.gif" & """ alt=""PPTM" />
    </cfcase>

      <!--- PPTX --->
    <cfcase value="ptx">
         <cfset returnIcon = "pptx.gif" & """ alt=""PPTX" />
    </cfcase>

      <!--- RTF --->
    <cfcase value="rtf">
         <cfset returnIcon = "rtf.gif" & """ alt=""RTF" />
    </cfcase>

      <!--- TXT --->
    <cfcase value="txt">
         <cfset returnIcon = "rtf.gif" & """ alt=""RTF" />
    </cfcase>

      <!--- WMV --->
    <cfcase value="wmv">
         <cfset returnIcon = "wmv.gif" & """ alt=""WMV" />
    </cfcase>

      <!--- XLAM --->
    <cfcase value="lam">
         <cfset returnIcon = "xlam.gif" & """ alt=""XLAM" />
    </cfcase>

      <!--- XLS --->
    <cfcase value="xls">
         <cfset returnIcon = "xls.gif" & """ alt=""XLS" />
    </cfcase>

      <!--- XLSB --->
    <cfcase value="lsb">
         <cfset returnIcon = "xlsb.gif" & """ alt=""XLSB" />
    </cfcase>

      <!--- XLSM --->
    <cfcase value="lsm">
         <cfset returnIcon = "xlsm.gif" & """ alt=""XLSM" />
    </cfcase>

      <!--- XLTM --->
    <cfcase value="ltm">
         <cfset returnIcon = "xltm.gif" & """ alt=""XLTM" />
    </cfcase>

      <!--- XLSX --->
    <cfcase value="lsx">
         <cfset returnIcon = "xlsx.gif" & """ alt=""XLSX" />
    </cfcase>

      <!--- ZIP--->
    <cfcase value="zip">
         <cfset returnIcon = "zip.gif" & """ alt=""ZIP" />
    </cfcase>

      <!--- DEFAULT --->
    <cfdefaultcase>
         <cfset returnIcon = "rtf.gif" & """ alt=""" />
    </cfdefaultcase>

   </cfswitch>

   <cfreturn returnIcon />
</cffunction>

You can either add missing document icons or even remove unnecessary document icons to/from the UDF if needed.

In order to use the UDF, simply include the file using <cfinclude template="/extensions/includes/getIconFromExt.cfm" /> (update the template path to where you place the UDF in your site) in the page where you want to use this. Then in your query output, place <img src="/assets/icons/#getIconResult(DocID)#" border="0" /> next to the document title, etc.

Did this help you? Please let me know.

Use ColdFusion to Find Out What Directory or Folder You're In

Have you ever wanted to find out what folder or directory a particular page or template resides in, but NOT necessarily the entire path to the page? Well, Raymond Camden recently blogged about it, so I know of at least one other developer (including myself) who has asked that question so I thought it would be worthy of mention here.

Ray mentions a number of extremely useful functions and the person who submitted the question was actually quite close to answering their own question (just as I too find myself on so many occaisions).

Let's say you have a file "index.cfm" which resides at "www.example.com/folder/" which as it might turn out translates to "D:\inetpub\example\folder\". Maybe you just want to return "folder" but don't need anything else. Let's try a couple of different options to see what happens.

<cfset thisPath = ExpandPath("*.*") />
<cfoutput>#getDirectoryFromPath(thisPath)#</cfoutput>

This produces "D:\inetpub\example\folder\"

Well, that's not what we wanted is it? Let's try another way.

<cfset thisDirectory = ExpandPath(".") />
<cfoutput>#getDirectoryFromPath(thisDirectory)#</cfoutput>

This produces "D:\inetpub\example\"

Hmm, while this isn't what we wanted, it is kind of interesting. But we're not quite there, so lets try another method.

<cfset thisDirectory = ExpandPath(".") />
<cfoutput>#getFileFromPath(thisDirectory)#</cfoutput>

Aha! This produces "folder" just like we wanted!

Does this help you? Let me know.

Nine Inch Nails New Album - The Slip - For FREE!

If you're a NIN fan, then you'll be excited to know that Trent Reznor is giving away his new album, The Slip as a way to thank his fans for their "continued and loyal support over the years." Not just a track, which is already free at Facebook, (I first heard about it from Raymond Camden), but the ENTIRE album!

I, for one, am blown away by his generosity. Especially amidst all of the lawsuits and publicity concerning illegal downloading and file-sharing.

I personally would have been willing to pay for my album, but this has given me an idea. Maybe if each person who receives the album would donate say $5 or $10 to a local food bank, or charity, then we could perpetuate his kindness.

Thank you Trent.

Use CFDirectory to Filter Document Types by File Extension

Ben Nadel was sharing some good information he brought back from cf.Objective() where he showed how to use CFDirectory to filter using a single character wild card.

A reader commented that it would be nice to filter based on a limited set of file extensions. I responded simply that it could be done and gave a brief example.

I thought it would be worthy of mention here to show how I've used it in some of my applications.

As would be expected, we would attempt to separate filters by using a comma (,). However, this method does not work with CFDirectory. Awhile ago when I ran into this, I began trying other "OR" switches, and low and behold the pipe (|) did the trick.

I sometimes create a download directory in my web applications which often ends up being filled up with all kinds of documents that have been uploaded either on the front- or back-end. I wanted a way to just read what was in that directory without having to connect via FTP, etc.

I just created a simple index.cfm file that resides in the download directory (or folder). You can name it what you want, or even place it where you want, but would only need to update the directory read path, etc.

Here you go:

<cfsilent>
<!--------------------------------------------------------------------------------------------

   Document:      /download/index.cfm
   Author:         steve@stephenwithington.com (sjw) | www.stephenwithington.com
   Creation Date:   May 7, 2008
   
   Purpose:      Dynamically read a download directory.
   
   Input:         None.
   
   Revision Log:   
   MM/DD/YYYY - sjw - none.


--------------------------------------------------------------------------------------------->
</cfsilent>
<cfprocessingdirective suppresswhitespace="yes">
<html>
<head>

<!--- clear browser cache --->
<cfheader name="expires" value="#dateformat(now(), 'ddd, dd mmm yyyy')# #timeformat(now(), 'HH:mm:ss tt')#" />
<cfheader name="pragma" value="no-cache" />
<cfheader name="cache-control" value="no-cache, no-store" />

<title>download directory</title>
</head>

<body>

<!---
   Read files that only match the extensions listed in the filter
--->

<cfdirectory
   directory="#ExpandPath( './' )#"
   name="dir"
   sort="name ASC"
   filter="*.pdf|*.zip|*.doc|*.docx|*.ppt|*.pptx|*.xls|*.xlsx|*.rtf" />


<!---
   If there are no files to display, then show a friendly message
--->

<cfif dir.recordcount eq 0>
Sorry, no documents are currently available. Please try again later.

<cfelse>

<table border="0" cellpadding="5" cellspacing="0">
<tr>
   <th>Name</th>
<th>Size (bytes)</th>
   <th>Size (kb/Mb)</th>
   <th>Modified</th>
</tr>

<!---
   Output the filtered files
--->

<cfoutput query="dir">
<tr bgcolor="###iif(currentrow MOD 2, DE('E0E8F0'),DE('FFFFFF'))#">
   <td><a href="#dir.name#">#dir.name#</a></td>
   <td align="right">#dir.size#</td>
   <!---
      Convert the filesize to either KB or MB for readability
   --->

   <td align="right"><cfif dir.size GT "1000000">#numberformat(dir.size*.000001, 9.99)#Mb
   <cfelse>#numberformat(dir.size*.001, 9)#kb</cfif></td>
   <td>#dateformat(dir.dateLastModified, "mm/dd/yyyy")# #timeformat(dir.dateLastModified, "long")#</td>
</tr>
</cfoutput>
</table>
</cfif>
</body>
</html>
</cfprocessingdirective>

And that's it! Hope it helps you in your current or next ColdFusion project.

ColdFusion Developer Tools and Resources

Just when you thought you were out of luck because your Google search turned up useless links to your query, along comes Charlie Arehart's "Tools and Resources to Consider for CF Developers" where there's over 700 tools and resources in over 100 categories. Yeah, I know, it's nothing new (he started the list in 2002), but it's fairly new to me.

Ok, his list is so long that it could probably warrant it's very own search functionality! And Charlie, if you're reading this, I mean it in a good way.

If you develop in ColdFusion, you definitely need to bookmark the list. And if Charlie ever does begin to broadcast his list via RSS, I'll be one of the first to sign up!

Parker Lost a Tooth ...

My son lost his second tooth on Saturday (May 3rd) ... at the park ... somewhere. We can't find it. And for those who don't know, when Parker lost his first tooth, it was during the middle of the night, so we think he may have swallowed it. But don't tell him that, because he told me the tooth fairy came and took it.

What I thought was cool though, was at his school, when a child loses a tooth, they get to sit up front on a stool while everyone sings this little song:

Parker lost a tooth, let's all give a shout
It wiggled and it jiggled, and it skated all about.
When that tooth was ready, it jumped right out.
Parker has lost two teeth.

ColdFusion 8 Web Application Construction Kit Books ...

They've finally arrived! I ordered all three volumes of the Adobe ColdFusion 8 web application construction kit books and have already dug through most of volume 1 and quite a bit of volume 2 (and skimmed volume 3).

I've been using ColdFusion since CF5, but haven't formally taken a class or read any actual books in quite some time. I have however, continued to study the online docs and try to keep up on some of the "master bloggers" out there (Raymond Camden, Todd Sharp, Sean Corfield, Pete Freitag, Ben Nadel, and several others).

So far, the books have been very easy to follow and I've already gone back into my most current projects to update some of my "older" code to bring it more up to date.

Overall, I have to say that Ben Forta, Raymond Camden, Charlie Arehart and the countless other contributors did a fantastic job and they can count me as one satisfied reader.

More Entries

© 2008, Stephen J. Withington, Jr.  |  BlogCFC was created by Raymond Camden – Version 5.9.002