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

x
?
Solved

which tool

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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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