Solved

which tool

Posted on 2013-05-21
5
668 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
[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
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 53

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 53

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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

710 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