Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionDeveloper Selections For Constructing Versatile Elements — Smashing Journal

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionDeveloper Selections For Constructing Versatile Elements — Smashing Journal

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Resolution

Fast abstract ↬

One of many key expertise of a front-end developer is to have the ability to take designs and switch them into code. These designs are sometimes introduced as static mock-ups, which visualize the “best” expertise of searching the web site.

In the actual 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 a way they entry the websites we construct.

On this article, we’ll stroll via the method of taking a seemingly easy design for a text-and-media element and deciding how finest 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 — reasonably, the elements that may decide our improvement choices. We’ll take into account the questions we have to ask (each ourselves and different stakeholders) at each step.

Altering Our Growth Mindset

We merely can now not design and develop just for “optimum” content material or searching circumstances. As an alternative, we should embrace the inherent flexibility and unpredictability of the net, and construct resilient elements. Static mockups can not cater to each situation, so many design choices 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 take into account your self one!

In my job at WordPress specialist internet company Atomic Smash, we construct web sites for purchasers who want most flexibility from the elements we offer, whereas guaranteeing the positioning nonetheless appears to be like nice, it doesn’t matter what content material they throw at it. Generally decoding a design means asking the designer to additional elaborate on their concepts (and even re-evaluate them). Different instances, it means making design choices on the fly or making suggestions primarily based on our data and expertise. We’ll have a look at among the instances these approaches is likely to be applicable on this case research.

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 proper 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 wish to be taught a brand new talent discover a tutor.

The initial design for the text-and-media component

The preliminary design for the text-and-media element. (Giant preview)

Be aware: If you wish to bounce straight to the code and examine all of the attainable options we alighted on for this element, you’ll find it in this Codepen demo.

Extra after bounce! Proceed studying beneath ↓

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 proper and the textual content column on the left.

Desktop and mobile designs

Desktop and cell designs. (Giant preview)

Within the cell 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 value allowing for that whereas these will reorder the content material visually, it doesn’t change the DOM order. Because of this to a partially-sighted particular person searching the positioning utilizing a screenreader, the order of the content material might 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 illustration, reordering with CSS would possibly make for a complicated expertise. In these instances, we have now another choices obtainable to us. We might:

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

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

Dealing With Totally different Content material Lengths

Within the design, the proportion of textual content content material in comparison with the picture is sort of pleasing. It permits the picture to keep up a really perfect facet 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 will set a personality restrict on the textual content discipline in our chosen CMS (if we’re so inclined), however we must always enable for at the very least some variation in our element. If we add an extended paragraph, the opposing media column might behave in one in all a number of methods:

  1. The picture or video stays on the high, whereas house is added beneath (fig. 1).
  2. The picture or video is centered, including house on the high or backside (fig. 2).
  3. 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 house. This is able to imply some components of the picture could also be clipped (fig. 3).

The image or video remains at the top, while space is added below

Fig. 1. (Giant preview)

The image or video is centered, adding space at the top or bottom

Fig. 2. (Giant preview)

The proportions of the image or video are scaled to match the height, using `object-fit: cover` to prevent distortion and ensure the image fills the available space.

Fig. 3. (Giant preview)

We determined that possibility 3 was probably the most pleasing visually, and that for probably the most half content material authors would be capable of supply applicable pictures the place a small quantity of clipping can be acceptable. However it introduced extra of a problem for video content material, the place there’s extra of a threat that vital components may very well be clipped. We alighted on another choice, which was to create a special variation of the design the place the video would keep its unique facet ratio, and be contained inside a most width as a substitute of aligning to the sting of the web page.

video maintains its original aspect ratio, and it's contained within a maximum width instead of aligning to the edge of the page.

(Giant preview)

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

Moreover, we opted to increase this option to cases the place a picture was used as a substitute of a video. It offers the shopper a greater diversity of format choices with out adversely impacting the design. Seen within the wider web page context it might even be thought of 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 a little bit 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 peak of the element is decided by the textual content content material (fig. 4)? Or ought to we set a minimal facet ratio, in order that the picture doesn’t grow to be letterboxed, or enable the picture to take up its pure, intrinsic peak? 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).

the image where the overall height of the component is determined by the text content

Fig. 4. (Giant preview)

the image where the text is aligned centrally

Fig. 5. (Giant preview)

the image where the text is aligned to the top

Fig. 5a. (Giant preview)

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 strains lengthy, or the content material makes use of a variety of lengthy phrases, leading to textual content wrapping in a different way? This would possibly particularly be an issue in languages reminiscent of German, the place phrases are usually for much longer than English, for instance. Does the scale of the heading font within the design enable for an applicable line size when used on this format? Ought to lengthy phrases be hyphenated after they wrap? This text by Ahmad Shadeed addresses the difficulty of content material size and included some useful suggestions for methods 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 attainable means ensuring that content material authors can omit sure fields and nonetheless have the design look and performance correctly. It appears cheap that the shopper might 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 will be assured our element gained’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. This can assist us keep away from unexpected format bugs.

