Designing for the Surprising – A Record Aside

While I’m uncertain about the origin of this quote, its impact on me has endured. To create providers for conditions you may not have considered, consider leveraging existing provider infrastructure and collaborating with experts in various fields. Design innovative products that revolutionize the way we consume goods and services, transforming abstract concepts into tangible realities.

Flash, Photoshop, and responsive design

Initially, when I started creating websites, my default design tool was Adobe Photoshop. With a 960-pixel canvas as my foundation, I designed an underlying framework to serve as the backdrop for forthcoming content. The event focused on achieving exacting precision by leveraging mounted widths, mounted heights, and absolute positioning techniques to attain pixel-perfect accuracy.

In 2010, Ethan Marcotte’s keynote address at An Occasion Aside significantly impacted the industry. As soon as I learned about responsive design, I was bombarded with requests to implement it, yet I was also intimidated. My erstwhile pride in meticulously crafted designs, replete with numerical codes, was unjustified.

My initial foray into responsive design didn’t exactly instill confidence in addressing this concern. I revamped my initial challenge to transform a static, fixed-width website into a fully responsive design that adapts seamlessly to various screen sizes and devices. What I found was that attempting to tack on responsiveness at the end of a project only led to exhaustion. To achieve seamless layouts, meticulous planning during the design phase is essential.

A cutting-edge approach to innovation?

Designing responsive websites has always been about overcoming limitations, crafting content that seamlessly adapts to any device. While relying on percentage-based layouts initially proved effective, utilizing native CSS and utility classes helped me achieve my desired design.

.column-span-6 { width: calc(49% / 12); float: left; margin: 0 0.41666667%; } .column-span-4 { width: calc(32% / 12); float: left; margin: 0 0.41666667%; } .column-span-3 { width: calc(24% / 12); float: left; margin: 0 0.41666667%; }

With Sass’s powerful feature set, you can write more maintainable and efficient code by utilizing the @consists-of directive. This allows you to define a reusable block of code and then use it multiple times throughout your project with extra semantic meaning.

.brand {   grid-column: span 6; } .search {   grid-column: span 3; } .social-share {   grid-column: span 3; }

Media queries

The second crucial component of responsive design is the judicious application of media queries. Without the constraints of available space, content might adapt to fill any container, regardless of readability; conversely, the advent of a mobile-first approach led to an opposite issue.

Media queries enabled developers to introduce breakpoints, allowing designs to adapt accordingly. With a background in traditional media, I initially approached responsive design by setting three breakpoints: one for desktop, another for tablets, and a third for mobile devices. Throughout my career, I’ve witnessed a steady growth in demand for phablets, characterized by their expansive screens. 

Over several years, I was fortunate enough to hone my skills in a specific way, continually refining both my design and front-end abilities as a result. One limitation we faced was the need for frequent updates to content, which proved challenging due to the absence of a straightforward mechanism for modifying text without altering the underlying HTML structure—a hurdle that smaller business owners might struggle to overcome. It’s because each row within the grid was encapsulated using div as a wrapper. To effectively incorporate content material into newly developed row markup, one must first establish a foundation in HTML coding principles.

Row markup remains a fundamental component of early responsive design, prevalent in widely employed frameworks such as Bootstrap and Skeleton.

<part class="row">   <div class="column-span-4">1 of seven</div>   <div class="column-span-4">2 of seven</div>   <div class="column-span-4">3 of seven</div> </part> <part class="row">   <div class="column-span-4">4 of seven</div>   <div class="column-span-4">5 of seven</div>   <div class="column-span-4">6 of seven</div> </part> <part class="row">   <div class="column-span-4">7 of seven</div> </part>

As I transitioned from designing websites for small- to medium-sized businesses to larger in-house teams working on a suite of interconnected sites. As I transitioned into these new roles, I found myself working increasingly with reusable components. 

The rigid dependency on media queries led to components anchored to specific viewport dimensions. If the primary goal of element libraries is reuse, this approach may ironically hinder that objective due to the restriction on using elements only if the target units match the exact viewport sizes in the sample library – thus failing to achieve the “unseen” unit objective.

The perpetual conundrum of housing. Here is the revised text in a different style: Media queries empower adaptable design by responding to the viewport’s dimensions. What happens when you place an element within a sidebar, as illustrated below?

