Stephen Salel.com (http://www.stephensalel.com)

•

Stephen Salel.com (2011)
An HTML5-compliant website showcasing works by contemporary artists

Image 1. The logo of StephenSalel.com. Since this would appear on every page of the site, and since it simply reminds viewers of the name listed in the URL, visual impact was a much higher priority than legibility. I therefore decided upon this very stylized logo, again using the art deco font used in the Modern Literati site.

The seed of StephenSalel.com grew from the limitations of its predecessor, the Flash site Modern Literati. While using much of the same content as Modern Literati, StephenSalel.com was written in a combination of PHP, HTML5, CSS, and JavaScript. Content is stored in a MySQL database rather than the XML database that powered Modern Literati. As a result, the photos, videos, and audio files are all easily accessible from Firefox, Safari, Chrome, and IE desktop browsers, as well as from Safari mobile browsers.

Image 2. The menu page of StephenSalel.com. The name of each category is written out on each of the buttons in an art deco font, and the corresponding symbol for each category, vaguely visible behind the text, is clearly revealed on rollover. (The button selected in this image is "Photography and Digital Works".)

Image 3. The Related Sites Section of StephenSalel.com. As a site focused on visual art throughout the world, with the exception of a few pages, text was used only when necessary, and images were made as large and prominent as possible. Rather than forcing the viewer to scroll down the page to see additional content, I tried to find a way in which all of the content could fit within the dimensions of the viewer's browser window. The website automatically detects those dimensions and determines the size and location of various elements accordingly.

Image 4. The Crafts and Sculpture Section of StephenSalel.com, featuring the hand-dyed silk scarves of Kumi Yano. All photographs on the site are displayed with dynamically generated frames, which give the images a sense of stylistic coherence with the rest of the page and a three-dimensionality that is not available with either ordinary HTML table borders or CSS borders.

Image 5. The Video & Performance Section of StephenSalel.com, featuring the work of Ankoku Butoh dancers at the 1996 Osaka Dance Experience series. The introduction of HTML5 video tags has made the display of videos much easier than before. All videos are encoded in WEBM, MP4, OGG, and FLV formats in order to ensure that they can be viewed in all desktop and mobile browsers. Although various JavaScript-based stylizations are available to decorate the videos, these tricks are not always cross-browser compliant, and so I have chosen instead to display the videos within the same dynamically generated frames used for photographs.

Image 6. The Music & Audio Works Section of StephenSalel.com, featuring the songs of Grendel Angst. All audio material is encoded in both MP3 and WAV formats in order to ensure that they can be heard on all major desktop and mobile browsers.

Image 7. The Prose & Poetry Section of StephenSalel.com, featuring the Japanese poetry of Akira (Akira Uchida). Since the inception of Modern Literati, the predecessor of StephenSalel.com, the ability for contributors to display text in a variety of languages has been a high priority.

Image 8. The News & Opinion Section of StephenSalel.com. Each message, regardless of its length, is decorated with a custom-sized, dynamically generated frame.

Image 9. The Artist Biographies Section of StephenSalel.com, featuring the biography of Grendel Angst. Beside each biography appears a list of links to content submitted by or related to the artist, including an email form through which the artist can be contacted and a list of any upcoming events announced by the artist.

When a user visits StephenSalel.com, the entry page automatically detects what kind of browser the user has, and if the user is viewing the site on a mobile phone, the composition of the site switches to a vertical format, as seen in the images below.

Image 10: The menu page of StephenSalel.com, as it appears on mobile browsers.

Image 11. The Painting & Calligraphy Section of StephenSalel.com as it appears on mobile browsers. Featured here are the murals of Buddhist painter Kevin Gomyo Seperic. Because of size restrictions, dynamically generated frames are not applied to these photographs.

Image 12. The Video & Performance Section of StephenSalel.com as it appears on mobile browsers. Featured here are the videos of Kris McCourt, known by the studio name }thefree{. Because of size restrictions, dynamically generated frames are not applied to these videos.