Responsive Web Designs

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