💡 The Importance of Elastic Websites
👉 Why should websites be elastic? Well, today’s users access websites from a multitude of devices – from smartphones and tablets to laptops and desktops. 💻 Each device comes with its own screen size and resolution, making it crucial for websites to be elastic.
By being elastic, websites can adjust their layout and content to fit any screen size, providing users with an optimal viewing experience regardless of the device they're using. 🤳 This not only enhances user satisfaction but also improves accessibility and usability, ultimately leading to higher engagement and conversion rates.
In essence, elasticity isn't just a design choice; it's a necessity in ensuring that websites remain relevant and effective in catering to the diverse needs of modern-day users. So, just like Elastigirl, websites need to be flexible and adaptable!
📱 Responsive Web Design (RWD)
Responsive web design (RWD) is the art of designing a website so that its layout automatically adjusts to the size of the device it’s being viewed on.
Nowadays, it's par for the course, and frankly, the internet without RWD doesn’t really cut it. Websites that don’t scale are truly relics of a bygone era in urgent need of an extreme makeover. 💇🏼♀️
🧙♂️ Words of Wisdom
Viewport: The area of the web browser where the website is displayed. The width of the viewport determines how the website displays its content. 💡 Fun fact: In CSS (which styles websites), there are dynamic viewport height (vh) and viewport width (vw) units, which depend on the dimensions of the browser window at any given time. So, a section on a website doesn’t have to have a fixed height in pixels; it can change depending on the viewport.
Breakpoint: The moment when the viewport width threshold is crossed, measured in pixels.
🕵🏼♀️ Explore What's Already Out There!
Tom Biskup in Design Practice’s free web design classes showcases an interesting example with the website hedron.space, demonstrating how the layout behaves when we start changing the browser window width. 🪟 It's worth watching it yourself!
And a funny bonus: Check out this GIF 🤌 The best way to grasp how website modules stack up when the viewport is narrowed is to observe good projects and analyze how a particular website behaves at different resolutions.
Are you currently on a website? Browsing clothes on Zalando? Ordering pizza? 🍕 Grab the side of your browser and start resizing it. 📐 Observe how it behaves, how the text size, images, and layout change. Try to "test" these websites by changing their size. It will allow you to observe certain patterns and start designing better. 🧑🔬
🤹🏼 Life Facilitators
In the design, we focus on a few fixed breakpoints.
📍 If you wonder how to check the behaviour of the browser depending on the breakpoints, just use these tools:
- Window Resizer: A Chrome browser extension that allows you to select viewport resolutions in which the page will be displayed.
- 📱 When it comes to mobile, it's worth using DevTools, hidden behind the F12 button. Just activate the Simulator option to simulate how your page will be displayed on a particular device (from iPad to Samsung phone).
💻 Making Life Easier for Developers
Below, you can find a set of viewport resolutions that will certainly help developers:
- Desktop – 1440px
- Tablet landscape – 1024px and portrait – 768px
- Mobile portrait – between 390px and 375px
👫🏼 We’re in This Together!
Hold it close to your heart that building digital projects is teamwork 👩🏼🔧🧑🏼🔧 Above all, try to communicate with people involved in creating the product. And most importantly - don’t hesitate to talk to developers. After all, we’re all playing on the same team! ⚽
Ask:
- What are their expectations?
- What projects and versions need to be delivered to build a responsive website?
- In more challenging solutions or components, ask what they can propose from a frontend perspective (this is especially important for tables, complex listings, or more unconventional layout compositions).
You can benefit a lot from having conversations with front-end developers. 🗣️ Personally, I love working with them - I can learn so much! I’m convinced that in this collaboration, we learn from each other. And with each such collaboration, the next project goes faster and more smoothly! ❤️
⚒ Column Grid in Figma
Alright, everything sounds great, but the process of scaling website content between different resolutions can initially seem quite complicated. 🥲
So, step by step. 🦶 Let’s start with:
- Column Grid - allowing you to organize layouts in the most classic way.
Parameters you can stick to at the beginning:
- Desktop 1440px: Column - 12, Margin 40px, Gutter 20px
- Tablet landscape 1024px: Column 12, Margin 20px
- Tablet portrait 768px: Column 6, Margin 20px
- Mobile: Column 2, Margin 16px
And then, explore! 🕵️
🎨 How to... Design?
First and foremost, take a deep breath. 😮💨 You can’t master everything at once. Tom advises in his classes to observe good projects and analyse how they work, how the layout changes, text size, navigation at different resolutions.
🏁 Start right away. Check what you use daily. Explore everything, wherever you can. You won’t regret it, trust me! Save or screenshot the most interesting solutions!
The topic is extensive, and I hope I managed to shed some light on it, even just a bit!
Good luck in "testing" websites 🤞🏻
Happy learning! 👋
