Forum

most effective way to design responsive web pages ?

john matthewOctober 12, 2018 5:12 AM

Please share your opinions about the most effective way to design responsive web pages ?

FreelanceWebDeveloper

ZarosMachineryNovember 5, 2019 1:32 PM
That's a super broad question, could you be more specific?

The way I design a responsive page is to first create the desktop version, and add code to transform it to the tablet version, then the mobile version.
I then go through my code and reverse the logic so that the mobile version is the base code, with additional code to transform it to the tablet version, and even more code to make it into the desktop version.

I find this method to be the easiest as desktop tends to be harder to code due to more elements on the screen, so it's easiest to start it from scratch. I then make it 'mobile first' because it loads quicker on tablets, which often have slower internet speeds due to 2G / 3G networks vs the wifi of a desktop.
Ricky Larson-ukJanuary 13, 2020 9:11 AM
There are the following ways to design responsive web pages.
a) Add responsive meta tags in your HTML document.
b) Apply media queries to your layout.
c) Make images and embedded videos responsive.
d) Ensure your typography will be easily readable on mobile devices
Free-Worker-1461152December 10, 2025 4:27 AM
Use mobile-first design, starting with small screens and progressively enhancing layouts for larger devices.
Apply flexible grids and fluid layouts using CSS Grid or Flexbox to adapt content naturally.
Implement responsive typography with scalable units like rem, em, and clamp() for balanced readability.
Optimize images and media with srcset, sizes, and modern formats to ensure fast loading.
Utilize media queries strategically to adjust breakpoints based on content needs, not specific devices.
Ensure touch-friendly interactions, accessible controls, and consistent spacing for a seamless user experience across all screen sizes.
If you are using Wordpress:
Choose a mobile-responsive theme built with modern frameworks (Block themes, Flexbox, Grid).
Use Gutenberg blocks or a reputable page builder with responsive controls (e.g., padding, margins, visibility).
Optimize images with WordPress image sizes, srcset, and a compression plugin.
Apply custom CSS for fine-tuning breakpoints and layout issues.
Use lightweight plugins to avoid performance bloat and maintain fast load times.
Test responsiveness with built-in WordPress preview tools and real devices.
Ensure accessibility, touch-friendly buttons, and clean typography across all screen sizes.