Will container queries finally bring order to the chaos of responsive web design, or is this fleeting promise doomed from the start?

Container queries have long been hailed as a game-changer, promising to supersede media queries with more granular control. Yet, at present, they remain unsupported in most popular browsers. While there are JavaScript workarounds available, they introduce dependencies and potential compatibility issues. The core concept behind container queries is that child elements should adapt primarily in response to the size of their parent container, rather than the viewport width, as demonstrated by the following examples?

Container queries revolutionize our ability to craft reusable design patterns by enabling us to pick up and position elements anywhere within a structure, making them infinitely more versatile and effective. This marks a pivotal moment in our transition towards a component-driven approach that seamlessly adapts to diverse measurement scales across various machines.

Responsive components seamlessly adapt to various layout configurations.

Container queries will enable us to transition from designing pages that respond to browser or device measurements to designing elements that can be placed in a sidebar or primary content, and adapt accordingly?

While we’re still leveraging architecture to determine when a design needs to evolve? This method will always be restrictive, since predefined breakpoints are inherently necessary. Given the complexity of responsive design and the need for efficient styling, the question remains: What triggers the change from one set of CSS rules to another when dealing with container queries? 

A standalone element library, detached from its context and actual content matter, may not be the most effective location for that interaction. 

What if we could leverage picture ratios to dynamically adjust designs, rather than being limited to fixed container widths?

It’s often more important that the design reflects the image rather than conforming to a specific container size.

Until robust cross-browser support is established for container queries, it’s challenging to definitively determine their potential for success. Responsive element libraries would revolutionise how we design, significantly enhancing opportunities for reusable and scalable design solutions. Perhaps we will always want to balance these elements to suit our content?

CSS is altering

As the ongoing discussion about containers continues to unfold, significant advancements in CSS have emerged, fundamentally altering our approach to design considerations. Flexible design elements, measured in pixels and complemented by floated components, have given way to more streamlined approaches, a relic of the past alongside traditional table-based layouts. Flexbox and CSS Grid have significantly transformed the way we design layouts on the web. Now we’re capable of manufacturing components that automatically wrap around to a new row when their allotted space is exhausted, rather than waiting for manual adjustments.

.wrapper {   display: grid;   grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));   gap: 10px; }

The display property, when paired with word-break or hyphens, allows us to control the amount of space each column should occupy, thereby giving the browser discretion to wrap columns onto a new line when necessary. Related issues might be addressed through the use of Flexbox, where flexible elements can wrap across multiple rows and dynamically adapt to their container’s dimensions. 

.wrapper {   display: flex;   flex-wrap: wrap;   justify-content: space-between; } .youngster {   flex-basis: 32%;   margin-bottom: 20px; }

Without the need to wrap parts in container rows, this benefit stands out as a significant advantage. Without rows, content material is not tied to webpage markup in a similar way, allowing for the easy removal or addition of content without additional editing.

While significant strides have been made in generating designs that accommodate dynamic content, it’s truly game-changing technology like CSS Subgrid that propels versatility to new heights. 

Designers once spent considerable time crafting seamless interfaces, ensuring a perfectly tailored experience for customers by adding an astonishingly long header almost instantly upon CMS access, much like the example below?

The subgrid feature enables individual parts to adapt to modifications in their content and that of their sibling components, thereby fostering more robust design structures resistant to change.

.wrapper {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   grid-template-rows: auto 1fr auto;   gap: 10px; } .sub-grid {   display: subgrid;   grid-row: span 3; }

CSS Grid allows developers to decouple structure and content, unlocking a wide range of design possibilities? While creating designs with Subgrid allows for flexibility in adapting to morphing content. The subgrid layout mode is currently supported by Firefox alone at the time of writing; however, this code could potentially work when wrapped within an `@supports` query to ensure compatibility with other browsers. 

Intrinsic layouts 

It would be a mistake to overlook the work of Jen Simmons, who designed a timeline showcasing the evolution of CSS layout techniques, from cutting-edge innovations to legacy solutions, as they apply to responsive design for modern homes. 

Responsive designs employ dynamic column structures, leveraging percentage-based measurements to ensure adaptability across varying screen sizes. Intrinsic layouts effectively utilise units to generate flexible columns that won’t excessively shrink, thereby preserving content legibility.

