Are custom designs becoming obsolete?

 Will Joomla make custom web design and creations from scratch obsolete?

I saw this question posted on LinkedIn last week and I thought it was interesting that people still think custom web designs will ever become irrelevant.

Creating functional good looking websites has become alot easier because of  CMS tools available for the novice web designer including Joomla, WordPress, MovableType, Expression Engine, Drupal and others. In terms of design sites like ThemeForest offer many cheap templates that can be slightly customized to fit specific needs.

So based on all this do you really need a custom design for your website?  My answer is it depends.

If the site is not meant to convey a specific message and the organization does not have branding requirements then using a template is fine. However in cases where a site has very specific requirements in terms of look and feel and functionality CMS tools and templates like those mentioned above are a good starting platform. To create a truly effective site in terms of design and messaging will  require custom CSS and design in order to be unique, convey the client’ s message effectively, and work with existing company logos and other branding elements. 

What does your site say about you?

From the perspective of a customer (who just happens to be a web designer)

When I see a website that uses a template and only changes out the logo and a few other graphics I think ‘this company did not care enough about me as a customer to design a site to appeal to me specifically’.  Many templates are very well designed and visually appealing but this does not mean they will convey the message or ideas that your website needs to communicate. In order to most effectively communication with site visitors the site will need to be custom designed after a careful analysis of  business goals and target customer demographics. 

Using stock templates will seems to save you time and money but the site will never really connect with its users like one that was designed for the purpose.

Useless Page Title

Better page titles in SharePoint

When working with multiple browser windows open its hard to tell one from the other because most SharePoint pages don’t offer a useful title. So in most cases you will see something like this (I am using the dreaded IE 6 unfortunately). As you can see most SharePoint pages only show the title of the page. On the home page of some sites the site name is shown as well.

Useless Page Title

Useless Page Titles

Ideally the page title should not only tell you the title of the page you are looking at but also what site you are on. Chris Coyier of CSS-Tricks talks more about different options in this post. After some experimenting I was able to get this working in SharePoint.

attachments

Limitations of displaying attachments in DVWP

attachmentsSo on a recent project I needed to show a link to the attachment for each item in a list. A quick Google search found How to show Attachments with DataFormWebPart from Dario Martirani Paolillo’s Web Log. I was excited because it seemed to work well and was very easy to implement. 

As I was about to finish up the project I was given some new requirements which meant that there would be two Data View Web Parts on the page and both would need to show the attachments link.  This is when the issues started.  When you have two web parts on the page using the display attachments code the second one will just show “[value of field: Attachments]” instead of the actual link.  If anyone knows a good solution for this issue please post a comment.

I want to avoid using something like this jQuery solution by Paul Grenier simply because of the performance issues it will create.

parameters

Filter Lists by Date Range

On a recent project one of the requirements was that users be able to filter a list by a date range.  To this I tried using two date filter webparts connected to a data view webpart.  A detailed description of how to set this up can be found here.  This solution worked well enough but there was a page refresh after the user entered each date, so the user enters the first date (page refresh) user enters second date (page refresh again) and finally they get the results.  This annoyed me, I wanted to remove the extra page loads so I tried several things and this is what I finally came up with.

Setup

Using a content editor webpart build the form elements needed to collect the dates, two inputs and a search button.  Give each input a unique ID. Here is the code I used.

[sourcecode language=”javascript”] <script language="JavaScript">
function submitForm()
{
var startDate = document.getElementById(‘startDate’).value;
var endDate = document.getElementById(‘endDate’).value;
window.parent.location="default.aspx?T1=" + startDate + ‘&T2=’ + endDate;
}
</script>
<p><div id="dateDiv" style="display:none;" class="filterBox">
<h4>Date Search</h4>
Between
<input name="startDate" type="text" id="startDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
and
<input name="endDate" type="text" id="endDate" value="" size="15" class="dateformat-Y-ds-m-ds-d" value="">
YYYY-MM-DD
<input type="submit" name="Submit" value="Go" onClick="submitForm();this.disabled=true;">
</div>
[/sourcecode]

