Developer Selections For Constructing Versatile Elements

No Comments

In the true world, content material usually differs vastly from the neat, completely becoming content material introduced in designs. Added to that, on the trendy internet, customers have an ever-increasing vary of choices for the way they entry the websites we construct.

On this article, we’ll stroll by the method of taking a seemingly easy design for a text-and-media element and deciding how greatest to translate it into code, protecting in thoughts the wants of each customers and content material authors. We’re not going to delve into how to code it — somewhat, the elements that can decide our improvement selections. We’ll contemplate the questions we have to ask (each ourselves and different stakeholders) at each step.

Altering Our Growth Mindset

We merely can not design and develop just for “optimum” content material or looking situations. As a substitute, we should embrace the inherent flexibility and unpredictability of the online, and construct resilient parts. Static mockups can’t cater to each situation, so many design selections fall to builders at construct time. Prefer it or not, if you happen to’re a UI developer, you are a designer — even if you happen to don’t contemplate your self one!

In my job at WordPress specialist internet company Atomic Smash, we construct web sites for shoppers who want most flexibility from the parts we offer, whereas making certain the positioning nonetheless seems nice, it doesn’t matter what content material they throw at it. Generally deciphering a design means asking the designer to additional elaborate on their concepts (and even re-evaluate them). Different occasions, it means making design selections on the fly or making suggestions primarily based on our information and expertise. We’ll take a look at among the occasions these approaches is perhaps applicable on this case examine.

The Design

We begin with a easy design for a text-and-media element — one thing pretty generally seen on product touchdown pages. It consists of a picture or video on the left and a column on the suitable containing a heading, a paragraph of textual content and a call-to-action hyperlink. This design is for a (fictional) startup that helps individuals who need to be taught a brand new talent discover a tutor.

Observe: If you wish to soar straight to the code and consider all of the potential options we alighted on for this element, you could find it in this Codepen demo.

Format And Order

The designer has stipulated that each different element ought to have the format flipped in order that the picture is on the suitable and the textual content column on the left.

Within the cellular format, nevertheless, the picture is stacked above the textual content content material in all instances. Assuming we construct this format utilizing both Grid or flexbox, we might use flex-direction or the order property to reorder the format for each second element:

