This seems to have been the week of weird caching issues.  I was working on a Drupal project and learned I had to flush the caches when creating templates.   Of course, that was after a few hours of banging my head against the desk.

Then, I was working on a static website and having trouble reloading the css changes.  The site was located on a client server, not one of my own.  I updated the stylesheets and tested on my local machine.  Everything looked fine.  And then, after uploading to the client server, the changes would not take place.  I would clear the browser cache and reload the page.  Still nothing.  So, I tried several different browsers and even a computer that had never loaded the website.  Still nothing.

I sat there scratching my head as my eyes started to pop out of their sockets.  Another caching issue.  You have to be kidding me.  I knew something was caching the stylesheets.  But what?  With a few Google searches and the proper keywords, I came across Jason Beaird’s website, Jasongraphix.  Jason is the author of Principles of Beautiful Web Design,  a great read.  He has a post on his site called CSS CacheBuster which describes a solution to the issue at hand.

The server is caching the stylesheet.  You need to make the server think the stylesheet is a dynamic page, therefore changing constantly.  This keeps the server from caching the stylesheet.  By adding a query string to the stylesheet, you have successfully tricked the server.

<link href=”stylesheet.css?cachebuster” type=”text/css” />

Problem solved.  Though, you should still try to solve the issue on the server.  In my case, I was unable to access the server and therefore this solution worked beautifully.  There is still a chance that the server will cache this page sooner or later.  The address stays the same.  You could change ?cachebuster to ?cachebuster1, ?cachebuster2… and so on.  But that gets to a pain.  I just added a random number to help eliminate the issue.  My final code looked like the following:

<link href=”stylesheet.css?cachebuster<?php echo rand(0, 100000);?>” type=”text/css” />

If you are unable to modify the server settings, use the method above.  Otherwise, I would suggest checking your server settings and turning off the stylesheet caching.

This is a bit of an old story, by a week, but I found it and the technology blog worthy.  When an 8,8 earthquake hit Chile last week, many were concerned about friends and family members.  One woman, Sheryl Breuker, used Twitter to find her family members.  By posting status messages and focusing on hash tags, she was able to contact locals.  The locals retweeted her information.  Soon she received the following response: “found her! she is OK…. she told me to tell Twinkie to stay cool, she is fine!”

It is amazing what social networking can do.  In Chile, Twitter was in use when phones lines and email were not.  View the full story here.

Also, check out Google’s Person Finder.  It was created to quickly connect individuals with missing friends and family members.  You simply click “I’m looking for someone” or “I have information about someone.”

More and more I notice antitrust lawsuits appearing against larger corporations.  Google and Microsoft seem to be at the forefront of the attacks.  Of course, this is expected.  Company A blames Company B of such and such.  Company B retaliates after losing the suit and blames Company A of something else.  Back and forth, back and forth.  Why can’t we all just get along?  Because business is business.  So what’s new in the world of cyber suits?

Microsoft Starts The EU Browser Update Option

Microsoft has been forced to provide users with browser options when setting up their operating system.  The cyber giant made a deal with the European Union when they were questioned about the legality of offering Internet Explorer with Windows.  Now, Windows operating systems will offer a variety of options including Microsoft’s leading competitors; Google Chrome, Mozilla Firefox, Safari and Opera.  Personally, I am happy the option is being enforced.  I would like to see this happen in the US.  The ability to give people options and hopefully turn them away from Internet Explorer would be amazing.  IE is regarded as one of the worst browsers to develop for.  Despite the smile it would put on my face, I doubt this will happen in the US.  Business is business.  Read more about this subject at the following locations:

Microsoft Agrees To Browser Ballot Terms

Microsoft Starts The European Browser Choice Update

Antitrust Suit Against Google… No Really?

So now appears that Microsoft may be trying to push an antitrust suit against Google.  The accusation is that Google’s search result algorithms are unfair.  Foundem and ejustice.fr have ties with Microsoft and are two of the companies accusing Google.  The third is Ciao, which has been acquired by Microsoft.  Microsoft is pushing it’s new search engine Bing.  It does not surprise me that this suit is being started by Microsoft and affiliates.  Google is the leading search engine and Microsoft wants to take over the market share.  Do they have a suit?  Of course.  Google has the ability to deny sites visibility in search results.  So we already know they can modify the results.  But do they do it intentionally?  I do not think this is the case.  I would agree with Craig Buckler “If Google engaged in mass rank manipulation, it would involve a colossal amount of human effort and search results could become meaningless.”  Read more on the subject at:

