Html responsive web design

      13

About The Author

Vitaly Friedman loves beautiful nội dung & doesn’t like khổng lồ give in easily. When he is not writing, he’s most probably running front-over và UX …More aboutVitaly↬


Almost every new client these days wants a di động version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the máy tính bảng iPad, netbook, Kindle — và all screen resolutions must be compatible, too. In the next five sầu years, we’ll likely need to lớn design for a number of additional inventions. When will the madness stop? It won’t, of course.

Bạn đang xem: Html responsive web design


*
Above sầu, the h1 element holds the illustration as a background, and the image is aligned according to lớn the container’s background (the heading).

This is just one example of the kind of thinking that makes responsive sầu Web kiến thiết truly effective. But even with smart fixes lượt thích this, a layout can become too narrow or short to lớn look right. In the logo sản phẩm example above sầu (although it works), the ideal situation would be to not crop half of the illustration or khổng lồ keep the logo from being so small that it becomes illegible and “floats” up.

Flexible Images

One major problem that needs to be solved with responsive Web kiến thiết is working with images. There are a number of techniques khổng lồ resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img max-width: 100%; As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is phối to lớn 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum kích thước they will be used at. You don’t declare the height và width in your code, but instead let the browser rekích thước the images as needed while using CSS to guide their relative sầu size”. It’s a great and simple technique to rekích thước images beautifully.

Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to lớn fix this issue, though, found in Ethan Marcotte’s article.

While the above is a great quiông chồng fix and good start to responsive images, image resolution và tải về times should be the primary considerations. While resizing an image for Mobile devices can be very simple, if the original image kích cỡ is meant for large devices, it could significantly slow download times and take up space unnecessarily.

Filament Group’s Responsive sầu Images

This technique, presented by the Filament Group, takes this issue inkhổng lồ consideration & not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Cheông xã out the demo page here.

*
The data-fullsrc is a custom HTML5 attribute, defined in the files linked lớn above sầu. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to lớn load the bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript tệp tin inserts a base element that allows the page to separate responsive sầu images from others và redirects them as necessary. When the page loads, all files are rewritten to their original forms, và only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had khổng lồ be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome & Opera, as well as mobile devices that use these same browsers (máy tính bảng iPad, iPhone, etc.). Older browsers and Firefox degrade nicely & still reform size as one would expect of a responsive sầu image, except that both resolutions are downloaded together, so the kết thúc benefit of saving space with this technique is void.

Stop iPhone Simulator Image Resizing

One nice thing about the iPhone & iPod Touch is that Web designs automatically rescale lớn fit the tiny screen. A full-sized kiến thiết, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a thiết bị di động version. Then, the user could easily zoom in and out as necessary.

There was, however, one issue this simulator created. When responsive sầu Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.

iPhone Scale(Image: Think Vitamin | Website referenced: 8 Faces

Because this works only with Apple’s simulator, we can use an Apple-specific meta tag khổng lồ fix the problem, placing it below the website’s section. Thanks khổng lồ Think Vitamin’s article on image resizing, we have the meta tag below:

Setting the initial-scale khổng lồ 1 overrides the mặc định to rekích cỡ images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

Custom Layout Structure

For extreme form size changes, we may want to lớn change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have sầu to lớn be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles và move sầu elements around with floats, widths, heights và so on.

For example, we could have sầu one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #nội dung, #sidebar, #nav, along with colors, backgrounds & typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that và switch to lớn a new style sheet. This new child style sheet would adopt everything from the mặc định style sheet & then just redefine the layout’s structure.

Here is the style.css (default) content:

/* Default styles that will carry khổng lồ the child style sheet */html,body background... fonts... color...h1,h2,h3p, blockquote, pre, code, ol, ul/* Structural elements */#wrapper width: 80%; margin: 0 auto; background: #fff; padding: 20px;#content width: 54%; float: left; margin-right: 3%;#sidebar-left width: 20%; float: left; margin-right: 3%;#sidebar-right width: 20%; float: left;Here is the di động.css (child) content:

#wrapper width: 90%;#content width: 100%;#sidebar-left width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;#sidebar-right width: 100%; clear: both; /* Additional styling for our new layout */ border-top: 1px solid #ccc; margin-top: 20px;Moving ContentMedia QueriesCSS3 supports all of the same media types as CSS 2.1, such as screen, print và handheld, but has added dozens of new truyền thông media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the ipad tablet và Android devices) will definitely tư vấn truyền thông features. So, calling a truyền thông media query using CSS3 features to target these devices would work just fine, và it will be ignored if accessed by an older computer browser that does not support CSS3.

In Ethan Marcotte’s article, we see an example of a truyền thông media query in action:

This truyền thông media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), & if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting & restricting widths based on these media query features.

