5 Web Development Trends for 2012

Happy new year from 9bit Studios! I know I have been away for some time. 2011 was a big year for me. I have recently started a new job and I’ve been very busy with some other life commitments so I have not been able to update my posts for quite a while on the site. One of my resolutions is to post significantly more on 9bit studios are then I did last year. Be sure to keep me on top of it. Last year was an exciting year that saw more and more developments in the ever changing fast-paced world that is web design/development, and looking forward to 2012, it doesn’t look like anything is going to slow down anytime soon. Here are some trends to look out for in web development in 2012 — assuming that, ya know… the world doesn’t end this year or something (no I don’t really think that it will).

On some level this could have been a list written for 2011 as a lot of these are essentially carryovers from last year. But that’s how technology seems to work. New technologies emerge but then the sophistication in using them gets refined over time. Essentially what will see is more sophisticated use of all of these technologies in 2012.

More Widespread Usage of HTML5 and CSS3

HTML5 and CSS3 have been used more and more over the past few years try the usage will only continue as browsers that support these technologies start to eat up a bigger and bigger piece of the browser marketshare. Of course, we will still have to deal with browsers that don’t support HTML5 like Internet Explorer 8. But in spite of this, look to see more and more usage of HTML5 features — cross platform audio and video, canvas, local storage, web sockets and so on. In a weird way, we are slowly making the trek back to where we used to be with Flash in terms of dynamic interactivity, only this time we are using technologies that have many more additional benefits on top of what Flash gave us.

Greater Interactivity with JavaScript & jQuery

As the usage of Flash and diminishes, interactivity components of website experiences will largely be handled by JavaScript/jQuery. Fortunately to there are so many great jQuery plugins out there to accomplish just about any solution you could possibly imagine. I even foresee certain things like search, pagination, validation and a host of other things that used to be handled with server-sided code, now handled on the client side with JavaScript.

Responsive Web Design

This is a big one. Because now there exists an absolute plethora of platforms out there and numerous users coming into sites on mobile devices of varying screen size, there will need to be a way to handle your mobile users and give them a good experience with your website. The use of CSS3 media queries or JavaScript solutions such as respondjs or adaptjs will be pivotal in web development over the next few years as more and more users visit sites on mobile platforms. Developers should get good at working with these technologies now. They are not going away.

Mobile

Responsive web design gives you a great solution for handling mobile users, but many site owners might still choose to just create a separate mobile version of the website to redirect users that are coming in on mobile platforms. Fortunately there are many great mobile solutions that give you the opportunity ot do this. jQuery Mobile 1.0 was just released in the latter part of last year and there are numerous other platforms that you can build a great mobile sites off of. A lot of these will heavily depend on emerging technologies like HTML5 and CSS3 as well as JavaScript for doing things like Ajax loading of content as was discussed previously.

Overall better design and UX

Being pretty active in the design and development community online, and following a lot of what goes on in the world of web development, I am continually impressed at how good everybody continues to get in the area of design and development… and maybe even a little intimidated by the realization that there are so many people out there that are so much better (and smarter) than I am. Even a quick glance at blog posts talking about 20 great HTML5 website designs for inspiration or 20 great uses of texture in design shows you the level of excellence that designers and developers are rising to. The great part about this is that the designs and user experiences of websites are only getting better and all of us in the industry will have always have to keep working very very hard to keep pace with everyone else.

2012 promises to be a great year in the world of web design and development. Looking forward to it.

Redirect Users to a Mobile Version of Your Site

I have recently been diving into some mobile development using jQuery Mobile and some other resources. One of the most important things when developing a mobile site is ensuring that your users will actually be redirected to the mobile version of your site. To do this, there is a great Detect Mobile Browsers web service out there that will give you code to redirect users to the mobile version of your site in just about every needed programming language.

For example, the PHP code generated will look like the following…

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i',substr($useragent,0,4)))
header('Location: http://www.yourwebsite.com/mobile');
?>

All you have to do is change the “http://www.yourwebsite.com/mobile” string to the location where your mobile site is stored on your server. You could also set this up as a subdomain (e.g. http://mobile.yourwebsite.com/) like Facebook and Twitter do.

What this code does is detect the browser that a user is coming in on. If it is recognized as a mobile browser the user will be redirected to the mobile version of the site.

If you’re using a PHP file, you’d just have to save this file as something like “detect-mobile-browser.php” and include it at the very to of your header.php file like so…

<?php include('detect-mobile-browser.php') ?>;

This will also work if you want to redirect users to a mobile version of your site in WordPress. Simply put the “detect-mobile-browser.php” file in your current theme folder and add the include line above at the top of your header.php page.

The process will be similar for other languages on other platforms, just use the web service to get the code that you need. The 9bit Studios mobile site can be viewed here. It is written in HTML5 and uses the jQuery Mobile platform.