Simple Usable

Responsive Wordpress Theme For Business & Personal Websites

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.

Strategy by Lukew.com

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

320 and Up

320 and Up is based on a progressive enhancement approach. As per its default flow, developers first code for a screen width of 320px. Therefore the default stylesheet contains minimal styles and it is light weight so it loads faster on a mobile browser

320 & up by @Malarkey

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).

by @KuraFire @paul_irish @SlexAxton

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.

adaptive-images by @responsiveimg

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.

Blank wordpress theme by @chriscoyier

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

Thematic Options Framework by @devinsays

thematic options framework install alert
WP-Plugin-Install

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.

thematic options framework install alert

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.

thematic options framework

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

thematic options framework

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.

thematic options framework

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.

thematic options framework

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

templates
custom post type

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!

custom menu - wp function

Credits

On Github

Download this theme, report issues, mess around, dive into the code on Github.

Download 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.

See Theme Preview

Get in touch

Something wrong? Please do not hesitate to contact me via e-mail or via twitter.

I hereby pledge to iron out any creases that might appear during the testing phase or in the future.