Scribd
Upload
6 views2 pages

Responsive Website Design

Responsive web design is an approach that utilizes flexible layouts, images, and media queries to create websites that work on any device. Key components include fluid grids that use percentage-based sizes, flexible images that scale with their containers, and media queries that adjust styles based on device characteristics. This design method enhances user experience by adapting in real-time to different screen sizes and orientations.

Uploaded by

kanmaniapit
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
6 views2 pages

Responsive Website Design

Responsive web design is an approach that utilizes flexible layouts, images, and media queries to create websites that work on any device. Key components include fluid grids that use percentage-based sizes, flexible images that scale with their containers, and media queries that adjust styles based on device characteristics. This design method enhances user experience by adapting in real-time to different screen sizes and orientations.

Uploaded by

kanmaniapit
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

RESPONSIVE WEBSITE DESIGN

Responsive design is an approach to web page creation that makes use of flexible layouts,
flexible images and cascading style sheet media queries. You can now create your very own
responsive website quickly and efficiently, allowing you to showcase your content in a format
that will work on any device with an Internet browser, such as desktops, laptops, tablets, and
smart phones.

Basics of Responsive Web Design

To create a responsive website, we should know the below 3 main parts

1. Fluid Grid - It's a flexible width path. We should stop using pixel-based sizes; instead we use
the em or percentage in the style sheet. This feature help us to make designing for multiple
screens easier. Here the column widths are proportional rather than fixed. Fluid web page design
can be more user-friendly, because it adjusts to the user's set up.

For example: width: 1126px; will be width: 98%;

2. Flexible Images - The usage of fluid images causes the adjustment of the size to the parent
block. The images will scale out according to the screen resolution/size. If the parent block is
smaller than the size of image then the image is reduced proportionally.

The most common relative solution is to set the max-width of the image at 100%. The max-
width style means that an image won't exceed the width of its container. Instead of specifying a
width and height on the image tag, it’s best just to add the image tag without that information
and rely on the max width.

3. Media Queries(@media)

Responsive design uses a CSS3 feature called media queries. Media queries inspect the
characteristics of the device and adjust specific website styles accordingly. E.g. A media query
may ask if the horizontal resolution of the device is equal to or less than 480px. If the answer is
yes, the CSS may adjust the layout into a single column.

Here’s a few things we can do using media queries:


 discover if someone is holding their phone in portrait or landscape orientation
 hide or show certain content depending on what size device a person is using

 move and resize content for optimal viewing on a variety of device sizes

In essence responsive web design “responds” to our devices and adapts to create an enjoyable
user experience. And this happens in real time as you turn your device or resize your browser
window.

The query contains two components:

1. a media type (screen), and


2. The actual query enclosed within parentheses, containing a particular media feature
(max-device-width) to inspect, followed by the target value (480px).

You might also like