How to Build a Responsive Site Layout

Can one or more redundancies be eliminated when screen area is limited?

You seem to be a responsible person. You respond to action items in a timely manner. Is this what you think of when you hear “responsive” layout or website design? Actually, this type of design automatically responds to device dimensions and orientation. In the case of mobile tablets, aspect ratio can change by simply rotating from portrait to landscape mode.

Improving Your Read Time

This website customizes to your interests and devices. Long product description on a large desktop browser window become short comments on a narrow mobile phone. There are many other considerations. Fingers are much larger than a mouse cursor. Should links and buttons be larger? Can space between elements be increased?

Blog articles generally have more text to read than product descriptions. Small text for short descriptions is tolerable. But reading 500 to 3000 words in tiny type is not as comfortable. Half of website visitors are using mobile devices. Can legibility be improved for blog articles?

This type of design automatically responds to device dimensions and orientation.

A list of blog posts may offer redundant methods to access a linked article: Click the photo; click the title; click “Read more.” Should one or more of these redundancies be eliminated when screen area is limited? Can table widths shrink to fit smartphones?

The answer to these questions is, “Yes.” This is the essence of a responsive website layout. Part of our responsive overhaul is auto­matically increasing point size of body copy on small devices and tablet portrait view. The base font on desktop browsers is also larger.

Portrait and Landscape Responsive Tablet Layout

The ClinicalPosters website formatting on a tablet differs from portrait to landscape view. Test this out while viewing this page, the blogs schedule or home­page. The number of featured elements decreases. Depending on screen resolution, a smartphone may collapse to a single-column view. Reducing the number of visible elements on mobile devices speeds up page access. As a further demstration, even paragraphs on this page vanish within narrow screens. Browser versions and operating systems also affect how pages are rendered.

Responsive Layout Tips

Are you trying to figure out how this works as a programmer? There are plenty of resources on the Web but here are a few tips:

  • Specify containers for text and images as percentages rather than specific pixel dimensions as much as possible.
  • Use em space (relative to font height) or percentages of width for padding and margins. An example is: margin: 5%; instead of margin: 50px;
  • Wrap each page element within div tags using CSS classes that specify margin, padding and alignment.
  • Wrap smaller elements within a set of div tags with a class specifying desktop minimum resolution. Below this, rearrange and wrap elements within another set of div tags that establish maximum mobile resolution.
  • The following code will display elements on desktops and most landscape tablets but not portrait tablets or smartphones:
    @media screen and (max-width: 979px) { .tablet { display: none; } }
  • Narrow columns may require hyphena­tion, particu­larly with long words. You can manually add soft hyphens using the ­ entity. A global approach is to use width-activated CSS to enable indiscrimi­nate hyphena­tion. This means as many succes­sive hyphens as required are automatically inserted to fit the desired width.

Basically, when each element is a modular object, you can create different layouts for desktop and mobile browsers. Named objects may be created with many different programming languages like Perl or Shopify’s exclusive Liquid. Visibility of some objects can be controlled inline with CSS classes. Shopify renders lower resolution images on the fly. Using percentages of available width, rather than fixed pixel dimensions for object areas, prevents a 24-inch wide view from having the same 50-pixel margin as a much smaller mobile phone.

So if you notice shorter product descriptions, missing columns from the blog schedule or absent elements on the homepage while rotating your tablet, your eyes are not playing tricks on you. Take a minute to look around. While it has been mobile friendly since the year began, the ClinicalPosters website is responsibly more responsive than it has been in the past.

Related Articles
  1. Advantages of Shopify Backend
  2. Your Medical Specialty Has Value
  3. You’re Doing It Backwards
  4. Simply Log In and Enjoy Benefits
October 24, 2018 by Kevin Williams

Speak your healthy mind