WordPress App 2.0 for iPhone

Installed this today on the in-app recommendation from WordPress 1.3.x, which I have used periodically over the past year. Thought I’d share my initial impressions of the new version.

Upon launching version 2.0 I was greeted with the blog user set-up panel, as if my blogs weren’t already set up in the previous version. No Cancel or Done available – only Save. I quit the app and realized that the new version did not install itself ‘over’ the old version. Consequently, I could still access my sites with the old version. While this install behavior is strange, it wasn’t a big deal for me to set up three sites again…just had to find those login credentials…

After typing that first paragraph I tapped Save and returned to the posts pane, where I started. Seems more responsive.

One bug: after setting up a new blog, when you return to the main blogs selection page, that new blog doesn’t appear in the list. If you quit the app and relaunch, it shows up. This happens each time with three blogs.

The most important user interface change is that you now have a bottom menu letting you move arbitrarily among posts, comments, and pages. No more back and forth through the list trees.

When editing a post, you bottom nav changes to these four options:

Write. The expected post editing form which include title, tags, categories, and post status, along with the new option of geotagging your post. I did that with this post, but don’t think my theme renders it…have to work on that.

Photos. Add and manage photos for the post

Preview. My theme ‘cannot be retrieved’. I wonder what the requirements are for true in-app previewing.

Settings. Publish date, password protection, resizing of photos

I noticed minor display bug: when saving a revision to a live blog post, I saw an empty (no label) left-arrow/back button, slightly misplaced in the upper left until the save was completed. This only happened once, the first time I encountered the scenario described. , the first time I saved a revision to a live post. No biggie.

I’m done for tonight. Must say this version of the Wordpres iPhone app feels better and more responsive throughout. Still wish I could reply to comments. And now, it’s easy to reply to comments!

What Facebook did to my website

In mid-December I finally plunged headlong into Facebook. It’s really astonishing how much time I’ve spent attending to it over the past month–to the detriment of this website. At the same time, I’ve noticed just how many visitors end up on this site from Facebook…so I must attend to it, too. Get my house in order for the new guests, namely old friends and new, who are curious what I’ve been doing and why I have a website.

Having left the design unfinished makes me particularly uneasy. I also noticed that there are a few missing photos, victims of the move from TextPattern to WordPress. And then there’s the new band website…a similar port, but with a smaller database, thankfully.

Computers

Dan got a new MacBook Pro today. Aaron got an iPhone. Started me thinking about the computers I’ve used or owned over the years.

Prehistory

Coleco Pong – Dad had one at the little house he lived in after my parents divorced. I was maybe 8…or 9 or 10, which would be sometime 1977 – 1979.

Commodore Pet – at Heinz Semder’s import office in Brooklyn. I only really sat in front of it.

Borroughs 68000 – I took a Pascal programming course at Franklin & Marshall when I was in seventh grade. We used terminals (Honeywell or Teledyne?), but I have no idea what the OS was. Once they toured us through the Burroughs 68000 mainframe room. What a cool memory. A roomful of well organized blue refrigerator shapes. Whisking tape machines…and those massive, multiple-platter hard disk machines that were about the size of a dishwasher. Capacity? I don’t know. Each student had a chance to make a punched card—probably with our name.

Mattel Intellivision – Shared it with my step-dad for years.

Commodore Vic-20 – Dad bought this and I started learning BASIC programming. Cool sound chip, simple as it was. 1/4 audio tape storage.

Commodore 64 – My first computer. Awesome sound chip, SID. Programmed in BASIC, Logo, Pascal, broke things in 6510 assembly language. Massive external 5-1/4 floppy drive. Used GEOS for a short time before it finally fried…something in the power supply must have shorted, because when I opened it up, paths on the circuit board were warped and wavy. Melted!

Atari 1200XL – My friend Rick got this for Christmas. Best thing I did on it was write a program to make random geometric shapes. We thought they results would make great OP t-shirts.

Apple Macintosh SE – Borrowed from Casey Dixon, who would later become my wife.Apple Quadra 605 – The first computer I bought on my own.

Apple Quadra 630 - Second computer I bought.

iMac – This was Casey’s.

Apple PowerMac 8200AV

Apple iBook – Casey’s first generation iBook I think.

iMac G4 17″

Apple Powerbook G4 – One of many laptops I used at Ritter. Other machines I used there include Quadra 950 with Daystar accelerator, PowerMac 7200, PowerMac 9500, G3, G4.

Apple Powerbook G4 – 15″ Casey’s last school computer.

Apple iBook xxxx – I’m not sure which one Casey has right now.

Dell Latitude 810 – My Develisys laptop. Ah,…Microsoft Windows. Words cannot express…

iMac 24″ Intel Core Duo – No longer my current machine.

Website Upgrade

