To install click the Add extension button. That's it.

The source code for the WIKI 2 extension is being checked by specialists of the Mozilla Foundation, Google, and Apple. You could also do it yourself at any point in time.

4,5
Kelly Slayton
Congratulations on this excellent venture… what a great idea!
Alexander Grigorievskiy
I use WIKI 2 every day and almost forgot how the original Wikipedia looks like.
Live Statistics
English Articles
Improved in 24 Hours
Added in 24 Hours
Languages
Recent
Show all languages
What we do. Every page goes through several hundred of perfecting techniques; in live mode. Quite the same Wikipedia. Just better.
.
Leo
Newton
Brights
Milds

Adaptive web design

From Wikipedia, the free encyclopedia

Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user's device, as opposed to a single static page which loads (and looks) the same on all devices or a single page which reorders and resizes content responsively based on the device/screen size/browser of the user. This most often describes the use of a mobile and a desktop version of a page (or in most cases, the entire site), either of which is retrieved based on the user-agent defined in the HTTP GET request. Adaptive web design was one of the first strategies for optimizing a site for mobile readability, the most common practice involved using a completely separate website for mobile and desktop, with mobile devices often redirected to the mobile version of the site served on a subdomain (often the third level subdomain, denoted "m"; e.g. http://m.website.com/). Today the use of two separate static sites for mobile and desktop viewing is being largely phased out, with server side scripting instead utilized to serve dynamically generated pages or to dynamically decide which version of a static page to serve, although the use of independent sites for mobile and desktop can still be frequently observed. While many websites employ either responsive or adaptive web design techniques, the two are not mutually exclusive, and best practices for the most universally readable designed content employ a combination of the two techniques to support a complete spectrum of hardware and software.[1]

YouTube Encyclopedic

  • 1/5
    Views:
    1 688
    43 165
    22 326
    172 259
    417 272
  • Responsive Web Design in Sketch App: Auto Layout & Flexbox Plugin
  • Build Responsive Websites in Dreamweaver CC | Adobe Creative Cloud
  • Responsive web design for beginners - Webflow tutorial
  • Responsive Web Design
  • HTML5 and CSS3 Responsive design with media queries

Transcription

