![]() ![]() Designers don’t know how many different size Sketch artboards or Figma frames they need to design. Their job is to create fluid designs, but the tools are rigid. This can result in designers finding it difficult to fully grasp the concept of responsive design. The confusion with using words like a mobile, tablet and desktop sizeĭesigners create mockups in a static / rigid (not fluid) environment like Sketch, Figma, Adobe XD. In Chrome developer tools you can make a viewport as small as 50px. In a desktop/laptop browser, you can make the viewport as large as your physical device’s screen size, or as small as ~ 510px in width in Chrome. Your browser’s viewport size, on the other hand, is fluid. You can not change the size of the screen/display on your device. Screen and display sizes are set by device manufacturers. When I use the term “viewport”, I’m intentionally avoiding words like “screen size” or “display size”. Whenever this design is done, you can implement it, and repeat this viewport resizing process w/ the designer until you get to the largest viewport. If the designer is not sure exactly how the design should look or it will take more time, she/he can write down the size of the viewport in pixels and design a static artboard in their chosen design tool for that size. If the changes are small, you can do it in the code right there in the browser’s developer tools. Now the designer will most likely want to make some changes. That is where you (the developer) add a breakpoint. The designer will decide when exactly the design starts to “look odd” and can be improved. Set the width of the viewport to the smallest size that the designer chose in their design, and slowly start resizing the viewport, stretching it larger. Now that you have a fluid app, open it in your browser’s developer tools, with both you and the designer looking at this together. Work together to make the design look good between the smallest and largest viewports When your app is fluid, you and the designer can figure out what happens between those two states. Use CSS Flexbox, Bootstrap and/or CSS Grid if it makes development easier.Use % when sizing the width and height of the container.The most important thing in this stage is to make the design fluid, so it’s possible to resize the viewport size and see how the design looks like in a larger/smaller viewport. The exact breakpoint(s) will be decided later on when working with the designer. At this stage, you don’t know when to add the breakpoint and that’s ok. Then add a CSS media query breakpoint between those two states (small and large). then, resizes the browser window the largest width.įirst, build the small design.resizes the browser viewport size to be the smallest width,.Let’s say a user opens a web application in a web browser and These web applications are usable in any browser viewport size (I discuss browser viewports in more detail at the end of this article). Responsive web applications are about usability. Two years into this journey I am now building web applications (in addition to designing them).Įverything I design and build is responsive and in this article I will show you how I do it. □ My curiosity led me to switch roles and become a front end web developer. ![]() I’ve been a product designer for more than 6 years, working at my startup and also at several other startups in the San Francisco Bay Area.Īs a designer, while I was working with developers and launching several products, I became more curious about how they build the apps that I was designing. This article is for developers and designers who want to learn how to build responsive web applications. ![]()
0 Comments
Leave a Reply. |