Sunday, February 13, 2011

New Portfolio Site

Created (hand coded from scratch, no library or template) a portfolio site for myself based on the concept of boxes and lines. Minimal graphic design. Minimal trickery (a.k.a., JavaScript, JavaScript library, Flash, etc.). In fact, the only JavaScript is from Shadowbox.js.


All about the content

The focus is to showcase work (Information Architectural and User Interaction / Experience) I have done for the web and on mobile devices.


Process
  1. Wrote a creative brief
  2. Developed a sitemap
  3. Created moodboards
  4. Developed wireframes
  5. Wrote up all the content
  6. Sourced content images
  7. Developed basic HTML / CSS framework
  8. Test, test, test, test, and more test
  9. Code content to pages
  10. Test, test, test, test, and more test
  11. Added Shadowbox.js
  12. Test, test, test, test, and more test


Browsers

It has been tested under Apple Mac OS X, Apple iOS, and Microsoft Windows against Chrome, Firefox, Internet Explorer (6, 7, and 8), Opera, and Safari.

Was a bit surprised to find differences in Firefox between Max OS X and Windows. Actually, it is really due to the difference in screen resolution between the two operating systems. Windows is 96dpi and Mac OS X is 72dpi. Hence, min-width of say 300px in Mac OS X is not the same as min-width in Windows. Will tweak this as part of the effort to make this layout a true fluid layout.


Issues

Found an issue with Shadowbox.js in iPad's and iPhone's Safari. Shadowbox.js renders the shadowbox / overlay at the top of the page (not where you are at) after 'back to top of page' (an anchor tag that references an anchor name at the top of the page) has been clicked and then scroll back down the page. This does not happen with desktop browsers. The only way for the user to remedy this issue is remove the '#topOfPage' from the URL (which was added to the URL by the anchor tag). Will have to investigate if I can rewrite the URL so '#topOfPage' is never added to the URL.