Hey, I'm Hunter from Skillthrive and in this tutorial you'll learn the basics of the Auto-Layout plugin in Sketch to create a responsive card layout like this one. Before we get started, make sure you download and install Anima into Sketch. There's a link in the description that'll take you to the page where you can download. Also, if you want to download the Sketch file that I'm using in today's course, make sure you join and become a free member on Skillthrive.com, that way you get instant access to not only this course but also all the course files that we currently have on our site. There's a link in the description where you can join. Also, before we get started, I want to mention that the intention of this actual tutorial is to go over just the basics of Auto-Layout and not overwhelm you with everything that it can do. So, we'll cover basics of how to pin, how to set width, as well as an introduction to stacked groups. So this is definitely a plugin that took me a little while to really feel comfortable with, so take what you learn from today, apply it to your designs, play with some of the settings, and if you have any questions always feel free to ask in the comments below. So with that said, let's go ahead and jump in Sketch and get started on today's tutorial. So you see that we have this really simple card design here in Sketch. Now this one's actually designed to be the smallest card that I would actually want in my design, which is for small mobile screens. Now, I always like to start with the smallest card design first. Then that way I can build in the smarts so when I scale this up I don't ever have to worry about running into issues with smaller card designs. So, with that said, let's go ahead and just look at how this card was actually built. So if I come over to this grouping and expand this, you'll see that I have this 'info group' which is just information about the event. And then I have this shape layer that I have named image. Now if you come over to fill you'll see that I'm actually filling this with an image and then setting this option here to fill. And this just makes sure that it's using this image to display nicely based off of the size of the shape. This is going to be really important as we actually expand and resize this because Sketch is going to refer back to this setting in order to make sure that this image behind it is displayed nicely. Now another thing that I did was add a fill here, which is just a really simple linear gradient. And if I turn this on and off, you can see all this is really doing is making sure that the text is going to be able to be seen on whatever image that we're using here. Now if you come over to this 'info group' and expand this, you'll see that we have just a couple of text layers, and then we also have a rating grouping, which is just five star-shaped layers grouped together in order to show the viewer, you know, whatever rating this has for the event. Now another thing I wanted to mention here on this text layer is that I went over to alignment and clicked on 'fixed' and made sure that 'fixed height' was unchecked. Now I realized that when if I had this on 'auto' sometimes the 'auto' or the 'fixed height' was selected, which would give me some issues when I was trying to actually try to expand this text dynamically. So just make sure you go through and have that set on 'fixed' and then have 'fixed height' and 'fixed width' unchecked. So now let's go ahead and just talk about how we can actually start using the Auto-Layout plugin to build some smarts here into this specific card layout. So the first thing I'm going to focus on is just this 'info' grouping. Now if we come down and we hold option we can see that we have 10 pixels from the left and then 10 pixels from the bottom. Now I want that design to, or those parameters, to carry through no matter how big this event card gets. So what we can do is just select this layer, we can come over to our Anima plugin, make sure that we're on this left icon here, which is our actual Auto-Layout settings, and then we can expand this and we can come over here. And say on this button, and say "Hey, have 10 pixels from the left and then have 10 pixels from the bottom at all times." That way, no matter how big we make this, it's always going to refer back to those parameters that we set here. Now another thing I'm going to do is set a width here, so let's go ahead and set it instead of pixels, let's set it to 85%. That way it's going to be referring to the size of whatever it's in or whatever the event card is. And another thing to do is make sure that I have a minimum width here set to 290. Now, like I said earlier, this is the smallest that I ever want my card to be, so by setting this to 290, I'm not able to actually make this event card smaller than 300 pixels because this is set to 290. Now, why 300 pixels? Well, remember that we have 10 pixels to the left of this and 10 + 290 is 300, giving the total width of the card 300. Now that's just the only settings that we're actually going to be setting on this 'info' layer, but on this next one what we're actually going to do is do something–apply something called a stacks. Now, if you're not familiar with stacks, essentially what a stack is is a special group that allows you to apply parameters to the child layers within that grouping. So if we expand this 'info and rating' you'll see that we have four layers here–the three text ones and then this star rating grouping. And what's going to happen when I apply the stack is that this information is going to be applied to these four layers. Now keep in mind that the layers here, the star layers under this rating grouping, are not going to have those those properties applied to them because these are child layers of this rating grouping. So that's just something really important to keep in mind here as you're starting to build stacks and make sure that your designs are responsive as well. So let's just go ahead and collapse this, come back into the 'info and rating,' and let's come over to this icon here that looks like a folder with three dots, which is going to allow us to create a stacked group. So I'm going to click here, I'm going to make sure that this is vertical because these layers are on top of each other. I'm going to make sure that they're left align and that they have a spacing of five pixels. So now no matter how big we make this it's always going to refer back to these settings for the elements in this 'info and rating' layout. So now what we can do is just come back into this 'rating' grouping. Let's go ahead and make this a stacked one as well, but this one's going to be a horizontal because the elements inside here are relative, or they're next to each other, so their horizontally relative. So we can just go ahead and set these to the top of the layer and have the spacing here set to five as well. And actually, before I click out of this one, let's go ahead and set a width and a height here to 95 and 15–that way the, you know, this grouping would never get smaller than that. And for good measure, let's go ahead and just expand this and select all these star layers and set a width and height here so that the stars never go, or never get bigger or smaller than 15 pixels by 15 pixels. So with that said, we can just go ahead and collapse these, and if we come in and just stretch out this card–let's just zoom out. Let's make this bigger, and you can see that the text didn't update, but all you have to do is just click on this until that updates like that. So you can see if we zoom in here that this is, you know, 10 pixels from the left, it's 10 pixels from the bottom, and that all these groupings inside here are going to be 5 pixels from each other. So this saves you a lot of time if you need to resize something. That way you don't have to reposition anything or have to worry about anything like that. So this is super handy and I hope you guys can see how useful this is in the long run. So now let's just go ahead and command-Z to go back to that small card layer, and what we can do is select this 'event card,' I'm going to command-D about three times. So now we have three of them stacked on top of each other, and let's go ahead and collapse these layers, select them, come back into this stack, and let's select horizontal. So we want them next to each other, to the left and the right. We can say, "Hey, position these to the top and let's go ahead and set a spacing here to 20 pixels." So now these are all spaced out by 20 pixels apiece. And then we can come over to this grouping and name this something like 'row-events,' and then we can command-D a couple times here, selected these, and create another stack. This time, a vertical one. We can left align these as well and just do 20 pixels, and now we have this really nice layout of nine cards here. And let's just go ahead and just rename this to 'column-events.' And now if we come in and actually resize this, all these are going to resize based off of those settings that we just set here. So you can see that that looks nice and it makes it really easy for us to quickly design and resize things if we need to. So now let's go ahead and build a little bit more smarts here into some of these layers. So the first thing to do is just go ahead and make this into an artboard, so let's go ahead and just create an artboard here. And let's go ahead and just set this to something like 1400, or 1440. Let's go ahead and just drag this into here and talk about some of the things that we want to do here.So let's say for instance this is for desktop, so desktop HD, and what we can do is say, "Hey, we want this column to be a fixed width." So we can come in and click on this here to set a fixed width and we can go ahead and set a pixel dimension. Let's do 1,200, so that's going to resize to 1,200. Then we can come into each row and say, "Hey, we want the width here to be 1200 as well so it's going to fill that entire bounds of the column group." So why that's cool is that we can come in and actually start resizing some of these, and you'll see that the ones in the rows are going to resize dynamically as well. So let's go and just click on this 'event card' for instance and let's go ahead and just make it a little bigger. You'll see that these to the right have resized. And you can also go ahead and just delete a card–you'll see that these are going to resize as well. Now we need to go through and click on these to make sure that they update, but you can see that this is a really cool way to really create some flexible designs here in Sketch. So let's just go ahead and keep this one where it is now. One more thing that I wanted to mention here is just how you can take a row and make them, instead of horizontally, you can go ahead and stack them vertically. So if you want to design something for mobile you can do that really quickly as well. So let's say–just go ahead and click 'A' and create a new artboard here. For this drop-down, let's go ahead and just come into 'Apple devices' and set something here for the 'iPhone 8 plus.' And then what we can do is come into one of these groupings here, so let's do this one here. Command-C, we can paste it here into the iPhone grouping, and we can come into this stack and say, "Hey, don't do horizontal do vertical." And then we can resize this to be something like our minimum of 300. So what's happening here is that I forgot to change the width I mentioned, so let's go ahead and actually unclick this, and now we can go ahead and resize this to 300. And then we can just go ahead and move this into the actual artboard. There we go. And now we can go ahead and just expand this artboard size, go ahead and make sure that these elements update, and now you can see with just a couple clicks that we get this really nice layout for mobile

