God Dayumm
Banned
css is for styling not for
layout
layout
-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
Firefox has something similar built into their dev console. But this is great for those who primarily use Chrome Dev Tools and don't feel like opening Firefox just to test responsiveness.
Depends on a lot of different things! For javascript, there are a lot of potential pitfalls that could trip you up, and depending on what language you're coming from/your current mindset, you might come across different road blocks.
So in general, I'd recommend reading a good book - I love interactive tutorials and stuff, but a good book teach you not just the best practices, but the common bad practices.
Javascript the good parts is solid, but so is something like Secrets of the Javascript Ninja, or if you want something a bit lighter but not TOO introductory, Eloquent Javascript is great.
Mind you, doing something like codeschool or codecademy's javascript tracks are great for getting you familiar with the language if you're really new to it. And in the end, of course, just practice stuff.
With angular, there are a lot of growing resources.
1. egghead.io. Absolutely great resource, great video tutorials - honestly my number 1 recommendation for learning angular. It's not just that they are informative - it's that they are really bite sized, enjoyable to watch and engaging, which is super important.
2. Mastering Web Application Development with AngularJS is so far the best book I've read, but there are a lot of new books out in the last 3/4 months that I haven't touched - still, it definitely isn't a bad book to read - however you might be a bit more comfortable reading that book after you watch a few egghead.io videos and read a few quick start/hello world esque articles.
3. Practice. Angular has a LOT of learning curves. Like.... the first few steps are easy, and so goddamn powerful (mix two way binding with a ng-repeat and you'll feel like a god with 10 lines of code) but then you start hitting your first road blocks like... dependency injection, or the nature of $scope, or just exactly what controllers/services/directives ARE and when to use what.
Angular is really powerful, and it really allows you to do a LOT of stuff on the front end, to the point where your backend might as well be practically non-existent - but with all that functionality comes difficulty. So just don't get discouraged and just ask questions if you get stuck!
Once you start 'getting' all these cool aspects of angular, you start getting really excited, and it's really a very useful framework which is poised really nicely in the market. When you start getting directives, you'll want to make everything into a directive. Once you get filters, you'll want to filter all your data. Once you get services/factories, you'll start making them huge and powerful.
Just enjoy yourself!
Eh... I think that keeping your markup a readable as possible is good, so I understand some of the trepidation with using css for layout, but you can end up having HTML monstrosities all in the name of keeping your layout outside of css.
The column system that boostrap (and other css libraries) employ are really great, and they have the benefit of being 'tried and tested'. And the ability to very easily and cleanly specify different layouts with classnames is super duper convenient.
from bootstraps website:
Code:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>The grid system that bootstrap utilizes is based off of 12 columns. Saying col-xs-12 is the equivalent of saying "when the viewport is extra small, make this element take up all 12 columns, ie, a full row" sm is small, md is medium. When you take up 12 columns, everything else is immediately pushed to the next row - however you can also just specify the next row by saying 'row' if you want to be explicit.
This isn't the best explanation, but it highlights how simple this is, and the equivalent without css would be... I don't even really know what that would look like.
This looks like a good tutorial:
https://tutsplus.com/course/responsive-web-design-for-beginners/
I haven't taken the course myself, but as a subscriber to tuts+ premium I have taken a number of beginner courses on HTML, CSS, PHP and Javascript and they were all pretty good. As a non-subscriber you can view the first two lessons to get an idea.
Couple of tips for intermediate web devs:
Unit test your your code:
Front-end needs unit tests too. Qunit is good, so is mocha + chai. Sinon is the best for stubbing. Learn to do this. Also, test in actual browsers you wish to support. Do not use headless browsers like PhantomJS.
Use a framework:
Unless you are well-disciplined and have a personal consistent style use something like Backbone or Angular to help you. My favorite is Backbone with stickit for view model binding. Stickit is one of the few that actually does this in a sensible way.
Learn how jquery works under the hood:
Everyone uses it, most over use it. Instead of some $element.prop("checked", "checked") garbage for checking a checkbox, how about $element[0].checked = true? Easy use with bools, no strings. jQuery is best used for older browsers, DOM inserts, and even handler tracking, everything else can be done nearly as easily natively in modern browsers.
Use CSS flexbox:
All modern browsers support flexbox (Safari and Silk need -webkit but it's the same syntax). Use this for modern responsive layouts. No more garbage CSS frameworks.
Use native form validation:
Stop using libraries for this. Learn to use native html forms. It's actually fairly intuitive once you get it.
Use templates (especially logic-less ones):
Don't append strings for on demand html. Use a templating engine. Mustache is my favorite because you can't put code in it, this is a good thing because you'll want to but it pollutes the view with the logic, build view models instead. Note that as Web Components uptake happens this might start rolling over to using that.
Subscribe to HTML5 rocks
http://www.html5rocks.com/en/ Google evangelists (And some others) post good articles here about new web features including some that I just mentioned.
Use version control
If you work for a company this is obvious but might not be for one-man shows. Use Git, post your work to Github. Also check Github for cool new libraries.
Everything SVG
Use SVGs for anything that is man-made (ie not photos). Much easier to deal with and nice version control properties too. Learn to write by hand if possible, image editors tend to put a lot of garbage into these and don't use them efficiently but it's actually a pretty sensible XML schema to understand.
Use a CSS preprocessor
Takes the pain out of managing CSS as CSS is designed stupidly. I use Compass which is SASS based.
Unit test your your code:
Front-end needs unit tests too. Qunit is good, so is mocha + chai. Sinon is the best for stubbing. Learn to do this. Also, test in actual browsers you wish to support. Do not use headless browsers like PhantomJS.
Use a framework:
Unless you are well-disciplined and have a personal consistent style use something like Backbone or Angular to help you. My favorite is Backbone with stickit for view model binding. Stickit is one of the few that actually does this in a sensible way.
Learn how jquery works under the hood:
Everyone uses it, most over use it. Instead of some $element.prop("checked", "checked") garbage for checking a checkbox, how about $element[0].checked = true? Easy use with bools, no strings. jQuery is best used for older browsers, DOM inserts, and even handler tracking, everything else can be done nearly as easily natively in modern browsers.
Use CSS flexbox:
All modern browsers support flexbox (Safari and Silk need -webkit but it's the same syntax). Use this for modern responsive layouts. No more garbage CSS frameworks.
Use native form validation:
Stop using libraries for this. Learn to use native html forms. It's actually fairly intuitive once you get it.
Use templates (especially logic-less ones):
Don't append strings for on demand html. Use a templating engine. Mustache is my favorite because you can't put code in it, this is a good thing because you'll want to but it pollutes the view with the logic, build view models instead. Note that as Web Components uptake happens this might start rolling over to using that.
Subscribe to HTML5 rocks
http://www.html5rocks.com/en/ Google evangelists (And some others) post good articles here about new web features including some that I just mentioned.
Use version control
If you work for a company this is obvious but might not be for one-man shows. Use Git, post your work to Github. Also check Github for cool new libraries.
Everything SVG
Use SVGs for anything that is man-made (ie not photos). Much easier to deal with and nice version control properties too. Learn to write by hand if possible, image editors tend to put a lot of garbage into these and don't use them efficiently but it's actually a pretty sensible XML schema to understand.
Use a CSS preprocessor
Takes the pain out of managing CSS as CSS is designed stupidly. I use Compass which is SASS based.
Eh? I thought that was one of the main uses of <div> tags. All sites I've designed I laid out using divs with CSS.
I'll second angularjs, been using it without any problems since the early betas (mid 2011). Surprisingly it's only gotten better without breaking BC too badly. I recently looked at one my earliest projects and outside of missing $scope (though I've always used var scope anyway) it hasn't changed much. Plus you get DI, testibility all without polluting my JS with framework crap. Directives are a god send, I'm always amazed how small my controllers end up after multiple refactorings. Basically the perfect, ideal slim controller: I just call some services and assign vars, dom is handled by directives. Simply beautiful.
Angular is basically the first and only js framework for backend developers.
Angular is basically the first and only js framework for backend developers.
Awesome. This is very helpful stuff, man. Will definitely check out some of these resources. Thanks!
Testicular Sound Express
Member
Like someone above mentioned, I also HIGHLY recommend using a css processor like SASS or Stylus. Once you start using them you never want to go back to vanilla css. You realize how clumsy and messy the syntax for CSS actually is.
Angelus Errare
Banned
I have quite a few number of CMS you should add, many of them are very powerful and targeted more towards the designer than the programmer allowing people to focus more on the front end stuff and not having to worry about the back-end as much.
Kirby (Personal favorite of mine)
Siteleaf
Statamic
Cockpit
The Secretary
Craft
Anchor
Koken
Perch
Kirby (Personal favorite of mine)
Siteleaf
Statamic
Cockpit
The Secretary
Craft
Anchor
Koken
Perch
I don't agree with everything here, but this is a great post for the most part.
Fuck native form validation however if you're using Angular - angular's form validation is so goddamn bananas. (also, LESS is better
)Testicular Sound Express
Member
well thats what he means. You create the skeleton with elements like divs, but you style and manipulate these elements with css. Without a good layout you end up using extra css markup that you don't need.
PetriP-TNT
Member
I work in the field and all I wanna say is fuck every browser that isn't Firefox and fuck their quirks. Kill Chromes font rendering engine in fire and destroy every <IE9 browser in existence. And occasionally kill Firefox too just in case.
And yeah, years ago I was "w3schools is fine for quick look", but I really suggest adding "mozdev" or "mdn" for your searches.
And yeah, years ago I was "w3schools is fine for quick look", but I really suggest adding "mozdev" or "mdn" for your searches.
Testicular Sound Express
Member
I secretly hate every major browser
PetriP-TNT
Member
I openly hate every browser. Every single one of them.
Current pet peeve: <video> attribute "poster", aka the poster image only shows if your video is not loaded. Why not when your video hasn't started playing? Goddammit. Sure adding your own "poster" is trivial but why?
zephervack
Member
Thank you
Will check this out as well, hopefully it can get me where I want.
Buddha Beam
Banned
I used to always use Dreamweaver too, but Coda was so good that I switched to it.
The only thing I really miss are the default font lists in the Dreamweaver CSS panel.
If you're using Compass, then I recommend you install and use the Breakpoint mixin. It makes coding media queries so much simpler.
If you're not using Compass, then I recommend you start using Compass.
Confusion Illusion
Banned
What about [web] fonts. Do you guys just stick to the default fonts or seek out more nicer stuff?
I'm actually trying make my web site consistent with my resume and business card design.
I'm actually trying make my web site consistent with my resume and business card design.
I use Google Fonts. They have a ton of great, free fonts and they are super-easy to add to your project.
Seriously the best thing to come about for clean design in awhile. Thank you Google.
Has anyone transitioned between back- and front-end work?
Was mostly front-end with some JSP since coming out of school and worked my way up to managing corporate web systems. That landed me a job where I'm doing .Net work while getting to learn on the fly. I'm finding that beginner software engineering (well, off my credentials) pays a heck of a lot better than web lead/management but I do miss the more direct UI work. Any similar experiences?
Was mostly front-end with some JSP since coming out of school and worked my way up to managing corporate web systems. That landed me a job where I'm doing .Net work while getting to learn on the fly. I'm finding that beginner software engineering (well, off my credentials) pays a heck of a lot better than web lead/management but I do miss the more direct UI work. Any similar experiences?
I'm going to take issue with these points. I think web design has become such a bloated mess in recent years because of all this crap. It's shame we're losing little snippets and ideas on blogs and websites that you could learn from and recommend to others. Nowadays everything is libraries on top of libraries with unit test and all this other stuff and the thing you actually want is only like 2kb.
I understand if you're working on some massive site with loads of developers or whatnot but 90% of the stuff I see on GitHub and around the web now is impossible to recommend because it's just buried under layers and layers of bullshit.
anyway, rant over.
Have you tried Angular?
Edit: I ask because I feel like it's a framework that gets so much right, that it really is changing how people are approaching front end. The front end isn't just html/css with some jQuery anymore, you can make everything from quick and simple web pages to robust and powerful apps with the technologies we're seeing now. And I think if you look at things like JavaScripts next spec, you see what I mean.
With this complexity though comes testing and other things, only because more and more websites are really just "apps".
DUFFMCWALIN
Member
Yup Google fonts are the best. Plus the designer I work with can always pick out a google font he likes. They have a good variety.
The only thing I ask for is understanding that what you want might not be realistic and that you need to be able to work with me, compromise, and help find a good middle ground if needed.
Unit testing is non-negotiable, there is nobody who is worthwhile who doesn't unit test. Unit testing increases assurance that your code works as you think it does and does not regress when you add features. Don't use it at your own peril.
Frameworks are necessary especially once a project reaches a certain size (adding them later can be a pain-in-the-ass). For very small ones I don't use them but I have a very meticulous coding style that I've built up over years that does the same things a framework would. I'd urge most people to use one unless a project is that small and they really know what they are doing enough to question this.
Templates are still very much a necessity. You can use Web Components and custom elements but only Chrome will support them and uni-browser support is always bad. You need some in-field consensus on the feature you are using or you are impacting user choice.
You can do without a preprocessor especially on very small projects but your CSS will quickly become unreadable especially if you are using prefixes. Preprocessors allow you to organize css in multiple files and make better sense of them by writing things like nested-selectors. There's also no reason you need to specify often used colors or sprites every time you use them because that's not DRY adherent but CSS at this point offers little you can do about it.
Cool, that's something I strive for, an open and collaborative design/dev relationship. Expect that from most devs, but always good to hear it reiterated.
onadesertedisland
Member
I admit that I got caught up in the responsive design thing, but now I realize that responsive design is not a positive.
Tablets and phones now have enough resolution and people are comfortable zooming that making a dedicated site for a phone or tablet pisses me off more than it helps.
So that's my opinion. I think responsive design is a good idea in theory, but ends up being abused like frames etc..
Tablets and phones now have enough resolution and people are comfortable zooming that making a dedicated site for a phone or tablet pisses me off more than it helps.
So that's my opinion. I think responsive design is a good idea in theory, but ends up being abused like frames etc..
Aesius
Member
Good points. I would prefer to learn development over design, although both interest me. UI/UX is another interest of mine.
Buckethead
Banned
Learning the finer points of Sass right meow.
Glad to see it in the OP.
Glad to see it in the OP.
Fury Sense
Member
Pixel perfect was my favorite
Testicular Sound Express
Member
I completely disagree. As someone who works on mobile ecommerce sites, I hate when sites dont have a tablet or mobile version. It makes navigating the site or buying things so much easier. Pinching and zoom around a site is infuriating.
Bad design is bad design regardless of if its responsive or not.
Piercedveil
Member
Nice thread. Subscribing since web design/development really interests me.
I've been wanting to create my own website but I don't exactly know where to begin. I've taken a class on HTML, but was never able to produce anything great looking, in my opinion.
Is it possible to make good looking websites solely with HTML? If not, I wouldn't mind learning something else if you guys have any recommendations. I have a decent amount of experience with programming, just not web stuff.
Also, would someone mind giving me a very basic order of the process to complete a website, start to finish?
Thank you for any help you can give me.
I've been wanting to create my own website but I don't exactly know where to begin. I've taken a class on HTML, but was never able to produce anything great looking, in my opinion.
Is it possible to make good looking websites solely with HTML? If not, I wouldn't mind learning something else if you guys have any recommendations. I have a decent amount of experience with programming, just not web stuff.
Also, would someone mind giving me a very basic order of the process to complete a website, start to finish?
Thank you for any help you can give me.
Memento_Mori15
Member
I'm going to subscribe to this thread. I've always wanted to do more web development but stopped. I was actually doing it around high school and only knew basic html, sql, and javascript. My last database project, I used php, javascript, and mysql and did something really simple, since I haven't done it in years, while the top among my classmates did some ridiculous sites and the design was sleek.
Very nice OP, definitely will look at some of the learning sites if I have the free time.
Very nice OP, definitely will look at some of the learning sites if I have the free time.
Junior Mint
Member
Any books or resources for the user design/experience/interaction aspect?
Copywriting, and by proxy content strategy, is a specific aspect of User Experience design. It's often overlooked in importance but any UX designer worth his/her salt recognizes its importance.
You do not need to be a visual designer when going into UX; in fact while it's typically beneficial in terms of having existing knowledge of visual design principles, it's sometimes detrimental when learning UX due to forces of habit. However, it's beneficial when you're in the job market to be a proverbial unicorn. Although, having coding experience, particularly front-end, is similarly useful.
A jump to the UX world shouldn't be that hard; it depends on how much of an affinity for the discipline you have.
Agreed, although the merits of having a dedicated mobile site vs. a single responsive solution can be debated all day.
HTML is the visual foundation of a website. Realistically it represents document structure and that's it, CSS is what makes things visually look the way they do. Of course to make a site do anything you need javascript and some sort of backend that serves data.
You can partition website development any way you want but most basically you need:
-A data store : A database or something that holds the data you want to serve to users unless you're making a specific client-side web app that only holds the users own information.
-Web server: Something that serves the site and everything else. Often uses logic for permissions and serving up data from the database.
-HTML pages/templates: This outlines your pages (or views) and is necessary for the browser to render anything.
-CSS stylesheets : These give the layout, look and feel of your site. This text is bold, this is red, this appears on the left-size. Stuff like that.
-Javascript : Anything interactive needs javascript. This is any logic that runs on the front end, flipping switches, making things interactive to the user, interacting with the server etc.
What? No. Zooming in and out on a desktop version of a site is not a good user experience. And the thing about responsive design is that you shouldn't be creating a "dedicated" site for a phone or tablet. It's supposed to be all one site that gracefully scales based on the device you are using to access it. A well-designed responsive site should be fairly easy to develop. It sounds like you just haven't had good designs to work with.
sans_pants
avec_pénis
Subscribing. I was hired by my buddy as a programmer(zero experience, I have a degree in film) but mostly I was working on our sites. I had to learn wordpress first, then got pretty deep into drupal and now I'm working on our python/django site. I learned html/CSS and python syntax from code academy but I'm still sort of lost on a lot of things.
I want to learn JavaScript but I'd rather do some practical stuff than go through code academy again. Any ideas?
I want to learn JavaScript but I'd rather do some practical stuff than go through code academy again. Any ideas?
A nice small javascript book to read that REALLY gives you the 'right idea' is Eloquent Javascript.
Yeah, I'm not a big fan of using responsive css rather than individual sites since it ignores the major differences between tablets, mobiles and desktops and instead pretends as if the only difference is screen size. It completely ignores latency, memory usage and differences in cpu. It makes sense for tablets, but if you don't design for mobiles you end up with the mess that is theverge.com. But hey, at least it resizes to my screen while I watch it lag to hell.
My first foray into building a website was with Wordpress. I got a web server, installed Wordpress, found a theme I thought looked good and then just started tinkering with it. There are tons of themes out there, many of them free. Like you my only previous experience was a class in basic HTML. But I was able to get a decent looking website up and running pretty quickly and learned a lot in the process.
Piercedveil
Member
Thank you both. So Wordpress sounds like something I should try out. I imagine I'll be able to find info pretty easily if I get stuck. I'll have to look into it this weekend if I have some free time.