Marshall Art Studio: Visual Artist for Print, Web and Comics


Skip to Content

Site Navigation:

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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Content Update

(2009-01-01) Full time position at Crunch Brand Communications (web dev + illustration), The Null Device (comic book).

[Back to top]


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.

[Back to top]


Home Page Improvement: Feature DIV

(2008-10-01) Created three styles for rendering the same content, using my recreational photography as background images.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


New Blog: July 4th

(2008-07-09) Posted my Fourth of July story. Yes, it is possible to Bataan Death March while standing still.

[Back to top]


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.

[Back to top]


Version 7.1.0

Content: Current Projects

(2008-01-01) Unified various style improvements.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Blognative Thinking: New Item

(2007-09-10) Money laundering for fun and profit. Got to make a retro-sexy background image.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Content: Rejected Web Dev

(2007-08-27) Added unused XHTML makeover project for Boston-based non-profit group.

[Back to top]


New Shell

(2007-08-10) Slight UI improvments, new visual enhancements. Enough to justify a new version number.

[Back to top]


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.

[Back to top]


Web Development: Various Updates

(2007-07-21) Posted Peabody River live, added Mindfire Interactive content, made distinctions between Web Designer and Web Developer.

[Back to top]


New Client: Peabody River

(2007-05-27) Developed new website for Peabody River, an independent investment advisor.

[Back to top]


Navigation: Links from This Popup

(2007-05-27) Added "loadparent" javascript, letting users click to specific pages directly from this popup.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Content: About the Studio

(2007-02-11) Added more historical content to RIP Client of the Week.

[Back to top]


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.

[Back to top]


Content: Dead Smurf Illustration

(2007-02-04) By popular demand, added the long-requested back story to one of my bloodier drawings.

[Back to top]


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.

[Back to top]


QA: XHTML Validation

(2007-02-03) Converted a few CSS selectors ("id" into "class") for EONic audience. Site now validates as correct XHTML Strict.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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:

[Back to top]


  • 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.

[Back to top]


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.

[Back to top]


Overall UI

(2007-01-02) Stylized "quote" content, currently used in Illustration "Normal Jean".

[Back to top]


Illustration Friday

(2007-01-01) New entry to landing page, slight tweaks to default CSS for greater readability.

[Back to top]


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.

[Back to top]


Illustration

(2006-12-21) Finished optimizing web images for speed. Switched from GIF to JPG, reduced visual size of selected images.

[Back to top]


Web Design Content

(2006-12-19) Updated with more recent LTSave content. Adjusted wording to match new resume.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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).

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Web Design

(2006-10-17) Updated Web Design content, specifically LTSave. Added support images, current links

[Back to top]


Zip's Last Day

(2006-10-17) Added links to current state of real-life characters who inspired my work of fiction.

[Back to top]


Personal Blog

(2006-10-17) Posted with some very stale anecdotes, questionable social value and some nice pictures.

[Back to top]


New + Enhanced Content

(2006-10-06) Phase 2 of Sketchbook (posted samples from previous years). Installed "Illustration Friday" blog.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


New Content

(2006-10-03) Things I've been putting off since deciding to do a redesign. Included are 2 new comic books stories!

[Back to top]


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!

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


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.

[Back to top]


Photoshop Mockups

(2006-08-01 through 2006-08-12) Decided on colors, sizes, fonts and layout.

[Back to top]


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.

[Back to top]


Foo

(2006-00-00) foo

[Back to top]