When Designing – Use Real Content

There are many lessons to learn out there as a designer, and please let this be at the top of your list: when designing something – whether it be a business card, a brochure, or a web site – use real content.

Lately – when doing any design work for a client – we always make sure they provide us with actual content so they can see their content in a working design. Often clients will see another site they like – want you to use similar ideas – but in actuality – their content is completely different or would not work. (We see this a lot). When working with clients who have their own designers or some pre-designed mockups – we always allot for more time – as there are bound to be changes because the designer only showed a few items (which in reality is a lot of items) – and then the client does not like the layout of their “real content”.

If the client does not have real content – red flags should go up. Not only are you setting yourself up for a potentially longer than expected engagement (if they do not know what their actual content is – do they really even know what they want anything to look like?) – but a lot of changes and headaches will follow. If they provide the content up front – everyone’s expectations are set right away and the end result will match the design. No questions/confusion.

In conclusion – save yourself a lot of time, frustration, and potentially endless change cycles by making the client provide real content for your designs.

Jappler Recommends: jQuery TOOLS

About a year or so back Demitrious shot me over a link to something he thought looked pretty slick: jQuery TOOLS. I took a quick look but never did anything else with it because I had my old standbys in place for most of what jQuery TOOLS offered (overlays, tabs, tooltips, etc).

What does jQuery TOOLS offer?

  • Tabs
  • Tooltips
  • Overlays
  • Expose
  • Scrollable
  • Flashembed

Last week I decided to finally step out of using what I normally used (Thickbox for overlays) and try something from jQuery TOOLS. One look at their demo and I was completely sold. The overlays were slick, easy to implement and best of all – really light weight. Demo: click on the photo.

If you have any web development projects coming up or in the mix, do yourself a favor and check out the demos at jQuery TOOLS. You can accomplish a lot with a little (and have fun doing it).

Out With the Old, In With the New

As you might have noticed – I took a week off from blogging in order to focus on something else – cleaning up Jappler.com. Over the past few months I have learned so much more about WordPress, web site optimization, and what I really used this web site for – so I decided I needed to take some time to redo this site.

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

RoundCube Webmail Update

I have been using Squirrelmail since the late 1990s and while it works and is dependable – the interface is still stuck in the 1990s. A year or so ago I looked at another webmail project: RoundCube Webmail but it was quire ready for primetime. The developers just released a new version which looks promising. If you are in need of a webmail solution – give it a shot.

Sliding Doors + Sons of Suckerfish = Jappler Menus!

There have been two great menu and navigation techniques I have used over the last few years:

  1. Sliding Doors of CSS
  2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together…until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

  1. Two tab images (left and right, with both an active and hover (highligted) option
  2. Sub-menu arrow (not required)
  3. Sons of Suckerfish javascript
  4. CSS for both the drop downs and the sliding doors techniques
  5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length – it is all taken care of by two images and some CSS. For this example, I am going to use two basic tab images that I quickly created for this example:

  1. Left
  2. Right

Sub-menu arrow (not required)
If you want to easily let your visitors know you have a sub-menu within your menus, add in a sub-menu arrow.

Sons of Suckerfish javascript
After years of using nasty javascript – it is refreshing to see that this technique only requires a few lines of javascript (check out the javascript).

CSS for both the drop downs and the sliding doors techniques
The CSS for the drop down menus and the tabbed navigation is pretty slick (check out the CSS).

Menu list code (your menu items)
The menu list code is the actual menus/tabs. The code can be dynamically created by using something like wp_list_pages() in WordPress, or you can create the code yourself. I have created some sample code for this example.

Everything put together
Now that you have an understanding of all the files and code involved, let’s see everything put together This is a very good way to have sustainable code/files for a small or large web site when dealing with navigation.

Questions, comments? Contact me!

Adobe Web UI

Sloppy page loadI have not spent a lot of time on the Adobe web site since the Adobe/Macromedia meld. I have to say – after just spending 10 minutes on the Adobe web site (buying Photoshop CS3), I am very disappointed with their layout and their implementation of the layout. There were numerous spots where the menus did not load for several seconds (longer than other web sites), text was cut off, and during page load – elements were just really ugly. Yes – this happens sometimes, but I expected a lot more from Adobe. On top of this, the font looks horrible and like something that would have been ok on Windows but not on a Mac and not from the type king Adobe. My Adobe experience was very disappointing.

An example of the cut off, ugly text in the store (look at “Sign In” and “Welcome”):
Adobe’s cut off text