Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

960 and DW

Posted on 2013-05-11
7
Medium Priority
?
305 Views
Last Modified: 2013-05-15
Hi,

To create websites for mobiles phones and tablets as well as desktops I am told I could use a grid system. I can use media queries by hand  but there must be  a quicker way. Now Dreamweaver uses a grid but many people complain about it so what about this 960 grid?

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2874025

You cant create a website these days without catering for 3 sizes of display.

Or I could try these tools?
http://mashable.com/2010/12/16/create-mobile-site-tools/
0
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39158220
Before using those tools, research how they are used.   If they suck in your content to THEIR site and spoof yours, i would not use it.

You are better off using your media queries.  Take Dreamweaver out of the picture.  It is just an authoring tool and should not dictate what framework you use.  If it does, then making a responsive site is out of your realm for now and it may be easier to just make one site for desktop and one site for mobile.   Otherwise, using media quieres to make a 'responsive' site is the way to go. If you rely on the wysiwyg 'design view' only in dreamweaver, you will want to go through a learning curve of just using the code view to make your site.   Taking off the training wheels is hard at first but in the end, you will be glad you did.  After that nothing will be a "dreamweaver" issue.  Don't listen to the DW haters, it is still a good tool.  Just don't rely on the design view and Dreamweaver plug ins to do what you should know by hand.

http://www.960.gs
http://twitter.github.io/bootstrap
http://foundation.zurb.com
---
http://jquerymobile.com
http://www.sencha.com/products/touch
http://jqtjs.com
0
 

Author Comment

by:jagguy
ID: 39158813
Ok thanks for the information but  I need a little explanation here.
I am using DW with templates only and media queries for different devices sizes.

1)Now with 960 grid I can create desktop,tablet and mobile size for the same website just as easy? 960 grid talks about 12/16 col sizes and I would need 1-2 col for mobiles only so what happens here?

2)If I use jquery mobile then am I making a website just for a mobile and what about desktop?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39158867
1) it's color by numbers.... If you want 2 columns http://grids.heroku.com/grid?column_width=60&column_amount=12&gutter_width=20   

Where you see the class grid_1, grid_2 etc.  Just make the number = 12.  Here i Have 5 and 7

<div class="grid_5">I am column 1 and 380px wide</div>
<div class="grid_7">I am column 2 and 540px wide</div>

2) Yes, you are making a separate site for mobile.  This means you have to make your main site for desktop.  Your main site might live at www.mysite.com while your mobile site might live at www.mysite.com/m.  You will use a detection script to determine if it is mobile.  

I think you are better off with a responsive site though.  If you like 960, the site suggests to use http://unsemantic.com/
0
Congratulations! You’re Certified – Now What?

Starting a new career can be overwhelming. Becoming certified in your field of expertise is a great start, but where do you go from here?  Here are some tips to help you on your career journey.

 

Author Comment

by:jagguy
ID: 39159058
1)Ok how do I get 960 into dreamweaver or dont i have to?


2) I need to make sites for mobiles and tablets when a main website for desktop already exists so maybe  jquery mobile might suit this scenario. Where do I get this detection script?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39159098
Remember, it is not a "dreaweaver" thing.  Just add the 960.gs files like any other css or js files.
0
 

Author Comment

by:jagguy
ID: 39159203
Ok I am looking at http://www.960.gs and I am struggling to get started.
Where is a hello work complete example here.
There is a guide somewhere?
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39159362
Hello world is below.  Maybe hunt around the site too.  There is a how to https://speakerdeck.com/nathansmith/960-grid-system

<div class="grid_5">Hello</div>
<div class="grid_7">World</div>

<div class=grid_12">
<hr>
In this case, the columns should add up to 12.  
<div>
<div class="grid_12>
    <div class="grid_6">Nest columns inside a full width</div>
    <div class="grid_6">And<br>the<br>div<br>below<br><br>will be<br>directly under<br>this row</div>
</div>
<div class="grid_12">
I am a new row row and evenly below the left and right side above.
</div>

Open in new window


CSS
/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}



.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12 {
	position:relative;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
	width:60px;
}

.container_12 .grid_2 {
	width:140px;
}

.container_12 .grid_3 {
	width:220px;
}

.container_12 .grid_4 {
	width:300px;
}

.container_12 .grid_5 {
	width:380px;
}

.container_12 .grid_6 {
	width:460px;
}

.container_12 .grid_7 {
	width:540px;
}

.container_12 .grid_8 {
	width:620px;
}

.container_12 .grid_9 {
	width:700px;
}

.container_12 .grid_10 {
	width:780px;
}

.container_12 .grid_11 {
	width:860px;
}

.container_12 .grid_12 {
	width:940px;
}




/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
	padding-left:80px;
}

.container_12 .prefix_2 {
	padding-left:160px;
}

.container_12 .prefix_3 {
	padding-left:240px;
}

.container_12 .prefix_4 {
	padding-left:320px;
}

.container_12 .prefix_5 {
	padding-left:400px;
}

.container_12 .prefix_6 {
	padding-left:480px;
}

.container_12 .prefix_7 {
	padding-left:560px;
}

.container_12 .prefix_8 {
	padding-left:640px;
}

.container_12 .prefix_9 {
	padding-left:720px;
}

.container_12 .prefix_10 {
	padding-left:800px;
}

.container_12 .prefix_11 {
	padding-left:880px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
	padding-right:80px;
}

.container_12 .suffix_2 {
	padding-right:160px;
}

.container_12 .suffix_3 {
	padding-right:240px;
}

.container_12 .suffix_4 {
	padding-right:320px;
}

.container_12 .suffix_5 {
	padding-right:400px;
}

.container_12 .suffix_6 {
	padding-right:480px;
}

.container_12 .suffix_7 {
	padding-right:560px;
}

.container_12 .suffix_8 {
	padding-right:640px;
}

.container_12 .suffix_9 {
	padding-right:720px;
}

.container_12 .suffix_10 {
	padding-right:800px;
}

.container_12 .suffix_11 {
	padding-right:880px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .push_1 {
	left:80px;
}

.container_12 .push_2 {
	left:160px;
}

.container_12 .push_3 {
	left:240px;
}

.container_12 .push_4 {
	left:320px;
}

.container_12 .push_5 {
	left:400px;
}

.container_12 .push_6 {
	left:480px;
}

.container_12 .push_7 {
	left:560px;
}

.container_12 .push_8 {
	left:640px;
}

.container_12 .push_9 {
	left:720px;
}

.container_12 .push_10 {
	left:800px;
}

.container_12 .push_11 {
	left:880px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .pull_1 {
	left:-80px;
}

.container_12 .pull_2 {
	left:-160px;
}

.container_12 .pull_3 {
	left:-240px;
}

.container_12 .pull_4 {
	left:-320px;
}

.container_12 .pull_5 {
	left:-400px;
}

.container_12 .pull_6 {
	left:-480px;
}

.container_12 .pull_7 {
	left:-560px;
}

.container_12 .pull_8 {
	left:-640px;
}

.container_12 .pull_9 {
	left:-720px;
}

.container_12 .pull_10 {
	left:-800px;
}

.container_12 .pull_11 {
	left:-880px;
}




/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

Open in new window

0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question