What is Responsive Web Design And How Can I Use It?
“Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.”
Real World CSS Practices
“By now, I think it’s safe to say that most designers on the web are using CSS in some capacity. Even those (misguided) individuals who are still using table-based layouts have a tendency to use CSS for some basic styling, such as establishing fonts and link colours. With that in mind, I thought it might be worthwhile cover some of what I have found to be best practices.
Before getting started, it’s important to note that these are practices and habits that I have developed based on my own experience, which includes developing different sites, my own experiments and reading from a variety of sources. While I have my own reasons for the way I do things, I am in no way presenting the following as CSS gospel that absolutely needs to be followed.
As with anything, take what you read, weigh it against your own knowledge, values and experience in order to formulate your own methodology.”
How To Create Flexible Images And Media In CSS Layouts
“A flexible layout isn’t all that flexible if some of the component parts are fixed. Text easily reflows as it’s container resizes, but what about images and other media? How do we make them flexible to keep our layout flexible?
Last week we talked about elastic layouts and flexible grids. Next week we’ll look at media queries. We’re building toward responsive layouts by discussing each of the 3 parts necessary for responsive design in a separate post.
All the credit here belongs to Ethan Marcotte and I recommend his post on flexible images. I also highly recommend Ethan’s new book on responsive design.
Also Richard Rutter has set up a page experimenting with flexible images using max-width that’s worth checking out.”
Learning To Use The :before And :after Pseudo-Elements In CSS
“If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene and for good reason. In particular, the experiments of one blogger namely, London-based developer Nicolas Gallagher have given pseudo-elements quite a bit of exposure of late.
To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.
Although the CSS specification contains other pseudo-elements, I’ll focus on :before and :after. So, for brevity, I’ll say ‘pseudo-elements’ to refer generally to these particular two.”
How To Target Devices Using CSS Media Queries
“Media queries are a way to serve different css rules to different devices and device characteristics. They’re the final piece in allowing us to create designs that are truly responsive to our audience and how our visitors choose to view our sites.
The last few weeks we’ve been building up toward responsive layouts, first by creating flexible girds and then by adding flexible images and media inside those grids. Today we’ll add media queries to the mix.”
9 Most Common IE Bugs and How to Fix Them
Internet Explorer is the bane of most web developers existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them.
Interested? Let’s get started.