A wiseman once said
We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders themEthan Marcotte Responsive web design
Under the Hood
Mobile 1st Strategy
This proved to be the simplest approach in designing the user experience for this theme. The design phase started with the sketching of mobile layouts and analyzing of important sections of the website. The design focused on key tasks a user needs to accomplish on the site.
The slider component thus needed to respond to the users screen resolution. Also the slider needed to respond to the common touch and swipe functionalities of a mobile device. Flexslider provides hardware accelerated touch swipe support and is released under the MIT license.
Modernizr, the jS library
Wordpress is a popular open source blogging platform & it has been around since 2003. The CMS has a really simple UI for maintaining websites. Any site can be built using wordpress as wordpress does not control anything other than the backend functionality. The presentation layer is separate which is called a theme.
Gear up & get running Theme setup guide
Thematic Options Framework
Upon theme activiation, an alert will appear on the screen. Click on Begin installing plugin in order to download & activate. The process is automatic, cheers! @thomasgriffin
Now head over to the Theme Options menu located under the Themes main menu. Add a logo(demo logo is 200*35), favicon(16*16), tracking code for Google analytics and social links in footer.
Pimp it up!
Upload images for your slider. Make sure that these images are full size (demo images are 800*500). Images should ideally have a link (post or page or anything else) & some copy.
About us isn't a new page. The excerpt is displayed across the site & the description comes flying in as someone clicks Read More
Contact email is required so the request mail can be delivered to that mail-id. Enter your address or leave it blank, thats up to you. But don't forget to create a page for Contact. Choose the Contact us template when you do so. Leave the page blank if you like. This form will appear on that page.
Add a background pattern, choose navigation link colors & font styles. Pro-Tip: Keep it minimal. You can pick up a pattern from Subtlepattern's amazing collection of patterns.
Custom Post Type
This is a separate section specially for displaying your products, portfolio or features. It is a titled portfolio, but it can be used in different ways. The Featured image upload is not mandatory but it is good to have one Featured image per post. Make sure to create a new blank page with the Portfolio Template
Don't forget wp-custom menu
Head over to the Menu section of wordpress. A maximum of 4 tabs are permitted. The icons will appear as if by magic & disappear just as easily. No extra requests!
Download this theme, report issues, mess around, dive into the code on Github.
current ver 0.5
Preview website was created as a part of this project mainly to demonstrate the theme functionality to the faculty members at the university.