Ryan Cramer

July 18, 2011

New Site Launch

VillaRental.com

Design and Development by Ryan Cramer Design, LLC and Powered by ProcessWire 2.1.

See More…

November 12, 2010

ProcessWire 2 Video Overview

What is ProcessWire 2, why it’s here, and how it works…

Watch the Video

October 26, 2010

Introducing ProcessWire v2

ProcessWire is an open source CMS and web application framework. It is a system that keeps content management processes bundled together like a wire … simple, organized, secure and fast. Based on a modular/plugin architecture, ProcessWire’s name also reflects the wires that connect modules to create new processes.

What makes ProcessWire unique?

ProcessWire v2 Developer API

Try ProcessWire with this Online Demo

October 1, 2010

New Launch

Bike Tours by Tripsite

Tripsite is the leading company that provides hundreds of bike tours throughout Europe (and a few in North America too). RCD completed site design, logo design, and all site development. The site is powered by ProcessWire 2 and launched at the end of September, 2010.

See More…

August 15, 2010

Design Concept

Wilson Center

See The Rest…

June 2, 2010

New Launch

Island Hideaways

Designed and developed by Ryan Cramer in March–June, 2010, this site provides listings and bookings of villas in the Caribbean, Hawaii and Mexico. The site was developed with and is powered by ProcessWire. This site replaces a previous version of the site that Ryan designed and developed in 2001.

See More…

October 2, 2009

New Launch

Villas of Distinction

Designed and developed by Ryan Cramer in July–October, 2009, this site provides access to thousands of villas around the world. The site was developed with and is powered by ProcessWire.

See More…

CONTENT MANAGEMENT + DESIGN

Web Site Design Longevity and CMSs

The architecture of dynamic content

The longevity of a web site design will depend on several factors, some of which may be out of the designer’s control. But the most important factors behind creating a long lasting design are within the designer’s influence, and should be accounted for. These factors are:

  • How well the designer has planned and executed the design specific to the client’s current and future needs.
  • How well the design holds together, both visually and conceptually, when populated with the diverse reality of dynamic content.
  • How few design or stylistic decisions the client has to make when adding/editing content.

Read More…

March 9, 2009

Stress-Testing a CMS-Driven Design

The architecture of dynamic content

When a site goes from design comps to development site, a lot of change has taken place. Once the design is being populated with real content, and the navigation is functional, you should stress-test the design in two key areas: translative and invasive stress testing.

Translative stress testing

The designer should carefully go through the development site to ensure that all key design aspects have properly translated from the approved design. Any inconsistencies should be noted and fixed before a site launches.

Pixel perfection

Focus on proportions, colors, margins, and padding. It can be helpful to take screenshots from the development site and overlay them on top of your design comps at 50% opacity. This will quickly point out if there are any major placement errors that need correction. Pixel-perfection is possible, so insist upon it if it is important to the design.

Read More…

March 7, 2009

Scaling of Dynamic XHTML/HTML5 Text

The architecture of dynamic content

Dynamic content design should recognize and accommodate the effects of text scaling and length. The typeface sizes that you define are likely to be the standard from which most people view your design, but they are not set in stone.

Browser variation

Current versions most Mozilla and Webkit-based browsers scale up the entire design when the text is scaled up, which maintains the proportional integrity of your design. But many other browsers will just scale up all the text (proportionally) and nothing else. Your design should acknowledge that this will happen and react to it in a graceful manner. But how do you do that?

Read More…

CONTENT MANAGEMENT + DESIGN

Design for CMS-Powered Web Sites

The architecture of dynamic content

Designing for content management is uniquely challenging and satisfying alike. Unlike print design that goes to the publisher once, a CMS powered design may be published every single time it is viewed.

The designer often has no knowledge of what specific copy is being published in his/her design. This creates unique challenges and responsibilities for the designer who must learn to think like an architect.

Context and scope

In this article we look at some of these challenges and offer tangible solutions on how to design for content management. We won’t focus on any specific CMS products. Instead, we’ll focus on big picture best practices. In addition, we’ll emphasize design for sites that are output in standards compliant XHTML/HTML5 markup and styled with CSS.

Read More…

March 1, 2009

A Dynamic Layout Design System

The architecture of dynamic content

What follows is just one approach to design that has worked well for the author. It should be considered a primer of the process so long as it helps with your design needs. It should not be considered a set of rules, as each designer may have a different approach.

The Designer

