interlinkONE

7 Responsive Web Development Tips

Posted by John Foley, Jr. on Thursday, December 27, 2012 at 1:41 PM in Marketing

Starting to wrap your mind around the idea of developing a responsive website? It can be overwhelming and not just a little exciting when you think about how you can create a site that can be so utterly flexible and awesome. Here are seven tips on responsive web development:

1. Target / Context = Result

The above calculation is one you will come across a lot when you read about responsive web development and design. The target is the element being worked with. The context is the default font size for the “container.” The result is now expressed in a proportion. Don’t worry. There won’t be any major mathematical problems for you to work out in your head. Nor will we quiz you at the end. But the point is, that responsive web design requires you to wrap your brain around the idea that everything needs to be proportionate for your website to be responsive and flexible across different screens, with different users.

2. Do not get consumed by the idea of design = layout.

Because in responsive web design, it goes far beyond layout. It’s about anticipating your audience. Their devices. Their needs. The content. The images. How it can all come together to provide a seamless experience for the desktop and the mobile users alike.

3. Look into scalable vector graphics.

The highlights – they have really small file sizes, they stay crisp and clear no matter what the size, no pixels and they are totally scalable. Cool stuff.

But, we get it. You like pretty pictures. Your audience probably likes them too. Want flexible images? Then you need to place parameters – max width: 100%. Though it will look like this:

img {

  max-width: 100%;

}

4. Use flexible grids.

You want the ability to scale up or scale down. A flexible grid will allow you to do this.

5. Do not forget to add breakpoints.

These will range in width from 480px to 1200px from small screens up to wide screens. Yes, you can create major and minor breakpoints, by creating media queries inside of media queries. Major breakpoints would be the serious layout changes and minor breakpoints would be the parts dealing with content or device specific issues. But there is no set rule on how you go about deciding where these breakpoints are. It is very much based upon your particular content, your audience and your goals.

6. Content is the major player in responsive web development.

You should be thinking and planning content from the very start, if you want to create a website that is truly responsive. As you brainstorm your layout, you should already have thought about the message and branding and how you will convey that to your audience.

7. Unlearn all your bad habits.

Responsive web development does not involve weird or complicated work-arounds to get things patched up or “working.”

Want to learn more about Responsive Web Design? Our friends at Grow Socially can help with that. 

Photo Credit

(9) Comments Tags best practices, Business, Grow Socially, interlinkONE, john foley, johnfoleyjr, Marketing, responsive web design, trends, web design, website, website consulting