You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The term responsive design was coined by Ethan Marcotte in 2010 and described the use of three techniques in combination: fluid grids, fluid images, and media queries.
Here we will explore the industry best practices for responsive design & development:
Mobile First Development
Earlier, websites were often developed with the assumption that they would be primarily accessed from desktops. Eventually, developers made an attempt to modify these websites by cutting down some functions to enhance browsing on mobile or tablet devices.
This approach of scaling down the websites is popularly known as Graceful Degradation or Desktop-First approach.
A downside to this approach is that several web elements do not adapt well to smaller screen sizes. Consequently, this degrades the visual appearance of websites on smaller devices.
To address this problem, developers came up with another approach – Progressive Advancement or Mobile-First Design. This approach was primarily introduced by Luke Wroblewski around 2010.
This approach encouraged designers to begin the website designing process for the smallest devices first and then add more functionalities for bigger screen sizes.
Unfortunately not all designs (or designers) are created equally, and it's up to the frontend developer to bridge the gap from design to code in the proper way, to ensure good maintainability of the code.
In practice, the way to code "Mobile First" is to:
Make sure all default sizing starts on mobile: font size, margins, padding, etc.
Stack all elements & components vertically by default.
From that, we can apply Progressive Advancement to style the wider sizes of the layout,
DRY / KISS Principles
DRY stand for "Don't Repeat Yourself," a basic principle of software development aimed at reducing repetition of information. The DRY principle is stated as, "Every piece of knowledge or logic must have a single, unambiguous representation within a system."
To avoid violating the DRY principle, divide your system into pieces. Divide your code and logic into smaller reusable units and use that code by calling it where you want. Don't write lengthy methods, but divide logic and try to use the existing piece in your method.
Less code is good: It saves time and effort, is easy to maintain, and also reduces the chances of bugs.
KISS stands for "Keep It Simple, Stupid", and is descriptive to keep the code simple and clear, making it easy to understand. After all, programming languages are for humans to understand — computers can only understand 0 and 1 — so keep coding simple and straightforward. Keep your components small, no more than 40-50 lines.
Each component should only solve one small problem or purpose. If you have a lot of conditions in the component, break these out into smaller components. It will not only be easier to read and maintain, but it can help find bugs a lot faster.
To avoid violating the KISS principle, try to write simple components. Think of many solutions for your task, then choose the best, simplest one and transform that into your code. Whenever you find lengthy code, divide that into multiple components — right-click and refactor in the editor. Try to write small blocks of code that do a single task.
Applying the DRY & KISS principles in frontend development means to create reusable components that have simple interfaces. Take the following example:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
The term responsive design was coined by Ethan Marcotte in 2010 and described the use of three techniques in combination: fluid grids, fluid images, and media queries.
Here we will explore the industry best practices for responsive design & development:
Mobile First Development
Earlier, websites were often developed with the assumption that they would be primarily accessed from desktops. Eventually, developers made an attempt to modify these websites by cutting down some functions to enhance browsing on mobile or tablet devices.
This approach of scaling down the websites is popularly known as Graceful Degradation or Desktop-First approach.
A downside to this approach is that several web elements do not adapt well to smaller screen sizes. Consequently, this degrades the visual appearance of websites on smaller devices.
To address this problem, developers came up with another approach – Progressive Advancement or Mobile-First Design. This approach was primarily introduced by Luke Wroblewski around 2010.
This approach encouraged designers to begin the website designing process for the smallest devices first and then add more functionalities for bigger screen sizes.
Unfortunately not all designs (or designers) are created equally, and it's up to the frontend developer to bridge the gap from design to code in the proper way, to ensure good maintainability of the code.
In practice, the way to code "Mobile First" is to:
From that, we can apply Progressive Advancement to style the wider sizes of the layout,
DRY / KISS Principles
DRY stand for "Don't Repeat Yourself," a basic principle of software development aimed at reducing repetition of information. The DRY principle is stated as, "Every piece of knowledge or logic must have a single, unambiguous representation within a system."
To avoid violating the DRY principle, divide your system into pieces. Divide your code and logic into smaller reusable units and use that code by calling it where you want. Don't write lengthy methods, but divide logic and try to use the existing piece in your method.
Less code is good: It saves time and effort, is easy to maintain, and also reduces the chances of bugs.
KISS stands for "Keep It Simple, Stupid", and is descriptive to keep the code simple and clear, making it easy to understand. After all, programming languages are for humans to understand — computers can only understand 0 and 1 — so keep coding simple and straightforward. Keep your components small, no more than 40-50 lines.
Each component should only solve one small problem or purpose. If you have a lot of conditions in the component, break these out into smaller components. It will not only be easier to read and maintain, but it can help find bugs a lot faster.
To avoid violating the KISS principle, try to write simple components. Think of many solutions for your task, then choose the best, simplest one and transform that into your code. Whenever you find lengthy code, divide that into multiple components — right-click and refactor in the editor. Try to write small blocks of code that do a single task.
Applying the DRY & KISS principles in frontend development means to create reusable components that have simple interfaces. Take the following example:
Can be separated into:
and
swatch.twig:Beta Was this translation helpful? Give feedback.
All reactions