MGLS #29 Responsive Web Design: The Next Decade (4/4) – Ethan Marcotte

i’m here to talk to you today about accept network layouts next decade now finally we come to the end with media queries now media queries if you’re not already familiar is allow us to adapt our flexible schemes across different breakpoints so let’s actually apply a few cases of them to different parts of our viewport design let’s begins with our word module which we had a little bit of fun with creating a 12 tower grid for widescreen layouts but let’s actually divest apart all that grid intelligence by default and merely stack information on smaller screens but then as screens get a little bit wider and around a breakpoint of let’s say 30 m’s we can then introduce a flexbox driven layout to have the likenes and caption appear in a left right axis and then as screens get a little bit wider still we can make it even more complex and innovate another breakpoint at 50 amps we can then move to our grid located layout and start leveraging that 12 line grid and let’s say generate a two modernize by simply having those grid parts span six lines and automatically flowing into the grid from there and then finally formerly we reach our widest breakpoint at a minimum thicknes of 60 m’s in the viewport we can then complete the effects and move to our final finished four article layout this is how media queries can basically layer intricacy on a flexible layout as it gets wider and wider over era another example of this is very likely be the introductory module that were presented at the extremely top of the home page where we talk about the very latest story published in the store now by default we’re basically just sort of stacking the epitome on top of the teaser summing-up that appears underneath it and using grid to sort of slightly offset them inside of their 12 tower container but then as as the design gets a little bit wider still we can then introduce a little bit more complexity at around a fragment object of 50 m’ s we can mostly interpose two sequences to our grid two sequences that are basically be calculated by grid template sequences 7vw and auto again seven percent of the width of the viewport and then auto mostly to replenish the remaining space so on wider viewports above our breakpoint of 50 amps we move into our two article layout that’s true but the artwork itself can now span two columns and the fibs imitate is placed in the second row down and to the left now i want to be very clear media queries are great i could not do my job without them and what’s more they seem to keep getting better there are all sorts of new boasts that have been introduced into media queries in recent years for example in the media query level 4 specification there’s a nice little ergonomic increase for those of us who write a lot of media inquiries so rather than spelling out solution scopes in tons of detail like min thicknes 30 ms and max with 50 ms we’re now able to collapse them down into something simpler to read so the new spec basically accepts an easy read single range instead now there’s a reasonable support for this in modern browsers but not so great in older ones so you want to be very careful about testing kind of these newer sayings but i’m really excited about them because they basically allow us to write even simple inquiries is a much shorter and much clearer expression so rather than min width 50 ms we can simply say that the extent of this compas were higher than or equal to 50 m’s they’re also opening us the ability to detect what various kinds of devices a customer might be using to interact with our motifs for example seeing poise capability so can they hover all over aspects on the sheet with their pointing invention so as more touch machines get external indications like a bluetooth mouse or trackpad connected to your ipad these kinds of context aware inquiries can be very unusually helpful so for example here i could maybe only use a hover initiated drop down menu on maneuvers that can in fact use the hover affordance if you’d like to learn more i would strongly recommend checking out the media queries elevation 4 specification and learning about some of the ways in which these features can be used in your responsive patterns today so yeah i mean media queries are great and they’re getting better but it’s worth noting too that there’s been a lot of discussion lately about relying less on media inquiries uh here’s a really wonderful essay that was written recently by eunuch kravitz at google in which she basically breaks down 10 modern layouts you can create in one line of css now this is a really fantastic article i was only absolutely recommend checking it out because force basically leverages some of these newer representations like flexbox and css grid to very quickly generate responsive layouts without applying media inquiries this one layout that she talks about this deconstructed flannel-cake is genuinely elegant and it drives because the flexbox property has its flexbox flex fold quality set to well wrap and that would enable us children to wrap onto several rows if they need be and they wrap because each element inside the flexbox has a flex basis property set in other words to 150 pixels so in other words the entire layout will wrap automatically thanks to some of these elements of flexbox working together so it stacks nicely on smaller screens but then automatically interposes multiple rows as there’s sufficient room to do so and again all without media queries now andy buzzer composed something very similar but he did it with css grid for sort of macro level organizations and this is a really impelling venture that he’s come up with now what he’s done here is he’s defined a grid container and rather than specifying a laid number of pieces he’s actually used the automobile replenish pillar to mostly have the grid items sort of fill the cavity intelligently as quickly as possible and he’s also defining the extents of those articles use the min max part which we’ve talked about before this allows him to basically define those upper and lower extents for the pillars now now he’s setting a prepared minimum thicknes of 16 rems but then allowing the lines to replenish the remaining space as much as there is an opportunity thanks to the one fr division that he gave as the upper borderline now the reason the number of lines alternates is due in part to that autofill debate he use in the reiterate function in other words he’s given their pillars sensible but adaptable frontiers and then told them to automatically crowd the available space as intelligently as there is an opportunity one accept organization zero media inquiries now these are wonderful resources and i think this discussion around moving away from media queries is improbably strong but at least for me this kind of reinforces the fact that we don’t have to avoid media inquiries they’re still incredibly useful tools and in fact i would suggest we can’t structure accept designings without them but thanks to flexbox and thanks to css grid we don’t have to default to media inquiries for every single part of our accept intends in fact these newer implements can help us build more responsiveness into every one of the purposes of our organizations here’s a unusually very simple example from the viewport’s homepage which is sort of semi-inspired by the work that yuna was doing in her essay now we’ve form our masthead neighborhood into a flexbox receptacle as we identified at the very beginning of this talk and told it to space out its components thanks that justify content owned but it’s the flex wrap quality that controls the layout on smaller screens remember that asset allows the flexbox child constituents to wrap onto numerou wires if they need to and thanks to the flex shrink and flex basis properties our symbol effectively has a minimum width of 145 pixels that represents it won’t get any smaller than that as a result if the mass head’s materials don’t have enough office to be laid out horizontally on the same line they’ll simply stack on top of each other and all this without media queries now what’s more it’s not just about layout we can actually practice accept type designate as well by moving a little bit more further away from media queries for example a traditional approaching to typesetting with media inquiries is necessary to mostly have breakpoints are described in those media queries and then bump up the font sizes for certain elements as you progress those areas one simple example of this would basically be on the cover story module and if you turn your attention to the issue number that’s anchored in the bottom right you’ll notice that as it makes particular breakpoints like that 20 m interrupt level or that 60 m crack extent then there’s a noticeable jump it’s font size as it gets wider or narrower so this is a perfectly fine approach and for tiny points like this i would say this is probably the most appropriate way to set an element’s font size like that but if you’ll turn your attention just for a moment to the headline that appears inside the cover story you’ll notice that it’s scaling in a much smoother way there’s no similar mount but it’s also scaling along with the size of the viewport as the browser opening get wider the type size goes bigger as it gets narrower the type size does smaller so this is because we’re actually applying the viewport group specifically vw to set the font length itself we’re articulating that the typeface size should be roughly equal to five percent of the viewport’s width that guarantee the characteristics and its viewport will always scale in concert in other words type size with viewport units such as vw or vh will scale as our viewports do now you may find if you experiment with this that very quickly type sizings can get too small or too wide and this is fine i mean you can interpose media inquiries to organize some of this but there’s also a really wonderful function called clamp that can introduce some boundaries to our sort sizing so for example what i like to do in a lot of my responsive designings is set a default font size of 100 on the body that is there in case browsers don’t understand the clamp function but for those that do basically i can characterize the font length as i’d like it to scale and here i’m mostly giving it to one percent of the viewport’s width but likewise supplementing in a little bit of a ram to ensure that there’s a usable baseline there but then i can also specify minimum and maximum values so basically the franchise should scale as much as it wants to but it’s never going to get smaller than one rem or wider than 1.35 boundaries you can actually see this effect on my personal homepage so as the browser space resizes itself and i’ll note that the effect is fairly subtle but if you look at the body copy you’ll notice that it’s actually scaling together with the viewport the headline squanders a moderately traditional typesetting technique and movements in font sizing across specific breakpoints but most of the content is actually scaling along with the viewport thanks to viewport groups now media queries are still incredibly powerful and i would still argue that they’re in a key ingredient of responsive design but as we’ve seen we have so many more tools that can add responsiveness to our designs so that’s why i think it’s a perfectly natural time to start looking ahead to think about what else might be out there on the horizon but as we do i’d like to really reminded the committee for a few moments that responsive design is actually mentioned after accept architecture and this is a field of study and design that’s really caused me over the years back when i wrote the original essay i started finding all these really wonderful experiments about responsive building about designers who were re-examining this idea of deposited and flexible spaces so for example designers who might come up with a new responsive flesh of a wall a surface area that could bend and flex in an enticing skill installation but which likewise had sensors embedded in it that could bend and flex as somebody sauntered up to it or fucking walked so you might imagine a apartment built with this surface that could bend and flex its shape depending on the size of the crowd that occupied it or it might be something as striking as an entire build quite literally reshaping itself to be more responsive to the needs of the people who walk through it or saunter underneath it providing them with more shelter from the elements or even really changing its shape as the sunshine comes higher or lower in the horizon now the reason i loved responsive structure is because it presented itself as a kind of conversation between a space and the people who occupied and i think that’s a wonderful analogy for accept intend as we’re trying to practice it on the web today but as we’re looking to all the complexity that we’re trying to deal with i think of another term from design one called shearing seams which was coined by an author called stuart firebrand in his wonderful book how constructs learn and in it he’s mostly talking about the different paces of change at which a construct ages and he basically undermines it down to a number of blankets right that by default a house has to sit on a site this is the geographical setting the legally defined heap this launches the boundaries for the building and it’s incredibly static and it’s also incredibly expensive to change and then you have the structure which is really the foundation the quantity giving ingredients i necessitate this is actually the building this is also expensive and difficult to change but then you have progressively easier things to change other kinds of seams moving from the surface the exterior face of the building all the way down to the space plane of the building and then finally you have the stuff the everyday ephemera the chairs the desks the lamps the toothbrushes that vary on a monthly weekly daily basis so holding all these different charges of change in your leader can be tiring but the route in which stuart branson talked about this relationship is he boiled him down into one simple principle the sluggish holds quick slow self-restraints quick so as we’re thinking about the next 10 years of responsive design i think it’s worth asking ourselves what is our slow layer i mean historically speaking before accept design it might have been the sheet right that we’d create a canvas in something like photoshop or illustrator we’d define a grid and then we’d fill that sheet with material but as we’ve been conceive across more and more machines and browsers and choosing accept intend as it moves further into the mainstream our page schemes are maybe some of the most wonderful beds out there that the most susceptible to change in adaptation and it’s also worth noting extremely as we’ve seen in this talk that the front end tools we use to build them are incredibly fast more so yes we’re employ technologies like flexbox and css grid and they’re incredibly powerful but it’s worth remembering that those will too change in time so that’s why we really need to invest in content which is our true slow layer on the web and that’s why i’ve been so heartened about the fact that our industry has been cuddling more modular more pattern force design practices and thinking not in areas of sheets but looking at the individual patches of our scheme the content they contain and thinking about those modules as little responsive organizations themselves so i completely agree it’s perfectly natural and i would argue healthy to ask ourselves what’s next what’s next on the horizon but we also need to adopt a longer term view because as i’ve said these tools and technologies will obstruct converting and they’re going to change particularly very quickly so rather than focusing on expressions like portable or desktop and carolling your motifs to meet their needs focus instead on your individual bits of the information contained and focus on their needs how they need to change or adapt across different fragment stations that more than anything is going to ensure that your accept designings are prepared for today’s challenges as well as for tomorrow’s and with that i would like to thank you all very much for your time[ Music] you

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts