The document discusses the fundamental principles of responsive web design, emphasizing the need for websites to adapt to various device sizes and capabilities for an optimal user experience. It highlights key techniques such as using the meta viewport tag, CSS layout tools like flexbox and grid, and media queries to enhance adaptability. The guidance provided ensures that content is appropriately displayed across different screen sizes without forcing users to scroll horizontally.

1. Welcome To
Responsive web design basics | SEO Expate
BD Ltm.
how to design websites that adapt to the requirements and capabilities of the device being used to
view them. Web browsing on mobile devices is expanding at an astounding rate, yet these
devices frequently have limited display space and necessitate a different approach to information
organization. accompanies consumers' needs and those of the gadgets they utilize. Depending on
the size and capabilities of the gadget, the layout alters. On a phone, for instance, consumers
might see content presented in a single column perspective; on a tablet, the same content might
be presented in two columns.
Screen sizes for phones, "phablets," tablets, workstations, game consoles, TVs, and even
wearables range widely. Your site must be able to adapt to any screen size, whether they exist
now or in the future, as screen sizes are constantly changing. Devices also come with a variety of
features that let us engage with them. For instance, some of your guests will use touchscreen
technology. All of these factors are taken into account in contemporary responsive design to
enhance the user experience.
the viewport setting
A meta viewport tag needs to be placed in the document's head for pages that are responsive to
different screen sizes. A meta viewport tag instructs the browser how to adjust the page's size
and scaling. The meta viewport value width=device-width informs the page to resize its width in
device-independent pixels to match the width of the screen. A device (or density) independent
pixel is a representation of a single pixel that, on a screen with high pixel density, may include
numerous actual pixels. This enables the page's content to reflow to fit various screen sizes,
whether it is displayed on a tiny mobile phone or a huge desktop monitor.
Adapt content size to viewport
Users are accustomed to browsing websites vertically on desktop computers and mobile devices,
but not horizontally. Forcing the user to zoom out or scroll horizontally in order to view the
entire page leads to a poor user experience.

2. It's simple to inadvertently produce page content that doesn't exactly fit into the designated
viewport when designing a mobile site with a meta viewport tag. The viewport may scroll
horizontally, for instance, if an image is displayed at a width that is greater than the viewport. To
avoid forcing the user to scroll horizontally, you should resize this content to fill the viewport's
width. The content is not properly scaled for the viewport. You can automate the process of
finding overflowing content with the use of Lighthouse audit.
Images
A scrollbar will appear if an image's fixed dimensions are larger than the viewport. The solution
to this issue is to set the maximum width for all pictures to 100%. If the viewport size is smaller
than the picture, the image will be shrunk to fit the available space. The image won't expand any
larger than its actual size because the max-width, not the width, is 100%. Generally speaking, it's
a good idea to include the following in your CSS to ensure that images never cause a scrollbar.

3. The image's dimensions should be added to the img
element.
The width and height properties on your img> tag should still be used even though using max-
width: 100% overrides the image's natural size. This is so that layout changes brought on by
content loading can be avoided. Modern browsers use this information to set aside space for the
image before it loads in.
Layout
Content shouldn't rely on a specific viewport width to appear effectively because screen sizes
and width in CSS pixels varies greatly between devices (for instance, between phones and tablets
and even between individual phones). This formerly required specifying layout-creating
components in percentages. You can see a two-column layout with floated elements and pixels-
sized text in the example below. We must scroll horizontally to see the content once the viewport
is smaller than the combined width of the columns.
The columns always retain a specific percentage of the container thanks to the use of percentages
for the widths. As a result, the columns get narrower rather than a scrollbar appearing.
These versatile grids are significantly simpler to create thanks to contemporary CSS layout tools
like Flexbox, Grid Layout, and Multicol.
Flexbox
When you want a group of things of various sizes to fit snugly in a row or rows, with smaller
items taking up less space and larger ones taking up more, this layout style is appropriate.
Flexbox allows you to display objects as a single row or wrapped into numerous rows when the
available space shrinks in a responsive design.
Grid layout in CSS
Simple flexible grid generation is made possible with CSS Grid Layout. If we go back to the
earlier floated example, we could use grid layout and the fr unit, which indicates a portion of the
container's available space, to create our columns instead of building them with percentages.
Regular grid layouts can also be made with Grid, with as many objects as would fit. As the
screen gets smaller, there will be fewer music available. In the example below, we have as many
cards with a minimum size of 200px that will fit on each row.
multi-column format

