Techniques in Responsive Web Design

This was an interesting article from Web Designer Depot talking about tips and tricks for designing responsive web design. The main points talked about in this article discuss using CSS to change the images and image size for different devices, altering the navigation for mobile and tablet devices, and setting up default CSS for older browsers. The article recommends creating multiple sizes of the same image to be used for either mobile, tablet, or desktop devices. These multiple copies of the same picture (but in different sizes) will allow for faster load times. As I mentioned earlier, faster load times give a website a whole myriad of benefits, most importantly being user retention. Just ensure that the images crop in the desired fashion when they appear on different devices. They also recommend assigning images to HTML elements. Something else to keep in mind is the web designer may not want the navigation placed in the same position that it is on the desktop version of the website for mobile websites. In this case, they recommend to “…[set] absolute positioning properties on the navigation container when viewed on larger screens, and [remove] the position properties on small screens.” Finally, they suggest making websites backwards compatible by using large screen CSS. It’s important to adapt to all user’s computers. In my opinion, the more flexible you are with making your website available to all people, not matter how old their computer or phone is, you have a good chance of increasing your customer base and creating a positive user experience for all customers.

Source: http://www.webdesignerdepot.com/2011/11/techniques-in-responsive-web-design/

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