One can create multiple style sheets, as well as basic layout alterations defined khổng lồ fit ranges of widths — even for landscape vs. portrait orientations. Be sure lớn look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples và a more thorough explanation.

Multiple truyền thông media queries can also be dropped right inkhổng lồ a single style sheet, which is the most efficient option when used:

/* Smartphones (portrait và landscape) ----------- */
truyền thông only screenand (min-device-width : 320px)and (max-device-width : 480px) /* Styles *//* Smartphones (landscape) ----------- */
truyền thông media only screen& (min-width : 321px) /* Styles *//* Smartphones (portrait) ----------- */
media only screen& (max-width : 320px) /* Styles */The code above is from a miễn phí template for multiple media queries between popular devices by Andy Clark. See the differences between this approach và including different style sheet files in the mark-up as described in his book “Hardboiled Web Design.”

CSS3 Media Queries

Above sầu are a few examples of how truyền thông queries, both from CSS 2.1 & CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 truyền thông queries khổng lồ create responsive sầu Web designs. Many of these uses are relevant today, và all will definitely be usable in the near future.

The min-width và max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply lớn. If anything is below this limit, the style sheet links or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective sầu media query.

Note in the examples below that we’re using the syntax for truyền thông media queries that could be used all in one style sheet. As mentioned above, the most efficient way to lớn use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to lớn be made for multiple style sheets.


media screen và (min-width: 600px) .hereIsMyClass width: 30%; float: right; The class specified in the truyền thông query above (hereIsMyClass) will work only if the browser or screen width is above sầu 600 pixels. In other words, this truyền thông media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).


truyền thông media screen và (max-width: 600px) .aClassforSmallScreens clear: both; font-size: 1.3em; Now, with the use of max-width, this media query will apply only to lớn browser or screen widths with a maximum width of 600 pixels or narrower.

While the above min-width và max-width can apply to either screen kích thước or browser width, sometimes we’d like a truyền thông media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized khổng lồ something smaller, the truyền thông media query would still apply to the size of the actual device. The min-device-width and max-device-width truyền thông query properties are great for targeting certain devices with set dimensions, without applying the same styles to lớn other screen sizes in a browser that mimics the device’s form size.


media screen and (max-device-width: 480px) .classForiPhoneDisplay font-size: 1.2em;
truyền thông media screen and (min-device-width: 768px) .minimumiPadWidth clear: both; margin-bottom: 2px solid #ccc; For the ipad tablet specifically, there is also a truyền thông query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).


media screen and (orientation: landscape) .iPadLandscape width: 30%; float: right;
truyền thông media screen và (orientation: portrait) .iPadPortrait clear: both; Unfortunately, this property works only on the iPad tablet. When determining the orientation for the iPhone & other devices, the use of max-device-width and min-device-width should vị the triông chồng.

There are also many truyền thông media queries that make sense when combined. For example, the min-width and max-width truyền thông queries are combined all the time lớn set a style specific lớn a certain range.


truyền thông screen và (min-width: 800px) and (max-width: 1200px) .classForaMediumScreen background: #cc0000; width: 30%; float: right; The above sầu code in this truyền thông media query applies only to lớn screen và browser widths between 800 và 1200 pixels. A good use of this technique is to lớn show certain content or entire sidebars in a layout depending on how much horizontal space is available.

Some designers would also prefer to lớn link khổng lồ a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that vị not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.

You might want, for example, khổng lồ place truyền thông queries all in one style sheet (as above) for devices lượt thích the ipad. Because such a device can switch from portrait khổng lồ landscape in an instant, if these two media queries were placed in separate style sheets, the trang web would have to lớn hotline each style sheet file every time the user switched orientations. Placing a truyền thông query for both the horizontal và vertical orientations of the iPad in the same style sheet tệp tin would be far more efficient.

Xem thêm: 6 Cách Tắt Update Win 10, Chặn Cập Nhật Trên Win 10 Hiệu Quả 100%

Another example is a flexible kiến thiết meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable truyền thông media queries in one style sheet would be best.

Nevertheless, organization can be key, và a designer may wish khổng lồ define truyền thông media queries in a standard HTML link tag:


JavaScriptAnother method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 truyền thông media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 truyền thông queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width & changes the style sheet accordingly — if one prefers a more hands-on approach:


There are many solutions for pairing up JavaScript with CSS truyền thông queries. Remember that truyền thông media queries are not an absolute answer, but rather are fantastic options for responsive sầu Web thiết kế when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with truyền thông queries, look at “Combining Media Queries and JavaScript.”

