Designing for A Viewport

[@mdaverde]

Even 4 years later, this was incredibly useful. Thanks!

[@Akshatgiri]

This has quickly become one of my favorite channels.

[@dannybrown317]

well i just found this 3 years later.

[@BrandonWalowitz]

This has quickly (less than 10 hours) become my favorite series on youtube.

[@pebre79]

Pizza is deeply meaningful and always deserves a close push!

[@FlorentinoFernandezVidal]

Just a few words of gratitude for sharing your brilliant work and sharp perspective with all of us. I have no doubt that all of these videos of yours will become more and more popular over time. Thank you very much.

[@RobisHaTa]

Im self taught programmer from London and She explains everything in such detail is luxury to know this channel

[@Luxcium]

At first I tought of Jen as an artist 👩‍🎨 but truly she is a researcher and the question she asks herself and then the answers that come out are pure magic :-) tanks for you insight

[@fgfg633]

I love how passionate and full of wonder she is about her work. That's awesome.

[@smoothbeak]

I love these discussions, very stimulating and creative - we need so much more of this

[@thebibleproof]

It took me a long time to find a good explainer of this important subject, and that's you. We have rapidly evolved on device technology, with web designers using quick fixes to resize elements, even though they don't appeal to, or bring results for clients. I have always been very dissatisfied with what web designers served up to me as their so-called "mobile responsive" experience. So now we find ourselves scrolling forever and losing interest in signing up or buying, with every interminable swipe. I just can't understand why web site owners aren't screaming for a better mobile experience on these horribly morphed web sites. Then I finally worked it out, it's the viewport, stupid. So I googled "designing for viewport" and you are the #1 video. Thanks for your clear explanation Jen. You have my attention, subscription and notification...

[@pauldudley1273]

Thank you so much for making content like this.. It's so nice to have someone with your level of experience to so deep into these kinds of thoughts. I think it will bring out some better quality stuff from devs and designers that come across this

[@CodingAfterThirty]

Just found your channel. I absolutely love it. Thank you.

[@RC-bl2pm]

Smart lady is smart. The more I watch of this channel the more I like it.

[@hihiexperience]

It's such a relief to find another passionate front-end developer that understands the finer nuances of HTML and CSS. Very few people appreciate/enjoy the artistry of a well crafted layout, using only what is required. I blame the full-stack/generalist movement for the reliance on frameworks. We end up with skillsets that are "adequate" on the front-end of the spectrum and necessitate the crutch of a framework. Generally, someone is brought in to triage a small section, disregarding the impact to elements with shared styles and the ecosystem's behaviors (i.e. in different viewports)... Best advice in this video is to PLAY, PLAY, PLAY! :D Looks like I posted this to the wrong video, haha. Should have been CSS Grid. Anyway, keep up the good work! Dig it.

[@zaboogoosfraba6699]

As always wonderful

[@ozzyfromspace]

Who is this absolutely amazing woman????

[@UteBescht]

I am a bit upset that I have just NOW spotted your channel - which gives no other opportunity to me than to subscribe. I love your way of exploring web-based design from all other angles like film-making: a perspective so crystal clear to consider in designing. I am happy to have found this! Thank you!🙌😀

[@nikoma_]

You are one of my top fave coding and design channels ✅

[@nelsonjimenez7939]

You are very passionate and very articulate as well. I love your videos. I love listening to you.

[@techtipsuk]

Adobe XD has a neat feature that lets you view through what would be the viewport, very useful when previewing the design.

[@catwhisperer911]

There are browser plugins/extensions that take screen shots of the whole page, not just what's currently displayed in the viewpoint. It's a useful tool but I'd like them even more if they had the ability to transpose a full page using multiple viewport orientations and sizes in batch and save those to a single .png file. As always, your videos inspire me. Thank you.

[@GabrielleIskandar]

Jeff Schwartz Firefox now has it built in, along with the ability to download the image locally or save it to your online stash, and to take a shot of individual elements, parents, or the whole page. It's super!

[@GabrielleIskandar]

I'm absolutely loving this video Jen, it's blown me away and you're stimulating my grey matter. I already try to focus on the design within a viewport by placing viewport sized frames all the way down my design document - but - I'm now tempted to look at drawing frames separately, or something else *deep in contemplation*. I feel like this conversation needs more air time. I'm so excited, thank you!

