New Adaptive Site Design
Sunday, January 1, 2012
New year, new site design! It may not look a whole lot different, but it's got some great features...
- Adaptive Layout — I've added code to detect the width of your browser, and to adapt the site layout accordingly, using a combination of style sheets and JavaScript. Things like backgrounds and navigation will all be rearranged to optimize your experience depending on what device you are using to view the site. There are three different layouts:
- Standard layout — This is the default, used for web browsers and the landscape mode of tablet devices. Anything over 920 pixels or so will get the standard layout.
- Tablet layout — This is used for the portrait mode of a tablet device, and covers a browser width from about 720 to 900 pixels. Site navigation is stacked to the left for more vertically-oriented browsing.
- Mobile layout — Calling all smart phones! Anything under 700 pixels will get the mobile layout. Here, the site navigation is hidden by default, while secondary navigation appears at the bottom of the page.
- Web Fonts — By using web fonts, I was able to replace all of the header and navigation images with styled text, decreasing page size and load time. Sweet!
- HTML 5 Audio Player — Now with HTML 5, I can deprecate the old Flash player I had written for my audio files, in favor of native browser support. Even IE 9 now supports the HTML
audiotag. I've also rearranged my music pages to list several pieces per page, by category, for more convenient access.
Feels great to start off the new year with a fresh new look!
