responsive web design

jQuery Mobile 1.3: What’s New?

1 March 2013 / Leave a Comment

jQuery Mobile is a handy JavaScript framework that makes it easy for you to build mobile web apps and mobile-friendly websites. jQuery Mobile 1.3 came out last week, and it has all sorts of lovely new features and improvements over 1.2. In this article you’ll get an overview of these changes, and see how to use jQuery Mobile 1.3 to enhance your websites and web apps even further.

You’ll look at:

Responsive web design improvements
Responsive grids
Two types of responsive tables for displaying data
A new panel widget
Improvements to range sliders and other form fields
A new navigate method and event for easy history manipulation
A new easy way to build autocomplete listviews
New options for dialogs and popups
Two new icons, as well as other icon improvements, and
A few miscellaneous enhancements to the framework and documentation.

We’ll start by taking a look at the concept of responsive web design, and see how jQuery Mobile 1.3 makes it easier than ever to build responsive webpages.

Responsive Web Design: 5 Handy Tips

17 February 2012 / 2 Comments

In my previous article Responsive Web Design Demystified, I explained the concepts behind responsive web design, and showed how to build a simple responsive layout from the ground up.

In this article, you learn five additional techniques that will help you build great responsive layouts. You’ll put each technique into practice as you build on the responsive layout created in the previous article.

Here’s what you’ll learn in this article:

How to hide non-essential content on smaller screens
Creating collapsible blocks of content to make the best use of mobile displays
Scaling images in proportion to the available screen width
How to create responsive images that are optimised for different screen sizes and network speeds, and
Resizing type according to browser width.

Ready? Let’s get started!

Responsive Web Design Demystified

30 September 2011 / 27 Comments

Responsive web design is a hot topic these days, especially as websites need to adapt to the growing number of mobile devices with their relatively small screens. Many designers and developers want to create new websites with responsive layouts, or modify their existing sites to incorporate responsive elements.

However, the whole topic can be somewhat bewildering at first glance. Responsive design is a relatively new idea, and it is rapidly evolving. It’s full of rather confusing terms, such as responsive layouts, adaptive layouts, media queries and viewports. Where to begin?

In this article, you get a gentle introduction to the world of responsive web design. You’ll:

Learn exactly what responsive design is, and why it’s useful
Look at the difference between the terms “responsive design” and “adaptive design”
Take an existing fluid layout and convert it into a responsive layout that looks good on all screens, from mobile to widescreen desktop, and
See how media queries and the viewport meta tag can help you build responsive layouts.

Ready to explore the world of responsive design? Let’s go!

responsive web design

Footer

Contact Matt

Follow Matt