[@satart6080]

+Gabrielle Iskandar - Thank you for the tip!

[@MrRedhawk16]

This Lady is a Boss !

[@moeinsamani1467]

I'm a newcomer in the world of web development and it is a little difficult to figure out the concept of viewport and how it could be implemented into the website. However, after watching this, I have felt better about this concept.

[@realsakul]

Very inspirational! Thanks Jen!

[@mathws1]

Jen always brings good stuff, excelent professional

[@saschab.5154]

Thank you so much for the inspiration! Greetings from Berlin :)

[@gmiwebagenda7232]

Very very inspiring video, that lets us look beyond the borders of webdesign....i will show all your videos to our students webdesign...it will take them to a different level...:-) I can't wait to redesign our own website, using storyboarding, filmic thinking, introducing time expierience en then also using the layout grid..... Great Jen, all your videos, I am happy to have stumbled on them, thank you.. Regards, Anne Vossen, studiemanager Gmi designschool, Amsterdam

[@LayoutLand]

This makes me very happy. I'm hoping design students get excited by the new possibilities and bring a whole new level of fresh energy and ideas to the web. The web will be better for it.

[@CriminalClinton]

Always making me think, Jen!

[@clarkisking]

thank you for the video, wonderful conversation and discussion

[@CharlyBGood11]

Your channel is very helpfull ! thanks!

[@DavidMermelstein]

Using letters or numbers showing components in sequence. Show these components in different orders, side by side, two up, four up etc. Good web design tool such as those by Pinegrow & CoffeeCup that are focused on clean markup coupled with browsers and code editors is the way to go. I think this should be done at a component level perhaps even before you do it at screen level.

[@waiwirir]

Why is a screen thought of, as paper or page.

[@LokiDaFerret]

I think Viewport units are off by 100. Eg 1VH should be the full height of the view port. A better name would be PVH (percentage of viewpoint height) since 50vh represents 50% of the viewport height. It is inconsistent with other units such as em, rem, px, CH, etc

[@norbertperka9231]

Amazon example is one of the worse experiences online for me, it's like toilet paper and we all know what we mostly use it for. My GF did some time ago similar layout(toilet paper roll) for big food retailer in Brazil for phone application, customer was happy she was not coz she had better idea but more work and would cost more(customer rejected). By the way great topic , more of this from your point of view please.

[@sobeidalagrange7129]

Very informative!!! Thank you. :)

[@raphaelthomazella4719]

I'm so thoughtful right now.

[@uhl7792]

Wynton Marsalis not Winston

[@mohammadnoushadsiddiqui4786]

wow you are my favourite mam

[@not_enoughmana]

LIFE GOALS

[@Tokinjester]

am i having some kind of deja vu? wasn't this posted a while ago?

[@LayoutLand]

I created three videos on Viewports, each talking about something a bit different. But yes, I'm sure I've made some of these points before. The KZbin series is designed to be watched in any order, to see some videos without seeing others, etc. So there is overlap. Yup. If you want to watch all three videos on Viewports, I just created a new playlist and put it on the channel home page.

[@Tokinjester]

thanks, i thought maybe you'd deleted an older video but didn't get the chance to get back in to look for it. really enjoying your videos, thanks for all your effort :)

[@eallen8550]

Webic language: thinking about this just blew my mind.

[@MrStarDiagnosis]

15 years ago i though about the same things when using flash to build websites. So nothing new.

[@arnoldcolunga]

Thank u!!! I'm inspired by your work and the way you have explained these topics, I made a page following your advice vogliahombre.com.mx, I'm excited to experiment with new tools again, continue like this.

[@lookintomyeyes2681]

u r more of like gina linetti

[@constantchanger]

Well if this video isn't a hidden gem then I don't know what is

[@musthavechannel5262]

It is amazing how terrible the concept of art feels when technical jargon is attached to it.

[@DeadPigo]

Actually both "legal" and "letter" paper sizes are more like A4 then A3, and A2 is twice larger then A3. But i get the general idea, thank you.

[@CriminalClinton]

Anton Bobylev naaah dawg, it’s all about that large format 18x12 👌