Tag Archives: Responsive Web Design

Android, Apple, Web Design

Responsive Web Design – Test if your page is mobile friendly

Leave a comment

There are several tools, you may find, to test if your page is mobile friendly but I think it’s also very important to get a good ranking at Google and maybe not yet but for sure in the future mobile friendliness will also be a big criteria ….

So I recommend using Google’s mobile friendliness test:

www.google.com/webmasters/tools/mobile-friendly

 

Web Design

Responsive Web Design – Use Legible Font Sizes

Leave a comment
  1. Configure the viewport to make sure fonts will be scaled as expected across various devices.
  2. Use a base font size of 16 CSS pixels. Adjust the size as needed based on the font used.
  3. Use sizes relative to the base size to define the typographic scale.
  4. Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
  5. Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
Web Design

Responsive Web Design – Configure the Viewport

Leave a comment

More and more people are surfing the internet by mobile phones, pads, … and of course this devices have different (smaller) screen sizes.

There are some general basics you have to follow to render your site(s) well on this new devices, all of this techniques is often called “Responsive Web Design”.

Let’s start with “Configure the Viewport”:

A viewport setting controls how a page is displayed on a mobile device. Without a viewport specified, mobile devices will render the page at a typical desktop screen width and scale them to fit the real screen width. The setting of “width=device-width” avoids this, the real width is used.

Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute “initial-scale=1″ instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.
Resolution: Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying “width=device-width” and “initial-scale=1”:
 <meta name=viewport content=”width=device-width, initial-scale=1″>
 For more information, see: https://developers.google.com/speed/docs/insights/ConfigureViewport