Responsive Web Design

The trend in Front End Web Development these days is Responsive Web Design. There are so many different mobile and tablet devices out there now that one must take user experience to another level. We want the audience to be able to take in the most important information that a website has to offer and be able to not only read the information without having to continuously scroll back and forth on small devices, but still be satisfied with the design.
Two wonderful examples of responsive design is CSS-Tricks.com and AnderssonWise.com. If  you re-size your browser on a desktop the code does not break and you get to see the experience you would have on a tablet or mobile device. Or just visit the sites on the mobile device of your choice.

Drew Thomas owner of digital agency Brolik writes an informative article in SmashingMagazine.com  on this whole subject called Looking Beyond Common Media Queries.
Part of what he says is:

When we code for only a general desktop size, a general tablet size and a general mobile size, we are forgetting about the infinite other shapes and sizes that our devices are and will be in the future (especially as TV becomes a more popular medium for Web content). We’re not truly utilizing the full potential of responsive design. We’re not truly coding for any device….

According to recent studies, 17% of all adult cell phone owners in the US access the Internet mostly on their cell phones. This is due to the economics of buying phones and computers. If someone can’t afford both, the phone makes more sense because it makes calls and browses the Web.

In addition to that, because of the recent increase in mobile-friendly websites, people are more likely to access information right from their phone, wherever they are, even sitting at their desk in front of their desktop! This is especially true if the phone is the most handy device at the time.

This is why we can’t assume use cases or goals based on device anymore. So we need to code so that our content makes sense on a 300 pixel screen, not a mobile phone screen. We also need to make sure that if we only have 300 pixels to work with, the most important content appears first, the second-most important is next and so on.
———–

Responsive web design is obviously quickly becoming ‘best practices’ in the web development world.
Although at the moment I am only working on fixed width sites in my classes. My short-term goal and the goal for anyone who plans to become a current front end web developer will be to crack the responsive design nut and become competent in it’s practice. For now, the designing on the 12 column & 16 column grid (thank you  gridulator.com ) will be my focus.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s