Responsive Design !!

@masterwinDec 17.2013

Hi All,

I read about “Responsive Design”, its making me confused.

Responsive design can be do it there ways?

1. using only Media Queries

2. Open source frameworks like (Bootstrap,foundation,responsive.js) etc

can we do responsive without ” Media Queries ” , so the design (page) – good in All devices ?

Any of the following can be used to make responsive ? or we need to include both open source framework and media queries ?

If do responsive, whats on font and images ( on dynamic pages)

Looking for your help ?

Thanks

to post a comment

CSS

14 Comments(s) _↴

@Imran60Dec 18.2013 — #Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience.

@masterwinauthorDec 18.2013 — #Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience.[/QUOTE]

Hi Imran,

Thanks for your reply, among 175 visitors on this post, you only replied, thanks.

But my question is different, i know the result of responsive,.

i am asking about how to make responsive and make sure it will work on All devices ?

without media queries and open source frameworks like bootstrap and foundation is possible?

Thanks

@Kevin2Dec 18.2013 — #Look up "mobile first design". Basically it's designing for small screens, i.e. smartphones, but the design also looks good enough on larger screens -- tablets, laptops/notebooks, desktops.

@masterwinauthorDec 18.2013 — #Look up "mobile first design". Basically it's designing for small screens, i.e. smartphones, but the design also looks good enough on larger screens -- tablets, laptops/notebooks, desktops.[/QUOTE]

Hi Kevin,

Thanks for your reply.

" mobile first design " is the website? or you mention about to do "css for mobile" first.

can you clairify more. For a reponsive design on All resolustions ( including mobile, tablets, ipad etc)

can we use only % of sizes in css , css3 and html5 enough? and without use of any media queries or framework

if my question is confused, please let me know

Thanks

@Kevin2Dec 18.2013 — #Google "mobile first design"

@rtretheweyDec 18.2013 — #There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.

@masterwinauthorDec 19.2013 — #There really isn't a one-size-fits-all answer to your question. For all practical purposes, media queries will handle the vast majority of responsive design layouts and they are the standard for responsive design as a part of CSS. Browser support is nearly universal now. As usual, it's just the very oldest versions of Internet Explorer (6, 7, and 8) that are problems. But you really don't need to worry about them since you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones (or use conditional comments to serve them customized stylesheets).

When it comes to layout, JavaScript is generally only required for more elaborate special effects and situations where the user interacts directly with the webpage, rather than for handling device-dependent issues.

Mostly, you're going to need to simply learn the basics of contemporary web design in order to really understand this issue. I think you might just be getting a bit ahead of yourself and getting overwhelmed by the jargon that seems to lead in different directions.[/QUOTE]

Hi rtrethewey,

Thanks for your reply,

i dont care about on IE ,

As you said,

"you can default to a page suited to a full-size display and let media queries make the adjustments needed for tablets and smartphones"

so we need to code media queries for each tablets and smartphones,

for reference,

http://www.browserstack.com/responsive

They have multiple devices, so we need to do media queries for each width and height of devices?

Please clarify me

Thanks

@rtretheweyDec 20.2013 — #You don't need separate settings for each width and height. You can have your default styles for desktops and laptops, then add a media query for smartphones (320px width). And if you think it's best, you can have another media query for tablets with a lower resolution than most desktops.

The key point is designing the page with a flexible layout so that you can adjust to different screen sizes without losing any functionality (or, hopefully, without losing visual appeal). My advice is to experiment with some simple pages to learn the basics of responsive design before you try to make a real website. Once you get some experience with how everything works, it will be much easier to create a page you'll like.

@masterwinauthorDec 23.2013 — #@ Rick Trethewey , Thanks

i start by today and will let you know the results ? , Thanks

@blasphemyJan 02.2014 — #masterwin, there is cool website http://quirktools.com/screenfly/ for testing your website on different resolutions. There are some popular devices to choose, you can also set screen size manually.

Are media queries necessary for RWD? If you have website with very simple layout it's possible to make your page "responsive" without using media queries. If you use floats, if you won't use big static value for widths (like standard 960px, 1008px and so on), if you carefully set fonts sizes (with proper %) you will manage to create responsive website without using media queries but having all functionality and visual appeal. But it will work only for simple layouts. If you have more complicated website, with many different navigations, sidebars, widgets, and so on, than media queries will be very usefull, because you will need a tool for getting the size of the screen used by user for browsing your website.

