{"id":275,"date":"2016-01-22T18:11:52","date_gmt":"2016-01-22T18:11:52","guid":{"rendered":"http:\/\/webigg.com\/blog\/?p=275"},"modified":"2018-12-10T05:44:08","modified_gmt":"2018-12-10T05:44:08","slug":"responsive-website-concept","status":"publish","type":"post","link":"https:\/\/www.webigg.com\/blog\/responsive-website-concept\/","title":{"rendered":"Responsive Website Concept"},"content":{"rendered":"

Have you asked yourself, \u201cWhat is responsive Web design?\u201d Responsive Web design<\/a> is an approach whereby a designer creates a Web page that \u201cresponds to\u201d or resizes itself depending on the type of device it is being seen through. \u00a0That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen. Responsive web design\u00a0(RWD) is an approach to\u00a0web design\u00a0aimed at crafting sites to provide an optimal viewing and interaction experience\u2014easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from desktop computer monitors to mobile phones)<\/p>\n

The purpose of responsive design<\/a> is to have one site, but with different elements that respond differently when viewed on devices of different sizes.<\/p>\n

“Mobile first”,\u00a0unobtrusive JavaScript, and\u00a0progressive enhancement\u00a0are related concepts that predate RWD.\u00a0Browsers of basic mobile phones do not understand JavaScript or\u00a0media queries, so a recommended practice is to create a basic web site and enhance it for smart phones and PCs, rather than rely on\u00a0graceful degradation\u00a0to make a complex, image-heavy site work on mobile phones.<\/p>\n

On a tiny smartphone screen, websites can be even more challenging to see. Large images may \u201cbreak\u201d the layout. Sites can be slow to load on smartphones if they are graphics heavy.<\/p>\n

However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked\u00a0vertically.\u00a0 Or possibly the user would have the ability to swipe over to view other columns. \u00a0Images will resize instead of distorting the layout or getting cut off.<\/p>\n

First off, it\u2019s important to have a good idea of what a viewport provides. The term actually comes from the viewing area from a spacecraft. It\u2019s the constrained view of the reality in front of you, with specific width and height. Obviously, this size differs drastically on a smart-phone vs. a multi-monitor gaming rig or design workstation. For responsive web design<\/a>, viewport widths generally receive more attention than viewport heights. Horizontal scrolling is discouraged and vertical scrolling embraced (scrolling is actually easier on smartphones, a gesture that has become second-nature for many).<\/p>\n

Responsive sites deploy percentage widths to replace fixed pixel widths. This means that even on a desktop, the user experience of a responsive design is better out of the box than that of a non-responsive one (no horizontal scrolling needed to read the content). Responsive design<\/a> really takes your breath away on mobile \u2013 suddenly everything is clear and readable! It can be a great user experience if done well, a true breath of fresh air compared to the miniscule text sizes and navigational impossibilities, for instance, of old-school desktop sites viewed on mobile.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you asked yourself, \u201cWhat is responsive Web design?\u201d Responsive Web design is an approach whereby a designer creates a Web page that \u201cresponds to\u201d or resizes itself depending on the type of device it is being seen through. \u00a0That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[19,13,17,31,18],"class_list":["post-275","post","type-post","status-publish","format-standard","hentry","category-internet-marketing-internet-marketing","tag-best-online-marketing-company","tag-internet-marketing-india","tag-online-marketing-companies-new-delhi","tag-online-marketing-company","tag-search-engine-marketing-new-delhi"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":1,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webigg.com\/blog\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}