When designing an overall look and feel, be creative and don’t think too much about technicalities at first. You have to make your creative side happy with proportion, color, weight, line, type and texture before letting the engineer drive the design. Otherwise your architecture may be a tall inward looking box that communicates more about the system than it does about the design concept. The fact that you are designing for CMS-output need not affect the creativity in your design, though it should affect your approach.

The Engineer

It’s time for you to think like an engineer when you’ve settled on a creative concept. Before you’ve fleshed out all the proportions and details, you’ll want to go through your design and identify each major part as falling into one of the following blocks, each of which bear unique design considerations.

Read More…

March 1, 2009

CMS Navigation Design

The architecture of dynamic content

Design of the navigation system is one of the most important and challenging aspects to designing for CMS-output. Not only must the navigation system(s) make it easy for the user, it must accommodate and adapt to the growth of the site. If the site uses a hierarchal structure, then this navigation system must accommodate new levels of structure (subpages of subpages) beyond what may have existed at the time it was designed. As the architect, you are establishing the design systems by which your client may add new floors to the building.

Read More…

Search Accessibility

Using Google's First Click Free with PHP

Solving subscriber-only search engine indexing

Content in subscription web sites is naturally limited for search engines. This type of content can’t be indexed by Google because you have to log in to view it. How do you retain the benefits of being indexed by Google and still maintain subscriber-only content?

Read More…

Content Management

ProcessWire - Developer API

A brief overview covering the basics of ProcessWire’s application programming interface

Note that this article is specific to the ProcessWire v1 developer API. There is also the ProcessWire 2.0 Developer API.

ProcessWire’s PHP-based developer API is loosely inspired by jQuery’s syntax. Pages are located and retrieved by selectors in a manner not unlike DOM elements are retrieved in jQuery. Many methods use a fluent chaining interface, allowing you to bundle a good deal of work into a single expression (when it makes sense to do so).

Read More…

Content Management

ProcessWire - Building Structures

In this screencast we look at how a page structure in ProcessWire can be used to build other web application structures.

A multi-building, multi-floor campus map using custom fields in the CMS.

Read More…

Content Management

ProcessWire - Relational References

This screencast shows how you can create cross references between pages in ProcessWire.

In this case, we demonstrate using it towards creating a simple categories system by taking advantage of the CMS’s custom fields.

Read More…

December 21, 2008

Firefox, Radio Buttons and Javascript

Firefox exhibits an undesirable behavior when reloading a page containing a form under these conditions:

  • The form contains radio buttons
  • The form contains any type of field inserted with Javascript
  • The inserted field lives before the radio buttons (in the source)

The radio buttons will become corrupted. This article takes a close look at the issue, isolates the conditions, and presents examples. Following that, a couple of simple solutions are presented as a way to avoid this issue.

Read More…

Content Management

ProcessWire - Introduction

Note that this article was written for ProcessWire v1. For information about ProcessWire v2, please see processwire.com. Though the majority of what is in the article applies to both versions.

ProcessWire is a content management system written by Ryan Cramer Design. It is written in PHP 5 and is built on an original MVC framework bearing the same name. Nearly every component within the application is plugin-based, making the application adaptable to a diversity of needs. Within this article and associated screencasts, I hope to communicate what makes ProcessWire a unique platform and where it’s strengths are.

Read More…

December 17, 2008

New Launch: Synbio Project

The Synthetic Biology Project is a project of the Woodrow Wilson Center in Washington, DC. Ryan Cramer handled design and development of the site, design of the logo, and implementation with ProcessWire.

Read More…

November 29, 2008

asmSelect v1.0.4

A new version of asmSelect has been released and is available at Google code.

asmSelect is a jQuery plugin providing progressive enhancement to select multiple form elements. It provides a simpler alternative with several advantages. This new version includes several bug fixes and enhancements.

Changes

Fixed issue that interfered with multiple asmSelects on the same page. This also solves an issue with dynamically rendered (ajax) asmSelects on 1 page.

Read More…

XHTML FORMS

Select Multiple Form Fields

Finding a better solution for multiple selection

Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple. While useful and necessary, the select multiple form field has always been a usability challenge.

Example: Select some categories

While it may be clear to you and me how to select multiple items here, it’s not obvious to most people. Furthermore an accidental click causes all previous selections to be lost. We’ll get into more detail about these and other issues with select multiple form fields.

Why we use select multiple

The select multiple can accommodate a large number of selectable items without taking up a lot of screen real estate. It’s usage is desirable when you consider that it can replace an ugly screen full of checkboxes. It’s also easy to work with for the developer, in that the markup is nearly identical to that of a regular select. In cases where there needs to be potentially a lot of selectable items, select multiple is the standard choice.

Underlying problems with select multiple

