New Theme–Responsive Design–Part 2

I launched a new theme on the site 2 weeks ago.  I Mentioned at the time a new technology.  I have switched to a responsive design theme.   If you are not familiar with responsive design it is: (wiki pedia)

Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

Essentially it is a fluid layout that works with may screen sizes (tablets, phones, browser, etc…).  By using a responsive designed site you no-longer need to tailer a site to a specific device or screen size.  The layout can shift to accommodate.    See this example below.  Prior to this theme I was using the wp-touch plugin to allow the blog to display on mobile devices.  That theme handled the navigation and had a specific layout and design for phones.  With the new responsive design (on right) you can see that the same look / feel and layout are re-used

jimiz_mobile_compare

 

The Wp-touch plugin is great.  I am not saying I did not like it, it is just a different method to get to mobile.   Recently, I have been doing more mobile development and also more mobile websites.  I have found that you can spend twice as much time focusing on mobile and the main web design.  If you use a responsive based framework or design you can tailor the experience to multiple screen sizes and platforms.

As I looked at the stats of my site, I saw that the majority of non PC devices were iPads. The previous template did not look too good on a tablet.  This new theme does a much better job. 

I selected a free template from Onedesigns (Onedesigns.com) called  Esplanade

http://www.onedesigns.com/wordpress-themes/esplanade-free-wordpress-theme

I often use Eleganthemes as my theme vendor of choice but the Esplanade theme really looked clean and did what I wanted.  Often a theme for word press is tailored to a type of site.  Since jimiz.net is just a blog I only wanted limited options.

My next step is to do some more customization and modifications.  I have to add my about.me page links and also adjust the url.  I will be removing the sub-directory of /blog and going to just the root of jimiz.net. 

If you have any feedback please let me know your thoughts.  I have attached some images from a tablet and mobile view.

jimiz_mobile_resp_navjimiz_ipadjimiz_ipad_portoratejimiz_iphone

Leave a Comment