With smartphones now constituting the majority of device sales, as well as the majority of devices currently in use by consumers, the push for responsive design is getting stronger among website owners of all kinds. Further enhancing the urgency of responsive design rollouts is the popularity of tablet device that use screens measuring no larger than 10 inches diagonally. In 2013, responsive design will likely overtake all other forms of web design as the preferred way to reach consumers on any type of device, with any screen size.
Creating responsive layouts is a relatively new method of designing sites, and many less-experienced designers might feel a bit intimidated by making the transition. Thankfully, though, there are a few key 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.
1. Creating Images that Resize Themselves As the Site Expands or Shrinks:
One of the first problems that most web 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 n 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 smartphones easily.
Doing this with an image is actually really 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. It looks like the following:
img.responsive {
max-width: 100%;
height: auto;
}
Within that tag, borders and other styling elements can also be defined. The image will shrink or expand along with the size of the screen in use.
2. Remember the Difference Between Min-Width and Max-Width:
In the example above, 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.
3. Use Relative Font Sizes:
Since the earliest days of web design, font sizes have always been specified in terms of pixels. This has resulted in elements like the following appearing in most stylesheets online:
font-size: 12px;
That’s fine in a world that isn’t dominated by smartphones and tablets, but it doesn’t work well with smaller screen sizes. Indeed, a 12-pixel font appears quite a bit differently when the screen size goes below 9 inches. Instead, developers should focus on using relative values to determine the size of the fonts that thy use within their design. It would look something like the following:
font-size: 25%;
This will scale the font along with the screen size, making it easily readable and natural on a device of any size. it’s simply a more natural way to work within the requirements and limitations of a responsive design.
4. Relative Margins and Padding:
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.
5. Curtail Unwieldy URLs in a Page’s Content :
The problem with vey 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. It looks like this:
.wordbreak {
word-wrap: break-word;
}
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.
Easy Ways to Bring a Website into the Responsive Era
With a few simple CSS tricks, it’s really quite easy to make a website more easily scale itself down to meet the needs of smartphones and tablet devices. When paired with a column-based responsive design, these tricks will be the last piece of the puzzle for determined designers.