Contents

Technical Definition

Adaptive web design is a process of server-side detection that chooses a design layout and size to display. All types of web design layouts can be used, including responsive layout (although responsive web design usually allows for all the control of Adaptive Web Design, without the need to edit multiple pages on updates). The adaptive design will serve different versions of the site (or page) to different devices based on common screen sizes and resolutions. The only difference is the way the design is looked at from a collateral or device viewpoint rather than the responsive web design (RWD) one-size-fits-all approach to layout.[2] The term was first coined by Aaron Gustafson in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement in May 2011.[1]

Terminology of Techniques

Adaptive web design uses multiple page layouts for a single web page and sometimes progressive enhancement (PE). The adaptive model is a "mobile separate" layout, in contrast to "mobile first", unobtrusive JavaScript, and progressive enhancement of responsive web design.[2] "Mobile separate" is the same concept as "mobile first", except the design layout of AWD is to have a separate base mobile layout versus the single design layout of responsive web design.

Browsers of basic mobile phones do not understand JavaScript or media queries, so a recommended practice is to create a basic mobile layout and use unobtrusive JavaScript and progressive enhancement for smart phones, rather than rely on graceful degradation to make a complex, image-heavy site work.[3][4][5][6]

Technology Advances Leading to Necessity

Adaptive design is a broad approach to web design that focuses on suitability for a variety of interfaces rather than restricting itself to the format intended for a desktop display. This is especially significant in 2018 when smartphone search volumes have overtaken desktop search volumes in 10 countries, even with tablet searches counted in the desktop category.[7] New technologies have emerged, bringing change to the face of web design as a whole and breathing new life into dynamic graphical web design. Note that, although dynamic web practices been around for more than two decades, dynamic design in reference to graphical layout, particularly for mobile device viewing, is a much more recent concept. It is also important, when defining the difference between RWD (responsive web design) and AWD (adaptive web design), that new technologies (such as CSS3 Media Queries, AJAX, HTML5, near universal JS integration, etc.) have centered around RWD- not AWD, which is typically more efficient and effective than AWD. AWD only exists in new design to supplement RWD where RWD technologies cannot be properly interpreted by the browser (in the case of "non-smart" mobile device browsers and outdated smartphones). These recent changes (the transition from desktop to mobile) make fluid mobile design one of the most important concepts in graphical web development and have led to a strong transition to RWD and away from AWD.