.text-and-media:nth-child(even) {
flex-direction: row-reverse;

It’s price taking into account that whereas these will reorder the content material visually, it doesn’t change the DOM order. Which means that to a partially-sighted particular person looking the positioning utilizing a screenreader, the order of the content material could not seem logical, leaping from left-to-right to right-to-left.

Talking personally, within the case the place the one content material in one of many columns is a picture, I really feel that utilizing the order property is kind of okay. But when we had two columns of textual content, as an example, reordering with CSS may make for a complicated expertise. In these instances, we now have another choices obtainable to us. We might:

Put ahead our accessibility issues and advocate that for cellular layouts the visible order is modified to match the desktop order.
Use Javascript to reorder the weather within the DOM.

We additionally want to think about whether or not to implement the order by the :nth-child selector or to permit the consumer to manage the order (by including a category to the element, say). The suitability of every possibility will possible rely upon the challenge.

Dealing With Completely different Content material Lengths

Within the design, the proportion of textual content content material in comparison with the picture is kind of pleasing. It permits the picture to keep up a great side ratio. However what ought to occur if the textual content is longer or shorter than what’s introduced? Let’s take care of the previous first.

Longer Content material

We are able to set a personality restrict on the textual content discipline in our chosen CMS (if we’re so inclined), however we should always enable for not less than some variation in our element. If we add an extended paragraph, the opposing media column might behave in one in every of a number of methods:

The picture or video stays on the high, whereas area is added under (fig. 1).
The picture or video is centered, including area on the high or backside (fig. 2).
The proportions of the picture or video are scaled to match the peak, utilizing object-fit: cowl to stop distortion and make sure the picture fills the obtainable area. This might imply some components of the picture could also be clipped (fig. 3).

We determined that possibility 3 was probably the most pleasing visually, and that for probably the most half content material authors would have the ability to supply applicable photographs the place a small quantity of clipping can be acceptable. Nevertheless it introduced extra of a problem for video content material, the place there’s extra of a danger that essential components could possibly be clipped. We alighted on an alternative choice, which was to create a unique variation of the design the place the video would preserve its authentic side ratio, and be contained inside a most width as a substitute of aligning to the sting of the web page.

Content material authors might select this feature when it higher suited their wants.

Moreover, we opted to increase this option to situations the place a picture was used as a substitute of a video. It provides the consumer a greater variety of format choices with out adversely impacting the design. Seen within the wider web page context it might even be thought-about an enchancment, permitting for extra attention-grabbing pages when a number of of those blocks are used on a web page.

Shorter Content material

Coping with much less content material is somewhat easier, however nonetheless presents us with some points. How ought to the picture behave when the textual content content material is shorter? Ought to it grow to be shallower, in order that the general top of the element is set by the textual content content material (fig. 4)? Or ought to we set a minimal side ratio, in order that the picture doesn’t grow to be letterboxed, or enable the picture to take up its pure, intrinsic top? In that case, we even have the consideration of whether or not to align the textual content centrally or to the highest (fig. 5 and 5a).

Heading Size

Let’s not neglect we’ll additionally want to check headings of various lengths. Within the design the headings are quick and snappy, not often wrapping onto a second line. However what if a heading is a number of traces lengthy, or the content material makes use of loads of lengthy phrases, leading to textual content wrapping in another way? This may particularly be an issue in languages resembling German, the place phrases are usually for much longer than English, for instance. Does the dimensions of the heading font within the design enable for an applicable line size when used on this format? Ought to lengthy phrases be hyphenated once they wrap? This text by Ahmad Shadeed addresses the problem of content material size and included some useful ideas for tactics to take care of it in CSS.

Are content material authors permitted to omit a heading altogether the place it fits them? That brings us to the following consideration.

Omitting Content material

Constructing this element as flexibly as potential means ensuring that content material authors can omit sure fields and nonetheless have the design look and performance correctly. It appears cheap that the consumer could want to omit the physique textual content, the hyperlink, and even the heading when utilizing this element within the wild. We have to take care to check with each conceivable mixture of content material, in order that we could be assured our element received’t break underneath stress. It’s good apply to make sure we’re not rendering empty HTML tags when discipline content material isn’t current. It will assist us keep away from unexpected format bugs.

We can prohibit content material authors with “required” fields within the CMS, however maybe we would additionally want to contemplate eventualities the place a consumer may select to omit the picture, or, conversely, with out any of the textual content content material? It is perhaps useful to offer them with these choices. Right here’s an instance of how we would elect to render the element in these instances:

By indenting the textual content somewhat extra and rising the width of the physique textual content, we will maintain it feeling balanced, even when there is no such thing as a picture.

A number of Hyperlinks

Omitting content material is one situation. However at Atomic Smash, we discovered that extra usually, shoppers needed the choice so as to add multiple hyperlink to the element. That presents us with one other selection: the right way to format a number of hyperlinks? Can we lay them out side-by-side (fig. 8), or stack them vertically (fig. 8a)?

How will we take care of hyperlink titles of wildly completely different lengths? A pleasant trick is to set the widths of each hyperlinks to the utmost width of the longest (fig. 9). (This text covers simply that.) That works nicely for vertically stacked buttons, whereas laying them out horizontally presents us with much more selections (fig. 9a).

Do we want a secondary hyperlink model, to distinguish them? These are all questions to think about.

We might also want to think about (within the case of a single hyperlink) whether or not, in truth, the clickable space of the hyperlink ought to embody all the element — so customers can click on wherever on it to activate the hyperlink. That selection may maybe rely upon the broader context. It’s actually widespread in card-based UIs.


When the element is used for video somewhat than a static picture, we would discover that the design omits some key info. How is the video playback managed? On hover? Does it autoplay on scroll? Ought to there be controls seen to the consumer?

If the video performs on hover, we should contemplate how the consumer of a tool with out hover capabilities accesses the video content material. Alternatively, if the video autoplays, we should always contemplate stopping this for customers with a desire for decreased movement, who could endure from vestibular problems (or may merely want to keep away from jarring animations). We also needs to present a method for all customers to cease the video once they want.

Placing It In Context

One subject with focusing so carefully on parts in relation to internet design, is typically we neglect to think about how the parts we construct will seem within the context of the general internet web page. We’ll want to think about the spacing, each between parts of the identical kind and in a web page format the place different parts are interspersed.

These text-and-media parts are designed for use sparingly, creating an attention grabbing splash of shade and a break from an in any other case linear format. However utilizing WordPress, a content material creator might simply determine to construct a whole web page made up of nothing however these parts. That might find yourself trying somewhat uninteresting, and in no way the impact we had been hoping for!

In the course of the construct course of, we determined so as to add an choice to omit the background shade. That permits us to interrupt the web page up and make it extra attention-grabbing:

We might both implement a sample utilizing :nth-child or add a discipline within the CMS to provide the consumer extra artistic management.

Though this was not a part of the unique design, it reveals that an open line of communication between designer and developer will help create higher outcomes when it comes to extra versatile and strong designs.

WYSIWYG Textual content Types

When contemplating content material, we have to contemplate not simply the size of textual content, however the precise HTML components that is perhaps permitted within the physique textual content discipline. Content material authors may need to add a number of paragraphs, anchor hyperlinks, lists, and extra to the physique copy. At Atomic Smash we like to offer a WYSIWYG (What You See Is What You Get) or wealthy textual content discipline for these areas, which may enable for a lot of completely different components. It’s essential to check with several types of content material, and magnificence appropriately — together with testing for enough shade distinction on all background colours used.

Wrapping Up

We’ve touched on many various selections concerned with constructing this seemingly easy element. You may even have the ability to assume of some others we haven’t lined right here! By contemplating each side of the design and the way it is perhaps utilized in context, we’ve ended up with one thing much more versatile, which hopefully ought to end in happier shoppers!

Generally, the extra that’s omitted from a design, the extra time and a spotlight shall be required from a developer. I’ve put collectively a guidelines under of issues to check and query when constructing a element, which you may discover helpful. It could be tailored for various parts too.

Having the ability to look previous the obvious simplicity, break down a element into its constituent components, ask key questions (even earlier than any improvement takes place), and even contemplate future makes use of, are all expertise that can serve any developer nicely when constructing web sites — and can enable you present vastly extra correct estimates when required. Good workforce communication and a robust collaborative course of are invaluable for constructing resilient websites, however the finish consequence makes it price investing in nurturing this tradition. Let’s bake flexibility into our design and construct processes.

The Guidelines

Issues to check:

Accessibility of format (cellular and desktop).
Photographs of various intrinsic side ratios — are they cropped appropriately?
Longer and shorter physique textual content (together with a number of paragraphs).
Longer and shorter heading (together with numerous phrase lengths).
Omitting (variously) the heading, physique textual content, hyperlinks and picture.
A number of hyperlinks (together with completely different lengths of hyperlink textual content).
Accessibility of video content material.
WYSIWYG textual content content material (embody hyperlinks, lists, and so on. in physique textual content).
Check in context — embody a number of parts (with completely different content material choices), in addition to different parts combined into the web page format.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment