Tricks for Responsive Design

by Elixir Consultant

• 0
• 4.1K
• Consultant

Tricks for Responsive Design

Introduction

With new devices such as smart phones, iPad, tablets which form the major chunk devices currently used by consumers, the push for responsive design is getting stronger among website owners of all forms. In the near future responsive web design would be the preferred way to reach consumers on any type of device, with any screen size.

Responsive Layout
Creating responsive layouts is a new method for designing websites. There are a few useful CSS tricks that can be used to quickly create and deploy a responsive design that automatically adjusts itself based on the size of the screen being used to view the site’s content.

Min-Width and Max-Height for Images
One of the biggest challenges that most designers encounter when designing a responsive layout is that images pose a serious problem when resizing content to meet the needs of any screen size. That’s because images are often sized in terms of absolute pixels rather than relative values. The key to responsive design is, of course, turning absolute definitions of width and height into relative values that will accommodate desktops, laptops, tablets, and smart phones easily.

Doing this with an image is actually easy, but most developers are simply unaware of the proper CSS construction to use when defining an image in a stylesheet. Instead of using a height and width in pixels, a “max-width” and a “max-height” can be used to more easily adjust the image based on the size of the screen being used.

Above statement indicates that, the image’s size is controlled by an element called “max-width.” As its name implies, this prevents the image from getting any larger than the design calls for. The goal of max-width is to prevent the image from exceeding the width of the site’s columns, forcing users to scroll in two different directions.

Min-width, on the other hand, ensures that content won’t get too small to be useful. Designers can apply “min-width” to things like titles, content blocks, or sidebar elements, to prevent them from shrinking just a bit too much. Both elements can be used together to more easily control the exact size and scaling of any element on the page.

Font Styling
Relative values form design. This will scale the font along with the screen size, making it easily readable and natural on a device of any size.

Responsive designs use a series of relative-width columns to scale content down when a device’s screen size passes one or more “breaking points”. These relative values, though, can only work when they’re paired with relative margins and padding. Instead of specifying padding as 5 pixels, try specifying the element as 1 percent of the page’s width or height. It’s as easy as changing the “px” to a percentage symbol and it will help the site scale up or down much more effectively.

URL Handling
The problem with very long URLs is that they contain lots of characters, no spaces, and the ability to dramatically screw up the appeal of a responsive design on a smaller device. This problem is easy to eliminate by creating a special class that will surround long URLs when they appear within a website’s content. Using the “word-wrap” element, CSS can actually break the URL into pieces that fit within the defined width of the content area.

The word will break onto a second line, or as many lines as it needs, as soon as it reaches the edge of the content area. Vertical scrolling will be eliminated easily.

Conclusion
With a few simple CSS tricks, it’s really quite easy to make a website scaled down to meet the needs of smart phones and tablet devices.

When paired with a column-based responsive design, these tricks will be the last piece of the puzzle for determined designers.