After reading through the slide provided by a commentor, I am more than happy to give it a go right away. So I set the “Mobile first” approach to a theme for simplyWP. Well, not everyone can accept that, so it is best to test out my own thing

Mobile stylesheet was place first, then to a bigger devices then only desktop. I find Google Chrome takes the last one as priority, which is good. Tested in both Firefox as well as Internet Explorer (8 and 9), they all runs pretty well.

One problem came in was the media queries in Internet Explorer. IE6 doesn’t take it at all, instead, it takes the first one to show, which is the mobile version (where I will hide the NivoSlider). IE7 doesn’t take media queries well too. A little Google-it, I get MediaQueries.js, where it will enable IE to support the media queries.

The reason I put media queries at header instead of stylesheet is that IE doesn’t work well with it, even with the jQuery plugin.

This is one happy test, and I’m sure there will be more to explore.

As a newbie to the Javascript World, it is important to get some very very simple jQuery plugins. I pick and find a few that are so simple and yet works well in all browsers.

NivoSlider

One of the slider that can do all the other slider can do, combined. While it already started to sell commercial support, but you can pretty much get some support by just Google it. Yes, it works perfectly fine with WordPress, either by the plugin provided or you can get your hand dirty on it too.

Uniform

Spice up your form easily with this form beautifying plugin. You can either set to style all the inputs or by adding class to any of them. Best of all, it can easily change theme just by editing some images sprite and/or CSS.

jQuery Slide Menu

A very simple multi-level menu jQuery plugin. All you need is to style the menu to enable at least 2 level of dropdown and add this little plugin to it. Simple enough? It works well even with 5 level!

MediaQueries

We cannot deny the existing of mobile browser. This plugin basically help older browser (Especially IE6) to enable media querie, so you can set different screen resolution to different stylesheet. Best of all, you don’t need to do anything beside adding the script line.

HTML5shim

Let’s face it, we are all living at tomorrow today. Although HTML5 and CSS3 are still on development stage, but it has been widely used. Well, only the few tags. But it is more than enough to make one headache with older browser (IE, duh!). This little plugin helps on enabling the common tagslike header, aside, footer and etc to work well. Some suggest Modernizr, which both works pretty much the same just more support on HTML5 tags.

PC desktops might started to become an unfamiliar word. Laptop, tablet and mobile is to head the coming years. Mobile web, back then we called it as WAP site. But now, the mobile web become, somehow standard web, there shouldn’t be any more mobile version and web version, they both works well in all devices (currently checked: iPad, iPhone, Opera Mini, Symbian Browser). At least in my opinion. I’ve been playing with some devices and research recently to get more understanding on how it works.

Read more

Responsive web design become quite common nowadays, any site can easily become responsive, just a few code. I am strongly agree to apply that in all website I developed possible.

There are of cource some differences applied on mobile and desktop or I should say bigger screen and smaller screen.

Width

On desktop design, it can be fixed width. On mobile or some other tablet design, it is still best to work with fluid width (Damn lucky I started with fluid width back then). For iPad and iPhone, they seems to be able to zoom out the whole layout and let you “pitch” zoom it, consider that a bad user experience, that bring me to another point:

Font size

For mobile version, it is best to zoom at least 100% of the original font, just to accommodate with those browser that will zoom out the site when browsing.

display: none

Although mobile need to be low bandwidth, but in this case, especially I’m working with WordPress system, I’m more comfortable to cut bandwidth with the design itself. So display: none is the best friend to go.

I would definitely go with responsive design than create another mobile version. Of course, there too are pros and cons, especially when there is no option to go for desktop version, missing link on some hidden element and etc.