![]() ![]() Jay Freestone in his article “ Should we still be selling responsive web design?” summarizes the concept in an interesting definition: She also talks about this in the Big Web Show podcast: 176: Intrinsic Web Design with Jen Simmons. Jen Simmons in 2018 in a talk in “ Everything You Know About Web Design Just Changed” at An Event Apart spoke about the term “ Intrinsic Web Design” And I really like the concept. If you are building re-usable components, help your dev team find where those components are re-used in your system by documenting it.įrom “ideal condition” in design tools to the browser They could also be used at 2 different sizes: medium and big. In my case those components could be re-used in a few different places across the interface. Identify where those components can be re-used.Check if they are variations or other contents that could use the same component? For my example, yes we could use the same to display links to contracts and counterparts.Prepare a content model: for my component it’s quite simple, it has a name, an identification number, an icon (and a link).To answer I use another example of one component that we call “link item” in our system. Then the question is “How do we build those robust reusable components?”. How to design reusable components that can adapt to different layouts and containers Used as “Related recipes” slider item on a recipe details page.Used as teasers on season thematic recipes pages.If we take the small version of my recipe teaser, would be re-use it in other places? For example: Once we have decided about how those components might adapt to different screen and browser size, how about we see if we can also re-use those components adaptation in different layouts or container s. Towards Automagic* Ideal Condition Layouts ![]() This will help you understand your users priorities regarding that content, what is important to THEM and not to your HIPPO (highest-paid person in the room’s opinion) stakeholders. So to put is short: to take clever design decisions regarding the content of your components you need to do your user research. Does it go in the checked luggage, directly to the hold? (secondary content that could be hidden on small screens following the principle of progressive disclosure and displayed later on demande).Does it belong to the cabine luggage? (aka important content they need quite often but not as important as hand luggage).Does this content belong to my hand bag under my seat? (aka super important users we need all the time).You get 3 different types of luggage: hand luggage, cabine luggage and checked luggage and you arrange your items in those depending on how important they are for you during this journey. I then explain how to build a content model of our recipe teaser and how to prioritize the content priority using the metaphor of luggages in a plane when you travel. It’s easier to decide those in the browser when the content “breaks” in the component. Secondary breakpoints are used to adapt the design at component level. They trigger major changes in your layout (like the content changing from 1 to 2 column). Your grid and content choreography will define Primary CSS media queries breakpoints. I introduce the concept of primary and secondary breakpoints. My main advice: don’t define your breakpoints on exact device widths that you are looking to target, base them on your layout and content. ![]() And unfortunately, there’s not perfect answer for that. Usually students or people on twitter ask me ““320px? 768px ? 1024px? What breakpoints do you recommend?”. The first part of the talk concentrates on adapting beyond arbitrary mobile screen sizes. I encourage you to also check the slides while going through the transcript (I didn’t want to overload the article with all the images). This talk has a lot of examples and is highly visual. In this article you will find a short transcript, the slides, a video of the talk and some demos and resources. Your developers will thank you (or thank me)! I address here, among other things, the concepts of content model, content priority, information architecture and user journeys to help you design adaptive components. I also try to make sure that my components work beyond the perfect “happy path perfect situation”: what happens with super long text, missing images/content for example? And how about adapting components to user needs across specific points in their journey and build truly adaptive systems? In the talk and article, I show how I design systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different layout and container contexts. I was invited to “Ask the Expert”, an online meetup where experts share their knowledge around different topics related to building the web. Remember that the following content might be outdated. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |