RSS

Mobile development with CSS3 Media Queries and JQuery Mobile

17 mar

css3 logo

Have you already decided to create your own mobile project?. If so, I recommend you take a look at CSS3 Media Queries and JQuery Mobile. In this post I will explain how to use them regarding mobile development.

A simple look at mobile development.

Nowadays, there are several ways to develop in the mobile world. You can use specific SDK such as Android SDK or iOS for Apple devices. With these tools, built  for Android or Apple smartphones you can get direct access to the phones’ hardware through their API. This allows you a great benefit because you can get the best of the device performance. The bad thing is that you need to stick to the OS specification (Google, Apple, Blackberry and so on). Besides that you will need to learn a programming language like Java or Objective C. In some cases it will required to pay some money if you want to develop. As you can see developing native applications has its pros and cons.

Fortunately, there are more options among mobile development. In this post I want to share my thoughts about two of them: CSS3 Media Queries and JQuery Mobile. It could be said that they have some features in commons as:

  • You won’t need learning a new programming language. Ok, you need to know some JQuery … but for a non-programmer (even a programmer) it might be probably easier to learn JQuery instead of Java or Objective C.
  • You are about to develop above the web develop stack, i.e, HTML5, CSS2/3 and some JQuery. If you are a web designer it could be nicer to begin a mobile development from here than using Android or iOS SDK.
  • You will need your device browser. Don’t forget we’re talking about just HTML
  • They are not native application and don’t install it through Market as with a native application. However, you could do that using Phonegap or some other tools.

CSS3 Media Queries. A responsive web design approach.

So, what do CSS3 Media Queries apply for or what does it mean responsive web design?. Media queries are a new feature available within CSS3 that is defined for the W3C:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Well, speaking throughly media queries are a CSS3 feature that allows you to specify a determined style depending on your device based in its width or height. This could apply for web browsers only but it is a great feature if you think in mobile development.

And what about responsive web design?. Responsive Web Design (sometimes known as RWD) consists in adapting your web layout to the viewing environment so that your web sites can be seen properly in any device out there. As you may realize CSS3 Media Queries is one of the main features used in RWD.

But, how can this be done?. Well, it’s just CSS3 and you are gonna need just two things.

  • Add a viewport meta tag to your html pages. The viewport meta tag within the head section helps you to adapt your HTML pages to mobile devices. Give me some code.
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

This properties basically say that your web content will fit the mobile screen and the user cannot rescale it. If you want more information you can click here.

  • Add a new CSS3 @media property within your CSS page. With this property you can define which styles are applied to which devices. There are a lot of options available to CSS3 Media Queries that you can find here. But let’s write some code to make it clear.

A CSS3 example.

Imagine you have a external CSS linked to your HTML page. In this CSS you have written your styles. What you want now is to use CSS3 Media Queries so that you can adapt your design dependign not only the device but also if you resize your browser window.
The property we are about to add is as follows:
@media handheld and (max-width: 480px),
       screen and (max-device-width: 480px),
       screen and (max-width: 600px) {

  #wrapper, #content {
    width: inherit;

...

  }
The CSS file from above defines a Media Query properties that will apply to handheld (mobile) devices with a max width of the viewport is 480px, devices where its max width is 480px or to screen (browser) where its max width is 600px. Within this @media property you can redefine your styles that will be applied to the previous mentioned devices.
I’ll show you an example in this page:

CSS3 Media Query example

This page is just a normal page with a little pretty basic CSS styles where we add a @media property. The CSS styles aren’t important by themselves. In this case we will modify the web layout in order to hide the sidebar section and will move the top right navigation section under the title when the browser was resized to a screen resolution under 600px. Give a try if you wanna take a look at it.
CSS3 Media Queries resized
You can check how it looks in your smartphone. In my case I own a HTC Desire S where it shows as follows:
Media queries mobile
Easy, isn’t it?. In the next post I will explain how to use JQuery Mobile.

Some interesting links about CSS3 Media Queries and Responsive Web Design.

 
6 comentarios

Publicado por en 17 marzo, 2012 en Mobile

 

Etiquetas: , , , , , ,

6 Respuestas a “Mobile development with CSS3 Media Queries and JQuery Mobile

  1. seo consulting

    8 marzo, 2013 at 7:26 pm

    you’re in reality a excellent webmaster. The website loading velocity is incredible. It seems that you are doing any unique trick. Furthermore, The contents are masterpiece. you’ve performed a
    excellent job in this topic!

     
  2. Read full report

    26 marzo, 2013 at 8:03 pm

    wonderful publish, very informative. I’m wondering why the other experts of this sector do not realize this. You must proceed your writing. I’m sure, you’ve a huge readers’
    base already!

     
  3. طراحی سایت

    22 diciembre, 2013 at 11:26 am

    thanks

     

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 69 seguidores

%d personas les gusta esto: