Posts Tagged ‘website’

TestSize.com – Test Your Site at Multiple Sizes

Wednesday, March 10th, 2010

Designers have a distorted view of the web. We all have huge monitors and speedy computers and it’s easy to forget that your average web user isn’t always so lucky. Testsize.com is a simple web app that allows you to easily check out how your site will display on monitors of varying size.

To use the site you only have to enter a url, a size, and hit enter. There are shortcuts that allow you to cycle through different sizes, and zoom, but the developers of the app have done a good job of keeping the options minimal and the application simple.

Check out TestSize.com here.

screenshot of test size

Notable – The Easiest Way for Teams to Provide Feedback on Websites

Tuesday, March 9th, 2010

Notable

Notable is a web and iPhone based service that allows team members to easily share feedback on all aspects of a website. To start a discussion you create a new project called a capture, or a set to hold multiple captures. Captures can be created from a url, by uploading an image, from an iPhone screenshot or from a Firefox Plugin. After creating a capture your team can comment on the page’s design, code, copy or seo. Users can also output the results to a PDF, email, public or private urls.

home

Design

When uploading a jpg, or a capture from a url, Notable creates and stores a full page screenshot of your webpage. Multiple users can create transparent boxes with comments on top of the page giving the designer consolidated visual feedback.

design

Code

Code view is organized by html, css and javascript. You can isolate each source file and highlight lines of code by clicking and filling out a pop-up comment box.

code

Copy

The copy tab removes all graphics and markup from your page and reproduces the page as plain text. Unlike code view, you can highlight individual characters or words for comment.

copy

SEO

The SEO tab analyzes how search engines see your page and only displays relevant content. The left column contains a list of keywords and keyword phrases appearing on your page. The right column breaks down the page by metadata, headers, first 100 words used on the page, bold/strong elements, alt tags and outbound links giving you a thorough view of how a search engine sees your site.

seo

Pricing plans for Notable range from free to $119 a month based on the number of users and the total amount of storage needed. Notable is one of the most thorough site markup tools on the market allowing you to give feedback on site design, code, copy and seo. Pair that with the companion iPhone application and you have a tool that no production team should be without.

Check out Notable here.

Jonathan Tyler & the Northern Lights Website Launch

Monday, March 8th, 2010

On Friday we lauched our newest artist website on Cisco’s EOS platform for Jonathan Tyler & the Northern Lights. The site was designed in house by one of our talented web designers Priyanka Batra (her last before going off to freelance full time) and was managed and built by the talented web teams at Atlantic Records and Warner Music Group.

Jonathan Tyler Website Homepage

Beyond a stylish yet clean design, and the great community features our fans have come to expect from our websites, we rolled out some exciting new features centered around concerts. For some time now we’ve wanted revamp the tour experience on our artist’s websites, and JTNL is the first site to include some of these new ideas.

The Archive

Across the music industry most artist websites do a fine job of alerting you to new tour dates, but very few have given much attention to past shows. Live shows are a huge part of the music experience and we wanted to add features to our web platform to reflect that. The ARCHIVE section of the JTNL site displays past shows and allows fans to interact with those shows in new ways.

Jonathan Tyler Show Archives

Jonathan Tyler Show Detail Page

You can now rate shows, comment on your experience or upload videos or photos you have taken at the show. Beyond allowing user generated content each show has the official setlist, and on the JTNL site, each show can be downloaded in its entirety for free via Topspin! It’s a great way to experience this amazing live band and share your experiences with other fans.

Check out the new Jonathan Tyler & the Northern Lights site.

Dissecting the iTunes LP

Monday, September 28th, 2009

On September 10th, Apple launched the iTunes LP – a new music format that they hope will be the digital replacement for vinyl album packaging. The format is a single DRM free package with .mp3 files for music.

Below is an example of the how the Bob Dylan package appears in iTunes post download. The package (an .itlp file) sits at the top of the album stack and appears with an icon to differentiate it from the album tracks.

dylan1

Overview

The .itlp file is a package containing web pages, assets and configuration files. The contents of the LP can be viewed by right-clicking the .itlp file and selecting “Show Package Contents”. The package contains a few individual files as well as several directories.

dylan2