History, Adaptation and Evolution

Adaptive web design works to detect the screen size during the HTTP GET request, prior to the page being served and load the appropriately designed page specific to the user-agent. With adaptive standard layout, "generally you would design an adaptive site for six common screen widths: 320, 480, 760, 960, 1200, and 1600”.[8][9] This was not only common practice for mobile optimization, but the transition period between 4:3 low resolution CRT monitors and high resolution 16:9 LCD monitors. Standard adaptive web design was necessary to create fluid layouts for the various monitors available.[8]

In the very early days of smartphones, like the BlackBerrys of the mid to late 2000s, screen dimensions were highly varied, and in addition, mobile browsers on these devices lacked the advanced functionality and plugins used to create rich environments in desktop browsers. Additionally, data was a high priced commodity and very slow so it was necessary to design special "stripped-down" mobile pages, with less images (or lower quality ones) and sharp text-wrapping for easy readability, ads needed to be scaled considerably as well. HTML at the time only allowed for fixed coordinates and no scaling (which is the reason websites were almost always bound to the top left, or top right in certain regions- Responsive web design allowed for centering and relative coordinates, which let to the change to centered content pages). So in order to achieve pages which would load on mobile, developers had to design completely new pages for mobile viewing, more often than not needing to start from scratch, since these browsers were often difficult to navigate, creating large, easily seen links was also necessary.[2] The next major change to adaptive standard web design came in more recent years, particularly with the rise of the iPhone and two years later widespread 3G availability dramatically increasing connection speeds and available bandwidth, a two design dynamic system became the most utilized, a mobile layout (usually with the subdomain prefix "m") optimized for iPhone and a desktop layout. The mobile versions were still usually "scaled-down" with lower quality images and sometimes content such as videos removed to decrease loading time. This was also the first time web developers had to design with a touch screen in mind, using larger clickable links and buttons to facilitate the use over fingers over pointers.[2] As Google's Android OS rose to popularity and introduced more variation in the market share of smartphones, along with the widespread implementation of 4G LTE's ultra fast mobile broadband, it was no longer necessary to downgrade mobile media quality or trim content to deal with slow connection speeds, and, with so much variation in devices, the multi-page paradigm of Standard Dynamic web design widely lost favor with developers. While some still use the concept to completely separate touch-screen content design from desktop design, responsive web design has nearly all the tools necessary to perform nearly any manipulation in response to a large variety of factors, allowing for one page to serve all purposes. When integrating with material design or device specific layout and color schemes, some developers find it simpler to create three page templates (Android, iPhone/iOS, desktop) changing the icons and colors between each, while using media queries to determine layout. The practice results in much simpler page design and code, but updating requires editing all 3 templates. There are variations on this concept that blur the lines between AWD and RWD, like Django's "views."[2][9][4][1]