Testing the component with the body text omitted, and the links omitted, respectively

Testing the element with the physique textual content omitted, and the hyperlinks omitted, respectively. (Giant preview)

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

the scenario where a client chooses to omit the image

(Giant preview)

By indenting the textual content a little bit extra and growing the width of the physique textual content, we are able to preserve it feeling balanced, even when there isn’t a picture.

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

the component where the multiple links layed out side-by-side

Fig. 8. (Giant preview)

the component where the multiple links layed out vertically

Fig. 8a. (Giant preview)

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 decisions (fig. 9a).

the component where the widths of both links are set to the maximum width of the longest

Fig. 9. (Giant preview)

the component where the buttons layed out horizontally

Fig. 9a. (Giant preview)

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

buttons with two different styles which help to differentiate the links

We selected so as to add a secondary hyperlink model, to assist differentiate the hyperlinks. (Giant preview)

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


When the element is used for video reasonably 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 person?

If the video performs on hover, we should take into account how the person of a tool with out hover capabilities accesses the video content material. Alternatively, if the video autoplays, we must always take into account stopping this for customers with a desire for lowered movement, who might undergo from vestibular problems (or would possibly merely want to keep away from jarring animations). We must also present a manner for all customers to cease the video after they want.

Placing It In Context

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

These text-and-media elements are designed for use sparingly, creating an attention grabbing splash of colour and a break from an in any other case linear format. However utilizing WordPress, a content material writer might simply determine to construct a whole web page made up of nothing however these elements. That would find yourself trying reasonably 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 colour. That enables us to interrupt the web page up and make it extra attention-grabbing:

A page made up of different variations of the text-and-media component

A web page made up of various variations of the text-and-media element. (Giant preview)

We might both implement a sample utilizing :nth-child or add a discipline within the CMS to offer the shopper extra inventive management.

Though this was not a part of the unique design, it reveals that an open line of communication between designer and developer can assist create higher outcomes by way of extra versatile and strong designs.

WYSIWYG Textual content Types

When contemplating content material, we have to take into account not simply the size of textual content, however the precise HTML parts that is likely to be permitted within the physique textual content discipline. Content material authors would possibly wish to add a number of paragraphs, anchor hyperlinks, lists, and extra to the physique copy. At Atomic Smash we like to supply a WYSIWYG (What You See Is What You Get) or wealthy textual content discipline for these areas, which might enable for a lot of completely different parts. It’s vital to check with various kinds of content material, and elegance appropriately — together with testing for adequate colour distinction on all background colours used.

the component where the link style in the body text doesn’t pass WCAG guidelines for color contrast

The hyperlink model within the physique textual content doesn’t cross WCAG tips for colour distinction — we’d have to amend the model accordingly. (Giant preview)

Wrapping Up

We’ve touched on many alternative choices concerned with constructing this seemingly easy element. You would possibly even be capable of assume of some others we haven’t coated right here! By contemplating each facet of the design and the way it is likely to be utilized in context, we’ve ended up with one thing much more versatile, which hopefully ought to end in happier purchasers!

Generally, the extra that’s omitted from a design, the extra time and a focus will likely be required from a developer. I’ve put collectively a guidelines beneath of issues to check and query when constructing a element, which you would possibly discover helpful. It could be tailored for various elements too.

With 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 take into account future makes use of, are all expertise that may serve any developer nicely when constructing web sites — and can enable you to present vastly extra correct estimates when required. Good crew communication and a robust collaborative course of are invaluable for constructing resilient websites, however the finish outcome makes it value investing in nurturing this tradition. Let’s bake flexibility into our design and construct processes.

The Guidelines

Issues to check:

  1. Accessibility of format (cell and desktop).
  2. Photographs of various intrinsic facet ratios — are they cropped appropriately?
  3. Longer and shorter physique textual content (together with a number of paragraphs).
  4. Longer and shorter heading (together with varied phrase lengths).
  5. Omitting (variously) the heading, physique textual content, hyperlinks and picture.
  6. A number of hyperlinks (together with completely different lengths of hyperlink textual content).
  7. Accessibility of video content material.
  8. WYSIWYG textual content content material (embody hyperlinks, lists, and so on. in physique textual content).
  9. Take a look at in context — embody a number of elements (with completely different content material choices), in addition to different elements combined into the web page format.
Smashing Editorial
(vf, yk, il)

Supply hyperlink

Leave a Reply