{"id":58,"date":"2014-06-11T19:58:19","date_gmt":"2014-06-11T19:58:19","guid":{"rendered":"https:\/\/www.billnewell.com\/?p=58"},"modified":"2014-06-11T19:58:19","modified_gmt":"2014-06-11T19:58:19","slug":"fixed-fluid-responsive-adaptive-which-technique-is-right-for-you","status":"publish","type":"post","link":"https:\/\/devdomewp.justdomeit.com\/index.php\/2014\/06\/11\/fixed-fluid-responsive-adaptive-which-technique-is-right-for-you\/","title":{"rendered":"Fixed, Fluid, Responsive, Adaptive? Which Technique is Right for You?"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/epHg4L2HftU?si=-7g7iErl9jhs-4t2\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Nowadays designing websites and web apps requires more planning than ever before. New techniques and delivery devices can sometimes raise confusing questions. So where do you begin?<\/p>\n\n\n\n<p>Of course, as always, everything starts with understanding your business. Before you push the first pixel you need to understand your audience, what problem your product or service solves, what the value is to the target user, and what it will take to get there both financially and logistically.<\/p>\n\n\n\n<p>Once your business objectives and resources are clearly defined, you are ready to move on the actual design of the product. To do this you would typically call your creative director, art director, and \/or lead designer (depending on how big your organization is) to share your ideas re the business or issue you want to address. Then you may be asked something like, \u201cDo you want the site to be responsive?\u201d To which you probably say, \u201cWhat?\u201d Or, even more perplexing, you are asked \u201cShould we make the site responsive or adaptive?\u201d At this point, your head may start to spin Linda Blair\u2019s in the exorcist movie (to cite an old flick). As if that wasn\u2019t enough confusion, your staff may then offer additional options like fixed and fluid.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Of course, as always, everything starts with understanding your business.<\/p>\n<\/blockquote>\n\n\n\n<p>So what\u2019s up with all these new terms? Fixed, fluid, responsive, adaptive? Let me try to define these for you.<\/p>\n\n\n\n<p>Fixed\u2014the best way to explain this kind of design is that this is the traditional way of developing a website. This type of page does not change shape or re-arrange content based on the device that you are using to view them. Basically, a fixed site looks the same on a computer or a smart phone. Of course, it will look tiny on a phone screen and users will need to zoom in to be able to read anything.<\/p>\n\n\n\n<p>Fluid\u2014this kind of site adjusts based on percentages for width, making the columns relative to each other. This allows the site to scale up or down based on the size of the browser in which it is been displayed<\/p>\n\n\n\n<p>Responsive\u2014this type of design is built on a fluid grid. Additionally media queries are added to be able to scale and re-arrange the content as needed based on the size of the browser window or device in which it is displayed. Responsive sites re-use the same content in all devices.<\/p>\n\n\n\n<p>Adaptive\u2014these sites are not built on a fluid grid, although this is not a hard rule. They also use media queries, but they also rely on device detection to serve the correct version of the site or web app. When you build an adaptive site you usually create several versions of the site. At a minimal you create a general version to be used in computers, a table size for 7 to 10 inch displays, and a phone version for the smaller screens.<\/p>\n\n\n\n<p>If you are building a new site or web app, in most cases you should consider a responsive and adaptive approach. Many factors are to be considered in addition to the three main considerations listed at the beginning of this post. Time to market, budget, and usability are key factors.<\/p>\n\n\n\n<p>There are many books and websites that can give you a lot more information. If you want to learn about responsive options you can check out <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/getbootstrap.com\/<\/a>. There are also several video on the web you can watch.<\/p>\n\n\n\n<p>Just in case you are still confused, I have created a little animation to illustrate the difference between the four design approaches I have addressed in this post. Hope you find this helpful and as always thank you for reading my blog<\/p>\n\n\n\n<p>Bill<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; Nowadays designing websites and web apps requires more planning than ever before. New techniques and delivery devices can sometimes raise confusing questions. So where do you begin? Of course, as always, everything starts with understanding your business. Before you push the first pixel you need to understand your audience, what problem your product [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":59,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[27],"tags":[62,63,64,65,66],"class_list":["post-58","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technologies","tag-adaptive","tag-design-terms","tag-fixes","tag-fluid","tag-responsive"],"_links":{"self":[{"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/posts\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":0,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdomewp.justdomeit.com\/index.php\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}