Unlike most HTML form fields, the select multiple always requires an explanation of what you must do in order to select multiple items. It’s not at all intuitive, especially to people that aren’t computer savvy.

Read More…

July 3, 2008

Firefox 3 Headaches

The long awaited Firefox 3 was released recently. It contains a lot of great new features, but it’s been a bit of a headache for a few web developers. When a browser update causes us to have to go back to old sites and make updates to them in order to look their best, that’s annoying, but it goes with the territory.

This article looks at a couple of the problems I’ve run into with Firefox 3, including some strangeness with Javascript, and issues with light text on dark backgrounds. But make no mistake, I’m not a hater — I do think this is the best browser there is. But there seems to be very little information out there about the areas where it’s not so perfect.

Read More…

May 27, 2008

jQuery and Javascript

Timeless Tools

It was only a few years ago that javascript was something a web developer could easily ignore. After all, it was useful primarily for popup ads, scrolling marquees, and other stupid tricks. But then something changed. Companies like Google started using Javascript in ways that made us take another look. Google Maps and GMail (among others) opened our eyes. Javascript was being used to bridge the gap between desktop applications and web applications. People started to throw around the term web 2.0.

Today, knowing javascript is one of the most valuable skills that a web developer can have. The modern web thrives on javascript. When properly applied, it makes our sites easier to use, faster to interact with, and nicer to look at. Javascript makes platform independent, web-based desktop applications, a reality (much to Microsoft’s chagrin).

The Need for jQuery

Unfortunately, javascript can be really cumbersome to a web developer, especially when accounting for differences in web browsers. To really know javascript, you had to be an expert on some very technical browser details and differences, including the frustrating things that changed from version to version. Internet Explorer lost a few more points. Javascript wasn’t particularly fun to use either, requiring some rather wordy code to do simple things. Many web developers, including myself, decided that this was a waste of time. If we absolutely had to use Javascript, then we’d copy and paste our way around it. There had to be a better way.

Read More…

May 6, 2008

On-Site SEO Best Practices

How to Bake Tasty Googlebot Snacks

Search engine optimization (SEO) can be defined in two categories: on-site, and off-site. On-site is the kind of SEO that is directly under your control through your web site files or CMS. Whereas off-site optimization takes place on other web sites. This article deals primarily with the on-site portion of SEO; that which is usually handled by site designers and developers. But I think it’s important to define both types in more detail for the context of this article.

Read More…

May 5, 2008

IBM Model-M Keyboard

Flash back to the 1960s for a moment. IBM was a major manufacturer of typewriters with their Selectric line. It was a simpler time … typewriters were judged on how well they typed. The way to sell lots of typewriters was to give you an extremely satisfying experience typing on them, both in feel and speed. The keyboard was a make or break proposition for the typewriter, and IBM had an amazing product in this respect. At no other time in history have so many resources been put towards the typing experience.

Now flash forward from the 1960s to 1981. IBM is still making great Selectric typewriters, but they’ve got a new product: The IBM Personal Computer. With such a large base of Selectric customers, the PC was a natural upgrade path. The PC can do so much more than the typewriter, and the keyboard—no longer center stage—is just one of many parts of that whole.

Read More…

April 30, 2008

VIM

To the best of my knowledge, there aren’t many full-time web developers that use tools like Dreamweaver, GoLive, FrontPage, and so on, to create web sites. Instead, web developers work directly with the XHTML and CSS code. Not just by choice, but by necessity as well. I won’t get into the reasons why that is so important here, but I will say that working directly with the code is something that’s not likely to change in the future, given the nature and purpose of markup.

To work with code, a text editor becomes your key tool. Everyone has their favorite text editor. Mine is VIM, which is essentially a newer version of the unix classic, VI. I get chastised for using a text editor that came from the 1960s. While it may be an old tool, made for a different time, it’s a great tool that I could not do without.

Read More…

April 21, 2008

PHP

PHP is at the top of my list as a timeless tool for web development. Microsoft .NET developers make more, and Ruby and Python may have a nicer name, but PHP is by far the most important, longest lasting and widely adopted web programming language out there. Sites not powered by PHP tend to be the exception. Yahoo, Flickr, and Digg are powered by PHP, and the most widely used CMS products (like Drupal and WordPress) are likewise powered by PHP.

PHP 5.x brought the language into the enterprise-level, many years ago. PHP is far from perfect, and it does have its quirks. In fact, it’s a little bit dangerous in the hands of an inexperienced developer … really, what language isn’t? But it’s hard to dispute the positive impact and importance this language has in the web development world.

Read More…