But screen resolution in only one side of Responsive Web Design. There is also problem with support for css3, html5 and other techniques in mobile browsers. Not all features are supported in all browsers. There are same websites where you can check what features are supported by the most popular browsers. I use http://caniuse.com/. There are compatibility tables for support of HTML5, CSS3, JS, SVG and other stuff in desktop and mobile browsers.

@jedaisoulJan 03.2014 — #Just to add to rtetheway's comments:

1. It is not feasible, or necessary, to support ALL devices capable of accessing the web. The minimum screen width you really need to consider is 320px, and even that is becoming less important. Choosing a minimum width of, say, 480px makes it far easier to build a site that will look good on the vast majority of displays.

2. Using % widths is often not the best solution. I use:

a) Absolute positioning to mix fixed width columns for side menus with variable width columns for body text etc.

b) Media specific style sheets (not media queries) to provide stepped size adjustments for graphical images.

@masterwinauthorJan 07.2014 — #Hi rtetheway & jedaisoul

i tried responsive, but got alignment issues on the devices

can you check the link below and ghttp://72.29.85.214/~smartweb/ComingSoon/landing.html

Thanks

@blasphemyJan 07.2014 — #masterwin, I've checked your link. There are 'alignment issues' also on desktop (when resizing browser window).

But I have some comments about your code. This is your html:

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;meta name="viewport" content="width=device-width"&gt;
 &lt;title&gt;Coming Soon&lt;/title&gt;
 &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div class="container" align="center"&gt;
 &lt;div class="logo" align="center"&gt;&lt;img src="images/logo_top.png"&gt;&lt;/div&gt;
 &lt;!--&lt;div class="slogan"&gt;Bigger. Better. Stronger.&lt;/div&gt; --&gt;
 &lt;div class="soon"&gt;
 &lt;img src="images/dot.png" class="dotLeft"&gt;
 &lt;p&gt;COMING SOON&lt;img src="images/dot.png" class="dotRight"&gt;&lt;/p&gt;
 &lt;/div&gt;
 &lt;!-- &lt;div class="congrats"&gt;
 &lt;p&gt;Congrats to our November winner &lt;font color="#A60C5A"&gt;Amelie Brown&lt;/font&gt;. 
 She won &lt;font color="#A60C5A"&gt;$10000!&lt;/font&gt;&lt;/p&gt;
 &lt;/div&gt; --&gt;
 &lt;div class="mail"&gt;[email protected]&lt;img src="images/separator.png"&gt;&lt;/div&gt;
 &lt;div class="mailInput"&gt;
 &lt;input type="text" name="text" placeholder="Enter your e-mail to subscribe"&gt;&lt;img src="images/submit.png" style="max-width:100%"&gt;
 &lt;/div&gt;
 &lt;div class="footer"&gt;&lt;font color="#FFFFFF"&gt;&amp;copy; 2013&lt;/font&gt; &lt;font color="#cc0066"&gt;Company Name&lt;/font&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

XHTML? Transitional? Why? I don't want to make a flame but why don't you use html5 or at least html4 (strict, not transitional)?

You have 'css/style.css' so why do you use 'presentation elements' in your html? Don't use 'align="...", 'color="..." etc. HTML represents the 'structure' of your website, css is responsible for 'presentation'. They should be separated. Text alignment, font color should be placed in css.

You have a couple of 'img' elements. They play 'presentation' role in your website. They also should be placed in css as a 'background-image'.

You don't need 'container div' because its css attributes can be applied to 'body' tag.

There are some tricks for making div centered. For example you can change

&lt;div class="footer"&gt;&lt;font color="#FFFFFF"&gt;&amp;copy; 2013&lt;/font&gt; &lt;font color="#cc0066"&gt;Company Name&lt;/font&gt;&lt;/div&gt;

<i>
 </i>.footer {
 color: #ffffff;
 display: table;
 margin: 0 auto;
 }
 .footer span {
 color: #cc0066;
 }

It's simpler, centered, and css is separated from html.

You have quite simple website. One element below the other. You have to play with font sizes and 'centering' elements horizontally (but not 'align="center"'!) and it will look nce and responsive. Try to not use xhtml, html is 'better' for 'standarised/patternised' coding.

@masterwinauthorJan 08.2014 — #Hi blasphemy,

Thanks for your review and suggestions, i will apply today get back to you

Thanks

Also in #CSS _↴

CSS rollover on 1 table Expanding Divs in IE6 and below How to recreate this website design?

Success!

Help @masterwin spread the word by sharing this article on Twitter...

Tweet This

Responsive Design !!

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Responsive Design !!

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