Marshall Art Studio: What's New?
The development history of this site's Version 7 release. Since I'm doing everything myself, visual design, content updates, front-end coding are intertwined.
Version 7.3.0
IE6 Debug
(2009-10-06) Thanks to VMware Fusion not being "Snow Leopard" ready until today, I wasn't able to catch these minior bugs before last night:
- "Hero for Hire" content in Ad Column broke in IE6: fixed with "min-height"
- H1 font got clipped off at the top: fixed with increasing the line-height; adjusted margin/padding bottom to fit
- "Please Wait" graphic visible on some pages: solved by coloring Portfolio ID selector white
"Snow Leopard" release
(2009-10-06) Mostly "under the hood" changes with few visual changes. Specific problems addressed in this release:
- Some text pages didn't need a second-level navigation (L2 Nav)
- Some pages had unusably long L2 Navs (Web Design, Illustration, Sketchbook/SketchCrawl)
- Masthead logo never visually changed on various link states (hover, active, etc.)
- Needed to be optimized for SEO
- Comic Book section doesn't look like a major marketing concern
- Call to Action needed when seeking work opportunities
Solutions in this release:
- Created third page template for pages with no L2 Nav
- Added an AJAX toggle for super-long L2 Nav pages
- Masthead logo now one graphic that gets moved around by the CSS (1 server trip instead of 3)
- Adhered to Google Adword suggestions
- Used META tags more strategically
- Leveraged logic from Apple.com, created larger home graphic
- Put more deliberation into overall font treatment
- Created a tighter connection between Comics and Art of the Comic Book sections
- Designed the "Hero for Hire" prompt that can be show or hidden in the CSS
- Deleted elaborate background graphics (BODY, L2 Nav, Ad Column)
Version 7.2.0
Coding Update
(2009-04-23) Unified header usage (h1, h2, h3 and h4) throughout the site, fixing a long-standing content modification bottleneck. Adjusted CSS to fit. Moved unused styles to archives.
Visual Design + Coding Update
(2009-04-13) Added a CSS Reset to main style sheet and rewrote page titles from H2 to H1 tags. Patched overall styles to fit. Designed new visual design for BODY. Redesigned ADCOL for greater legibility.
Comic Book Update
(2009-04-08) Recoded main landing page's "New Comics" (3 boxes on top section) as a "hovering DIV" for greater usability. Added colorized "Null Device" and new "School Fight!" stories, as well as archival "Bored Sick" and updated "Sunday Walk". Added more prominent "Click to PDF" console to all comic book landing pages; increased main images to 720 pixel width. Reformatted "Endorsements" to a two-column format for greater legibility. Replaced "Lunar Pages" adcol ads with those more appropriate for comics.
Version 7.1.6
Content Update
(2009-01-24) Created new Teaching section to Footer navigation, added this semester's "Art of the Comic Book". Updated Current Projects with new information, moved older projects to appropriate categories. Added minor CSS enhancements for overall style consistency. Updated index page with new Featured and Tabbed content.
Content Update
(2009-01-01) Full time position at Crunch Brand Communications (web dev + illustration), The Null Device (comic book).
Version 7.1.5
Download Optimization: Mastheads and Footers
(2008-10-02) Fixed a long-standing problem of customized bandwidth-hogging background images for each chapter of website. Masthead now a single background image with smaller "icon" images. Footer now has no background image, styled with horizontal rule like on Blog and Projects pages.
Home Page Improvement: Feature DIV
(2008-10-01) Created three styles for rendering the same content, using my recreational photography as background images.
Content Update: New Material
(2008-09-30) Added web development client (Creative Source) and this year's artsy projects (24-Hour Comic Day, SketchCrawl). Links to new projects on Welcome and Current Projects.
Version 7.1.4
Usability Update: Please Wait
(2008-09-12) Added animated GIFs as placeholders for Illustration, Print and Sketchbook sections. New art designed to keep view interest while main images load.
Usability Update: WAI Enhancement
(2008-08-17) Tweaked for greater clarity for browsing without Javascript or CSS (Lynx, ELinks or Netscape 4 come to mind). Most HR tags were replaced with "Back to Top + HR" P tags. "Portrait" DIV of Web Design project pages now have non-CSS view H3 "Client Spotlight" headers. Most of this two-hour mission was spent hunting down bugs caused by "global find/replace". Also patched a Firefox 3.0 positioning bug of the navigation bar.
Usability Update: Index Page
(2008-08-06) According to Google, almost half my visits are on monitors with a 780-pixel height. Based on this new information, the "Feature" DIV is shorter, bringing the "Recent Projects" and "Blognative Thinking" modules up over the 780 pixel "fold". Also tweaked the Blog's linked H3 style with a better background graphic.
Version 7.1.3
Content Update: New Material
(2008-07-25) Added "new" content to Print Media section (Mostly last year's LTSave pieces that were buried in the Web section until now) and Web Design + Developement section (Powering Up and Carbonite material). Designed a "new" h4/ul style for left-column links; applied to Web, Print, Sketchbook and Sketchcrawl sections. Slightly modded the Sketchbook/Sketchcrawl UI to make the "new" style make more sense.
Version 7.1.2
Content: Index Page Style-Switcher
(2008-07-16) Added a randomized style changer to the index page's "Featured" DIV (the large box directly under the Navigation bar). Upon page refresh, the same content can look different.
New Work: Web Design + Development
(2008-07-14) Posted recently-completed work for MEME/Powering Up and Carbonite. Updated with links on Current Projects and Index pages.
New Blog: July 4th
(2008-07-09) Posted my Fourth of July story. Yes, it is possible to Bataan Death March while standing still.
Version 7.1.1
Functionality: Chat with Dave
(2008-07-01) Added Google Talk functionality. Long as I'm logged on, you'll always be able to reach me.
Version 7.1.0
Content: Current Projects
(2008-01-01) Unified various style improvements.
Content: Current Projects
(2007-10-28) Once again, gutted Current Projects in favor of a cleaner UI. Hopefully the new sorting is more useful for new visitors. The 3-or-2 column layout isn't as flexibile as I hoped, but the overall visual organization is the most logical solution in my grasp. The new design lists active projects, as well as ongoing and new releases.
Content: Comic Book Page
(2007-10-26) Added my 24-Hour Comic, resorted older work to fit. Fixed directory bug that broke the PDF links.
New Comic Book: 24-Hour Comic Day 2007
(2007-10-20) Participated in this year's 24-Hour Comic Day. The Boston gang worked for 24 consecutive hours in Kenmore Square. And this time, I actually finished the story.
Version 7.0.3
WAI Compiance - Phase Two
(2007-09-13) Testing with text browsers (Lynx and WannaBe) and standard browsers (sans Javascript and CSS, with grayscale monitor settings) exposed a few usability issues. Problems included missing TITLE tags for important navigation links, and inconsistent wording on ALT and TITLE tags, as well as irratic placement of HR tags. This release addresses those issues.
Blognative Thinking: New Item
(2007-09-10) Money laundering for fun and profit. Got to make a retro-sexy background image.
IE 6 Optimization
(2007-09-08) IE 7 adoption rates are pathetic. According to Google Analytics, 6.0 counts for 60% of my total IE traffic. Damn! The IE 6 box model broke my otherwise flawless CSS for the new design. Specifially, I wanted to the main content have 20 pixels of margin. This was first achieved by making the content an absolute width with 20 pixels of padding. This other browsers accepted this by correctly keeping the absolute width, forcing OUTERTDIV to widen an extra 40 pixels. Alas, IE 6 took the extra padding INSIDE the content box, not the OUTSIDE. This caused the 760 pixel content to get condensed to 720 pixels, breaking the visual design. Solved by making OUTERDIV 40 pixels wider, then centered the content within. This fix works in IE 6, without breaking in the other browsers.
Version 7.0.2
WAI Compiance - Phase One
(2007-08-29) Acting on the WC3's Web Accessibility Initiative (WAI) guidelines, the site is now functional without CSS or Javascript. Research and coding took about 6 hours for this 48-page site. Execution was mostly adding ALT, TITLE, HR and anchor tags. This first WAI-compliant release addresses the Priority 1 and 2 checkpoints.
What Does "urchinTracker" Mean to You?
(2007-08-28) For a select few, it means hooking up with Google Analytics. Apparently, I'm 48 hours away from knowing exactly how many hits this site's not getting.
UI Enhancements
(2007-08-27) Created an icon-driven UI for different art mediums, spread new icons throughout the site. Added level-one navigation to footer. Overhauled Current Projects for greater clarity (both visual and wording). Replaced About the Studio's iPod image with a blend of personal photos flowing around new media icons.
Content: Rejected Web Dev
(2007-08-27) Added unused XHTML makeover project for Boston-based non-profit group.
New Shell
(2007-08-10) Slight UI improvments, new visual enhancements. Enough to justify a new version number.
Version 7.0.1
Current Projects
(2007-07-22) Redesigned Current Project page for better workflow and UI. Added a "medium" class to highlight different art tools. Created 3 levels of time expression (current, old and older), presented content in chronological order (undated in this release). Created new background-image style for Projects.
Web Development: Various Updates
(2007-07-21) Posted Peabody River live, added Mindfire Interactive content, made distinctions between Web Designer and Web Developer.
New Client: Peabody River
(2007-05-27) Developed new website for Peabody River, an independent investment advisor.
Navigation: Links from This Popup
(2007-05-27) Added "loadparent" javascript, letting users click to specific pages directly from this popup.
Navigation: Current Section
(2007-04-15) Removed "where are you now?" indicator code from embedded individual pages. Replaced with the more orthodox CSS/ID selctor in the BODY tag.
Content: Welcome Page
(2007-04-09) Randomized the "Featured" content (Haroun, Illustration Friday, etc.) in javascript. A different version of this content now displays upon each page refresh.
Content: Welcome Page
(2007-03-12) Designed multiple entries for "Featured" area, which only had my ancient "Haroun" illustration. Now that the design and CSS work, the next step is to randomize the display with javascript.
Content: About the Studio
(2007-02-11) Added more historical content to RIP Client of the Week.
Content: About the Studio
(2007-02-08) Direct response to feedback about my Contact Me content's page location (upper-right corner of an extra-wide layout) being problematic for visitors with low-resolution monitors. Added contact information to About the Studio, wrote a default "contact" DIV, then an "iPod" flavor.
Content: Dead Smurf Illustration
(2007-02-04) By popular demand, added the long-requested back story to one of my bloodier drawings.
QA: IE7 Optimization
(2007-02-04) With lasts week's Vista release, plus MS claiming 100 million IE7 downloads, I finally had to correct this 2-month old bug. IE7 interpreted same-name properties from multiple remote .js files as a conflict, while all the other modern browsers did not. (Names in the unused function "hideAll" (mas-global.js) crashed when those same names were properly used by the L2 "toggle" function of individual pages. Deleting the "hideAll" function made the problem go away.
QA: XHTML Validation
(2007-02-03) Converted a few CSS selectors ("id" into "class") for EONic audience. Site now validates as correct XHTML Strict.
QA: Web Accessability
(2007-01-28) Began writing CSS for the "handheld" media type. First step was building the L1 navigation from loose anchor tags within the DIV into line item tags. This is going to be a long project.
QA: Cross-browser CSS
(2007-01-22) Finished optimizing for IE6, just in time for Vista. Nice seeing hours of dev time go down the drain.
QA: Fixed IE 6 Extreme Width Bug (Again)
(2007-01-21) A recent client meeting exposed a problem with my IE6 solution from last November. Because my Windows test machine's horizontal screen resolution maxes out at 1028 pixels, I couldn't see the specific IE6 bugs:
- the right-hand side of the main content box lost its border
- the main content wasn't centering in the browser window
- the web client project page didn't render the "portfolio" div images properly
- "adcol" lost the blue background color of the H4
Hooked up an external monitor to the Windows machine, upped the horizontal resolution to 1280 pixels, which even at 256 colors, exposed every positioning error. Adjusted CSS, changed several ID selectors into CLASS selectors. Adjusted the IE6 TABLE hack -- as well as the "adcol" background graphic -- to fit. This fix exposed a few more minor positioning errors.
Version 7.0.0
Content DIV
(2007-01-03) Customizing bottom-padding for individual images became unmanagable. Extended the width of "adcol" background image with an additional 760 pixels of white space. The fix works in Firefox and Safari (Mac) and IE6. However, the "bleed" IMG style no longer works cross-platform (big images run over the left border of the background image). Solved by remaking "bleed" images into "cropped". Finished reformatting images into faster-loading JPGs and removed all the custom bottom-padding from specific images.
Overall UI
(2007-01-02) Stylized "quote" content, currently used in Illustration "Normal Jean".
Illustration Friday
(2007-01-01) New entry to landing page, slight tweaks to default CSS for greater readability.
Sketchbook
(2006-12-22) Corrected dates to landing page. Some 1995 pictures were mistakenly listed as 1999. This error would have caused kiniptions to art historians around the world. Reformatted the Painter images (porting from RIF to PSD accidentally clipped silhouette works). Added "Shadow/Idea/Deed" sketch from SF. Reworded Nav tags, hopefully they now make sense.
Illustration
(2006-12-21) Finished optimizing web images for speed. Switched from GIF to JPG, reduced visual size of selected images.
Web Design Content
(2006-12-19) Updated with more recent LTSave content. Adjusted wording to match new resume.
Overall UI and Content Improvements
(2006-12-18) Colorized default LI bullets. Optimized images in Print and Illustration for rendering speed. Wrote Nav Column content for Comics, added suport images for the older work. Added SketchCrawl participation to Sketchbook. Lots of new content on Illustration Friday page. New Blognative entry. Added version number to footer.
Web Design Index Page: Sign Holding Lady
(2006-12-16) Replaced the vector Clara Bow (semi-naked flapper gal) art with painterly Clara Bow (pleated skirt and magenta highlights punkette) art.
QA: Fixed IE 6 Extreme Width Bug
(2006-11-17) Solved by putting wrapping all the content in a giant TABLE. Tweaked existing DIVs to fit without breaking in modern browsers. Structured markup for a future, easy hack removal. Ironically, this fix wrecks the ad column in IE 5.2.3 (Mac).
QA: IE 7 Optimization
(2006-11-15) I tried to take the coward's way out on the IE6 "extreme width" bug by installing IE 7 on my Windows test machine. The CSS positioning matches that in Safari, Firefox and Opera. However, the Javascript performance -- specifically the Navigation Column hide/reveal -- was erratic and unreliable.
QA: IE 6 Extreme Width Bug
(2006-11-14) I just discovered that IE 6 doesn't handle CSS-defined content that's wider than the monitor width. My 1111-pixel width content is getting chopped off by the 800-pixel monitor of my ThinkPad. Horizontal scroll is disabled. This had to be some weird FLOAT/Box-Model conflict.
Illustration Friday
(2006-11-12) So far, contributed 5 weeks in a row. Converted blogger.com accoun to to enhanced "beta" edition. Added enhanced "Past Fridays" level-2 navigation.
Web Design
(2006-11-07) Election Day. Lots of little changes in the last two weeks. Individual content on the massive pages now have specific URLs. Clients with mulitple media (Reader Rabbit, Merrill Lynch, others) now link to one another. Comics now have illustrations of published covers. Illustration Friday is more prominent and has better coding. Web Design index page has better buttons for Project Page and Websites. Introduced new bookhider for Ezra Jack Keats page.
Web Design
(2006-10-17) Updated Web Design content, specifically LTSave. Added support images, current links
Zip's Last Day
(2006-10-17) Added links to current state of real-life characters who inspired my work of fiction.
Personal Blog
(2006-10-17) Posted with some very stale anecdotes, questionable social value and some nice pictures.
New + Enhanced Content
(2006-10-06) Phase 2 of Sketchbook (posted samples from previous years). Installed "Illustration Friday" blog.
New Skin
(2006-10-03) A lot of the print illustrations were too small on the website. The increased size will -- hopefully -- lead to less verbal explaining. Some of the stories were sounding like the fish that got away. At presstime, the new design is still in its infancy. Logical, constructive suggestions are welcome.
Enhanced UI
(2006-10-03) This is most noticable in the Print and Illustration sections. The previous design was bound by a boxed L2 nav design that only looked good in 3 rows of 4. This was proving difficult to modify on the fly. The new UI is a lot more flexible.
Better Code
(2006-10-03) Moved over to XHTML Strict, removed a lot of hacks in the content. While the code isn't 100% free of content hacks, it's a lot cleaner than last year's version.
Community Building
(2006-10-03) I was collecting too many links to maintain or present. The current implementation is primitive (static HTML). The ultimate goal is build posted links dynamically.
New Content
(2006-10-03) Things I've been putting off since deciding to do a redesign. Included are 2 new comic books stories!
Sketchbook Returns
(2006-10-03) A six year absence. The evolution will post the old drawings in order, followed by new material as it developes. Thanks for your patience and feedback!
Blog
(2006-10-03) IN PROGRESS. Once the coding's done, I'll post the popular stories from the '90s (Tied to Fridge, Paris Vacation). Current entries'll be made later.
Illustration Friday
(2006-10-03) IN PROGRESS. After looking at everyone else's, it looks like I'll have to do this as a blog.
Archival Content
(2006-10-03) The site's content was hampered by primitive archiving. I finally got an external hard drive large enough to store everything I've done. The process of consolidating art from all my previous backup media (20 year's worth of floppy disks, SyQuest disks, Zip disks and CDs) revealed a lot of forgotten assignments. Forgotten assignments include the Pizza4UTooGo.com logo, IDG illustrations, Computerworld's WYSIWYS print design, WBZ Head for Home web design, Mass. Alliance for Small Contractors brochure, innovative wedding invitations, and infographics for Houghton-Mifflin. A lot of existing content also got expanded.
Adding Real Content to Prototype
(2006-08-21 through 2006-10-01) Rescanning or rebuilding a lot of the visual content for the wider presentation. Discovered that current versions of Illustrator, FreeHand and XPress don't recognize a lot of my older files. Had to install ancient versions of software to read my older work.
First-Draft HTML/CSS
(2006-08-21) A lot of this work is happening at JJ Foley's after work. Bare-bones files work well in Safari and Firefox. Good enough for me.
Photoshop Mockups
(2006-08-01 through 2006-08-12) Decided on colors, sizes, fonts and layout.
Redesign v7.0
(2006-07-29) Realized v6.0 -- while artistically pleasing -- was proving to be just as unmaintainable as v5.0. The buttons for Illustration/Web/Print were too big, no matter what the colors. Hiding major content in Javascript was becoming even more of a burden. The round-corner content holder prevented on-the-fly width-expansion. The whole thing's a mess. Instead of trying to dress up my current UI and markup, I need to rebuild from scratch.
Looked at a lot of current websites. Got major inspiration from New York Times, The Gap and ArthurMount.com (a freelance designer). The main UI decisions:
- Navigation colors should be subdued
- Level 1 navigation is horizontal, on top
- Level 2 navigation needs to be in a thin column on the left
- Content area is 760 pixels wide
- Build a fourth additional column -- right of content -- for advertising and links
- Swipe New York Times' tabbed UI
- Learn enough javascript to hide/reveal individual content from the index page (not the javascript)
In addition, I also made the following content decisions:
- Make feature illustrations larger onscreen
- Add blogs for stories
- Bring back the sketchbook
- Build more links to outside world (ad column, index page link to outside blogs)
- Build blog for Illustration Friday participation
- Resurrect this hits from my old work
I'm squeezing this major project between a fulltime job and freelance work.