responsive web design layout

13 years ago

Could you provide some layouts for tablets, phones and desktops?

I am only using ZURB Foundation and not 3 different layouts...

Responsive design does NOT mean 3 different layouts...

3 different layouts would mean 3 coded websites, one for each device (width).

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8128286].message }}

webcosmo

13 years ago

One layout should be optimized for all layouts, that means responsive - your website should be visible and functional across all platforms, and that doesn`t mean changing the graphics, just optimizing their sizes dinamycally.

Thanks

Signature

THE WEBMASTER FORUM -Webmaster Forum

Boston Web Developer

{{ DiscussionBoard.errors[8128474].message }}

Michael71

13 years ago

Responsive web design - Wikipedia, the free encyclopedia

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8128537].message }}

Blakos

13 years ago

Responsive design is pretty straight forward once you realize it is not a "different" or "new" script, nothing is changed, not even the graphics.

You just need to you apply some media queries and define changes for different screen size.

Here is an example:

Code:

@media screen and (max-width: 478px) {
	//Re-style elements to suit screen size
}

@media screen and (max-width: 740px) {
	//Re-style elements to suit screen size
}

img {
	max-width: 100%;//Keep the max-width at 100%
	height: auto;//Define height according to screen width
	width: auto9; /* Internet Explorer 8 fix for width*/
}

You may also need tamper with some padding and overflow to get it to respond properly, you can do what I do to divide sections easily and create a division and use "clear: both;" to prevent elements overlapping.

Thanks

{{ DiscussionBoard.errors[8133371].message }}

Michael71

13 years ago

What is auto9 ? Never heard.

However... just some media queries is for sure NOT enough to make something responsive.

Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8133506].message }}

Blakos 13 years ago

Originally Posted by Michael71

What is auto9 ? Never heard.

However... just some media queries is for sure NOT enough to make something responsive.

Typo xD

Its enough to get him understanding what he needs to do.

EDIT: Lol its a CSS "hack" for IE...was waiting to see what you said, but xD, Google is your friend dude, ask him anything, he will answer you xD

EDIT 2: Use the code I supplied and use it correctly with a simple HTML5 layout, and it WILL make it responsive.
- Thanks
{{ DiscussionBoard.errors[8133589].message }}

Michael71

13 years ago

oh come on...

hack for ie? who the hell uses useless hacks for ie?

learn to code then you dont need "hacks" ...

and read something about RWD

Responsive web design - Wikipedia, the free encyclopedia

and css frameworks, modernizr, html/css specs, ...

;-)

Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8134126].message }}

Blakos

13 years ago

Originally Posted by Michael71

oh come on...

hack for ie? who the hell uses useless hacks for ie?

learn to code then you dont need "hacks" ...

and read something about RWD

Responsive web design - Wikipedia, the free encyclopedia

and css frameworks, modernizr, html/css specs, ...

;-)

If your not styling your scripts to support IE 8 etc. you are either lazy, or oblivious of the fact some people STILL run those browsers(or don't you feel better when your script is bullet proof? I do.)

Also if your using frameworks, your not a confident hard coder like I am and know what I supplied WILL get a BASIC layout responsive(my bad forgot the meta data + html5shiv in previous posts as supplied below) WITH the proper styling(will STILL respond to a degree)

Code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Before you rave on anymore, bare in mind this has triggered me to develop a tutorial on how to hard-code a HTML5 responsive layout from scratch and will link you to it back here when I am done.

Thanks
1 reply

{{ DiscussionBoard.errors[8134636].message }}

Michael71

13 years ago

How can you say I am lazy?

Just because I am using frameworks like ZURB Foundation instead of doing all CSS from scratch?

How can you say I do not support IE8?

By the way, I would load an external stylesheet for IE.

You do not know what I am doing and how I am working... so please stop assuming.

"You are the good one and I am the bad one"....

You are right, I am wrong. Thanks for the discussion.

Originally Posted by Blake Michelutti

If your not styling your scripts to support IE 8 etc. you are either lazy, or oblivious of the fact some people STILL run those browsers(or don't you feel better when your script is bullet proof? I do.)

Also if your using frameworks, your not a confident hard coder like I am and know what I supplied WILL get a BASIC layout responsive(my bad forgot the meta data + html5shiv in previous posts as supplied below) WITH the proper styling(will STILL respond to a degree)

Code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

Before you rave on anymore, bare in mind this has triggered me to develop a tutorial on how to hard-code a HTML5 responsive layout from scratch and will link you to it back here when I am done.

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8135139].message }}

cleanerupper

13 years ago

Check out WordPress | ThemeForest. This site contains some very good examples of responsive web design in the form of WordPress templates.

Thanks

{{ DiscussionBoard.errors[8134787].message }}

Michael71

13 years ago

One more thing...

it's not auto9

there must be a backslash before the 9 (can't be shown here).

but I would recommend using conditional comments.

CSS - Conditional comments

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8135195].message }}

Patrick

13 years ago

I think Michael and Blake should meet over a friendly cocktail meetup and discuss responsive design...

Thanks
1 reply

Signature

Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support

{{ DiscussionBoard.errors[8135893].message }}

mojojuju 13 years ago

Originally Posted by Patrick

I think Michael and Blake should meet over a friendly cocktail meetup and discuss responsive design...

Maybe it would lead to a romantic relationship between the two.
- Thanks
- 1 reply
Signature

:)
{{ DiscussionBoard.errors[8136728].message }}
- Blakos 13 years ago
  
  Ok, ok, NOW it is getting weird xD
  
  I am a hard-coder, hacker and self-taught programmer, I am sure I just have my ways and he has his, I prefer to find my own way to do things, using minimal code and flawless indentation(and if i can do something never done before I will proudly do so)
  
  I am sure he is the total opposite, most likely more experienced, and taught only how to do it that way.
  
  I am not here to flame anyone, yet will not be afraid to have my say when appropriate.
  
  Thanks
  
  {{ DiscussionBoard.errors[8137690].message }}

Michael71

13 years ago

I am "taught only how to do it that way"?

You don't know anything about me... stop talking.

Thanks.

Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8137982].message }}

Blakos

13 years ago

Originally Posted by Michael71

I am "taught only how to do it that way"?

You don't know anything about me... stop talking.

Thanks.

I am entitled to my assumptions upon impression.

Please do not get offensive, I do not wish to "flame"..

Thanks
1 reply

{{ DiscussionBoard.errors[8137993].message }}

Michael71

13 years ago

Blake,

honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

Nobody taught me how/what and so on...

My decision is ZURB Foundation, superb framework... at least for me.

Farish

Read this : IE8 and responsive web design. - CSS-Tricks Forums

IE 8 and mobile = nope

Originally Posted by Blake Michelutti

I am entitled to my assumptions upon impression.

Please do not get offensive, I do not wish to "flame"..

[ 1 ] Thanks
3 replies

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8138636].message }}

Farish

13 years ago

Originally Posted by Michael71

Blake,

honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

Nobody taught me how/what and so on...

My decision is ZURB Foundation, superb framework... at least for me.

Farish

Read this : IE8 and responsive web design. - CSS-Tricks Forums

IE 8 and mobile = nope

My whole point was that there is no need to worried about responsive design and ie8.

Thanks

{{ DiscussionBoard.errors[8139973].message }}

Blakos

13 years ago

Originally Posted by Michael71

Blake,

honestly... I am workin with HTML since 1995 (AMIGA days). I made intranet tools for big companies in 1998/1999, I worked for an "internet startup" 2000/2001 ... bla bla

However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

My last bigger projects were custom built (no CSS framework involved) and styling all the UI elements and all the other stuff took a lot of valuable time.

I can do everything from scratch. I did that a lot of times. Small sites, big sites, ...

But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

Nobody taught me how/what and so on...

My decision is ZURB Foundation, superb framework... at least for me.

Farish

Read this : IE8 and responsive web design. - CSS-Tricks Forums

IE 8 and mobile = nope

Tell me this is not RWD, using what I shown in the 1st place:

Simple Responsive Layout [LIVE DEMO] - by Blake Michelutti

EDIT:

Tested on the latest versions of Firefox/Chrome/IE & Android

Thanks

{{ DiscussionBoard.errors[8142495].message }}

longblog

13 years ago

Originally Posted by Farish

I am still waiting for somebody to show me what mobile device uses IE 8, since we are talking about responsive design here.

FYI if you bring up windows 7 mobile that has been fixed and updated with mobile IE9 for this very reason.

And laptops have much larger screens than what responsive design adjusts for.

You should design for as many different possible situations as possible. It's frightening how many people never update. The fact that IE doesn't force updates has made me want to drive to Microsoft and personally strangle people more times than I can count.

Originally Posted by Michael71

Blake,
However, I am using frameworks because after years of trying different frameworks/templates/own stuff I was sick of starting from scratch all the time.

But as I said, after trying different frameworks (960.gs,Twitter Bootstrap, 320andup, ZURB Foundation) it was time for me to make a decision.

My decision is ZURB Foundation, superb framework... at least for me.

IE 8 and mobile = nope

Would you mind sharing why ZURB is superior? I've never heard of them, and I've just been using 960. I find 960 to be problematic in some situations and have been wondering if there was a better framework out there that's as straightforward as 960 is.

Thanks

Signature

Are you ready to make an extra $1300 this month? Click here to find out how easy it is!

Complete All-in-One WordPress Training - Sign up now!

{{ DiscussionBoard.errors[8155128].message }}

Farish

13 years ago

I am still waiting for somebody to show me what mobile device uses IE 8, since we are talking about responsive design here.

FYI if you bring up windows 7 mobile that has been fixed and updated with mobile IE9 for this very reason.

And laptops have much larger screens than what responsive design adjusts for.

Thanks

{{ DiscussionBoard.errors[8138258].message }}

kstep

13 years ago

Here is the video which will explain you everything.

Responsive Web Design: A Visual Guide | Nettuts+

Thanks

{{ DiscussionBoard.errors[8140117].message }}

Michael71

13 years ago

I did not say it is NOT RWD...

however, fact is that IE8 (without additional JS) is NOT able to process media queries.

Oh, and just a "CSS hack" regarding images does NOT make IE8 understand media queries

I still like ZURB

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8142700].message }}

InteliSoft

13 years ago

if you are going to build a theme, simply use Bootstrap

Thanks
1 reply

Signature

Time is never wrong. You just will have to take right decision.
WordPress Themes, Plugins and Tutorials
WordPress Download Manager - Files and Document Management Plugin
WordPress Marketplace Plugin - Full Featured e-shop plugin

{{ DiscussionBoard.errors[8151957].message }}

Edge360 13 years ago

Originally Posted by InteliSoft

if you are going to build a theme, simply use Bootstrap

I don't think it's the best advice to simply throw resources at people and say use them. These days there are so many frameworks and boilerplates on offer, it really comes down to knowing which to use and when.

Every new project we get through our [self-promotional link moderated] team, we have to make sure we choose the right tool for the job in hand. Otherwise we risk wasting time on a framework that isn't quite suited for the project.

You're right in saying bootstrap is a great route to go down for a responsive theme. But honestly, let's show point this guy in a few directions and let him make his own choice

Zurb Foundation - A great front end framework for fast prototyping, built upon SASS CSS. Well worth looking into.

As mentioned above, Bootstrap, obviously a great choice rapid development. With it being built with LESS CSS it gives the user a faster way to make changes on the fly. We use it over at EdgeThreeSixty for various projects, but I myself have started leaning more towards SASS development and I'm now starting to prefer Foundation because of this. The usage of mixins and arguments really give it that advantage over Less in my opinion.

In conclusion there are so many front end frameworks out there right now, it would be unwise to throw people in a single direction
- Thanks
{{ DiscussionBoard.errors[8152089].message }}

ColorVila

13 years ago

Try to use bootstrp, which I think is one of the best responsive framework. It will save you lots of time.

Thanks

{{ DiscussionBoard.errors[8152131].message }}

Michael71

13 years ago

Foundation: The Most Advanced Responsive Front-end Framework from ZURB

Check out yourself

Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8155169].message }}

longblog 13 years ago

Originally Posted by Michael71

Foundation: The Most Advanced Responsive Front-end Framework from ZURB

Check out yourself

Cool, thanks for the link. This line right here really excites me!

Mobile First

Now you can build for small devices first. Then, as devices get larger and larger, layer in more complexity.

Do you happen to know off-hand any documentation that explains how this is done? I've been designing and coding for years, but I've kind of been asleep at the wheel with the whole mobile/responsive movement.

edit: Oh my gosh! I clicked this link from the foundation site for a national geographic site built on the framework and it's AWESOME! I need to learn how to build sites like that!
- Thanks
Signature
Are you ready to make an extra $1300 this month? Click here to find out how easy it is!

Complete All-in-One WordPress Training - Sign up now!
{{ DiscussionBoard.errors[8155200].message }}

responsive web design layout

Trending Topics

The Winter Olympics....

I need tips about casino affiliate marketing

I have an app - now what?

What is the future of SEO and Blog?

Page B ranking for my target keyword instead of Page A