Adaptive vs Responsive Layouts
•Als PPTX, PDF herunterladen•
1 gefällt mir•1,349 views
EPAM University Day, Kharkiv, May 31th, 2016, National Technical University 'KPI' (PPC NTU 'KPI'). What is Adaptive and Responsive design, what's the difference, how it works, how to do it. https://www.facebook.com/photo.php?fbid=276825965998867&set=gm.728103717291974&type=3&theater Video on #33 slide — https://www.youtube.com/watch?v=B1n0vxymkhI
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Adaptive vs Responsive Layouts
Ähnlich wie Adaptive vs Responsive Layouts (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (17)
Adaptive vs Responsive Layouts
- 1. 1CONFIDENTIAL UNIVERSITY DAY: Adaptive vs Responsive Layouts
- 2. IHOR ZENICH
- 3. 3 Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
- 4. 4 Each page layout name describes how the layout behaves when the page is viewed at different browser widths HEADER SIDEBAR CONTENT FOOTER
- 6. 6 Main types of page layouts Layouts Fixed Elastic Hybrid AdaptiveResponsive Fluid/ Liquid
- 7. 7 AWD & RWD Adaptive Web Design & Responsive Web Design is the modern solution to the fixed-width problems of the past
- 9. 9 Adaptive Web Design “Adaptive web design (AWD) is different from Responsive Design in that there isn’t one layout that always changes. Instead, there are a series of static layouts based on breakpoints for multiple screen sizes, and the layout used depends on the screen size used. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects It wait on standby until someone visits the site, detects the type of device used, and delivers the properly sized layout to view for that device. ”
- 10. 10 Adaptive and desktop HEADER SIDEBAR CONTENT FOOTER HEADER SIDEBA R CONTENT FOOTER HEADER SIDEBAR CONTENT FOOTER POSITIONED IN THE CENTER SMALLER COLUMN WIDTH COLUMNS BECAME ROWS
- 11. 11 Adaptive layout Uses either fluid or fixed layout Uses CSS3 media queries is require Device is served the layout with the closest possible match Targets specific screen resolutions
- 12. 12 Adaptive Web Design Progressive Enhancement Feature Detection Layouts based on breakpoints Content strategy
- 13. 13 How adaptive design works? In adaptive design, the web server detects the device and then determines which content to send to the relevant device
- 14. 14 AWD benefits Super-efficient page loads Adaptive websites are much better for load time performance and overall user experience Allows you to tailor the experience based on user intent and context The experience on an adaptive site can be finely tuned to the device No need to scratch your existing website completely Developers don’t have to go back to the drawing board and re-code the existing website from scratch. Reach the maximum mobile universe including non-smartphones If developing markets are important to your business this is the most inclusive globally robust approach. Optimized media content for specific devices As is the case with AWD, this approach reduces the need to maintain two content management systems with the mobile-specific site development approach.
- 15. 15 Adaptive Layout Usage Pros Cons Fast to build Can tailor a design to a specific device Not „future-proof“ Challenging to SEO — Search engine have trouble appreciating identical content on multiple sites.
- 17. 17 Responsive Web Design “Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors), based on screen size, platform and orientation. True responsive design is fluid, using CSS3 media queries to respond to any screen sizes. With the use of this CSS3 module, you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser.”
- 19. 19 Responsive and desktop HEADER SIDEBAR CONTENT FOOTER HEADER SIDEB AR CONTENT FOOTER HEADER SIDEBAR CONTENT FOOTER FILLS ALL SCREEN WIDTH BOTH COLUMNS BECAME TIGHT COLUMNS BECAME ROWS
- 20. 20 Responsive layout Entire page is free to flow and consume space Mostly uses fluid layouts ideology Uses CSS3 media queries to solve the problem No specific screen resolutions
- 21. 21 How responsive design works? Responsive design is client side, meaning that the whole webpage is delivered to the device browser (the client), and the layout is adjusted to respond to the screen display.
- 22. 22 Main principles RWD Media queries Flexible layout Dynamic fonts Flexible media 01 02 03 04
- 23. 23 Benefits of RWD Functions on all devices 1 Adapts to all screen sizes 3 One universal URL 4 Higher search rankings (SEO) 5 One codebase 2
- 24. 24 Responsive Layout Usage Pros Cons Optimal user experience on all devices Future proof and easily manageable Requires more though and preparation at the design stage Takes longer to build
- 25. HOW TO
- 26. 26 Media Query Syntax @media type and (expression){ ... } @ Integration css rule Screen TV Printer Projector Resolution CSS code Orientation 4:3 Aspect ratio Sizes Color [AND, NOT, ONLY, OR]
- 27. 27 Media queries Media queries provide different instructions for different size screens.
- 28. 28 Relative units The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere.
- 29. 29 Breakpoints Breakpoint – point where the design breaks and were the design breaks. Adaptive: Breakpoints oriented on the Viewport Responsive: Breakpoints oriented on the layout
- 30. 30 Breakpoints Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 on mobile device. Most CSS properties can be changed from one breakpoint to another
- 31. 31 .wrapper { width: 600px; margin: 0 auto; } section { height: 365px; } aside { height: 200px; } CSS @media (min-width: 767px) { .wrapper { width: 750px; } section { float: right; width: 500px; height: 565px; } aside { float: left; width: 240px; height: 565px; } } CSS @media (min-width: 1000px) { .wrapper { width: 960px; } section { width: 700px; } aside { width: 250px; } } CSS Adaptive layout CSS
- 32. 32 Responsive layout CSS section { height: 365px; margin-bottom: 10px; } aside { height: 200px; } CSS @media (min-width: 767px) { section { float: right; width: 66%; height: 565px; } aside { float: left; width: 33%; height: 565px; } } CSS
- 33. 33 AWD vs RWD
- 34. 34 The hardest thing to learn about new tools is not how to use them, but when to use them.
- 35. 35 WHAT WHY WHERE WHEN WHO HOW Any Questions ???
- 36. THANK YOU!
Hinweis der Redaktion
- Page layout is the part of graphic design that deals in the arrangement of visual elements on a page
- Each page layout name describes how the layout behaves when the page is viewed at different browser widths
- WHY so popular Why to use
- Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on. Responsive design works on the principle of flexibility. The idea is that a single fluid design based upon media queries, flexible grids, and responsive images can be used to create a user experience that flexes and changes based on a multitude of factors. The primary benefit is that each user experiences a consistent design. One drawback is a slower load time. Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. This can result in a lack of consistency across platforms and devices, but the load time tends to be faster.
- Адаптивный веб дизайн — это подход к проектированию и созданию веб-сайтов (который базируется на наборе макетов соответствующему девайсу/экрану). Адаптивный веб-дизайн (Adaptive web design или AWD) – берет лучшее из этих идей «mobile first» и progressive enhancement (прогрессивного улучшения) и дополняет их. В простом изложении, данная стратегия предполагает использование чистого HTML как базиса и дальнейших улучшений, и функций за счет использования слоев CSS и JavaScript. Если для какого-то определенного браузера или устройства доступна какая-то новая функция, то ее можно использовать только после проверки на ее доступность, сохраняя обратную совместимость с не поддерживающими устройствами (например, тач-события). В случае адаптивного дизайна элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта. В адаптивном дизайне повсеместно используется JavaScript для управления поведением и функциями объектов на сайте. Он требует работы с объектной моделью элементов на странице, подразумевает смену их иерархии/вложенности на разных устройствах. Не является обязательным обеспечение одинакового вида сайта и его функционала в разных браузерах. Возможно использование новых технологий, не поддерживаемых старыми версиями программ — потому что дизайн, как было сказано выше, адаптируется под определенные типы устройств. В итоге получаем, что адаптивный веб-дизайн – это отзывчивый веб-дизайн плюс прогрессивные улучшения. Формула построения адаптивного дизайна [% + media-queries + %-media + JavaScript + magic] Adaptive Web Design (AWD) uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet. http://www.webdesignerdepot.com/2014/05/responsive-vs-adaptive-webdesign-which-is-best-for-you/ http://www.mediumwell.com/responsive-adaptive-mobile/
- Fixed layout on desktop: Positioned in the center No horizontal scroll
- Adaptive layout principles: Targets specific screen resolutions Uses either fluid or fixed layout Uses CSS3 media queries is require Device is served the layout with the closest possible match An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed unit like pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries. A media query is an expression of logic, and when used in combination with other media queries, they form a basic algorithm. So for example, an adaptive page layout might say something like, “If the browser 500 pixels wide, set the main content container to be 400 pixels wide. If the browser is 1000 pixels wide, then set the main content container to be 960 pixels wide.” Beyond the main content container, other parts of the page might change in width, swap places, or be removed. For example, a two column layout might become a single column layout if the browser is too narrow. Adaptive layouts are a good stop-gap solution if a legacy static layout needs to be converted to support mobile devices. They also typically require less development time than a responsive layout. The major drawback is that device widths in-between the explicit breakpoints are often less than ideal, with either too much space or not enough space.
- Составляющие адаптивного дизайна Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное. Проектирование для мобильных устройств с самых ранних этапов («mobile first»); Применение гибкого макета на основе сетки (flexible, grid-based layout); Использование гибких изображений (flexible images); Работа с медиазапросами (media queries); Применение постепенного улучшения.
- Adaptive design is predominantly server side. This means that before the page is delivered, the web server detects the device and loads an enhanced version of a website that is optimised for its dimensions and native features. By providing different batches of HTML, CSS and even JavaScript, an adaptive website is capable of superior content delivery and a highly differentiated user experience. For example, a mobile device can benefit from an optimised layout, which contains a mobile-friendly navigation, smaller image sizes for faster download speeds, and simplified UI for improved usability.
- The case for... 1. Super-efficient page loads Adaptive websites are much better for load time performance and overall user experience. This is because adaptive delivery works by only transferring those assets necessary for the specific device and optimising images and multimedia content on the fly to suit display resolution and size. For example, when a high-density retina display is detected, high-resolution images are transferred and used instead of defaulting to high-res images for everyone. This opens up the opportunity to have, for example, three weights of experience: high, medium and low, and deliver these based on location, connection speed etc. So rich assets are developed to quick smartphone owners connecting over wi-fi in developing countries. 2. Allows you to tailor the experience based on user intent and context For some businesses, a mobile user’s intent is to engage with the business in a very specific way that is different from their behaviour on a desktop website. The experience on an adaptive site can be finely tuned to the device, so that it is intuitive, super quick and takes advantage of things like location, voice and HTML5. 3. No need to scratch your existing website completely Developers don’t have to go back to the drawing board and re-code the existing website from scratch. This is important because many websites are complex, with a lot of legacy code built up over time, and scratching all the effort that has gone into it is generally not an option. 4. Reach the maximum mobile universe (more than RWD) including non-smartphones If developing markets are important to your business this is the most inclusive globally robust approach. 5. One URL with associated SEO and discoverability/sharing benefits As is the case with RWD, this approach is Google friendly and reduces the need to maintain two content management systems with the mobile-specific site development approach. If you need a highly interactive, secure site that works for everyone who might ever visit your site with any type of mobile device, then you have to create an adaptive design.
- Adaptive Layout pros and cons. Pros: Fast to build Can tailor a design to a specific device Cons: Not „future-proof“ Challenging to SEO — Search engines have trouble appreciating identical content on multiple sites.
- SHORT TIPS: Отзывчивый дизайн подход к созданию веб сайта с расчетом на простое и удобное его использование Отзывчивый дизайн создается с использованием адаптивной разметки (не путать с адаптивным дизайном) Используются исключительно HTML и CSS — без подключения JavaScript для определения «отзвычивости» элементов Верстка определяет, как будут выглядеть элементы, но они не скрываются/не заменяются другими, и поведение, также как и функции, не меняется, в отличии от адаптивного дизайна DESCRIPTION: Отзывчивый веб дизайн является техникой адаптации макета под различные устройства, и является составной частью адаптивного веб дизайна. Отзывчивый веб-дизайн = «резиновый» макет, в то время как адаптивный веб-дизайн = «резиновый» макет + прогрессивное улучшение. Формула построения отзывчивого дизайна [% + media-queries + %-media] “Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors), based on screen size, platform and orientation.”
- Responsive Web Design (RWD) is a fluid grid system that allows a website to fit any given screen or device size, meaning that the website you’re viewing will conform to whatever screen size you’re using. All the elements of the website you’re viewing stay the same but those elements are rearranged as the screen becomes larger or smaller. To do this, RWD uses specific CSS code to modify the elements of a website based on the size of the device it’s being displayed on.
- Fixed layout on desktop: Positioned in the center No horizontal scroll
- Responsive layout principles: No specific screen resolutions Entire page is free to flow and consume space Mostly uses fluid layouts ideology Uses CSS3 media queries to solve the problem A responsive page layout uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout. As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width. Typically responsive designs are built using a mobile-first approach. That means the mobile layout is designed first, and then as the browser becomes wider on tablets and desktops, the designer will find ways to expand the mobile layout. This tends to create better experiences overall, because it’s easier to expand a design than to try and simplify a large layout for mobile screens.
- In a nutshell, responsive design is a modern web development method used for creating dynamic changes to the appearance of a website. Responsive design is client side, meaning that the whole webpage is delivered to the device browser (the client), and the layout is adjusted to respond to the screen display.
- #1 Higher Ranks in Google (SEO) Let me say that again, responsive web design means higher rankings in Google search. Let’s face it, you build a website to be found and receive traffic and leads – am I right? Of course. This priority is a MUST for any business owner both small and big businesses can benefit from more website traffic and leads. Now let me explain the magic and how it happens. When your site has one responsive design that scales to fit any device, you don’t need another version of your website that’s built just for mobile devices. With only one strategic URL, you strengthen your SEO. Forget about building separate website designs for tablets, iPhones, desktops, and laptops – that’s now a thing of the past. Don’t forget to read this Google article. -*Google claims they will rank these responsive web sites higher. Google will begin ranking mobile-friendly sites higher starting April 21, 2015 Google confirms that Responsive web sites optimized for mobile devices perform better in local search results. *Update – 5/6/2015 Confirmed increase of higher Google search engine results. With our mobile-friendly web design, we experienced an increase of website traffic and higher search engine rankings. In addition, we are receiving a higher volume of calls and business. *Update 5/13/2015 Confirmed – It’s Official Google Says More Searches Now On Mobile Than On Desktop. “more Google searches take place on mobile devices than on computers in 10 countries including the US and Japan” #2 Increased Sales and Revenue Just like I mentioned in #1, the goal is receiving more traffic and leads which flows into increased sales and revenue. Now that we have only one version of the website – that’s responsive, we have successfully eliminated the need to design multiple version of the website. This gives us one single style sheet (CSS) for a consistent feel for the user experience. This means that anyone can comfortably view your website and stay longer, reading comfortably, from any device! The more consistent the user experience – the more sales you make! #3 Great User Experience If your website already receives a good amount of traffic and revenue – think about the boost in revenue and traffic you’ll gain once you opt for a responsive design. Happy customers using your website leads to more sales and revenue once again! #4 Save time using analynics If you have multiple versions of your website that you’re tracking in Google analynics think of all the time and money you can save by condensing it all into one report. That’s right! One responsive website design will cut down on tracking your visitors. Faster monitoring is better than what you’re doing right now. What will you do with all the time you’re going to save? #5 Save money on mobile development Imagine maintaining one website and not multiple. Yes, with one responsive design it can be that much easier and of course faster making changes and building new pages. Companies could save a significant amount of time and money once again on a responsive web site design. It really is that crucial saving time on design – think of all the time you could put into building campaigns and creating new content for your blog etc. It simply amazes me how powerful a single responsive theme is for business. #6 No more duplicate content penalties Ut oh- remember all those multiple versions of your website? You know, the one you designed for a tablet and the other smartphone design? Yes, maybe you didn’t know that Google actually penalizes you for having duplicate content. The same articles are duplicated again and again on your website. These penalties make you look spammy to Google and hurt you rankings. The worst thing duplicate content can do is de-index your site. Ouch! Responsive web design comes to your rescue and eliminates the need for duplicate content and banishes it from your website. Google bots come back to inspect your website and you’re back in the safe zone. #7 Enhanced offline browsing experience Most smartphones and tablets are HTML5 enabled, meaning they have offline browsing capabilities. With that, users can read email newsletters in HTML5. Perfect when the user does not have an internet connection. #8 Staying ahead of competition Responsive web site design is still considered new. A huge majority of websites are not responsive. You could stay ahead of your business competitors simply by switching to a responsive website design. There’s a large amount of website and business owners that are not comfortable investing in this new technology because – it’s new. As you now know, Google plans to give special treatment to websites that have a responsive design (as of April 21st, 2015). You’ll see companies scrambling to hire web designers by the end of 2015 for responsive web design to keep up with the demand of mobile devices. #9 Staying in business Now that you know the benefits and where this whole responsive website craze is going, you realize you need responsive design. Without it, you are losing customers and money. People are now purchasing more frequently online than in stores. People are online reading product reviews before purchasing a product! Cater to your potential customers and grow your business! If you don’t have a responsive web design, you’re actually losing money and business. You’re losing out on a whole target market that uses their mobile device to shop. #10 the Cool Factor Looking like a company that’s tech friendly is cool. Who doesn’t want to be cool? If your website is up-to-date and using all the latest and greatest technologies for an overall great user experience, you’re cool. You website does not look “stale” Have you ever been to an “outdated” website with – frames, tons of huge blue links and animated .gifs ? Having a website that looks clean, modern, sleek, and easy to ready builds trust and trust builds revenue.
- Responsive Layout pros and cons. Pros: Optimal user experience on all devices Future proof and easily manageable Cons: Requires more though and preparation at the design stage Takes longer to build
- A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
- Relative Lengths Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums. UnitDescriptionemRelative to the font-size of the element (2em means 2 times the size of the current font)Try itexRelative to the x-height of the current font (rarely used)Try itchRelative to width of the "0" (zero)remRelative to font-size of the root elementvwRelative to 1% of the width of the viewportvhRelative to 1% of the height of the viewportvminRelative to 1% of viewport's smaller dimensionvmaxRelative to 1% of viewport's larger dimension%
- Breakpoint – point where the design breaks and were the design breaks. Adaptive: Breakpoints oriented on the Viewport Responsive: Breakpoints oriented on the layout
- With each viewpoint device, there is a new breakpoint that is primarily defined by the width and resolution of this device and is declared by Media Queries. It is up to the designer, developer, and client to agree on a set of breakpoints to consider. In most cases, it is enough to focus on a few that make sense, instead of the entire range of devices. Think about your content while sketching While sketching, you’ll certainly be thinking about the way things should look. My experience is that much UI sketching of this type revolves around the layout of elements on the screen. I’ve found it useful to keep thinking about the content while sketching, and to consider what will happen to the content in various situations. When designing responsively, it can be useful to consider how you’ll handle the following content in particular: Text Navigation Tables Oh, sure, there are many more things to consider, and you’ll end up creating your own list of “things to do some extra thinking about” as the project progresses. For now, let’s take a look at the items listed above. TEXT Before you say, “Hey, wait a minute, didn’t you just tell me that I didn’t have to draw text while sketching?” hear me out. While sketching, there are a couple of text-related issues you’ll need to tackle: column width and text size, both of which are relevant in proportion to the screen and the other elements on the page. Column width is fairly obvious, but it can be difficult to estimate how wide a column will be with actual text. In this case, sketching on a device might give you a better idea of the actual space you have to work with. Another method I’ve used is just to make a simple HTML page that contains only text, and load that into a device’s browser (or even an emulator, which while not optimal still gives a more realistic impression than lines on paper). When the text seems too large or too small, you can adjust the font size accordingly. Once it seems right, you’ll be able to make your sketches a bit more realistic. Note: Distinguish betweentouchability and clickability. Many designers, myself included, have made the mistake of refining links for people who click on them using a mouse, or even via the keyboard, without considering how touchable these links are for people on touch devices.Think about the size of links—not only the text size, but also the amount of space around them. Both of these factors play a role in thetouchability or clickability of links (and buttons): large links and buttons are easier targets, but slightly smaller links with plenty of space around them can work just as well. That said, there’s a decent chance that no matter what you choose to sketch, you’ll end up making changes again when you create your mockups. This is the great thing about sketching that I can’t repeat often enough: you’re going to refine your design in the browser anyway, so the speed with which you can try things out when sketching means you won’t have to do detail work more than once (unless your client has changes, but we all know that never happens). NAVIGATION Navigation is another poster child for sketching on actual devices. The size issues are the same as with links, but there’s a lot more thinking to do in terms of the design of navigation for various devices, which means navigation might change significantly at each major breakpoint. Think back to Bryan Rieger’s practice of designing in text first, and ponder what you would do before the very first breakpoint if you had only plain HTML and CSS at your disposal—in other words, if you had no JavaScript. That means no, you can’t have your menu collapsed at the top of the screen and have it drop down when someone touches it. If you have your menu at the top, it’s in its expanded form and takes up all the vertical space it normally would. This is a controversial enough subject, with even accessibility gurus in disagreement: JavaScript, after all, is currently considered an “accessibility supported” technology. But this isn’t necessarily about accessibility. It’s about thinking about what happens when a browser lacks JavaScript support, or if the JavaScript available on the device is different than what you’d expect. Your content will be presented in a certain way before JavaScript does its thing with it, no matter what the browser. So why not think about what that initial state will be? In the chapter on wireframes, I talked about my preferred pattern for navigation on the smallest screens: keep it near the bottom of the screen and place a link to that navigation near the top of the screen. JavaScript, when available and working as expected, can move that navigation up to the top and create the drop-down menu on the fly. But a pattern is not design law, so how you choose to handle the smallest screens will depend on your project. If I had only a few links in my navigation, I might very well put the menu at the top from the very start, and there it would stay at every breakpoint. Remember that JavaScript and CSS let you do a lot of rearranging of stuff on the screen. That knowledge should empower you to safely design a great page with plain HTML and use JavaScript and CSS to spice it up any way you like. This is the essence of progressive enhancement. TABLES Tables! Oh, the bane of the responsive designer (or wait, is that images? Or video? Or layout? Ahem). Tables are tough to deal with on small screens. I’d love to tell you I have all the answers, but instead I have more questions. Hopefully, these will lead you to a solution. It’s good to think about these while you’re sketching. First of all, what types of tables will you be dealing with? Narrow? Wide? Numerical? Textual? Your content inventory should give you enough information to answer these simple questions. Once you’ve considered those, try to categorize the types of tables you have into something like the following classes (Figure 7.7): Small-screen-friendly tables, which you’ll probably leave as they are, because they’re small enough and will work fine on most small screens. Blockable tables, which you can alter with CSS so that each row in the table functions visually as a block item in a list (Figure 7.8). Chartable tables, which contain numerical data that can be transformed into a chart, graph, or other visualization that will take up less space on a small screen. Difficult tables, which are hard enough to deal with that you’ll need to come up with a different plan for them, sometimes even on a case-by-case basis. These are our enemies, but unfortunately, are the friends of our clients, who all love Microsoft Excel. Oh well. Breakpoints are when your responsive site reaches a certain viewing width, and calls new styles for that width The standard breakpoints are tablet and mobile, and their respective orientations It is always important to check your site at points that aren’t the default to create a truly cohesive experience. Make sure that your custom breakpoints don’t conflict with any of the standard breakpoints. RWD is meant in an attempt to be future proof, so spending to much time focusing on present devices is not good practice Ensuring the viewing experience remains at a consistent quality level will make you look like an expert to clients.
- Example of adaptive layout in code(HTML like in prev).
- Example of responsive layout in code(HTML like in prev).
- Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on. Responsive design works on the principle of flexibility. The idea is that a single fluid design based upon media queries, flexible grids, and responsive images can be used to create a user experience that flexes and changes based on a multitude of factors. Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.
- The hardest thing to learn about new tools is not how to use them, but when to use them.