By leveraging both flexible and fixed-width models, intrinsic layouts enable content-driven structuring, allowing elements to naturally arrange themselves based on their inherent characteristics.

What sets intrinsic design apart is its ability to create solutions that simultaneously prepare for future growth while maintaining adaptability, rather than simply designing for specific units or scenarios. Elements and patterns may be adapted for reuse without requiring an exact match in breakpoints or volume of content, akin to its previous iteration. 

Now, we’re empowered to craft designs that dynamically respond to their surroundings – be it a home, its contents, or the context that surrounds them. Using an intrinsic approach, we can construct adaptable components without relying on container queries.

One other 2010 second?

This intrinsic method should revolutionize the industry just as responsive web design did a decade ago. For me, it’s just a few more seconds until all parts are complete. 

Despite its promise, the concept hasn’t yet delivered on its potential for a groundbreaking moment, unlike responsive design’s transformative impact on my career. 

One potential reason for this shift might be that my current role involves working within a large team, which is significantly distinct from the design company setting where I worked in 2010. During my tenure at the company, every fresh initiative presented itself as a blank canvas, inviting me to pursue a novel experience. Tasks often leverage contemporary tools and frameworks, occasionally involving enhancements to existing websites by building upon their current codebases. 

One outcome of this experience could be that I truly feel more prepared to adapt now. As a novice in design in 2010, I initially felt overwhelmed by the significant paradigm shift that demanded intense learning. While an intrinsic method may seem entirely novel, its essence lies in creatively leveraging existing knowledge and CSS properties in a fresh perspective. 

You mustn’t frame your approach around a conceptual weakness.

The sluggish uptake of intrinsic design might also be attributed to the scarcity of rapid-fire frameworks that can facilitate a seamless transition? 

Responsive grid techniques have been ubiquitous for over a decade now. With a reliable framework like Bootstrap or Skeleton, designers gain instant access to a comprehensive and versatile responsive design template.

The integration of intrinsic design and frameworks can be hindered by the presence of a multitude of models, ultimately impeding the development of effective structure templates. One of the most exciting aspects of intrinsic design is bringing together seemingly disparate approaches and innovatively testing methodologies to craft a truly exceptional experience for your audience’s content.

Following these steps are the various design instruments used to create and refine a product’s design. Throughout their professional journey, it’s likely that most individuals will eventually use Photoshop templates to design desktop, tablet, and mobile user interfaces, dropping in layouts to envision how the site or application would appear across all three platforms.

As we navigate through the ever-evolving digital landscape, it’s crucial that our approach stays adaptable and responsive. To achieve this, we must focus on crafting experiences that seamlessly integrate with diverse elements, allowing them to fluidly interact and adapt to various scenarios. The design should occur entirely within the browser, a preference with which I wholeheartedly concur. 

Whether designers should learn to code remains a longstanding debate. When designing a digital product, we must always consider both the optimal and worst-case scenarios regarding content. Creating something exceptional within a graphics-oriented software package requires much effort and skill. As you work with our coding framework, you gain the ability to seamlessly integrate longer sentences, effortlessly expand your list of radio buttons, and intuitively navigate through multiple tabs – all while witnessing real-time adaptations that respond to your design choices. Does it nonetheless work? The current layout may be overly dependent on the existing content, potentially limiting its flexibility and scalability for future updates. Would it be beneficial to consider a more modular structure to ensure long-term adaptability?

Intrinsic design allows me to approach each project with the freedom to create flexible and adaptive designs that seamlessly integrate with their respective houses and contents, without being constrained by predetermined machine or container specifications?

Content material shouldn’t be fixed. To effectively design for unexpected or unpredictable scenarios, it is essential to anticipate potential changes in content and ensure that your system can adapt accordingly, as exemplified by the Subgrid card example, where individual cards were designed to accommodate both their own content modifications and those of adjacent components.

Fortunately, there’s more to CSS than just structure, with numerous properties and values available to help us prioritize content. Subgrids and pseudo-elements, such as :before and :after, facilitate the separation of design from markup, thereby enabling designers to craft layouts that accommodate flexibility and adaptability.

Instead of outdated markup hacks like this—

<p>   <span class="first-line">First line of textual content with totally different styling</span>... </p>

