Solved

which tool

Posted on 2013-05-21
5
661 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 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

756 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