I was having a chat with a designer about how to make my life easier to build site templates. They showed me a page layout overlaid with 24 columns and I can see that everything fits very nicely within the the 24 columns but I fail to see how this can help me build templates more efficiently and accurately.
My preference is for the designer to provide a page design overlaid with dimensions, much like architectural blueprints. This is how I've always done this, but I am open to faster and better methods.
Any opinions/ideas on this?
Steve
It lets you rough out designs in PS and write the initial layout code much faster, though it does have limitations/annoyances.
If you want a bordered box with padding (etc) within those columns you'll have to nest a tag inside a "grid_x" div, otherwise it'll send stuff off the grid.
give a try to fluid24.org maybe can give you some ideas
Related
Hi Im currently creating a Website (who isn't?). My Website Design Looks like this:
Desktop Version:
Mobile Version:
(Sorry for the Big Images)
As you can see, ist not much changing.
Sidebar and the Global Nav are disabled in the Mobile Version (Menü via o/Off Canvas)
The main Content Layout Changes.
The Layout in the Content divs Changes too. (Use nested Colums fot that in the Grid System?)
My Question is: Should I use a Grid System? If Yes: Should I just use it for the Orange Content Area or for the hole Website?
Added: The Site should is Full with!
As mmgross said, you're asking a pretty broad question that comes down to taste and experience in design.
There are a number of tools and frameworks that give you access to an already defined grid system; Bootstrap is probably the best known but Foundation CSS is becoming very popular and is lighter weight. If you're not planning to do much intricate styling and just want a preexisting grid, my personal choice is Skeleton - it's very lightweight but adds the grid/responsiveness you're [probably] looking for.
This brings up the other main point: how experienced are you using HTML/CSS? One of the big benefits of using a grid is the responsiveness that comes from them without writing a number of media queries. Still, you'll have to at least write one media query to detect if mobile, so if you're comfortable with position in CSS then it might be best just to pass over grids and write it all yourself (looking at your layout, that's what I'd probably do).
It's always a trade off between time it takes to do the task and time it takes to learn something new, so keep in mind that the learning curve for some of the frameworks might be steeper than you think. Then again, if you're experienced with using them, it will probably be easier to stick with what you know than play around with the raw CSS.
Hope that helped!
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I am just starting out with HTML5. I do understand that using fluid design is an integral part of RWD. So instead of specifying width in px , I am using it in percentage. Have two questions.
1) I find myself creating more breakpoints and specifying different width for each of the points. How to stop this?
2)Also I want to know whether there is any way I can stop the content from resizing after a specified width say after 1024px (58 em) I dont want the application to resize further since the input elements look awkward and stretched beyond this point.
If you are just starting with responsive design, you might want to consider using one of the established frameworks like bootstrap or foundation ... and there are several other good ones as well.
It will save you heaps of time and questions like those you are asking will be managed by the framework itself.
FWIW, I'm not against roll-your-own solutions to responsive design, but there's so much to learn to get good cross browser/platform results that I think they have a lot going for them and are worth looking at seriously.
Good luck!
I have coded a very complex php game with around 40 pages. I am now in the process of designing it. Would responsive design be the right choice in this case? What other options are available? Maybe I should just make three layouts (3 different stylesheets - normal, tablets and mobiles)?
It just seems like a ridiculous amount of work moving all these elements since there are so many pages.
Creating a responsive site is not that difficult from the html/css point of view, although I'm not sure how your php will affect that. You actually always have the same classes/ids, and just apply styles to them using the media queries (inside the same sheet). It would mean a lot more effort to write 3 separate sheets, but then again: depends on your code. In general, the trick is just to have good semantic, clean code (use positions wisely, for example). It takes some time to get everything organised at first, but once you have the basics structured with responsiveness in mind it gets really easy. Those 40 pages should all have the same structure, right?
Another option would be a liquid design. Instead of changing the styles, you use percentages or dynamic measures. But I strongly recommend grids, and you only have to do it once and it won't be long until everyone does responsive sites.
But if the game is complex and need some serious tweaking, you should consider doing a completely separate thing for mobile (tablets should be easy enough to adapt, your choice). It really depends on the product design, things can look very different in 320px wide. Good luck with the game!
If the content will be the same on all the devices and you can't think of a good reason to fork the code to provide different content for different devices, responsive design is the way to go.
I have got a requirement where the outlook is as shown in the attached image
I have accomplished the task by making use of tables in HTML and styling using CSS.
The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.
Suggestions from the professionals are appreciated.
I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/
You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.
Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.
I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.
It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.
Try something like this
I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.
Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site
http://css.maxdesign.com.au/floatutorial/
it will teach you all the basics of designing with divs.
In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.
If you look at the html, I've annotated what is just a repeat of earlier content.
http://jsfiddle.net/zandergrin/k8EsP/3/