To Portfolio
This Site, www.domopod.com/mv September 2012
This month, put together my site redesign. Previously had been using a blogging tool and found it such too much of a hassle to do custom work with it. Figured this would take about 1 month end-to-end due to the amount of content and needed features but due to the amount of content and optimal size of content chunks, it took a bit longer.
My features:
Decided to show a large set of content on the site rather than key materials - demonstrate depth of experience from the variety of interaction work.
Super simple/easy to understand and use ( one mouse button with x/y positioning ) - able to get to deep content quickly.
Easy to understand navigation language elements and meaningful feedback: motion and animation for waiting and updating items.
Able to be viewed offline, ligthweight, portable
Instrumented when online
Easy to author new content
Integrated with my quick portfolio flash app
Works best on both Desktop and the Tablet
For the integration work, focused on using the same themes in the overall site (moving content tiles and responsive contorls), and reworked the content loading mechanism in the flash application to insure they used the same content source. These changes didn't effect current user of the flash application and updated the flash app to support an expanding content model.
Selected four patterns to execute the IA/navigation system:
Thin Header: kept it minimalistic and simple - 60 pixel top anchored. Only providing links to resumes, a obvious section header, subdue branding, and extra small icons to external sites (facebook, etc)
+ Stateful Image Pick-List: New system, a single row of small iconographic and/or ideographic content tiles in combination with breadcrumb and caption bars on top and bottom. Minimalistic horizontal bar of screen space required - cheaper than a toc, fat footer, and deeper traversal than typical most dash menus. Allowing for tree traversal as well as context information at the item level. Combined with the super simple header - the real-estate allows for bigger than 600x600 content chunks
Presenter Panels: Needed content panels to behave like responsive windows they can explore. Created a floating/animating panel with a paging panel inside of it and simple page index controls to allow the user to expore the content.
Lightweight Rich Content: Used CSS3 and Jquery, Ajax and XML to implement the content model and the content request and transformation engines. I tested this on Windows/Mac Firefox, Chrome, IE, Safari on iPad. This model allows me to take the entire site to an offline laptop for presentations with a simple copy/paste. A simple XML editor is used to create XML content for both the navigation presenter and content presenter.
For non-user facing features:
Web Data: Created DB connectivity using a very simple Ajax to Aspx/xml model with a SQL client server to server connection. All features connected handle the online/offline scenarios.
Discovery: Along with applying SEO content recommendations, created a single web aspx page to handle parsing queries params and dynamically creating pages from XML and doing redirection - this is leveraged by sitemaps/robots. Instrumented pages, xml, and image requests and dialogs.
Performance of Ajax requests: In testing found my host site dropping a surprizing amount to transport packages for XML and Image Requests. Added client site monitor code to detect this latent packages, canel requests and recreate requests - this improved performance quite a bit.
Things remembered/fiddled with this month:
Secret Wars. An awesome comic series from Marvel - go Beyonder!
First Pair of Air Jordans. Think this was back in 1980s - kinda fuzzy
|