Group items tagged

Responsive Web Design Weekly is a free weekly round up focused on everything and anything to do with Responsive Design.

How Google employs responsive design

On Monday, The Boston Globe released its new premium content mobile initiative dubbed BostonGlobe.com. That is not to be confused with Boston.com, its free flagship website. This unto itself is not all that interesting. Yet, the HTML5 development community is heaping praise on BostonGlobe.com primarily for how the sites renders across varying screen sizes, an innovation called responsive design.

Our users use the web to get things done. As a consequence, time is of the essence. The choice of which specific tool (sites) they use is heavily influenced by just how quickly that tool accomplishes their goals. Therefore, optimize your websites to load as quickly as possible.

The demand for apps is strong, and it's coming from everywhere! This comprehensive guide provides an introduction to many of the skills and best practices you need to build modern web apps. This field guide is designed to help you create great user experiences in your web apps. Whether you're building your first web app, or are just looking for ways to improve existing experiences, there's something here for you!

"The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don't fully understand how it works. Also, in the past, it's been linked to some pretty nasty browser bugs so it's normal to get nervous about using the float property in your CSS rule sets. Let's calm those nerves and ease that frustration."

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu.

The bottom of a page is not the end of a website. An informative, compelling footer is the natural place to lead people to more information within the site rather than wandering aimlessly.

"CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets."

This article follows on from last month's Part I, where we discussed some of the principles of handling mobile users and switching their experiences. If you haven't read it yet please do so before we dive into some of the technical ideas and implementation details.