Responsive Web Design Vs. Adaptive Web Design

Responsive design uses fewer page layouts than standard adaptive design, typically (in nearly all cases) only one. Adaptive design is considered less future-proof and a far less inefficient design model than responsive design because the screen sizes of common devices are constantly changing and highly variable. In the very early days of mass smartphone adoption, the simple 2-site model worked well (a media rich, widescreen page for desktop viewing; a smaller size (in terms of the quality/file size of loaded assets- to save data) page formatted for small screen viewing, with less clutter, larger fonts and tighter text-wrapping constraints for mobile viewing). Additionally, in the first few years of the smart-phone boom, only a few models made up the majority of the market share, so mobile pages were designed for best viewing on those devices- ignoring the minor glitches when the pages were loaded on less popular devices. With the rise of the iPhone, many developers began tailoring their mobile sites specifically to the iPhone and touch screens. Responsive Design is built on a fluid grid vs. adaptive design’s fixed grid.[2] The hybrid Adaptive/Responsive design model involves multiple pages formatted in responsive web design layout, when the nearest appropriate layout is served, then the page responds to the user's device.[8]

Standard Adaptive layout (screen-dependent multi-page) can also use viewport responsive scaling of the page in conjunction (as in responsive web design), but new responsive web design strategies and technology have all but made the need for separate multi-screen pages obsolete except where the site wishes to target users of non-smart internet-capable mobile devices and obsolete smartphones which do not respond to new responsive design scripts.[8] As previously stated, things like Django's "views" concept and some aspects of AJAX blur the lines, as they serve different versions of pages, for many reasons, but some can be for fluidity on different devices, however, pages are generated dynamically, not statically (though one could argue that the "views" are static templates to be filled with content. In the end, it is all up to the developer how he or she feels is the most appropriate way to target the devices their content will be viewed on in the most fluid, clean and integrated way. There is certainly more than one way to skin the cat of dynamic web development.[2]

[9][4][1]

See also

References

  1. ^ a b c d Gustafson, Aaron. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, LLC; 1st edition, 2011.
  2. ^ a b c d e f g "Understanding and Comparing Responsive, Adaptive and Fluid Design | ICO Web Solutions". ICO Web Solutions. 16 January 2014. Retrieved 17 April 2017.
  3. ^ Wroblewski, Luke (November 3, 2009). "Mobile First".
  4. ^ a b c Firtman, Maximiliano (July 30, 2010). Programming the Mobile Web. p. 512. ISBN 978-0-596-80778-8.
  5. ^ "Graceful degradation versus progressive enhancement". February 3, 2009. Archived from the original on 2014-11-13. Retrieved 2016-12-21.
  6. ^ Designing with Progressive Enhancement. February 2010. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010.
  7. ^ Sterling, Greg (5 May 2015). "It's Official: Google Says More Searches Now On Mobile Than On Desktop". SearchEngineLand.com. Retrieved 27 January 2017.
  8. ^ a b c d Adiseshiah, Emily Grace (Mar 1, 2016). "Choosing a web design: Responsive Vs Adaptive".
  9. ^ a b c VenturePact, VenturePact. "Designing for 10000 screens 4 layout tips for responsive web design".
This page was last edited on 2 October 2018, at 10:23
Basis of this page is in Wikipedia. Text is available under the CC BY-SA 3.0 Unported License. Non-text media are available under their specified licenses. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc. WIKI 2 is an independent company and has no affiliation with Wikimedia Foundation.