{"id":1239,"date":"2013-04-05T22:07:39","date_gmt":"2013-04-05T22:07:39","guid":{"rendered":"http:\/\/www.semdrive.com\/?p=1239"},"modified":"2013-04-05T22:07:39","modified_gmt":"2013-04-05T22:07:39","slug":"mobile-web-design-basics-size-matters","status":"publish","type":"post","link":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/","title":{"rendered":"Responsive web design basics: size matters"},"content":{"rendered":"

Mobile websites, responsive web design, mobile experiences:<\/strong> they seem to be one of the biggest trends in web design and development in recent years. Not surprising, since even though the web is a constantly changing medium, it had never seen such a drastic change as the one introduced by the explosion of mobile devices in the past few years. The web is no longer for computers only: any screen from the one on your 4-inch phone to the one on a 60-inch TV set is a possible window to the web. The rules have changed.<\/p>\n

You’ve probably heard a lot of talk about responsive web design<\/strong>. In short, it’s a design and development strategy that takes the user’s context into account and makes the resulting website adapt, or respond, to deliver an optimized experience for the user, tailored for their current context.<\/p>\n

But what does the term really encompass? What is this user context that we’re talking about? The first and most important aspect is screen size<\/strong>, which is the topic we’ll cover first. In responsive web design, a site’s layout must dynamically adapt to fit the screen it’s being viewed on, in the best possible way. That usually means rearranging the elements on the page according to screen size (or well, window size if you’re on a computer and your window is not maximized).<\/p>\n

So many screen sizes, so little time<\/h2>\n

The range of possible screen sizes people use to surf the web has increased drastically. Up until a few years ago, a web designer only had to worry about a few screen sizes and resolutions, and the problem was usually solved by choosing a midrange fized width that would accomodate the majority of users. If you had an unusually large monitor, well, the site content would look like an awkward narrow column snaking down the middle of the page, wasting most of your screen real estate. If you had an old monitor with a low resolution, well too bad: you’d get a site too big for your screen and an awful horizontal scrollbar. Didn’t matter much, since only a very small percentage of users would fall into those extreme cases. The whole range typically went from 10″ to 21″ or so, with the vast majority falling into the 14″ to 17″ range, which were the sizes of the monitors in nearly every home or office during quite a few years.<\/p>\n

But now the range has widened enormously and so have the percentages of users on each size range. The vast majority of web users now browse the web on several devices: a single person will probably browse the web on their big computer monitor at work, their medium screen on their laptop at home, on their tablet while sitting on their living room, on their phone on the bus or while waiting in line, all during the course of a day. So let’s start counting: most modern smartphones range from 3.5″ to 5″, tablets are usually anywhere between 7″ to 10″, netbooks and laptops go from 10″ to about 17″, which is where typical desktop monitors begin, going up to around 27″, and finally TV sizes range from somewhere around those 27″ up to the limits of your imagination<\/a> (and bank account). And guess what? People browse the web in all of those devices, and view your website in all of those different sizes and resolutions.<\/p>\n

\"\"<\/p>\n

That means that if you have a website that’s designed to be viewed on a single screen size range, you’re shutting more users out than you probably imagine, or at the very least, making it harder for them to visit your site and tarnishing their experience. If that’s not a strong enough point, consider this: nearly 25% of users nowadays browse the web exclusively on their phones or tablets! That means that if your site is designed only for desktop viewing, they never even get to see the site the way it was meant to be seen; they have to settle for a complicated experience which forces them to look at tiny unreadable text which then they have to pinch to zoom and scroll around to read. A sure-fire way to scare your users off and make them forget quickly about your site.<\/p>\n

So we’re talking about a range that expanded roughly from 10-20″ to 3.5-60″. OK, yes, not a lot of users are likely to sit down on their couch and browse your site on their 60″ TV using their remote. But what about the ones that do? And this is just mentioning the typical screen sizes of devices that didn’t even exist five years ago. What about the screen sizes of the new devices that are coming out in the next 5 years?<\/p>\n

We shouldn’t have to rethink a site’s design every year to accomodate new devices, nor should we settle for delivering the best experience to a portion of users and a sub-par experience for the rest. The answer becomes obvious: the website must adapt to any screen size, including typical phones, tablets and desktop monitors; but it should also be able to adapt and look its best in any device, using the available screen area in the best possible way.<\/p>\n

Adaptation<\/h2>\n

So what exactly does a good responsive site do, anyway? Usually, you’ll get a simplified version of the site on the smallest screens (your phone), with the most important elements showing up first in the precious little available screen area. A simplified navigation, usually just one column of text and images, and text that’s large enough to read comfortably without zooming in. No unnecessary elements cluttering the screen, usually a lot more focus on the main content and not a lot of secondary elements. Also, links and buttons large enough to be easily activated with your (kind of big and not that precise) fingers.<\/p>\n

\"\"<\/p>\n

Then, when viewed on a large desktop screen, the same elements will adapt and rearrange themselves into several columns, with a more complete and efficient navigational menu, text can be smaller since there’s a lot more screen real estate available, and buttons can go back to normal size since users will have a much more precise mouse cursor. Also, possibly more elements will be loaded onto the page; elements that are not essential to the mobile experience but can be a nice addition to the desktop experience: Twitter feeds, external links, additional resources in general.<\/p>\n

Tablet users will get an intermediate version, usually similar to the desktop version but maybe a little simplified and also with the larger buttons and such, since moving from desktop to tablet means switching from mouse to fingers.<\/p>\n

Is your site responsive?<\/h2>\n

So how can you tell if your site is already responsive? The easiest way is to take your browser window and make it not-maximized, so that you can drag its corner and resize it. Now start making it smaller, going all the way from full screen to the smallest size the window will let you. If the site is responsive, the elements should rearrange right before your eyes, leaving the site in an optimal state no matter what size you make your window. This means no horizontal sidebars, no elements that don’t fit in the available window size, and no text that’s too small (or large) to be read comfortably. Go ahead, try it out on this site.<\/p>\n

Conclusion<\/h2>\n

We just can’t afford to build sites for a single screen size anymore. Having a responsive site will guarantee that each and every user that visits your site will get an optimized experience<\/strong> that allows them to fully engage with your site in the easiest, most enjoyable way, which will translate to more satisfied visitors (or users, or customers).<\/p>\n

—<\/p>\n

Contact us<\/a> if you’d like more information about our responsive web design services. We offer design and development of brand new responsive websites, as well as adapting existing non-responsive websites for responsiveness.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Mobile websites, responsive web design, mobile experiences: they seem to be one of the biggest trends in web design and development in recent years. Not surprising, since even though the web is a constantly changing medium, it had never seen such a drastic change as the one introduced by the explosion of mobile devices in […]<\/p>\n","protected":false},"author":3,"featured_media":1240,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"yoast_head":"\nResponsive web design basics: size matters | CXGlobals<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive web design basics: size matters | CXGlobals\" \/>\n<meta property=\"og:description\" content=\"Mobile websites, responsive web design, mobile experiences: they seem to be one of the biggest trends in web design and development in recent years. Not surprising, since even though the web is a constantly changing medium, it had never seen such a drastic change as the one introduced by the explosion of mobile devices in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\" \/>\n<meta property=\"og:site_name\" content=\"CXGlobals\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cxglobals\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-05T22:07:39+00:00\" \/>\n<meta name=\"author\" content=\"Andr\u00e9s Chavarr\u00eda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9s Chavarr\u00eda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\"},\"author\":{\"name\":\"Andr\u00e9s Chavarr\u00eda\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17\"},\"headline\":\"Responsive web design basics: size matters\",\"datePublished\":\"2013-04-05T22:07:39+00:00\",\"dateModified\":\"2013-04-05T22:07:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\"},\"wordCount\":1316,\"publisher\":{\"@id\":\"https:\/\/cxglobals.com\/#organization\"},\"articleSection\":[\"Web Design and Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\",\"url\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\",\"name\":\"Responsive web design basics: size matters | CXGlobals\",\"isPartOf\":{\"@id\":\"https:\/\/cxglobals.com\/#website\"},\"datePublished\":\"2013-04-05T22:07:39+00:00\",\"dateModified\":\"2013-04-05T22:07:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cxglobals.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive web design basics: size matters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cxglobals.com\/#website\",\"url\":\"https:\/\/cxglobals.com\/\",\"name\":\"CXGlobals\",\"description\":\"Digital Marketing for Technology Companies Worldwide\",\"publisher\":{\"@id\":\"https:\/\/cxglobals.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cxglobals.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cxglobals.com\/#organization\",\"name\":\"CXGlobals\",\"url\":\"https:\/\/cxglobals.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg\",\"contentUrl\":\"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg\",\"width\":128.85,\"height\":34.78,\"caption\":\"CXGlobals\"},\"image\":{\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/cxglobals\/\",\"https:\/\/www.instagram.com\/cxglobals\/\",\"https:\/\/www.linkedin.com\/company\/cxglobals\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17\",\"name\":\"Andr\u00e9s Chavarr\u00eda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cxglobals.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g\",\"caption\":\"Andr\u00e9s Chavarr\u00eda\"},\"url\":\"https:\/\/cxglobals.com\/author\/andres_cxgs\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive web design basics: size matters | CXGlobals","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/","og_locale":"en_US","og_type":"article","og_title":"Responsive web design basics: size matters | CXGlobals","og_description":"Mobile websites, responsive web design, mobile experiences: they seem to be one of the biggest trends in web design and development in recent years. Not surprising, since even though the web is a constantly changing medium, it had never seen such a drastic change as the one introduced by the explosion of mobile devices in […]","og_url":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/","og_site_name":"CXGlobals","article_publisher":"https:\/\/www.facebook.com\/cxglobals\/","article_published_time":"2013-04-05T22:07:39+00:00","author":"Andr\u00e9s Chavarr\u00eda","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andr\u00e9s Chavarr\u00eda","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#article","isPartOf":{"@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/"},"author":{"name":"Andr\u00e9s Chavarr\u00eda","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17"},"headline":"Responsive web design basics: size matters","datePublished":"2013-04-05T22:07:39+00:00","dateModified":"2013-04-05T22:07:39+00:00","mainEntityOfPage":{"@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/"},"wordCount":1316,"publisher":{"@id":"https:\/\/cxglobals.com\/#organization"},"articleSection":["Web Design and Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/","url":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/","name":"Responsive web design basics: size matters | CXGlobals","isPartOf":{"@id":"https:\/\/cxglobals.com\/#website"},"datePublished":"2013-04-05T22:07:39+00:00","dateModified":"2013-04-05T22:07:39+00:00","breadcrumb":{"@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cxglobals.com\/mobile-web-design-basics-size-matters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cxglobals.com\/"},{"@type":"ListItem","position":2,"name":"Responsive web design basics: size matters"}]},{"@type":"WebSite","@id":"https:\/\/cxglobals.com\/#website","url":"https:\/\/cxglobals.com\/","name":"CXGlobals","description":"Digital Marketing for Technology Companies Worldwide","publisher":{"@id":"https:\/\/cxglobals.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cxglobals.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cxglobals.com\/#organization","name":"CXGlobals","url":"https:\/\/cxglobals.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/","url":"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg","contentUrl":"https:\/\/cxglobals.com\/wp-content\/uploads\/2020\/07\/Asset-1.svg","width":128.85,"height":34.78,"caption":"CXGlobals"},"image":{"@id":"https:\/\/cxglobals.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/cxglobals\/","https:\/\/www.instagram.com\/cxglobals\/","https:\/\/www.linkedin.com\/company\/cxglobals"]},{"@type":"Person","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/a65b8ee6203b17da2a4f517d20f32c17","name":"Andr\u00e9s Chavarr\u00eda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cxglobals.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/266d8169531aff3d1295cb83e297ebdf?s=96&d=mm&r=g","caption":"Andr\u00e9s Chavarr\u00eda"},"url":"https:\/\/cxglobals.com\/author\/andres_cxgs\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts\/1239"}],"collection":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/comments?post=1239"}],"version-history":[{"count":0,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/posts\/1239\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/media?parent=1239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/categories?post=1239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cxglobals.com\/wp-json\/wp\/v2\/tags?post=1239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}