Maybe it was the trip to Chicago. Maybe it was learning that there is an iPhone app for WordPress. Either way I decided to redesign the site again. I really wasn’t unhappy with the previous design, but have grown tired of the somewhat dated backend CMS. More on that later, maybe.

Installing WordPress was a breeze. The five-minute install worked perfectly. Of course, I first installed it on my local environment to start developing a new design and template, and to test importing content from TextPattern, the CMS that I’ve used routinely over the last two years. As it turns out, moving my existing content from TextPattern to WordPress had it’s snags, but I found some great advice, along with a better TextPattern to WordPress import script from Alex Brie.

The next challenge I faced was the way WordPress handles permalinks and category links. In short, even after following all of WPs standard advice for creating ‘pretty permalinks’, I was still left with category links that look like:


www.site.com/category/category-name/post-name/

when what I really want is


www.site.com/category-name/post-name/

The later pattern has benefits for the end user (URL recognition) and search optimization (URL keyword density). In this context, Wps literal use of /category is completely superfluous, and for me has no place in a meaningful URL pattern.

After a little research, it seems that WordPress rewrites the URL this way in order to provide total compatibility with WordPress pages, the URLs of which follow the pattern: www.site.com/page-name. This allows WP pages to have any name and never conflict with the URL of a category. Put another way, adding /category creates an absolutely unique namespace for categories.

I suspect however that many WordPress users employ WordPress pages for only a handful of common ancillary items—about, contact, etc—while using categories to manage the bulk of their content. For these users the potential for confusion and URI collision is very low: it’s an easy and obvious choice to simply eliminate /category and then to avoid creating a category with the same name as a page, i.e., don’t create a category named ‘about’ or ‘contact’.

The WordPress forum is littered with various workarounds, plugins, and hacks, but none are without negative side effects. I’m certainly not above hacking source code, but doing so now can come back to bite you when you upgrade your WordPress installation later. Besides, shouldn’t there be a way to manage it in WordPress’ permalink settings? Or if not there, then perhaps in the .htaccess mod_rewrite rules? Apparently not…at least not yet. There is an “Idea forum” thread dedicated to removal of the wp category base, and I will be following this closely.

Develisys Steps Out

After much effort on the part of everyone at the company, Develisys, where I spend most of my time, has launched a new website. It’s a big step forward…a better articulation of what we offer to businesses discovering they need to pay more attention to web marketing.

The new site gives us a great platform for deploying our own marketing efforts and I think the process has given the entire team a renewed vigor and introspection. It’s time to become known!

Is this an obscure Safari Bug?

Recently we styled the main navigation menu for a Develisys client site. The nav was challenging from a production point of view for it combined overlapping transparent tabs or unequal widths; normal, hover, and active states; was styled on a clean, accessible unordered list in the html; and finally, we wanted it to be as fast as possible, deciding ultimately that the nav should request only a single image from the server. After some struggle, we arrived at a workable method that looked and worked like a charm in the current Firefox, Opera, and Netscape, IE 6 and 7, and degraded gracefully in the downlevel browsers. Not bad.

But it soon emerged that the near-final version of the nav was crippled and unusable on Safari 1.3 and 2.0. In Safari, anywhere you clicked on nav would reload the current page. To the designers, it became immediately apparent the anchor on the currently active tab was a large as the entire button background image, about 650px x 110px, or so, preventing the use click from targeting any of the inactive tabs. Dead navigation.

I have yet to determine if this is a bug in the Safari browser or an undefined behavior. The behavior in question occured under the following circumstances:

  • absolutely positioned (+) ul
  • absolutely positioned (+) li, overflow hidden
  • absolutely positioned (-) anchor set to display block, with a background png image of all navigation tabs
  • negative text-indent to make the original list text disappear (The Pixy Technique, if I’m not mistaken.)

I’ll cut to the chase, it turned out to be the text-indent that threw everything out of whack. Not just negative, but for any value. We decided to hide the anchor text with {display:none} instead of the negative text indent, as this works equally well across all browsers, and did not necessitate re-thinking the entire navigation styling.

Because this was an interesting case, I decided to try to generalize the trouble with Safari. I’ll be back with that soon…

Letterpress on the Web

Now that my website has been re-invigorated—if not beautified—I want to diversify and focus a bit in hopes of better leveraging my interests and skills. ‘Diversify and focus’ sounds somewhat contradictory, but the idea is to develop a few websites that address specific aspects of letterpress printing. By creating targeted content, each site should rank high for specific, related search terms, thereby generating highly qualified, but probably fairly light traffic. Each could become a platform for a community, for services, and for targeted advertising. Creating interest, building traffic and participation will, in turn, help to further develop the content. And so on.

The letterpress printing community already has a small number options on the Web, like Briar Press, LetPress, PPLetterpress, and the recently launched Typecasting Mailing List.

My new letterpress adventure begins with this site about letterpress type. Not much there yet, but it will grow.

Redeployed with Textpattern