In the end, the iTunes LP is just a simple HTML website. The first file web developers will notice is an index.html file, the default view for any HTML website. A few things to note about this page:

  1. The iTunes LP is a HTML 4 strict website. It can be opened in any browser and doesn’t contain proprietary iTunes code. The index page includes all of the necessary javascript and css for the LP to run, as well as a navigation div.
  2. There are two meta tags in the index.html file that appear to reference Apple TV. While the iTunes LP currently won’t run on the device the <meta name=”hdtv-fullscreen” content=”TRUE”/> and <meta name=”hdtv-cursor-off” content=”TRUE”/> tags are obviously intended to add support in the future.
  3. I was able to create a simple .itlp file containing only an index.html file (Hello World) by duplicating an existing package. It ran in iTunes with no issues.
  4. Placing an invalid .itlp file into iTunes will silently trigger an error causing iTunes to delete the package.
  5. The HTML files in the .itlp are unable to pull any content from the internet.

The three other files in the main directory are the iTunesArtwork, iTunesMetadata.plist, manifest.xml. The iTunesArtwork file is the album cover preview for iTunes. The iTunesMetadata.plist is the preference file for the LP and contains metadata about the album, the purchaser and ISRC (International Standard Recording Codes) for each track in the album. The manifest.xml is a simple playlist file using http://apple.com/itunes/media_archive/manifest as it’s schema, a site that does not yet exist.

The LP also contains several directories for audio (the background loop not track audio), controllers and src (javascript code), css (a single style sheet), images (a mix of content and site build photos), video (a folder of 640×480 H.264 videos) and a views (the HTML pages for the LP).

Bob Dylan – Highway 16

Double clicking the .itlp file launches the album into expanded mode and will take over the player below the iTunes play controls. Upon launch, the homepage plays a short audio loop and displays a list of links for navigating within the LP and, in a surprising move, linking back to the artist’s official website.

dylan3

Clicking on “Play Album” will launch one of two slideshows featuring either images of Dylan or a text treatment of the album title that slowly fade in and out as the music plays. The play controls in iTunes can be used to change songs but don’t effect the visuals. The shideshow and music aren’t connected in and way and the slideshow will progress even if the music is paused. The audio is played back from iTunes, not from within the package, and closing the package does not inturrept playback.

dylan4

Another way to navigate the album is through the song list. In order perform actions beyond simple selecting of a track you must use the iTunes play controls.

dylan5

Selecting a song shows track info, lyrics and a unique photo for to each song. There is a simple next/previous navigation for moving backwards and forwards within the album.

dylan4b

The Photos page is a carousel that scrolls horizontally on mouse click. Clicking on a photo to the left or right of center rotates the group, and double clicking on the center image will take you to a full page view.

dylan6

The full page detail respects the size of your iTunes window (not true full screen) even though the images are of 1280 x 720 resolution. This is the same resolution as HD TVs, making them the perfect size to be displayed through Apple TV.

dylan7

The Videos page is a simple list of all videos included in the LP. They are all 640×480 (VGA) resolution and are the same dimensions as the standard def videos you can buy or rent from iTunes.

dylan8

Liner notes and credits are digital representations of content from the original LP.

dylan9

dylan10

In its short time in the market the iTunes LP has received mixed reviews. While there is some unique content, there are a few major flaws in Apple’s next-generation album format.

  1. None of the content is dynamic so new assets can’t be added over time
  2. The package can be bloated (near 500MG in some cases)
  3. There is no persistent navigation for the LP making moving around in the package more complicated than necessary

In typical Apple fashion they haven’t been forthcoming on how this spec will progress, and have yet to release public information about how to build LPs or what the submission/approval process will entail. While the first iteration of this product is lacking in some ways, there is nothing but room for improvement. Anyone who counts Apple out in a space so core to their iPod strategy would be making a huge mistake and I hope version 2 of this product will finally give music lovers back the rich music experience we lost in the post MP3 era.

Hype For Type

Friday, August 14th, 2009

Hype for Type is, not surprisingly, a website dedicated to promoting up and coming type designers. What may be surprising to those who aren’t already visiting the site regularly is the depth of catalogue here, how easy it is to find what you want, and the reasonable prices.

Right now they have a pretty good collection of exclusive fonts and are adding more faces as well as new features (including most popular and libraries) all the time. You can search by name, kind of font, foundry or just dig in and browse.

Whether you are a font designer, searching for that new font to punch up a design, or are looking for inspiration Hype for Type has something for you.

Hype for Type

Check them out.