Left Rail, Right? How RWD or RESS impact CMS terminology.

My last few clients have projects that include Responsive Web Design (RWD), often with Server-Side Components (RESS).

Their websites will either feature the same HTML markup which behaves differently based on browser size or if using SDL Mobile or similar technology, the websites might also present different markup or prioritize content differently based on the visitor's device.

It might be too early to tell, but I suspect the focus of the RESS side of mobile devices will be on images. For example SDL's Contextual Image Delivery will transform, deliver, and cache images upon request based on the visitor's context.

From Positions to Priority

However, even in "Mobile First" projects, I still see "left" and "right" column fields or a "left template" in some setups.


Other website behavior changes based on browser size or device type include:

• "Top" navigation goes on the bottom sometimes.
• "Left" navigation also moving or hiding
• "Right-rail" contents move "inline" or below the list of contents
• Sometimes content or lists in "columns" read across the columns instead of top-down,

I'm not sure this will change soon, but more meaningful, device-agnostic terms might be based on priority. You might use terms such as:

• Ordinal positions like first and second
• Primary and secondary
• Aside (which is even an element in HTML 5)
• Numbers, though I'm not partial to things like "Column 1" vs. "Column 2"

I started this discussion on Facebook, which my BSMSO responded to with: "Excuse me! Excuuuuuse me! Your work is showing on this fun social media platform!"

Dominic Cronin also pointed out an example he's seen for an orange button that is now blue. Maybe the correct term should be The Formerly-Orange Button. ;-)

Image Ratios

In terms of images, I've been looking for words for "desktop" and "mobile" images that aren't simply "desktop" and "mobile." I have a strong suspicion these device-specific terms will be outdated in a few years.

The requirement is:
"As an editor, I will upload a(n) _______ image for visitors viewing the desktop view of the webpage."

Desktop images are wider than the squarish tablet and mobile images. So maybe this are:

• Big and small images?
• Wide and not-so-wide images?
• 1x1 vs 2x1?
• Or maybe borrowing from media queries like Handheld, Screen, or TV?

Is it premature to worry about bigger-than-big with higher resolutions for kiosk or high-resolution imagery (e.g. Retina displays)? Or smaller-than-small for watches and wearables?

Have you ever ordered a small coffee to hear:
"Sorry, we only have medium and large."

Dominic Cronin chimed in on this question with the general way to measure displays includes the orientation and diagonal such as: 4 inch portrait or 10 inch landscape where size and format relate more to devices than pixels.

So we have terms that hint at image ratio:

• Panoramic
• Wide
• Square
• Tall

You might also choose from picture- or orientation-related terms:

• Portrait (4-inch)
• Landscape (10-inch)

To keep it device-agnotics, simple, and familiar for at least one client I'm suggesting the following descriptions for a "contextual image set" of fields.

• High resolutions
• Close-up (Mobile) image (choosing an image overrides auto-cropping)

By default, the website should auto-crop and resize the high resolution image. Editors are free to manually upload and choose a different image for the tablet and mobile variations.

http://www.tridiondeveloper.com/custom-url-coordinate-picker