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

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

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

Fast abstract ↬

One of many key abilities 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 “preferrred” expertise of looking 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 fashionable internet, customers have an ever-increasing vary of choices for a way they entry the websites we construct.

On this article, we’ll stroll by way of the method of taking a seemingly easy design for a text-and-media part and deciding how finest to translate it into code, holding in thoughts the wants of each customers and content material authors. We’re not going to delve into how to code it — moderately, the elements that may decide our growth selections. We’ll think about the questions we have to ask (each ourselves and different stakeholders) at each step.

Altering Our Improvement 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 not cater to each state of affairs, so many design selections fall to builders at construct time. Prefer it or not, in case you’re a UI developer, you are a designer — even in case you don’t think about 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 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 based mostly on our information and expertise. We’ll have a look at a number of the occasions these approaches could be applicable on this case research.

The Design

We begin with a easy design for a text-and-media part — 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 need to study a brand new ability discover a tutor.

The initial design for the text-and-media component

The preliminary design for the text-and-media part. (Massive preview)

Word: If you wish to bounce straight to the code and examine all of the attainable options we alighted on for this part, yow will discover it in this Codepen demo.

Extra after bounce! Proceed studying beneath ↓

Structure And Order

The designer has stipulated that each different part ought to have the structure flipped in order that the picture is on the proper and the textual content column on the left.

Desktop and mobile designs

Desktop and cellular designs. (Massive preview)

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

.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 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 would possibly make for a complicated expertise. In these circumstances, we’ve got another choices out there to us. We may:

  1. Put ahead our accessibility considerations and suggest that for cellular 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 contemplate whether or not to implement the order by way of the :nth-child selector or to permit the consumer to regulate the order (by including a category to the part, say). The suitability of every possibility will possible rely upon the venture.

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 take care of an excellent 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 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 a minimum of some variation in our part. If we add an extended paragraph, the opposing media column may behave in one among a number of methods:

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

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

Fig. 1. (Massive preview)

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

Fig. 2. (Massive 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. (Massive preview)

We determined that possibility 3 was essentially the most pleasing visually, and that for essentially the most half content material authors would be capable to supply applicable photographs the place a small quantity of clipping could be acceptable. But it surely introduced extra of a problem for video content material, the place there’s extra of a danger that essential elements could possibly be clipped. We alighted on another choice, which was to create a unique variation of the design the place the video would keep its unique side ratio, and be contained inside a most width as an alternative 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.

(Massive preview)

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

Moreover, we opted to increase this option to situations the place a picture was used as an alternative of a video. It provides the consumer a greater variety of structure choices with out adversely impacting the design. Seen within the wider web page context it may 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 less complicated, 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 part is decided 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).

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

Fig. 4. (Massive preview)

the image where the text is aligned centrally

Fig. 5. (Massive preview)

the image where the text is aligned to the top

Fig. 5a. (Massive preview)

Heading Size

Let’s not neglect we’ll additionally want to check headings of various lengths. Within the design the headings are brief and snappy, hardly ever 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 otherwise? This would possibly particularly be an issue in languages reminiscent of German, the place phrases are typically 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 structure? Ought to lengthy phrases be hyphenated once they wrap? This text by Ahmad Shadeed addresses the difficulty of content material size and included some helpful ideas 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 subsequent consideration.

Omitting Content material

Constructing this part 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 affordable that the consumer could want to omit the physique textual content, the hyperlink, and even the heading when utilizing this part 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 part received’t break below stress. It’s good observe to make sure we’re not rendering empty HTML tags when discipline content material isn’t current. This may assist us keep away from unexpected structure bugs.

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

Testing the part with the physique textual content omitted, and the hyperlinks omitted, respectively. (Massive preview)

We can limit content material authors with “required” fields within the CMS, however maybe we’d additionally want to think about eventualities the place a consumer would possibly select to omit the picture, or, conversely, with out any of the textual content content material? It could be useful to offer them with these choices. Right here’s an instance of how we’d elect to render the part in these circumstances:

