Responsive (also called "adaptive") design is built from static blocks with fixed width, expressed in pixels. Let’s assume that we have a two-column layout consisting of the article (blue) and the sidebar (yellow).
2. Fluid layout
A fluid website usually fills the whole width of a browser. It uses relative units to fluidly adapt its layout to any browser/device. Let's make our columns fluid:
A fluid website usually fills the whole width of a browser. It uses relative units to fluidly adapt its layout to any browser/device. Let's make our columns fluid:
In the vast majority of cases, fluid layouts are more time-consuming both for a designer and a developer. It needs to be determined how elements inside a fluid block should behave, for example, whether they should expand or align in any direction, which generates additional issues. The fluid layout can be very tricky in more complex projects, so usually a more practical way to go is fluid-responsive.
3. Fluid-responsive layout
Quite often we need to mix adaptive and fluid techniques. Let's say we need the article and the sidebar columns to take 100% of the browser’s width, but on mobile devices, the sidebar is set below the article (breakpoint 500px):
Generally speaking, the idea behind a fluid-responsive layout is that it uses fixed widths in pixels for defined breakpoints and fluid relative units (for example percents) between these breakpoints.
For more information about free corporate website, free custom website, free e-commerce website, free responsive website, please visit the - Illusion Groups & Illusion Groups India.
Quite often we need to mix adaptive and fluid techniques. Let's say we need the article and the sidebar columns to take 100% of the browser’s width, but on mobile devices, the sidebar is set below the article (breakpoint 500px):
Generally speaking, the idea behind a fluid-responsive layout is that it uses fixed widths in pixels for defined breakpoints and fluid relative units (for example percents) between these breakpoints.
For more information about free corporate website, free custom website, free e-commerce website, free responsive website, please visit the - Illusion Groups & Illusion Groups India.
