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 them
Ethan Marcotte Responsive web design
Responsibily Responsive
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.
Flexible Slider
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.
Flexslider & slider images by @mbmufffin
Modernizr, the jS library
Modernizr detects over 40 next generation features and creates a javaScript object that contains the result set of elements that the user browser does and does not support. It then uses polyfills, which is the collection of backward compatibility techniques commonly known as a HTML5Shims or HTML5Shiv (see reference section).
Adaptive media
This method uses javaScript & PHP in order to create multi-pixel versions of an image & applies it to specific resolutions as defined in CSS. .htaccess file catches all the images that are not defined in CSS and passes them to the ai-cookie.php file which is used to drop a resolution cookie on users computer. This cookie records users current screen resolution.
Wordpress CMS
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
Start customization
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
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 us
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.
Styling
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!
Credits
On Github
Download this theme, report issues, mess around, dive into the code on Github.
current ver 0.5
Theme Preview
Preview website was created as a part of this project mainly to demonstrate the theme functionality to the faculty members at the university.