the scenario where a client chooses to omit the image

(Massive preview)

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

Omitting content material is one state of affairs. However at Atomic Smash, we discovered that extra usually, purchasers needed the choice so as to add a couple of hyperlink to the part. That presents us with one other alternative: structure 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. (Massive preview)

the component where the multiple links layed out vertically

Fig. 8a. (Massive preview)

How can we take care of hyperlink titles of wildly totally 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 effectively for vertically stacked buttons, whereas laying them out horizontally presents us with much more selections (fig. 9a).

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

Fig. 9. (Massive preview)

the component where the buttons layed out horizontally

Fig. 9a. (Massive preview)

Do we want a secondary hyperlink fashion, to distinguish them? These are all questions to contemplate.

buttons with two different styles which help to differentiate the links

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

We might also want to contemplate (within the case of a single hyperlink) whether or not, in reality, the clickable space of the hyperlink ought to embody your complete part — so customers can click on wherever on it to activate the hyperlink. That alternative would possibly maybe rely upon the broader context. It’s definitely widespread in card-based UIs.


When the part is used for video moderately than a static picture, we’d 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 think about how the consumer of a tool with out hover capabilities accesses the video content material. Alternatively, if the video autoplays, we must always think about stopping this for customers with a choice for decreased movement, who could undergo from vestibular problems (or would possibly merely want to keep away from jarring animations). We must also present a means for all customers to cease the video once they want.

Placing It In Context

One difficulty with focusing so carefully on parts relating to internet design, is usually we neglect to contemplate how the parts we construct will seem within the context of the general internet web page. We’ll want to contemplate the spacing, each between parts of the identical sort and in a web page structure the place different parts are interspersed.

These text-and-media parts are designed for use sparingly, creating an eye catching splash of colour and a break from an in any other case linear structure. However utilizing WordPress, a content material creator may simply determine to construct a complete web page made up of nothing however these parts. That might find yourself trying moderately boring, and in no way the impact we have been hoping for!

Through the construct course of, we determined so as to add an choice to omit the background colour. That permits 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 part. (Massive preview)

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

Though this was not a part of the unique design, it exhibits that an open line of communication between designer and developer may help create higher outcomes by way of extra versatile and sturdy designs.

WYSIWYG Textual content Kinds

When contemplating content material, we have to think about not simply the size of textual content, however the precise HTML parts that could be permitted within the physique textual content discipline. Content material authors would possibly 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 might enable for a lot of totally different parts. It’s essential to check with several types 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 fashion within the physique textual content doesn’t cross WCAG pointers for colour distinction — we’d must amend the fashion accordingly. (Massive preview)

Wrapping Up

We’ve touched on many various selections concerned with constructing this seemingly easy part. You would possibly even be capable to suppose of some others we haven’t coated right here! By contemplating each side of the design and the way it could be utilized in context, we’ve ended up with one thing way 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 part, which you would possibly discover helpful. It could be tailored for various parts too.

With the ability to look previous the obvious simplicity, break down a part into its constituent elements, ask key questions (even earlier than any growth takes place), and even think about future makes use of, are all abilities that may serve any developer effectively when constructing web sites — and can enable you present vastly extra correct estimates when required. Good group communication and a powerful collaborative course of are invaluable for constructing resilient websites, however the finish consequence 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 structure (cellular and desktop).
  2. Photographs of various intrinsic side 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 numerous phrase lengths).
  5. Omitting (variously) the heading, physique textual content, hyperlinks and picture.
  6. A number of hyperlinks (together with totally different lengths of hyperlink textual content).
  7. Accessibility of video content material.
  8. WYSIWYG textual content content material (embrace hyperlinks, lists, and so on. in physique textual content).
  9. Check in context — embrace a number of parts (with totally different content material choices), in addition to different parts combined into the web page structure.
Smashing Editorial
(vf, yk, il)

Supply hyperlink

Leave a Reply