Wired.com – Google Hit With Antitrust Complaints In Europe

Sitepoint.com – Google Faces Antitrust Inquiry

So What Do You Think?

Personally, I think Google and Microsoft could get along.  There is plenty of market share for both companies.  I am also against monopolies.  In my opinion, Microsoft still has a monopoly with operating systems and Internet Explorer within the general public.  And if you are a general user, you are going to use the products installed by default.  Of course, there are more options now.  Mac and Linux are gaining more popularity.  Mac is no longer just the choice of graphic artists and Linux is no longer just for techies.  I would still like to see options enforced to help keep Microsoft’s domination at bay and raise awareness of the other products.  That being said,  the same applies for other companies, not just Microsoft.  When one falls, another rises.  Your thoughts?

Start Supporting The MVC Pattern

Joomla! recently released a video about the next version, 1.6.  The video talks about many of the changes to Joomla!.  One comment was made about the MVC (model view controller) programming pattern.  It was mentioned that developers not using MVC will have a difficult time upgrading to 1.6.  I always promote good programming habits, ie using the programming patterns.  Time and time again, I will run into a third party component that is built off a several pages of linear code.  This is frustrating to modify and shows the developer is either lazy or has no knowledge of programming patterns.  All developers should use patterns.  Joomla! was designed with MVC to increase portability and scalability.  MVC makes it easier to develop and modify applications without drastically effecting the overall application.  I am glad to hear that Joomla! is starting to become stricter.  This means applications will be forced into following programming patterns making life easier on developers.

No More Legacy Mode

If you run Joomla! in legacy mode, be prepared.  Joomla! 1.6 will no longer support legacy mode.  WOOO, finally.  Legacy mode is a disaster for 1.5 components.  A component built for legacy mode will break just about anything.  I have run into situations where a client “has to have legacy mode” and then is unable to use more modern programs.  Whenever possible, avoid legacy mode.  Now that Joomla! 1.6 will cease support, I am hopeful that legacy enabled components will slowly dissipate.

Prepare For Upgrades

If you use components that are not built on MVC, start to look for replacements.  When Joomla! 1.6 is released, you will most likely want to upgrade if time and funds allow.  Start preparing for the upgrades now.  Otherwise, you may be in for a nasty surprise when you try to install that legacy photo gallery or help desk.

Your Thoughts?

Watch the Joomla! 1.6 video here.  What do you think about this new release?  Personally, I am very excited.

Phoca Gallery is a photo gallery component by Phoca for Joomla!.  This component is highly extensible but lacks one basic feature.  The ability to edit the copyright information.  In the earlier versions, the copyright was easy to find, wrap a tag around and style.  With the newest version, the copyright has been moved and buried in the code.  I would speculate this is due to many users removing the copyright information.  You should always leave the copyright information if the author asks.  The product is free.  By removing copyrights the author may start charging fees for use.  But you should be able to modify the styles of the copyrights.

I searched several forums, blogs, etc and found nothing on where the copyrights were stored.  It took me a little bit of testing to finally determine the location.  I only use the categories and category views.  Therefore, this solution may only apply to them.

In order to edit the information, go to line 1589 in the file /components/com_phocagallery/views/category/view.html.php.  Around this line you will see something similar to the following:

parent::display($tpl);

echo $tmpl['go'];

The line echo $tmpl['go']; prints the copyright information.  The copyright is not wrapped in a tag with a class.  Whenever the category rendered, the footer was the same size as the rest of the content.  You should keep the copyright information present, however, you should be able to style it so there is little effect to your page content.  So I modified the code to look like the following:

parent::display($tpl);
echo ‘<div class=”phoca-footer”>’ . $tmpl['go'] . ‘</div>’;

Hoo Haa….  We now have a CSS abled Phoca Gallery footer.  As I said before, please leave the copyrights in place.  The author worked hard on the component and is providing it for free.

Online security is becoming more and more important.  Everyday we hear about hackers breaking into websites and stealing a user’s identity.  If a hacker can gain access to a website, they may possibly have access to your credit card information, social security numbers and more, depending on the data the site collects.  A simple, yet overlooked security measure is the password.

I have met users who use common knowledge terms for their passwords.  The password may be a pet’s name, family member, favorite car, birthplace… Users choose these passwords because they are easy to remember.  In most cases, a user will use the same password for all of their accounts.  Doing so is simple and requires memorizing only one phrase.  There are two problems with this.

