Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Responsive designing in stylesheets

Monday, April 28th, 2014 by Servage

resframeworks-0There seems to be more debate than solutions. Some have proposed new HTML markup that makes it easier to specify image files based on dimensions and screen resolution. Some feel the server needs to play a larger role, particularly to negotiate network speeds. Others think that a new image format that can contain multiple versions of the same image is the answer. The sudden explosion of mobile web use caught our web technologies off-guard.

A web search for “responsive images” should help you get up to speed with where things stand currently. Jason Grigsby has written several high-profile articles that effectively describe the dilemma as of 2012. They should serve as a good starting place for understanding the challenge and possible solutions.

Resizing Images on the Server

Sencha.io Src is a service that shrinks your images down on the fly and delivers them at the appropriate size to the device doing the asking. All you need to do is add a bit of extra markup to your img tag that points the image to the Sencha.io server. The Sencha.io server uses the user agent string (a bit of text that browsers use to identify themselves) to look up that device in a database. Once its width is determined, Sencha. io Src scales the image down to that width and sends back the smaller file.

One size doesn’t fit all

CSS works fine for swapping out styles and moving elements around on the screen (or even hiding them). But in many cases, smaller devices are better served with different content or the same content in a different order.

JavaScript can handle a certain amount of rearranging and offers a way to conditionally load content. Customizing content with JavaScript is beyond the scope of this section, but you should know that content tweaks are possible and ought to be considered when designing for the mobile context.

Responsive limitations

For some websites, particularly text-heavy sites like blogs, a responsive redesign is all that is needed to make them pleasant to use on small screens. For other sites, however, simply adjusting the styles is not enough. When the mobile use case for a site or service is significantly different from desktop use (based on user testing, of course), then it may be necessary to build a separate mobile site.

But even separate mobile sites can benefit from the basic ingredients of responsive design we covered here. Responsive techniques are proving themselves to be an essential skill for every web designer.

By now, you should be comfortable formatting text and even doing basic page layout using CSS. The trick to mastering style sheets, of course, is lots of practice and testing. If you get stuck, you will find that there are many resources online to help you find the answers you need. The Web is the best place to keep up with developments in responsive design because this stuff is changing at a furious pace.

Sources for Further Reading

Responsive designing in stylesheets, 3.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.