Thoughts on Responsive Design...

Lately, being more on the front end side of software development, I have been approached about responsive layouts and responsive applications. The idea of responsive design is really cool, and there are a lot of frameworks and tools out there now to make your life easier when designing for a responsive layout.

My problem is the one size fits all mentality. A lot of the design talk and ideas usually stem from blog designers, news and/or magazine designers. They are transitioning from paper to web. Paper is fixed, where the web is naturally fluid. Idea's have now been coming to play that responsive layouts are the answer. I agree to some degree, but not one size fits all. There are many situations where responsive design is perfect. Usually simple text/image content based sites are the right fit for responsive design, not complex javascript, css and html5 applications.

I have a hard time explaining my thoughts, whether putting it in written words or in spoken discussions. Personally, I feel that "Responsive" is the new buzz word, and everyone thinks its the answer to all new development problems.

• It will save money
• It will save time
• You only need one code base
• It is easy

Responsive is not for all cases. In most cases it is for simple content sites. Below is a perfect article that describes exactly my opinion.

If you have comments, please let me know your thoughts. I think this is an important discussion.

http://www.forbes.com/sites/ciocentral/2012/11/18/mobile-apps-the-trouble-with-using-responsive-design/

jQuery Mobile Carousel - Sencha Style

So it has been a common question on the jQuery mobile forums about how one could actually recreate the Sencha style carousel.

I have quickly whipped up a carousel plugin for jQuery and jQuery mobile that uses the iPad jQuery UI touch plugin to capture mobile touch events.

This plugin works and has been tested on Chrome 9.0.597.19 beta (Mac), Safari 5.0.2 (Mac), FireFox 3.6, 4 (Mac)

Demo: http://jsfiddle.net/blackdynamo/yxhzU/
Source Code (Git): https://github.com/blackdynamo/jQuery-Mobile-Carousel

jQuery Mobile - Programmatic Page Transitions Pt. 2

In my post jQuery Mobile - Programmatic Page Transitions Pt. 1 I answered a question in how one can programmatically navigate using jQuery mobile and select their page transitions. Now that jQuery Mobile 1.0a2 is out, some additional methods and utilities have been added.

You can find the additions here: jQuery Methods and Utilities

You no longer need to create a dom element and click it to cause a page navigation with a specified transition. The jQuery team has provided us with a new method to cause a page navigation.

jQuery Mobile - Swipe Up, Down, Left, Right

jQuery Mobile natively provides us with the ability to capture the swipeleft and swiperight. It does not however offer us swipeup and swipedown out of the box. Adapting what the jQuery team has done for swipeleft and swiperight, we are able to create and capture those events in the same manner. See the following code to implement swipeup and swipedown:

jQuery Mobile - Programmatic Page Transitions Pt. 1

Working a few weeks now with jQuery mobile, I find myself loving it more and more. Today I came across an issue though. How would I mimic the action clicking a link. Why would I want to do this do you ask? Well in jQuery mobile, you can specify the link and the transition you would like to navigate to as long as it is an element on the page. jQuery mobile then handles the click on those buttons and links to make sure that they cause the proper transitions. What if you don't want a button to cause the transition?

With some initial digging, I came across the fact that jQuery mobile watches the hashchange event. This event is fired when the location.hash ends up changing. I found this and was like perfect!



Voila! Programatically changing pages and jQuery navigating for me. Unfortunately this wasn't good enough. How do I make page transitions happen other than "slide"?

More digging occurred and a simple solution arose. jQuery mobile actually exposes a new method called ajaxClick. This is a jQuery.fn extension method. How we can use this to solve the problem of programatically transitioning is as follows:

How To: Remove Halo/Highlight Around Dom Elements

Now that I have started developing mobile applications and jumping into the jQuery Mobile space, I have really started to notice an irritation for the Halo/Highlight around elements on an Html page.

jQuery Mobile makes good use of this feature, but sometimes it appears when you do not want it to. To remove glowing halos or highlights from elements on the dom, use the following simple css:

selector{
outline: none 0px;
}

IE9 breaks Cufon!

Yes it is true. Cufon breaks in the new beta release for IE9. The Cufon team has been quick to find a fix for the problem. Please see their fixes here to find out how!