1) Common knowledge passwords are very easy to guess.

2) If a hacker guesses a password, they could have access to all of your accounts.

I propose two solutions.  The solution to the 2nd problem is easy.  Use different passwords for all accounts.  It may be more difficult to remember them.  But it is better to provide more security than less.  The common knowledge solution is a little more difficult.

Many websites are starting to require a certain number of characters and character types to be present in a password.  This is great.  It helps provide a unique password that is difficult to guess.  For example, the password @3T_6y is harder to determine than one that is your spouse’s name.  Due to the difficulty of randomized passwords, few users choose to implement them when not required to.  By choosing the easier route, you leave yourself more open to attack.  How do you remember a difficult password?

Start by creating a reference sheet.  A reference sheet references a different character (or characters) to each letter of the alphabet, punctuation mark and symbol on the keyboard.  For example, A may be @, I may be 1, E may be 3.  Memorize your references.  Do not write them down.  Do not let others know about it.  If someone knows, then someone will be able to use it against you.

Next, while creating a password, choose a term or phrase to apply your reference sheet to.  If you are on an insurance website, you may choose the term “insurance”.  Depending on your reference sheet, the password may become “1NSuR@Nc3″.  Because you have you have a capital letter, lowercase letter, symbol and number you have already bypassed many password requirements.  Because the word visually represents “insurance” and you have a specific reference to each letter in the word, it is easy to remember.  Now you have a way to create unique, difficult passwords.  Passwords that are easy to remember.

If the word is random, every site will have a different password phrase.  Having hundreds of accounts would mean hundreds of passwords.  With the scheme above, you still have to remember the password phrase you used.  Or do you?  When creating a password phrase you could create a scheme to create the phrase.  You may choose to use the website name, tagline or url.  You may even make it more difficult by choosing the first letter of each word in the company name and tagline together.  By employing one of those schemes, you can easily determine what your password phrase was.  Sure, someone could figure out your scheme.  Even if they did, they would still have to know the references to each character.

I have employed similar techniques with my accounts.  I have a reference sheet memorized.  Some characters are represented by two or more other characters.  This adds even more security to my reference sheet.  I also have my own scheme for determining what my passphrase was.  I never memorize a single password.  Well, after repeat visits to the site, I will memorize it.  In the beginning, I just determine my passphrase and then convert it to the proper characters.  Easy to remember and difficult to guess.  Simple, great security.

Just remember, never, ever give out your reference sheet or any other schemes.  Do your best to stay secure and stay safe.

Steve Krug’s Don’t Make Me Think is a book about the usability of a web site.  He takes a “common sense approach” to appeal to users, developers and clients.  I definitely recommend this read to everyone.  Whether you are a developer or client, you will take something away.  Some of the topics can even be applied to other areas, not just websites.  Some of the topics Steve covers are:

Basic Usability

He writes about how to make a website usable for everyone.  Not just your target market.  Some users may understand industry lingo, while others will have no clue what you are discussing.  Some users will know to click this image or that image, but other users may think it is just that, an image.  Steve does a good job of providing examples with details about how companies made their websites more usable.  I have run into many of the items he mentions.  In the end, you are the ultimate decision maker.  But your clients are where you make money.  If the site is not usable, then you risk losing money.

Navigation

I have run into several cases where someone wants to put navigation everywhere.  They want it in the left column, bottom, right column, top.  And each navigation panel is different.  This just confuses users.  Navigation needs to stay in one place, be consistent and easy to understand.  Steve does a good job of showing the evolution of sites like Amazon and their attempts at creating user friendly navigation.

How to avoid inner office politics

One of the most time and money consuming problems are inner office politics.  One person likes this color or this navigation scheme or this page title.  Someone almost always disagrees.  Then you end up wasting time and money trying to make everyone agree.  Steve does a good job of showing how you can avoid these disagreements, solve them early and save time.  There is no right way to build a website.  But many times, there is a better, more usable solution.

Testing

The book has a chapter based on testing.  How to test, what to test, when to test… These are all questions that are answered.  Unfortunately, small companies do not have the time and resources to do monthly usability tests and make changes to their websites. Regardless of company size, I believe this is a good chapter for everyone to read.  You may not be able to make monthly changes, but when you do test you will know how to do so.

Accessibility = Usability

