What's the different in Responsive design?

Hello Guys,

I have a website and get offering for convert to responsive website. Already my website is very light weight website which open in maximum of device. can you please tell me what's the structural difference in responsive website? Actually I am worry about the website structure.

 

Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices

 

A design which optimize itself after detecting the resolution of the devices. You can check your website here http://www.studiopress.com/responsive/

 

Thanks juerald

But design will be the same or different for device to device?

 

A responsive design just changes when you change from device for example:
if screenwidth is smaller then 500px (for example a phone) then change the navbar and content to become more mobile friendly.
But you can also do for example if the website is shown on a tv to use a bigger background image so the quality of the image won't be pixelated ans such and the background is smaller and more lightweight for smartphone's and computers

Found an article on wikipedia: http://en.wikipedia.org/wiki/Responsive_web_design

 

I agree with the post above.
The main goal of responsive design is that the layout of the website to fit the width of the screen.

You can hide any sections on a smaller screen so the web load faster.
This is a clear advantage of responsive design where users with small screens and slow connections can open the web quickly

 

Well, in all the broken engrish responses so far in this thread, there's a lot of misinformation and ignorance. Hiding sections for example with CSS does NOT speed loading, since the content is still loaded, it's just HIDDEN (duh)... People talk about targeting resolutions, when it should be targeting by how the content fits dynamically. (If your media queries are in PX for anything bigger than 192px, you're probably doing something WRONG), and it is NOT a retro approach if you've paid ANY attention to the good practices and accessibility norms we've been told for over a decade to practice.

It is however the next logical step in accessible design -- IF you've been using semantic markup, separation of presentation from content, elastic and semi-fluid design with dynamic fonts, responsive layout is simply the next logical step... IF HOWEVER you've been sleazing out presentational HTML 3.2 markup doping yourself to the gills with DIV for nothing, little if anything resembling semantics, using fixed width layouts, px metric fonts, and on the whole ignoring how websites are supposed to be built, responsive layout may as well be an alien language!

It's why I advocate the progressive enhancement / "CONTENT FIRST!" approach to design and development. You do NOT start out dicking around in photoshop drawing goofy bloated inaccessible pictures. You start out with your content or at the very least a reasonable facsimile in a flat text editor, placing the content into a 'logical document order'. You then mark that content up semantically adding your navigational elements -- if at this point you choose your tags based on what they look like, you are choosing the wrong tags for the wrong reason. THEN you go in and bend that markup to your will with CSS only adding your non-semantic wrappers (DIV and SPAN) as needed... That first layout (of many) I like to start with the middle desktop appearance, since legacy non-media query desktop browsers are the lowest common denominator. (most people say start with mobile, I consider that approach flawed).

THEN you use the CSS to make it pretty with colors, backgrounds, corners, shadows and other presentation; and at this point use media queries to add or strip off columns and adjust screen elements to best fit the available screen space. Media query triggers should also be elastic since you should have made your layout elastic with dynamic fonts!

Again, a good site should use dynamic fonts (EM's so they auto-scale to the user's preferences), be elastic (declared element widths in EM's), semi-fluid (auto-adjusting, but with a max-width to prevent long lines from getting hard to read), AND responsive.

THEN once you have a working page you can add any scripting (if desired) to further enhance the already working page. That pays homage to the unwritten rule of JavaScript -- if you can't make the page work without scripting FIRST, you have no business adding scripting to it!

That's called "progressive enhancement" -- and it is done so that you have "graceful degradation" -- should any of the fancy bits (CSS, scripting, etc) not be available, either from being blocked or just not being relevant (print, braille readers, screen readers, search engines) you still have a meaningful and useful page.

Let's use one of my sites as an example of "responsive done right". (though the code is now a bit out of date)
http://www.ewiusb.com

It's elastic with dynamic fonts, as evidenced by comparing it's 'EGA/VGA / normal / 96dpi / 100% / win7 small / whateverTheBlueBlazesTheyAreCallingItThisYear' appearance:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

With it's "8514 / large / 120dpi / 125% / win7 medium / whateverTheBlueBlazesTheyAreCallingItThisYear" appearance -- fonts enlarge automatically, images don't.
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

The max-width being in EM's also enlarges... and no, that's NOT zoom because again, notice the presentational parts and images didn't enlarge. That's why you're supposed to declare your flow text and as much of your fonts as possible in EM's.

It gracefully degrades images off:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800WideNoImages.jpg

CSS Off: (which is basically what search engines would see)
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNoCSS.jpg

and adjusts the layout by width -- stripping off columns and fancier appearance bits:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom800Wide.jpg
http://www.cutcodedown.com/images/ewiUSB/ewiUsbCom640Wide.jpg
http://www.cutcodedown.com/images/ewiUSB/ewiUsbTinyMobile.jpg

That's what a semi-fluid elastic responsive layout built with dynamic fonts and progressive enhancement is SUPPOSED to be able to do. Something in your posts worries me in that you seem to concerned with "it being different from device to device" -- that's what HTML and CSS are FOR; delivering content within the capabilities of each device. That reeks of fixed layout thinking -- the antithesis of accessible design.

As to how that impacts your site -- it's hard to say without seeing what you have. Care to share your link, I'll give you a free breakdown here of what's wrong, what would need to be done, and any issues you'd encounter along the way. Since I'm not out to make a buck off you with this, I can actually be objective (though I do tend to be a bit to brutally frank)

 

What part is out of date?

 

From my point of view a responsive website is that which adapts to the screen sizes of different devices where it can be viewed such as PC, Smartphone and Tablet. This means, according to the size of the screen, the layout changes yet shows relevant content. One more big thing is mobile search exceeded desktop queries this year. So with the help responsive web design technology we can easily build a website which will run smoother on mobile, tab and Desktop/laptops.. etc..

 

I'm using two separate files for the one media target (screen) -- today I'd have my media queries at the end of the single screen.css instead of the separate smallScreen.css as the amount of code in the latter (687 bytes) usually takes less time to transfer than the extra handshake for the separate file. It's also a little DIV-heavy compared to how I do things now.

Originally I was keeping it separate as "why load CSS that isn't being used" -- but a quirk of most browser engines is they seem to load (or should we say pre-load) all LINK to CSS regardless of if they apply/are used or not, at which point save the handshake and make it all one file. Also, a good rule of thumb is 2k... one handshake (file request) == 2k of transfer as a real world estimate.

 

This is the difference:

 

I'm giving you a perfect url what you are looking for actually. You will get complete details about responsive web design here - http://www.keylineit.com/utility-of-responsive-site/