The class names are used to activate the date picker script but can be whatever you want. I used this date picker script from Frequecy Decoder

The submitForm() function simply takes the values from the inputs and adds them as query string variables at the end of the URL. We can now use these values to filter the list.

Filtering the Data View Web part

To filter the content of the DVWP based on the date we have to setup some parameters for the start and end dates.   Under ‘Common Data View Tasks’ just choose ‘Parameters’ for both the start and end date set the source as ‘Query String’. The query string variable will be whatever you defined in the JavaScript so in this case they are T1 and T2. Set the default value for the start date to some date impossibly far in the past and for the end date set it to something like the year 3000. This will ensure that the list will show all records if no values are passed for the start and end dates.

parameters

Then all you have to do is setup your filter based on the parameters from the query string.

filter

You’re done.

Things to remember

The date has to be passed in YYYY-MM-DD format in order to work.

If the detault values for your start and end date parameters are not set high / low enough all records will not display when not date range is entered.

A Faster jQuery Preview Pane

A while back there was a post on EndUserSharePoint.com by Paul Grenier that described how to use jQuery and the CEWP to make a preview pane.  I thought it was a very nice solution and worked better than the out of the box preview pane SharePoint uses.  

Too Much Code

The only issue is the preview pane solution is that in environments with slow internet connections the preview pane will be almost as slow as if the user actually broswed to the display form for the item.

Although its done through AJAX jQuery is still having to load the whole DispForm.aspx and then only displaying the contents of  a specific element.  DispForm.aspx when rendered through the borwser (like most pages in SharePoint) is very code heavy with over 700 lines of code ( An Announcement List item). Reducing the amount of code jQuery has to load from the diplay form will decrease load times and make everyone happy.

Faster

Gabe Hilado and I decided to try to make it faster. The simple solution is to make your own diplay form in SharePoint Designer. First we tried creating a blank .aspx page and putting the list view webpart on it.  The reduced the amount of code on the page but I wanted it to be even faster.

Styling the MOSS horizontal navigation menu

When you want to create a custom theme for a SharePoint site the top navigation menu is an important part of the design. Using the out of the box themes you can change the colors but if you really want it to look like a non-SharePoint menu it will take some work. In the standard sharepoint masterpage you will see the following code that defines the horizontal navigation. If you are not familiar with styling ASP server controls it can be somewhat confusing.

CorasWorks Essentials Training

Last week I attended CorasWorks Essentials Training the the company headquarters in Reston, VA. The training class provided an overview of the essential features and capabilities of the CorasWorks suite of tools as well as covering usage and configuration.

The major benefits of the suite are its ability to do charting and to aggregate information across various sites, site collections, and web applications in a manner not possible with out of the box SharePoint tools (not even the DVWP).

slider

Dynamic Drive’s Featured Content Slider in Sharepoint

There is an updated version of this solution for SharePoint 2010 found here

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

  1. User can easily add items
  2. Users  can choose a style for each item
  3. Expired Items must not show
  4. Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

Dynamic Drive's Featured Content Slider in Sharepoint

Featued content slider

 

The list

First I created a custom list to store the slider items.  These are the columns I used:

  • Title – Single Line of text
  • Body – Multiple Lines of text
  • Link URL – HyperLink
  • Expiration – Date and Time (expired items will not be shown)
  • Image – Picture
  • Style – Choice  (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns.   Using Sharepoint Designer I setup filtering on the expiration date.  To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter.  In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.

Search Suggestions

Adding Suggestions to the Sharepoint search box

Search Suggestions

I got the idea for this from here: http://cssglobe.com/lab/searchfield/. The idea is that by giving users suggestions of what they should be searching for they can be guided to the most important information. When I am searching for something many times I am unsure what what search terms will give me the best results.

To get started we will need a search box to work with.  The out of the box search box could work but I prefer to use the one mentioned here by Kyle Schaeffer because it gives me a lot more flexibility with the design.