There is some information on accessibility and usability.  I do believe the two go hand and hand.  If a site is not accessible to everyone, then it is not usable.  By programming without accessibility in mind, you will have to spend more time and money to make it accessible.  By developing with accessibility in mind,  you will save that time and money.   Accessible sites need little development to make them work for both visual and handicap users.  In my experience, an inaccessible site, almost always needs to be rewritten.

Inner Office Politics 2

Near the end of the book, Steve discusses how to handle inner office politics when it comes to a higher up.  Developers are just that.  They develop.  They do not make decisions.  So how do you convince someone not to make a terrible decision, when they believe it is the right course of action.  Many bosses have been out of the development game for a long time or have never been developed before.  Yet, because they are the decision maker, they are always right.  Steve gives some examples of how you can sway there opinion and help save your company time and money.

Fin

This is a great book.  It is a little outdated and the site examples are thus outdated.  However, the concepts are still applicable to today’s web world.  I only had one criticism.  Many times, Steve mentions that everyone can afford to do monthly usability testing and continue making changes.  I work with a lot of non-profits and small businesses and  would have to disagree with his belief.  Many clients are purchasing a website as an added expense, while still implementing their current marketing strategy.  The upfront cost of a website and the cost to have someone update that website can strap marketing funds for a time… for a time.  It takes time to see a return on investment.  Once that ROI hits, then the organization can start putting money back in for usability testing.  Big businesses can surely afford to continue tweaking their websites.  I think those with smaller budgets should focus on changes once a year, not monthly.  The point is to continue updating your website to adhere to accessibility and continue to be user friendly.

As Steve says, “building a great website is an enormous challenge, and anyone who gets it half right has my admiration.”

The Painesville Party In The Park website went live last week.  PPITP is a music festival organized by the Painesville Community Improvement Corporation.  The party is the “largest free music festival” in Ohio and takes place July 16, 17 and 18.  I highly recommend attending this event.  The music schedule includes several genres.  There is bound to be something for everyone’s liking.

The website was built on the Joomla! content management system.  This setup was highly customized to present the musical information.  The following were a few of the customizations and/or challenges that were implemented.

Bands/Entertainment

A customized entertainment manager was created to allow updates to bands and other entertainers.  The manager allows for the party members to add photos, biographies, music and more.  The bands also link to sponsor and event records in other areas of the website.  When music is uploaded, the band’s information page will contain a mp3 player.  Users can now listen to various tracks from the artists who will be attending PPITP.

Sponsors

A sponsor manager was created to help give benefits to those providing support for the event.  A banner system was also incorporated to provide spotlights to sponsors.  This same banner system can also be seen in use on the Madison Perry Area Chamber of Commerce website, though with a slightly different implementation.  Custom programming was done to help intertwine the sponsors on PPITP with entertainment and event information.

Events

The greatest challenge of this project was to intertwine the event calendar with entertainment and sponsor information.  All were separate management entities.  Each entity provided it’s own display logic to properly present information.  Now, there are combined displays allowing for entertainment and sponsors to show on the event list and vice versa.

Landing Page

A landing page was implemented to help provide some basic information about the party and entice users to visit the internal contents of the site.  The landing page displays the event dates, the names of random features and several photos.  It was also built on top of the saxophone logo.  If you ask me, it looks pretty sweet.

Common Elements

The website also possesses some of the common elements that exist in my sites.

• Photo Gallery
• File Uploaders used for the Press Releases, Media,
• Personnel managers used for the volunteer sections
• Link database
• PayPal simple cart integration for Vendor checkout.
• Social networking
• … and more

Check out the website at http://www.ppitp.com.

Do you need to send newsletters, announcements, sales alerts and more? Don’t have a content management system?  Check out MailChimp.  MailChimp allows you to create and send beautiful emails easily.  I recently signed up.  My main website is not based on a CMS.  I wanted a solution I could easily implement on the site without installing a CMS.  I found MailChimp to be the perfect solution.

With MailChimp you have several account options, including a FREE option.  Everyone loves free.  The free option allows you to have up to 500 subscribers and send up to 3000 emails per month.  This is a great option for small businesses who may not have more than 500 subscribers.  If you need more subscribers or emails you can always signup for one of the other options.  They start at $30/mo.  Still an affordable option if you are currently sending snail mail to everyone.

MailChimp allows you to create and save newsletters.  If you have a newsletter format, you can create one template and port it into each newsletter.  If you do not have a newsletter template, they offer a variety of basic layouts, photos and color options to get you started.  The templates are easy to setup and edit.

