Archive results for: Responsive Design

Preserve Font-size with Landscape orientation

In apple mobile devices, the font-size rescales when the viewport changes to increase readability.

So the font-size will zoom larger from portrait to landscape orientation. To prevent this but to not restrict desktop uses from being able to make the font-size larger (zoom in), you can put this CSS property -webkit-text-size-adjust in a media query:

By setting this property to 100%, you are telling WebKit to disable the automatic behavior, but still allow user-initiated zoom.

PPK Presentation on Mobile Viewports

Peter-Paul Koch(ppk) of gave a very interesting presentation at this years HTML5 Dev Conference about mobile viewports.

CSS Tip: Float example

Using CSS floats is very commonplace for web pages layouts and designs and here is just another example.

I needed a layout for an interior page that would display information in a pseudo calendar format with dates on one side and the event description on the other. I wanted it to be easy to read and would look fine on smaller devices without making any style changes.

So this is what I came up with:


Responsive Retrofit Mobile

Responsive retrofitting has been defined as as finding the fastest and lowest-risk approach to creating a better experience for users of any screen size.

An issue with this is when a site has such complex styles it would be very difficult to undo for smaller layouts. In this type of situation, you may want to serve mobile first styles to viewport widths leading up to the current site’s fixed with resolution.

The goal with this approach is to have zero impact on the original CSS for larger viewport widths, but to use a mobile-first CSS structure leading up to that resolution without having to undo overly complex styles from the original CSS.

We’re using yepnope.js and Modernizr media query test to check if the UA supports media queries (and has JS enabled). Where it does, we serve the responsive CSS. In the cases where it doesn’t, or when we don’t have JS enabled, we serve the original CSS.

Flexible Media

Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container.

This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%:

Viewport Meta Tag

By default mobile devices such as iPhone or Android zoom out on webpages automatically when they are viewed to give the user a more expansive view of the page, meaning everything appears smaller, but also, more pixels are squeezed onto the screen. If your page is optimized for mobile devices or responsive design (via CSS media queries and changing the layout of webpages accordingly), then all of a sudden this “zoom out” behavior only gets in the way. It means that the CSS media queries will match the dimensions of the “zoomed out” device’s, and not its actual size.

So whenever you’re optimizing a webpage for mobile devices or responsive design, the first step is to define the viewport meta (introduced by Apple)  tag to alter/ disable the “zoom in” behavior of mobile browsers, and that’s with:

The above is the device to display the page without any zooming, so how much the device is able to fit on the screen is what’s shown initially.

Within the content=”” you can enter a load of comma delimited values such as width, height, initial-scale, minimum-scale, maximum-scale and  user-scalable, such as:

width: The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-width” to set the viewport to the physical width of the device’s screen.

height: The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-height” to set the viewport to the physical height of the device’s screen.

initial-scale: The initial zoom of the webpage, where a value of 1.0 means no zoom.

minimum-scale:  The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn’t able to at all.

maximum-scale: The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn’t able to at all.

user-scalable: Sets whether the user can zoom in and out of a webpage. Set to yes or no.

To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape, you can add an initial-scale and maximum-scale property and limit both of them to 1:

Adding Breakpoints

A breakpoint is a logical matching of media features that updates the styles of a page. A single breakpoint represents a rule (or set of rules) that determines the point at which the contents of that media query are applied to a page’s layout.

If you think about breakpoints as the points at which your design will break, you are bound to gain a faster grip on what you’re dealing with. With just using device widths for comparison, you might be tempted to consider as many as six breakpoints: 320px, 480px, 600px, 768px, 1024px, and 1280px.

Using just these breakpoints, you’d be able to target a broad range of devices with the current standard widths, in pixels:

320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape
1280px and greater desktop large

With those sizes in mind, your link elements might look more like this:

Choosing your CSS breakpoints can be tricky: too many and maintenance becomes too difficult, but too few leads to poor UI rendering on devices you don’t cater for. At a minimum, you should be looking at two breakpoints: Small, for anything under 480px wide, and everything Bigger.

You need to consider which devices you’re targeting and balance the possible return gained against how your users are accessing your applications.

Page 1 of 212