Abantiaazmin
Uploaded on Oct 3, 2023
Welcome to Responsive Web Design Basics 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. According to Ethan Marquette’s initial definition in A List Apart, responsive web design adapts to the needs of people and the devices they're utilizing. 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 Screen sizes for phones, "pallets," tablets, workstations, game consoles, TVs, and even wearable’s 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. Set the viewport number 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. Mobile browsers render the website at a desktop screen width (often around 980px, though this varies among devices) in an effort to deliver the greatest user experience. They then attempt to improve the content's appearance by enlarging the font sizes and scaling the content to fit the screen. Users may experience irregular font sizes as a result, and they may need to double-tap or pinch to zoom in order to view and engage with the information. <!DOCTYPE html> <html lang="en"> <head> … <meta name="viewport" content="width=device-width, initial-scale=1"> … </head> … 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. When switching to landscape mode, certain browsers maintain the page's width and instead of reflowing to fill the screen, they zoom. The page can utilize the entire landscape width by adding the value initial-scale=1, which encourages browsers to establish a 1:1 ratio between CSS pixels and device-independent pixels regardless of device orientation. Caution Use a comma to divide attributes so that older browsers can parse them correctly. The lacks a width or initial-scale meta name="viewport"> tag. You may use Lighthouse audit to automatically check that your HTML documents are correctly using the viewport meta element. Ensure a viewport that is usable On the viewport, in addition to initial-scale, the following properties can be set: • minimum-scale • user-scalable at the maximum scale When enabled, these may make it impossible for the user to zoom the viewport, which can provide an accessibility problem. As a result, we do not advocate using these attributes. 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. 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 bigger 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. The image's dimensions should be added to the image element You are overriding the image's natural proportions when you use max-width: 100%, but you should still use the width and height attributes on your tag. 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 render correctly because screen sizes and width in CSS pixels varies greatly between devices (for instance, between phones and tablets and even between different 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 Flex box, Grid Layout, and Multicolor. Flex box This layout technique is perfect if you want a group of things of various sizes to fit comfortably in a row or rows, with smaller items taking up less space and larger items taking up more. Items with display settings of "flex" and "justify-content: space-between" Flex box allows you to display objects as a single row or wrapped into numerous rows when the available space shrinks in a responsive design. 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 accommodating 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. 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. Address: Majhira Bazar, Sajahanpur, Bogura, Puran Bogra, Bangladesh 01409-957452 [email protected] seoexpate.com
Comments