responsive website design what why how - techtic solutions

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

SUBSCRIBE

Email Address

SUBSCRIBE

RECENT POSTS

Dont Outsource Jobs toIndia

UI VS UX: SIMILARITIES &DISSIMILARITIES?

Is your Website Mobilefriendly?

RESPONSIVE WEB DESIGN: WHAT WHY &

HOW

JUNE 10, 2014 / NISARG J MEHTA / BE THE FIRST TOCOMMENT!

WEBBING WEDNESDAYS WEEK #5


Why Your Homepage DesignSucks?

Important WordPressSecurity Tips To ProtectYour WordPress Blog

ARCHIVES

December 2015

December 2014

November 2014

October 2014

August 2014

July 2014

June 2014

May 2014

April 2014

February 2014

January 2014

December 2013

Responsive Website Design is one of the most talked abouttopic of 2013 and continues being one of the best trends in2014. Websites are being given this amazing way to resizeautomatically depending upon the screensize. Be it anydevice that you are on, the website will be legible and nomore zooming the website. The website itself will adaptthe device resolution and fit any device; be it a smartphone or tablet or desktop or laptop.

The question is: How does it understand which device is it


December 2013

November 2013

October 2013

CATEGORIES

Development

Graphics Design

Open Source

SEO

Techtic Solutions

Uncategorized

Web Design

Web Development

Web Marketing

Webbing Designs

Webbing Development

Webbing SEO

Webbing Wednesdays

on and once it understands the device how does it resizeautomatically? Understanding this would be really helpfulto code or rather transform any normal website intoresponsive website.

The Viewport Meta Tag

To convert any website into responsive; enter the viewportmeta tag, introduced by Apple, which was then adopted byall the others in the industry.


What it looks like:


content=width=device-width makes the websiteflexible and scale the website to the width of the deviceyou enter. Content=intial-scale=1 This will allowthe display of the layout in the proportion of 1:1 scale. Nozooming will be applied. One can also make sure that nofurther zooming can be applied by makiing it maximum-scale=1.

In a nutshell the viewport defines the view of the website,scalability and zoom level for any website. This needs to bedefined as a first step on the way to transforming anywebsite to responsive.

Media Queries

CSS Media Queries is one of the most important aspect formaking the website responsive. Zooming and Viewport


has been setup but the website wont work on smartphones unless the CSS for a particular smartphone isdefined to make website understand and act as per theCSS. CSS3 can specify when certain CSS rules should beapplied on a particular device width. This allows you toapply a special CSS for mobile devices such assmartphones or tablets. CSS Media queries are supportedin Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera7+, as well as on most modern smartphones and otherscreen-based devices.

Here is how it works. The CSS is defined for each viewportand the corresponding stylesheet or rather css rules willapply only when a media query is true. The stylesheet foreach viewports corresponding media query is also given inthe example. Needless to say that the media query must belinked in the page to function properly.

Screen resolution and dimensions


12345678

/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (/* STYLES GO HERE */} /* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px) {/* STYLES GO HERE */


9101112131415161718192021222324252627282930313233343536373839

} /* Smartphones (portrait) ----------- */@media only screenand (max-width : 320px) {/* STYLES GO HERE */} /* iPads (portrait and landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {/* STYLES GO HERE */} /* iPads (landscape) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : landscape) {/* STYLES GO HERE */} /* iPads (portrait) ----------- */@media only screenand (min-device-width : 768px)and (max-device-width : 1024px)and (orientation : portrait) {/* STYLES GO HERE */}


40414243444546474849505152535455565758596061626364656667686970

/* Desktops and laptops ----------- */@media only screenand (min-width : 1224px) {/* STYLES GO HERE */} /* Large screens ----------- */@media only screenand (min-width : 1824px) {/* STYLES GO HERE */} /* iPhone 5 (portrait & landscape)----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 568px) {/* STYLES GO HERE */} /* iPhone 5 (landscape)----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 568px)and (orientation : landscape) {/* STYLES GO HERE */} /* iPhone 5 (portrait)----------- */@media only screenand (min-device-width : 320px)and (max-device-width : 568px)


MySQL Engines

Building WordPress Plugin Development

Comments Community

Recommend

14

Categories: Webbing Designs, Webbing Wednesdays

Tags: Responsive Web Design Company India, ResponsiveWeb Design India, Responsive WordPress Websites, WebDesign Company India

717273

and (orientation : portrait) {/* STYLES GO HERE */}


Start the discussion

Be the first to comment.


we socializeSOCIALIZE WITH US

have an innovative thought?

JUST GIVE US A SHOUT TO DISCUSS

tez Often something looks very great, but it has difficulty in usage, this(who are you quoting?) No it is not, it is an illustration of great graphic design

Subscribe Add Disqusd Privacy


SUBMIT

We understand the importance of your enquiry.Please expect our comprehensive response

within the next business day.

e: [email protected]

USA: +1 201-793-8324UK: +44 117 2308324

AUS: +61 280 909 320

COPYRIGHT (C) 2016, TECHTIC SOLUTIONS. ALL RIGHTS RESERVED. TESTIMONIALS GET A QUOTE CAREERS BLOG SITEMAP

NAME*

EMAIL*

PHONE*

COMMENTS

VALIDATE*

responsive website design what why how - techtic solutions

Documents