We’re capable of crafting content that’s context-specific, allowing us to effectively target specific locations and demographics.

.ingredient ::first-line {   font-size: 1.4em; } .ingredient ::first-letter {   color: pink; }

The adoption of CSS features such as grid-template-columns, grid-column, and grid-row enables more efficient design construction by leveraging logical dimensions (start and end) rather than physical ones (left and right), a capability also exhibited by CSS Grid.

This flexibility enables us to make directional adjustments that align with the content’s specific needs, a crucial requirement when presenting content across multiple languages. Earlier, this functionality was typically accomplished through Sass mixins, but their limitations often resulted in being able to toggle only between left-to-right and right-to-left orientations.

Directional variables within the Sass model should be thoroughly defined and set for seamless integration.

$path: rtl; $opposite-direction: ltr; $start-direction: proper; $end-direction: left;

These variables can be utilised as values for further manipulation and analysis.

physique($path: $path, $textAlign: $startDirection)

—or as properties.

margin-#{$end-direction}: 10px; padding-#{$start-direction}: 10px;

With native logical properties in place, we’ve eliminated the need for individual Sass devices or pre-planning, allowing for more flexible coding and eliminating the requirement to extensively use variables throughout our codebase? As these properties start to decouple from the constraints of physical space, they introduce greater flexibility for adapting to changes in content and direction.

margin-block-end: 10px; padding-block-start: 10px;

Native start and end values exist for properties such as font-style, enabling us to replace italic with i.

By leveraging these properties, we can create designs that are unencumbered by a single language constraint, instead replicating the content’s needs seamlessly.

Mounted and fluid 

We briefly outlined the facility for combining fixed widths with fluid widths within intrinsic layouts. The two capabilities offer identical functionality, enabling you to define a fixed value alongside multiple options. 

This suggests establishing a floor value and a ceiling value.

.ingredient {   width: math.min('50%', '300px'); }

The ingredients within the determined size can comprise up to 50% of their container’s space, provided that the ingredient’s width does not surpass 300 pixels.

We are capable of setting a flexible maximum value and a fixed minimum value.

