Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

which tool

Posted on 2013-05-21
5
Medium Priority
?
692 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 10

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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 54

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…
Suggested Courses

972 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