Once you create your template, you can easily add and edit different textual sections through a popup text editor.  If you are familiar with Microsoft Word or any other WYSIWYG editor, then you will have no problem navigating the interface.  The interface allows for saving, drafts, deletion… all of the basic edit functions you would expect to need.

Some very useful features are within the sending functions.  You can send test emails to a variety of addresses.  MailChimp also offers advice on how to test the layout of your email for maximum compatibility with email clients.  If you are worried about the emails being marked as spam, worry no longer.  MailChimp can run tests on your newsletters, alerts… and determine if there is “spammy stuff” (technical terms) in your email.

How do you get your signup lists into the system?  To start, you can either create forms using the MailChimp interface or have a developer create a signup form and post it on your website.  The form creator is very customizable.  If you would rather have a developer create the form, there are tons of resources on how to send the parameters to your MailChimp account.  As a developer, I just created a form in MailChimp, copied the code and made some modifications that I wanted to see.  Very quick and easy.  If you already have a list, you can import different file types to automatically create your lists.  You can also directly enter each account.  Direct entry may be a bit of a pain if you have a large subscriber list.

If you are interested in MailChimp, I suggest taking a look at it.  Here are a few other features that make it a great online program.

• Create lists of subscribers.
• Create options for subscribers.  Options may consists of news, alerts, sales announcements, etc.  This helps subscribers receive information on the items they are interested in.
• Schedule campaigns.  Create your campaign and schedule it to automatically send out at a certain time and date.  If you are like me, then you write at night.  The best times to send campaigns are Tues-Thurs 10am-3pm.  This is when users are most likely to read your emails.
• Archive campaigns for viewing at a later date.
• The monkey’s mail bag is full of sticks and stones that assemble into many more useful tools.

HTML should always be used for structuring your content.  You should try to avoid using it as a means of design.  Cascading Stylesheets (CSS) are for design, not HTML.  Listed are a few of the CSS oversights I see on a common basis.

Inline Styles

Most of the third party components I use contain inline styles.  This is where the stylesheet attributes are coded directly into the HTML tags.  This makes layouts harder to change as you have to touch all of the style attributes rather than editing one file.  It also adds more markup to your HTML file.  More markup means search engines have more code to digest than content, which can potentially hurt your ranking.  I end up going through the third party components and creating my own design friendly views.  This can be a pain, but someone has to do it.  So, when developing a web program for others, try to use standards and focus on content not design.  Your system will be much more portable and beneficial to it’s users.

The Overflow Problem

The overflow problem occurs when you are floating items.  Normally, in a column based layout you will wrap the columns in a div tag or some other tag that suits your needs.  The main div will contain a background color or image.  As the columns automatically populate, they overflow the main div.  This means if there is a height on the main div, the columns flow outside and the div does not automatically resize.  Some people will use the following code to solve this problem.

<br style=”clear”/>

This is perfectly valid. However, it integrates the content structure with the design.  This may cause issues when trying to apply a new, css based layout.  It also adds extra markup, which bloats your code.  The better way to solve the overflow problem is to apply the following style to the div wrapper:

overflow: hidden

This tells the wrapper to automatically flow with the floated elements.  Therefore, solving the problem without any extra HTML markup.  Wooo!

Browser Compatibility

It is extremely difficult to get most designs to render properly on all browsers.  Your main stylesheet will render on most browsers other than Internet Explorer (IE).  Many designers include one stylesheet for all browsers.  They either do not test in IE or the site worked in IE and they did not test other, more standards compliant browsers.  In almost every design project I have worked on, I have had to include IE only stylesheets.  This can be done with conditional comments.

<!–[if IE 7]> <link href=”ie7only.css” rel=”stylesheet” type=”text/css”> <![endif]–>

<!–[if gte IE 6]> <link href=”ieonly.css” rel=”stylesheet” type=”text/css”> <![endif]–>

Conditional comments are ready by IE.  Above, the first checks for IE version 7 and if it is present then the ie7only.css file is used.  The second checks for anything greater than IE version 6 and then renders the appropriate stylesheet.

You could then use a normal stylesheet for most major browsers and add modifications to that stylesheet in an IE only file.  Then, pull the IE file when necessary.

Conclusion

These were just some things I ran into this week between third party websites and client redesigns.  Hopefully, a designer or developer out there finds this useful.