.ingredient {   width: Math.max(50%, 300px);

The ingredient can be at most 50% full as long as its width is a minimum of 300 pixels? We’re capable of setting boundaries while empowering content to respond to its surroundings? 

The function builds upon this capability by allowing us to specify a default popularity value through an optional third parameter. Now we’re able to enable the ingredient to dynamically adjust its size, allowing for either shrinking or growth without reaching a point of being rendered unusable.

.ingredient {    width: min(600px, calc(50% + (300px - (50% * 2))))  }

The ingredient’s width can range from 50% to 100% of its container’s width, with a minimum of 300px and a maximum of 600px.

With this approach, we’ve successfully transitioned to a content-driven methodology for responsive design. Because we can isolate content from markup, any changes made by users won’t compromise the layout. By anticipating unexpected changes in language or direction, we can effectively future-proof our designs. By specifying preferred dimensions and offering adaptable alternatives, we can effectively enable the display of diverse content with precision.

By acknowledging the progress made so far, we can effectively mitigate machine flexibility concerns by adapting our approach, focusing on content and layout design rather than rigidly adhering to unit-based templates. However, when it comes to designing for accessibility, consider the unforeseen conditions you haven’t imagined.

Designing for someone sitting at a desktop laptop versus someone using a mobile device while navigating a busy street on a sunny day is fundamentally distinct. As conditions and environments constantly shift due to diverse individual reactions to unique challenges and responsibilities?

The judiciousness of selection is indeed paramount. To ensure consistency and inclusivity, we must develop flexible solutions that cater to a range of possibilities, thereby providing an identical experience for every customer.

Fortunately, there are many options available to provide choices.

Accountable design 

“In many parts of the world, access to cellular data is prohibitively expensive, and in some areas, there’s virtually no broadband infrastructure.”

“”

Chris Ashton

We often assume that users engaging with our designs are consistently connected to a robust WiFi network and equipped with a spacious, high-definition display screen. In reality, our customers might also include commuters using trains or other forms of transportation equipped with smaller mobile devices prone to experiencing drops in connectivity as they travel? When encountering an unresponsive online webpage, frustration sets in – but there are ways to help users conserve data or cope with intermittent connectivity issues.

The srcset attribute enables browsers to choose the most suitable image for rendering, offering flexibility in serving pictures. We’re able to craft compact ‘cropped’ images that efficiently display on mobile devices through reduced bandwidth and data usage.

<img    src="https://alistapart.com/article/designing-for-the-unexpected/image-file.jpg"   srcset="https://alistapart.com/massive.jpg 1024w,              https://alistapart.com/medium.jpg 640w,              https://alistapart.com/small.jpg 320w"      alt="Picture alt textual content" />

The attribute may also help us consider how and when media is downloaded? The HTTP Header directive prioritizes critical asset downloads, thereby streamlining user experience and bolstering overall efficiency? 

<hyperlink rel="stylesheet" href="https://alistapart.com/article/designing-for-the-unexpected/model.css"> <!--Commonplace stylesheet markup--> <hyperlink rel="preload" href="https://alistapart.com/article/designing-for-the-unexpected/model.css" as="model"> <!--Preload stylesheet markup-->

Native assets signify properties that should only be loaded when needed.

<img src="https://alistapart.com/article/designing-for-the-unexpected/picture.png" loading="lazy" alt="…">

With the integration of , , and lazy loading, we can effectively customize a customer’s experience according to their unique situation. Without providing users with a clear indication of which files are required, this setup hinders their ability to make informed decisions about what should be downloaded, ultimately leaving the choice in the hands of the browser itself. 

Can we empower customers to take a seat at the decision-making table and join the conversation?

The return of media queries 

Media queries have always been about far more than just screen sizes. Content adapts seamlessly to diverse environments, with display size being just one of the many conditions they accommodate.

For years, we’ve had the ability to analyze various forms of media such as print and speech, as well as options like hover, click, and color. These checks allow us to provide options that suit various scenarios; it’s no longer just about a one-size-fits-all approach, but rather about delivering flexible content that adapts to different circumstances. 

As of this writing, however, significant improvements remain to be made underneath. This innovative approach poses thought-provoking questions that ultimately enable us to prepare for an array of unforeseen circumstances.

There exists a light-level function that enables users to adjust the intensity of a product depending on whether a customer is operating it during daytime or nighttime conditions. With these tools, we can quickly generate designs or themes tailored to specific settings.

@media (light-level: regular), screen and (light-level: regular) {   --background-color: #fff;   --text-color: #0b0c0c; } @media (light-level: dim), screen and (light-level: dim) {   --background-color: #efd226;   --text-color: #0b0c0c; }

The spec’s ability to personalize content for individual users is another crucial aspect. Customers have the freedom to personalize their choices by selecting options that cater to their unique preferences. This enhanced versatility is achieved through the strategic deployment of features such as HTML, CSS, and JavaScript, with the latter two boasting comprehensive browser support. Individuals’ browsing experiences are tailored by their operating system and browser settings, allowing them to access websites more easily without needing to configure each one separately. 

Media queries allow for granular control beyond traditional browser choices, empowering users with enhanced customization options.

Count on the surprising

As time unfolds, it’s crucial to remain prepared for unforeseen changes in circumstances. Advances in gadgets tend to outpace our ability to adapt, as evidenced by the emergence of foldable screens now readily available on the market.

While we cannot maintain our current approach in this rapidly evolving landscape, we can instead focus on designing for content that adapts seamlessly to these changes. By prioritizing content-driven design, we enable materials to seamlessly integrate into any setting, resulting in more resilient, adaptable products that enhance their lifespan. 

Many of the CSS discussions revolve around abandoning traditional layout approaches to prioritize content-driven design principles.

Beyond traditional responsive design, we’re empowered to create innovative solutions by leveraging mounted and fluid models, allowing us to adopt an even more intuitive approach. As we elevate our approach, we’re empowered to scrutinize these methodologies during the design phase by crafting in-browser and observing how our designs evolve in real-time.

To ensure seamless experiences, we strive to guarantee our products remain functional regardless of the unexpected situations, at any moment, in any location. By engaging customers in our design decisions, we can effectively bridge the gap towards achieving this goal through participatory processes, intuitive browser selections, and empowering users with personalized media queries that prioritize their preferences. 

Effective design should empower transformation, offer choices, and furnish leadership to those we serve – our customers themselves.