I am a newbie in web design. Now I am frequently using float property to design my layouts. I also have learned a bit both about grid system and flexbox system. My question is which method should i use and why, is there any other method other than floats, grids and flexbox to design the layout of a website? If so please explain.
As others have stated, no single method is overarching. If there was one, we'd all be using it and nothing else.
However, it sounds like you might be asking if flex is better than grid, grid better than flex, floats better than grid, etc. I use a combination of all of these in most projects I work on. They each have strengths and weaknesses that need to be utilized or avoided in certain situations.
You will, however, need to be aware of browser support (or lack thereof) and will need to provide fallbacks for those cases (e.g., CSS grids and IE11).
The best method to design your site layout is to start with a piece of scratch paper and a pencil. Draw rough drafts of where you envision the different parts of the site, what page leads to another page, etc. Then figure out how to make it all functional.
There is no one method of coding, you develop your style through experience using a combination of any of several coding languages. Decide first what you want to see on your page, then look for a solution. It is a process.
Related
What is the point of these CSS Frameworks? I don't understand them. When I look at them, all I see is boring layouts that seem overbearingly-difficult to adapt to your own unique designs.
Is this the case, or am I just missing something here? I'm referring to (frameworks in general) things like Blueprint, Less, Skeleton, 960 Grid system, Base, Gridless, etc etc etc.
I know this is a really simple thing but I just don't get it. I have searched but have not found anything that helps me to understand what the big deal is. When I look at their code, all I see is mess. Weird class and id names all over the place.
(This isn't a rant or complaint by the way, I just really don't get it.)
CSS frameworks are pre-prepared software frameworks that are meant to
allow for easier, more standards-compliant web design using the
Cascading Style Sheets language. Most of these frameworks contain at
least a grid. More functional frameworks also come with more features
and additional JavaScript based functions, but mostly design
orientated and unobtrusive. This differentiates these from functional
and full JavaScript frameworks. -Wikipedia
Advantages
They can help you learn CSS. You might just literally not know how to pull off a solid multi-column layout. A framework may be a
good place to get your feet wet understanding how CSS works.
They provide code that you just don't need to write from scratch every time, like resets. I've long been a proponent that the star
selector (*) margin/padding reset is a fine reset. I use it all the
time. But... if you are starting a major new project that is going
to be loads of pages, live for years and years, and will grow over
time, you should invest right away in a more robust reset. All
these frameworks start with brilliant resets that cover all the
bases and will have you covered for years to come.
They relieve cross-browser concerns. You can't undervalue this. We've all felt the burn of finding out our sites are borked
in some browser or another at a hugely inopportune time. Frameworks
are built to bring their magic to all browsers.
It helps you build good habits. Like including a print stylesheet in your projects. I always intend to build one, and I
often do, but the chances are a lot higher that I do it if I have
one there from the get-go.
They encourage grid based design. Which is a good thing. Grids don't mean boring! They just help you achieve better
readability, scanability, balance visual weight, flexibity,
expandability, and just overall page page cohesiveness.
They come with documentation. If you need help getting started, framework generally come with some support files. This can be
particularly nice if you are designing a site you will be handing
off to a client. You can just let them know what framework you used
and refer them to that documentation for support requests.
They lay groundwork. If you are using something like YUI, your life will be a lot easier if you use All-YUI-Stuff-All-The-Time.
It's built to work together and built for expandability.
CSS-Tricks
Also see: Comparison of CSS frameworks
I've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
I have been looking at CSS3/HTML5 frameworks available, but there is simply too many to make a decision quickly, and they all seem to be focused on streamlining javascript development and UI elements.
In particular, a very useful part of a framework would be to create CSS-based layouts quickly - without having to worry about browser compatibility. However, without actually using the existing frameworks it seems impossible to understand whether the existing frameworks do that, or how they do it.
For example, I would like to create a simple layout that fills the whole page but has a minimum height/width. This should be a 5-line CSS declaration but it's a headache because of IE. Ideally a good framework would allow me to define this once, instead of adding in a special solution for every browser.
Which of the existing frameworks address this? I'm not talking necessarily about frameworks (as the meaning of 'framework' is somewhat loose when talking about HTML/CSS) but other things that you find helpful in development.
I have looked at column-layout frameworks like 960.gs or blueprint but they seem to be geared toward website development, rather than web application development.
Thanks,
960 sounds right up your alley. http://960.gs/ you can tie it with adapt.js to make it adaptive. http://adapt.960.gs/
personally if i have to use a css framework, i'll go with oocss https://github.com/stubbornella/oocss/wiki but i think 960 is exactly what you are looking for.
I am a Web developer and in my projects I have noticed that my weakest point is not being good at the front-end design. Relying on other designers can be annoying if they are not able to produce as quickly as I want.
My perspective on HTML/CSS is that it is basically a big hack that amazingly works. There are too many CSS and browser specific bugs/quirks to learn and remember them all without spending extreme amounts of time trying to untangle everything. Is there a fast track route to getting CSS into my brain? I have looked at some CSS books, but to me they really read as long lists of how to render things correctly in IE6 and how to make corners rounded. (Seriously why does it require so many tricks to make a sharp corner round? On any platform but the Web this would be called a major oversight.)
Does there exist something that does the analogous to CSS that jQuery does for JavaScript? Using jQuery you don't need to know JavaScript well to make things that work.
I am not interested in learning why IE6 does things in weird ways because I don't care about supporting it at all. I am more interested in a method of learning how to use CSS to do what I want without spending hours and hours reading obscure blogs.
Pencil and paper to sketch out your ideas (think in boxes, not triangles or hexagons), then just break down all the little parts and learn how to do each one. No problem is too big that it can't be broken down. And, like always, TMTOWTDI!
Find examples and learn from it—at least that's how I started learning. Study the styles used and play around with them. When you find something that does what you like, create a mock-up and play around with it. Then test it for cross-browser compatibility.
If you get frustrated because something works in Firefox and Chrome, but not in IE (this will happen a lot), don't give up. I find cursing Bill Gates' name and all he stands for is a great stress reliever. :-)
A great tool I like to use is Firebug, a plugin for Firefox that allows you to, among a great many other things, edit CSS rules in-browser and see the results as soon as you do it.
I agree that CSS was kind of an afterthought in the web design world, but it's one hell of an invention and makes things so much easier and quicker to develop.
Yes, there are CSS frameworks that are the 'jQuery of CSS'. Some of the more popular ones include 960 and Blueprint. I personally use 960 and have found it takes a lot of the guesswork out of layout.
As others have said CSS is hard to learn by reading. It ends up being one of those things you just need to develop an instinct for through lots of experience (which typically means lots of trial, error, and frustration). It is, as you've highlighted, not an ideal situation, but it is what it is.
Another difficulty is that the methodologies or workflow that is employed can really differ between individuals. Some people do a mock-up in Photoshop first, then produce an exact pixel-by-pixel "rendering" with HTML/CSS. Others use Photoshop, Illustrator, or another tool to simply sketch out and idea, and then re-create it from scratch in HTML/CSS. And still others prefer to start directly with HTML/CSS and just a few thumbnail sketches. Figuring out which of these methods fits you best is anthoer important piece of the puzzle.
It pretty much takes time and practice. But you can save yourself a lot of trouble if you keep your html clean and straightforward. Here are a few rules I can think of that have helped me:
Use DOCTYPE in your html pages, start with transitional since it has the most lax rules, and validate your html. If you keep your page in standards mode rather than quirks mode, you will have significantly fewer problems across the board.
Pick what browsers you will support early on and support them in a logical order. For me, I develop in firefox, then make sure that things are solid on chrome / safari. IE can use a special kind of comment that lets you insert html visible only to IE. Use that to add on stylesheets for IE7, then IE6 to override styles and fix any display issues in those browsers. You should generally start with the best browser first and work your way backward.
Be careful with padding. That is one of the most problematic properties I've dealt with. When you can, opt for using a little sub-container element with a margin in place of padding. It's more markup but margin is handled much better across all browsers.
Absolute-positioned elements inside of relative-positioned elements. This solves a LOT. When you relative position an element, it stays in it's normal flow. When you absolute position elements inside of a parent that is relative, the absolute items work in reference to the location of the parent.
In this case I don't think books will help much. CSS is extremely easy to learn, and extremely difficult to master.
All I can suggest is learn as you go.. You need a lot of experience!
Or, you can drop support for IE7 and especially IE6. If you do that you'll find very very few and very very rare quirks :)
Take some classes in graphic design. No programming language will make you an artist, and artistry is required for good user-interface design.
[or you could find better graphic designers to work with]
Subscribe to css-discuss, play with the common problems and talk with other people about your progress. The wiki is a very useful resource too.
I'm about to begin working on a web page with a complex table-based layout (coded years ago).
One of the things I'd like to do is convert the layout to a proper CSS layout with divs and spans.
Can you suggest a good approach for tackling problems like this? Should I use a CSS framework like Blueprint? Just get in there and hack on it until it looks right? I already make heavy use of Firebug and the IE Developer Toolbar.
There generally isn't a silver bullet in converting between table and CSS. Every site is different and has different requirements. The only real answer is: simply start the markup from scratch.
The best advice is to write the markup entirely first. Make sure the markup is accurate, semantic, and represents your data entirely. Do not write the stylesheet... yet. After the markup is done, create the CSS. This way you have semantic markup and CSS is purely controlling the presentation.
CSS frameworks often don't advocate this approach to semantic markup because they force you to add additional tags to comply with their approach. Consequently, CSS frameworks are sometimes more trouble than its worth.
Do the markup, then the CSS.
Before you start, ensure you are using a CSS reset. Eric Meyer and Yahoo YUI are both excellent. This will help to make all your browsers look the same.
Also, install the HTML validator too. This will ensure your HTML is looking good and ready for adding the CSS.
Then grab a copy of Firebug and install it in firefox. This is excellent for seeing which CSS rules are doing what. You can disable individual rules by clicking s cross by each rule.
Now, visit some web pages which validate correctly and see what rules they have used in their style sheets.
Web sites to try are www.alistapart.com, CSS Zen Garden, SimpleBits etc.
The converting process will be a painful headache! I suggest you to start a whole redesign.
I don't know is this can be of any help, I build CSS Framework called Emastic (supports fluid and fixed columns) and you can simulate tables if you want here is the example Emastic Table
I second the commenters who say you should re-design the whole thing from scratch. Clean up the HTML and then make the CSS.
I'd like to add a reason to do so. Usually table-based designs are at least a few years old and therefore look quite passe. Take advantage of this opportunity to improve the design. Either a slight refresh or a complete overhaul depending on your taste and needs.
Iterative way works as well. Start with small blocks, converting them to CSS. This should simplify your table structure, hopefully leaving only the "basic grid" in tables and all the rest in CSS.
From there, pick an existing, tested solution if it's a simple layout (for 1 to 3 columns, there are tons of tested solutions out there). If it's more complex, go with Blueprint.
I wouldn't use a framework. Learning a new framework is only useful if you use it over & over again. Each framework has its own bugs and weaknesses. Use
display: table-cell;
to make a column. These will line up like float: left;. See http://quirksmode.org/css/css2/display.html
In some cases, using regular expressions could speed up your process.
For instance, something like this:
<table.*>\R*.*<tr>\R*.*<td[^>]*?>(.*)</td>
would match the start of a table and provide the contents of the first cell in $1 for a replace:
<div class="container">\n\t<div class="row">\n\t\t<div class="span6">$1</div>
Of course you'd need to customize to match your particular use case. If you have a number of similar pages, you might try hand coding one first and then using something like this to make converting the others simpler.
Another approach would be to use something like this jQuery plugin: https://github.com/ryandoom/jquery-plugin-table-to-div
It is intended to modify following rendering, but could be used during development to take a given table and provide a simple DIV based form of it.