Solved

which tool

Posted on 2013-05-21
5
650 Views
Last Modified: 2013-05-22
Hi,

I am after a grid system that allows responsive design and works for mobiles as well.
Now I am wasting too much time looking at grid systems like 960 grid responsive that doesnt seem work for optimally a mobile device . As in the columns should resize , move and some disappear  for mobile devices.

960 responsive grid tutorials are pointing back to fixed grid tutorials

So I looked at bootstrap which did appeared to work better  for mobiles and looked at tutorials for this like http://www.youtube.com/watch?v=TGba0p2GX2o&list=PLKlA1QwYBcmcEUUBSmkl8_kgwn-_zuy-W

and the guy walks through another fixed grid display.

This is what I want to do with a grid.
I need to do something like this website, see how it changes to mobile view with resizing.
http://www.opencolleges.edu.au/distance-education
0
Comment
Question by:jagguy
5 Comments
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39186525
Check this tool...

https://quirktools.com/screenfly/

What it will do is... help you in viewing your site in different popular devices...

Type in your site URL (Which you want to see) adn then press GO...

OR>>>>

Check this one too...

http://responsinator.com/?url=www.opencolleges.edu.au%2Fdistance-education
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39186531
Have you tried using @media css , there are various framework for responsive try using them.

http://lessframework.com/
http://codevisually.com/
http://twitter.github.com/bootstrap/index.html
http://foundation.zurb.com/index.php
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39186588
I will double vote on bootstrap and foundation.  However, you can get there with 960 too.  Part of the issue you are having is making a responsive site is not as easy to wrap your head around as you are coding for 2 or 3 different versions on the same page.  So if you are used to  making your site visually with something like dreamweaver, there will be a frustration level because you will need to rely more on the code view and then preview your code in a browser rather then rely on the dreamweaver preview side.    

You might be better off starting with a pre made template.  Just google bootstrap templates or fondation templates.    Foundation does have some plain templates http://foundation.zurb.com/templates.php to help you get started.
0
 

Author Comment

by:jagguy
ID: 39187078
Hi,

Yes I can code for 2-3 version of the same page because I can do this with media queries. The issue is doing the same using a grid.

Bootstrap mentions (little hard to find) that the columns stack up automatically.
OK then what about a new navigation for a mobile do have 2 rows for this and display only 1 with a media query depending on a desktop/mobile display?

I just had trouble finding tutorials that explain these concepts I need to know for responsive layout/mobile layout for a  grid like bootstrap.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39187843
Start here http://twitter.github.io/bootstrap/scaffolding.html#responsive and make sure to scroll down and read.  

I think it helps to either draw out your page by hand on a napkin or in powerpoint or some other draw tool.  I use napkins and Omnigraffle.  

I have never been concerned about column height because I use a solid background.  Check out  themeforest.net and buy yourself a $20 template built on bootstrap and that might shorten your learning curve.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now