It’s been quiet around here lately. I just ducked in from my other work — web design at Develisys and for the .918 Letterpress Club in Lancaster — to spruce things up. This site is now built on Textpattern. The design is not complete; I decided it was more important to redeploy it with the new back-end, rather than languish over all the design details, so that I could get back to publishing some content. Since I actually dismantled my Movable Type installation a couple of months ago, I had no publishing platform other than good old html, making the switch more or less imperative.
Both the design and the entire site framework will continue to evolve, but still, I hope that even the current state of affairs is an improvement over the previous incarnation.
One interesting aspect of the new site, for me, at least, is the use of three sections to divide and manage three, somewhat distinct, areas of interest for me: namely, web design and development , letterpress printing and the manufacture of letterpress type , and the remaining arts, sciences, and miscellaneous diversions that engage me. The flexibility of Textpattern allows me to publish articles to each section, maintaining distinctly different pages for each section, while aggregating content from each section on the homepage, and in secondary elements, like a sidebar, throughout the site. I am sure that this is all quite possible with other CMSs and blogs, including my former Movable Type, but the Textpattern approach makes sense to me.

Websites I Built

Updated 12/26/2012.

I hope to build websites that are useful, effective, accessible, interesting, and good looking. I’ve worked on a variety of projects, large and small, for corporations, professionals, artists and craftspeople. For several great years, I applied my design, marketing, and user experience skills at Develisys. Today, I direct the marketing efforts here.

Here are a few website projects I worked on in the past:

Select non-web projects for a former employer, Ritter, Inc., where I served as art director:

http://www.ritterinc.com./portfolio/ebgames.html

http://www.ritterinc.com./portfolio/jandj1.html

http://www.ritterinc.com./portfolio/majorbrewer.html

http://www.ritterinc.com./portfolio/olivares.html

http://www.ritterinc.com./portfolio/wawa05_store.html

http://www.ritterinc.com./portfolio/wawa09_breakfast.html

http://www.ritterinc.com./portfolio/wawa11_favorite.html

http://www.ritterinc.com./portfolio/wawa10_id.html

Better folder tabs using transparent PNGs?

Ever since I read Steve Krug’s book, Don’t Make Me Think, I’ve been thinking a lot about the idea of tabbed browsing, which is, to be very specific, a user interface pattern that employs the visual representation of file folder tabs to provide the user a means of navigating multiple chunks of content. Tabbed navigation is arguably one of the most widely understood conventions for maneuvering through a website. As a designer faced with such conventions, there is a strong temptation to re-interpret the visual metaphor. Could it be improved?—it’s definition stretched? This leads to innumerable variations on the theme of tab.

So, do I have some provocative new approach to reveal? Well, no. Actually, what happened is that, while my senses were attuned to the tab pattern, I’ve noticed that most tabs tend to be very rectangular with some amount of space between each tab. I know that this configuration simplifies the web designer/developer’s work by dividing the graphical elements of each navigation item into discrete chunks that are a breeze to translate into XHTML markup and to style it with a little CSS and background images. But this limits the designers ability to create subtle layered effects; attempting any kind of visual overlap of elements would greatly increase the complexity of code required to make it so. This was just the case when I began thinking about re-designing the navigation for my own site. I had roughed-out a mock-up that used tabs—not just any tabs, but overlapping, natural-looking folder tabs with cast shadows.

Having recently witnessed my Develisys colleague, Nathan Baker successfully execute a transparent drop-shadow that slips flawlessly over a textured background…I wondered how the technique could be adapted for tabbed navigation to create more natural-looking, overlapping tabs with yummy cast shadows.

Since I have never spent much time working with PNG images, my first test was simple: use clean xhtml markup and minimal css to create the effect of overlapping buttons. Here is the result. It works in browsers that 1) handle PNG images as an element background, and 2) react correctly to the use of the :hover pseudoclass on elements other than <a>. IE is out on both counts. I know there are workarounds for both of these IE shortcomings, but I like to keep these to a minimum.

In my second attempt, I managed to move the :hover onto the <a> without much fuss. While the example isn’t that slick looking, the technique might allow for some very lovely, sublte effects. I shared the idea with Nathan, who quickly set about making it work in IE. His CSS is slightly different, but it is equally compact. One minor drawback with Nathan’s solution is that in IE6, the :hover state for an inactive button is triggered only when the mouse is over the anchor text; but, on an active button the entire area is :hover’d. Hmmm…

One of the coolest aspects of this approach is that is uses a single button image for all buttons. It also retains the time-honored tradition of using an unordered list (the ul element) to mark-up navigation. The transparency effect allows the designer to reposition—or change the overlap—for each button. My original attempt uses absolute positioning, while Nathan’s solution uses margins to handle the spacing and overlap of the buttons. Nice. We’ll keep working on it.

I found this very detailed account of the status of PNG support in general, and among browsers in particular. And here is the fix for MSIE’s incomplete PNG support.