Showing or Hiding Content

It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of nội dung from a large screen available on a smaller screen or sản phẩm điện thoại device isn’t always the best answer. We have sầu best practices for Smartphone environments: simpler navigation, more focused nội dung, lists or rows instead of multiple columns.

Digg Mobile

Responsive sầu Web design shouldn’t be just about how to lớn create a flexible layout on a wide range of platforms và screen sizes. It should also be about the user being able khổng lồ pick và choose content. Fortunately, CSS has been allowing us to lớn show & hide nội dung with ease for years!

display: none;Either declare display: none for the HTML bloông xã element that needs to be hidden in a specific style sheet or detect the browser width and vày it through JavaScript. In addition to hiding nội dung on smaller screens, we can also hide nội dung in our default style sheet (for bigger screens) that should be available only in thiết bị di động versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation khổng lồ that nội dung, or with a different navigation structure altogether.

lưu ý that we haven’t used visibility: hidden here; this just hides the nội dung (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need khổng lồ keep the mark-up on the page — it just takes up resources và might even cause unnecessary scrolling or break the layout.

Showing Hiding Content

Here is our mark-up:


In our mặc định style sheet below, we have sầu hidden the liên kết to lớn the sidebar nội dung. Because our screen is large enough, we can display this nội dung on page load.

Here is the style.css (default) content:

#content width: 54%; float: left; margin-right: 3%;#sidebar-left width: 20%; float: left; margin-right: 3%;#sidebar-right width: 20%; float: left;.sidebar-navdisplay: none;Now, we hide the two sidebars (below) and show the link to lớn these pieces of content. As an alternative, the links could điện thoại tư vấn lớn JavaScript to lớn just cancel out the display: none when clicked, & the sidebars could be realigned in the CSS lớn float below the nội dung (or in another reasonable way).

Here is the thiết bị di động.css (simpler) content:

#content width: 100%;#sidebar-left display: none;#sidebar-right display: none;.sidebar-navdisplay: inline;With the ability lớn easily show & hide content, rearrange layout elements and automatically resize images, khung elements and more, a design can be transformed khổng lồ fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit thiết bị di động guidelines; for example, use a script or alternate style sheet lớn increase White space or to replace image navigation sources on thiết bị di động devices for better usability (icons would be more beneficial on smaller screens).

Touchscreens vs. Cursors

Touchscreens are becoming increasingly popular. Assuming that smaller devices are more likely khổng lồ be given touchscreen functionality is easy, but don’t be so quichồng. Right now touchscreens are mainly on smaller devices, but many laptops & desktops on the market also have sầu touchscreen capability. For example, the HP. Touchsmart tm2t is a basic touchscreen máy tính xách tay with traditional keyboard và mouse that can transsize inlớn a tablet.

Touchscreen

Touchscreens obviously come with different kiến thiết guidelines than purely cursor-based interaction, & the two have sầu different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability lớn display CSS hovers because there is no cursor; once the user touches the screen, they cliông chồng. So, don’t rely on CSS hovers for liên kết definition; they should be considered an additional feature only for cursor-based devices.

Look at the article “Designing for Touchscreen” for more ideas. Many of the kiến thiết suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hvà. This would make no difference to cursor users, so we might as well follow the touchscreen kiến thiết guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability.

A Showcase Of Responsive sầu Web Design

Below we have sầu a few examples of responsive Web thiết kế in practice today. For many of these websites, there is more variation in structure & style than is shown in the pairs of screenshots provided. Many have sầu several solutions for a variety of browsers, và some even adjust elements dynamically in kích cỡ without the need for specific browser dimensions. Visit each of these, và adjust your browser kích cỡ or change devices to lớn see them in action.

Art Equals Work is a simple yet great example of responsive sầu Web thiết kế. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched lớn a device with a smaller screen, then the layout switches to a more readable và user-friendly format. The sidebar disappears, navigation goes lớn the top, and text is enlarged for easy and simple vertical reading.

Art Equals WorkArt Equals Work

With Think Vitamin, we see a similar approach. When on a smaller screen or browser, the sidebar and top bar are removed, the navigation simplifies & moves directly above the content, as does the hình ảnh sản phẩm. The hình ảnh keeps its general look yet is modified for a more vertical orientation, with the tagline below the main icon. The White space around the content on larger screens is also more spacious and interesting, whereas it is simplified for practical purposes on smaller screens.

Think VitaminThink Vitamin

8 Faces’ website thiết kế is flexible, right down lớn a standard netbook or tablet device, & expands in content quantity and layout width when viewed on wider screens or expanded browsers. When viewed on narrower screens, the featured issue on the right is cut out, và the content below is shortened và rearranged in layout, leaving only the essential information.

8 Faces8 Faces

The Hickskiến thiết trang web has three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the kiến thiết takes on a new layout: the third column to lớn the right is rearranged above sầu the second, và the biệu tượng công ty moves next khổng lồ the introductory text. Thus, no content needs khổng lồ be removed for the smaller kích thước. For even narrower screens và browser widths, the side content is removed completely & a simplified version is moved up top. Finally, the font kích cỡ changes with the screen and browser width; as the browser gets narrower, the phông kích thước throughout gets smaller và remains proportional.

HicksthiếtHickskiến

Here is a great example of a flexible image. The image in this kiến thiết automatically resizes after certain “break” points, but in between those width changes, only the side margins và excess Trắng space are altered. On smaller screens & minimized browsers, the navigation simplifies and the columns of navigation at the top fall off. At the design’s smallest version, the navigation simplifies to just a drop-down thực đơn, perfect for saving space without sacrificing critical navigation link.

Information ArchitectsInformation Architects

The website for Garret Keizer is fully flexible in wider browsers và on larger screens: the phokhổng lồ, hình ảnh sản phẩm và other images rekích thước proportionally, as bởi vì the headings và blochồng areas for text. At a few points, some pieces of text change in phông form size and get smaller as the screen or browser gets narrower. After a certain break point, the layout transforms inkhổng lồ what we see in the second screenshot below, with a simple biệu tượng công ty, introductory text and a simple vertical structure for the remaining nội dung.

Garrent KeizerGarrent Keizer

With four relatively content-heavy columns, it’s easy to lớn see how the content here could easily be squished when viewed on smaller devices. Because of the easy organized columns, though, we can also collapse them quite simply when needed, & we can staông chồng them vertically when the space doesn’t allow for a reasonable horizontal span. When the browser is minimized or the user is on a smaller device, the columns first collapse into two và then into one. Likewise, the horizontal lines for break points also change in width, without changing the kích cỡ or style of each line’s title text.

Simon CollisonSitháng Collison

On the CSS Tricks trang web, lượt thích many other collapsible Web designs, the sidebars with excess nội dung are the first lớn fall off when the screen or browser gets too narrow. On this particular trang web, the middle column or first sidebar khổng lồ the left was the first to disappear; và the sidebar with the ads and website extras did the same when the browser got even narrower. Eventually, the kiến thiết leaves the posts, uses less White space around the navigation & biểu tượng logo & moves the search bar lớn below the navigation. The remaining layout và kiến thiết is as flexible as can be because of its simplicity.

CSS TricksCSS Tricks

As one can see, the main navigation here is the simple layout of t-shirt designs, spanning both vertically và horizontally across the screen. As the browser or screen gets smaller, the columns collapse and move below. This happens at each break point when the layout is stressed, but in between the break points, the images just change proportionally in kích cỡ. This maintains balance in the thiết kế, while ensuring that any images (which are essential lớn the website) don’t get so small that they become unusable.

Tee GalleryTee Gallery

Ten by Twenty is another design that does not resort to changing layout structure at all after certain break points, but rather simplifies responsive Web thiết kế by making everything fully flexible and automatically resizing, no matter what the screen or browser width. After a while, the thiết kế does bao tay a bit và could benefit from some rearrangement of nội dung. But overall, the image resizing & flexible nội dung spaces allow for a fairly simple solution that accommodates a wide range of screen sizes.

Ten by TwentyTen by Twenty

On wide screens and browsers, all of the content on this simply designed website is well organized into columns, sidebar và simple navigation up top. It’s a fairly standard & efficient layout. On smaller screens, the sidebar is the first khổng lồ drop off, và its content is moved below the book pđánh giá và essential information. Being limited in space, this kiến thiết preserves its important hierarchy. Whereas on a wider screen we’d look left to right, on a narrower screen we’d tover khổng lồ look from top to lớn bottom. Content on the right is moved below content that would appear on the left on a wider screen. Eventually, when the horizontal space is fully limited, the navigation is simplified and stacked vertically, and some repeated or inessential elements are removed.

Hard BoiledHard Boiled

This thiết kế features a complex layout that looks inspired by a print style. When viewed on a standard wide computer screen, more portfolio pieces are featured và spanned horizontally across the page. As one moves down the page, more graphics & imagery span the space. On a smaller screen, the portfolio piece is cut down to one, and then eventually left out altogether for very small screens and narrow browsers. The visualizations below collapse into fewer columns & more rows, & again, some drop off entirely for very small screens. This kiến thiết shows a creative và intelligent way to lớn make a not-so-common layout work responsively.

TeixidoTeixido

This thiết kế has three main stages at which the kiến thiết & layout collapse inkhổng lồ a more user-friendly size, depending on how wide the screen or browser is. The main image (featuring type) is scaled proportionally via a flexible image method. Each “layout structure” is fully flexible until it reaches a breaking point, at which point the layout switches lớn something more usable with less horizontal space. The bottom four columns eventually collapse inkhổng lồ two, the biệu tượng công ty moves above sầu the navigation, & the columns of navigation below are moved on top or below each other. At the design’s narrowest stage, the navigation is super-simplified, and some inessential nội dung is cut out altogether.

Sephen CaverStephen Caver

This layout does not change at all; no nội dung is dropped or rearranged; and the text kích cỡ does not change either. Instead, this thiết kế keeps its original size, no matter what the change in horizontal & vertical space. Instead, it automatically resizes the header image và the images for the navigation. The trắng space, margins & padding are also flexible, giving more room as the design expands and shrinks.

Unstoppable Robot NinjaUnstoppable Robot Ninja

This is perhaps the simplest example of a responsive Web kiến thiết in this showcase, but also one of the most versatile. The only piece in the layout that changes with the browser width is the blog post’s date, which moves above the post’s title or khổng lồ the side, depending on how much horizontal space is available. Beyond this, the only thing that changes is the width of the content area and the margin space on the left and right. Everything is centered, so a sense of balance is maintained whatever the screen or browser width. Because of this design’s simplicity, switching between browser & screen widths is quichồng & easy.

BureuBureu

Harry Roberts shows that responsive sầu design can also have sầu quite humble uses. If the user has a large viewport, the trang web displays three columns with a navigation thực đơn floating on the left. For users with a viewport between 481px và 800px, a narrow version is displayed: the navigation jumps to the top of the site leaving the area for the nội dung column & the sidebar. Finally, the iPhone view displays the sidebar under the content area. Harry also wrote a detailed article about the CSS styles he added to the stylesheet in his article “Media queries, handier than you think”. A nice example of how a couple of simple CSS adjustments can improve the website’s appearance across various devices.

CSS WizardryCSS WizardryThis last design by Bryan James shows that responsive Web thiết kế need not apply only lớn static HTML và CSS websites. Done in Flash, this one features a full-sized background image & is flexible up to lớn a certain width & height. As a result of the design style, on screens that are too small, the background image gets mostly hidden & the content can become illegible và squished. Instead of just letting it be, though, a message pops up informing the user that the screen is too small lớn adequately view the trang web. It then prompts the user to lớn switch khổng lồ a bigger screen. One can discuss if the thiết kế solution is good or bad in terms of usability, but the example shows that Flash websites can respond to user"s viewport, too.Bryan JamesBryan James

Conclusion

We are indeed entering a new age of Web thiết kế và development. Far too many options are available now, and there will be far too many in the future khổng lồ continue adjusting và creating custom solutions for each screen form size, device & advancement in giải pháp công nghệ. We should rather start a new era today: creating websites that are future-ready right now. Understanding how lớn make a design responsive to lớn the user doesn’t require too much learning, & it can definitely be a lot less stressful và more productive than learning how to lớn design & code properly for every single device available.

Responsive Web kiến thiết & the techniques discussed above sầu are not the final answer to the ever-changing mobile world.

Xem thêm: Cách Làm Trà Sữa Tại Nhà Đơn Giản Mà Ngon Như Ngoài Hàng, Cach Lam Tra Sua Bang Tra Den Recipe

Responsive sầu Web kiến thiết is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device và platform. We will need to constantly work with new devices, resolutions and technologies lớn continually improve sầu the user experience as giải pháp công nghệ evolves in the coming years.

Besides saving us from frustration, responsive Web thiết kế is also best for the user. Every custom solution makes for a better user experience. With responsive sầu Web kiến thiết, we can create custom solutions for a wider range of users, on a wider range of devices. A trang web can be tailored as well for someone on an old máy tính or device as it can for the vast majority of people on the trendiest gadgets around, và likewise as much for the few users who own the most advanced gadgets now và in the years khổng lồ come. Responsive Web kiến thiết creates a great custom experience for everyone. As Web designers, we all strive sầu for that every day on every project anyway, right?

Further Resources for Responsive Web Design


Chuyên mục: SEO
dịch vụ entity