Best Responsive Websites

Best Responsive Websites Tips and Best Practices

Dennis Dunleavy - Wednesday, April 16, 2014

Start with a template

Sure, you can start coding from scratch, but there’s a lot of interesting free website templates that will make you save a lot of time. Among others, I recommend Mobile boilerplate, the 1140 grid and Skeleton.

There’s a lot more than those ones, so feel free to Google responsive web design template if you want more.

Working with fluid grid based layouts

Best Responsive WebsitesFluid layouts are an important part of a good responsive layout. In order to have a website that can adapt to many different screen resolutions, you have to use a fluid layout with widths defined in percents instead of pixels.

To get the size in percents from a size in pixels, you have to take the element’s width and divide it by the full grid size. For example: 200 px (element size) / 960 px (grid size) = 0.2083. Multiply this by 100, and you’ll get 20.83%.

This is why it is interesting to work with a 1000px grid. 1000 is a round number, and it is easy to calculate that 24% of this size will be equal to 240 pixels. For more info about 1000px grids, I recommend you to check out this article.

Flexible images

A very important aspect of a responsive layout is how images can adapt to the size of their parent container. The basic solution is to define a maximum width of 100%. This will make sure that your images are never wider than the parent container.

.content img{ max-width:100%; }

A better solution is to use context-aware image sizing. This technique basically consists of having different sizes of an image, and displaying only the size adapted to the device. Quick example:

And the related CSS:

@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) {img[data-src-800px] { content: attr(data-src-800px, url); } }

For more info about this technique, check out this article.

jQuery is your friend

jQuery is definitely a super useful tool when it comes to web development. Lots of jQuery plugins can help you to create better responsive websites. A quick round up of my personal favorites:

FitText: A plugin that makes font-sizes flexible.

Elastislide: A responsive jQuery carousel plugin.

Supersized: A fullscreen background slideshow plugin.

FitVids: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

 


 

Don’t forget Apple’s viewport

The tag was introduced by Apple for their mobile devices (iPhones, iPads and iPod Touch). This tag allow you to specify the default size of a page when viewed with an iPhone or iPad.

The code above will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied.

For more info, feel free to check out Apple developer documentation.

Scalable background images

The CSS3 specification introduced a new attribute named background-size.

As you probably guessed, it is used to define the size of background images. It can be a size in pixels, or it can use some of the reserved keywords. The cover keyword scale the background image (while preserving original proportions) to be as large as possible so that the background positioning area is completely covered by the background image.

html { background: url(bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover; -moz-background-size: cover;

-o-background-size: cover; background-size: cover; }

The solution above works perfectly in Chrome, Safari 3+, IE 9+, Firefox

3.6+ and Opera 10+. If you’re looking for a solution that works in older

browsers, I highly suggest using this jQuery plugin or one of the

alternative CSS tweaks published here.

 

Get inspired

When designing a website, it is always good to be able to get inspired by what others have done. Since the rise of responsive web design, online galleries have been created to showcase the best responsive websites.

The most complete gallery is definitely mediaqueries, but if you need some more inspiration, you can get it here.

Test, test, test, and test again!

Marden Web Design | 888-569-5501

I have been in the digital advertising space working with business owners for over 15 years. In 2007 I decided that I wanted my own business so i started Marden Web Design in order to help small business owners promote and sell their products and services online. After working with business owners I found that simple websites were not the answer. I soon discovered what clients really wanted and that was: More profits by getting more customers into the store. More people to know and think about his business outside of the store. Looking cooler than the competition. Having someone help them reach their goals. I enjoy learning about your business, what makes it tick, and what needs improvement. More importantly, listening to your goals and helping you get there.
comments powered by Disqus

Contact Details
Twitter Updates