4. Use Multiple-column Layout (Multicol) for some layout classes to build responsive numbers of
columns using the column-width attribute. You can see that columns are added in the demo
below if there is space for an additional 200px column.
For responsiveness, use CSS media queries.
Sometimes you'll need to alter your layout more significantly than what the methods above will
allow in order to accommodate a certain screen size. At this point, media searches are helpful.
Simple filters called media queries can be used with CSS styles. They make it simple to switch
designs depending on the sorts of devices rendering the content or their attributes, such as their
width, height, orientation, hovering capabilities, and touchscreen capabilities. Targeting a
particular output type will allow you to include a stylesheet with several print styles, such as the
ones shown below: As an alternative, you might use a media query to incorporate print styles in
your primary stylesheet:
To provide a different layout for smaller displays or when we see that our visitor is using a
touchscreen, responsive web design often involves querying the device's features.
based on the size of the viewport
We can design a responsive experience using media queries that applies particular designs to
small screens, large screens, and any size in between. Screen size is the feature we are looking
for here, thus we can check for the following elements. Excellent browser support is available for
all of these features; for additional information, including information on browser support, see
width, height, orientation, and aspect-ratio on MDN.

5. Based on device capabilities, media requests
We cannot assume that consumers exclusively use touchscreens on small devices or that every
large device is a typical desktop or laptop computer given the variety of devices available. We
can test for characteristics like the type of pointer used to interact with the device and if the user
can hover over elements thanks to some more recent enhancements to the media queries
definition.
Hover
any-
hover
any-pointer
Consider using a standard desktop computer, a phone, or a tablet to view this demo.

6. All current browsers offer good compatibility for these more recent capabilities. The MDN pages
for hover, any-hover, pointer, and any-pointer have more information.
the any-hover and any-pointer commands
The attributes Any-hover and any-pointer tests determine whether a user has the capacity to
hover or utilize that kind of pointer even when that isn't their preferred method of interaction.
When utilizing them, use extreme caution. It's not very user-friendly to make them move from
their touchscreen to a mouse! However, if determining the type of device a user possesses is
crucial, any-hover and any-pointer may be helpful. For instance, a laptop with a touchscreen and
trackpad should support hovering as well as coarse and fine points.
selecting breakpoints
Breakpoints shouldn't be set depending on device classes. A maintenance nightmare might come
from defining breakpoints based on particular items, services, brands, or operating systems that
are currently in use. Instead, the layout should adapt to the container based on the content itself.
Select critical breaking points by starting small and
building up
Prior to enlarging the screen to the point where a breakpoint is required, design the content to fit
on a tiny screen size. This enables you to keep the fewest number of breakpoints while
optimizing breakpoints based on content.
Let's go over the weather forecast example from the beginning. Making the forecast seem good
on a small screen is the first step. The browser should then be resized till there is too much white
space between the elements and the forecast isn't as good-looking. Although it's a rather
subjective choice, anything wider than 600 pixels is excessive.
Create two media queries at the end of your CSS for the component, one for usage when the
browser is 600px and below, and one for use when it is wider than 600px, to insert a breakpoint
at 600px. Refactor the CSS to finish. Include the CSS that is only for small screens inside the
media query with a max-width of 600px. Add CSS for larger screens inside the media query for a
min-width of 601px.
Website: www.seoexpatebd.com

7. Email: info@seoexpatebd.com
WhatsApp: +880 1409957452
Address: Head Office, Shajahanpur Kagjipara,
Majhira, Shajahanpur 5801, Bogura, Banlgladesh.
Thank you