Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
Syphon Filter
Member
Practice making basic sites. Some good ideas i learned is pick a color palette that your site will use and also do a mockup first so that when you code the website, you know exactly what it will look like and will make things easier vs just coding arbitrarily.
phillipgessert
Member
CSS seems to be pretty much firmly on the 'design' end of that spectrum to me. If you've got your head around the language, but still can't make things look greatthen the best next step is probably to put CSS down for a sec and study up on design fundamentals.
johnnyquicknives
Member
If it doesn't look good then that's an issue with your design. If it doesn't look like your design then that's an issue with your CSS.
Anybody have any opinions on Derby or Meteor? I'm building a realtime collaborative web app and these seem to be the best solution. I'm currently constantly polling the server, for the sake of creating an MVP, but that's not something I'm OK with continuing much more than testing functionality.
Naked Snake
Member
I'm so happy this thread exists and is active on GAF. I've been wanting to create a website since forever but have been too intimidated by my lack of knowledge, experience, and initiative. I think I'm finally ready to start dipping my toes in this world and this thread should be a good resource.
just purchased don't make me think. Not to say that I didn't take web design classes in college, but I feel like I never got a solid foundation for design. I'm hoping this book is a good start to help me get that foundation.
Buckethead
Banned
layzie1989
Member
Designers, what blogs do you go to that highlight new and interesting layouts and design that also have them tagged? Similar sites to Httpster and Site Inspire.
runningjoke
Member
I'm not a designer, but I've directed designers to http://mediaqueri.es/ before. This site hasn't been updated in a while though. I'm a front end coder
for email mostly
[edit] for email specific I follow https://www.campaignmonitor.com/gallery/
Daffy Duck
Member
That's hilarious.
PetriP-TNT
Member
not sure if jquery or something in Angular would be the best option, will probably end up using bootstrap as well
but I need to write a webpage that basically opens either a socket or maybe some other listener stream (something of that sorts)
I want to push updates to all browsers opened to my page, and have specific elements update without the need for constantly pinging the servers for updates off of the client side.
Just looking for directions of what to look into, not the full solution. Any additional tips would be helpful, I have never delved into javascript before.
but I need to write a webpage that basically opens either a socket or maybe some other listener stream (something of that sorts)
I want to push updates to all browsers opened to my page, and have specific elements update without the need for constantly pinging the servers for updates off of the client side.
Just looking for directions of what to look into, not the full solution. Any additional tips would be helpful, I have never delved into javascript before.
I'd look up Sockets.io and/or Firebase. Off the top of my head, both are designed for those sorts of real-time distributed application kind of approaches.
WebSockets sound like they'll do for you. Have a look at http://socket.io/
What are you writing the back end in?
the back end is a orphaned mess and the bane of my existence, it's mostly bash script
the front end is a log of the system, and an interface others in our company to schedule automation. It's an internal ftp bullshit god awful monstrosity that needs to be rewritten in python, go or something...
I didn't even know you could write a backend in bash...
GluedOnBeard
Member
If you are fine with the requirement of js then go with Meteor it is definitely my favorite framework of recent times. Actually fun to code with.
If not then use a Laravel/Rails/Django etc server side and AngularJS client side and use Gulp.js to handle your assets.
I have to use PHP everday at work unfortunately but in my spare time I find my go to is Meteor and I find the community and framework in general to be better than Derby.
I decided I didn't really need the entirety of Derby, so I'm just using ShareJS with the project I've already started. I only really needed either framework to sync a document across all clients.
Hey GAF, I'm looking for some advice and answers with a potential career change. I'm 32 and currently a graphic designer but unfortunately I'm not passionate about what I do. I I feel I don't really have a creative spark for visual mediums, even though I get by alright brute forcing it. Also, the pay stinks.
I've long considered software development, particularly games, but the industry is such a gigantic mess that it wouldn't be a prudent choice at this point in my life (family, mortgage). I'd also like to make this switch happen as soon as possible so it's looking like web development might be a good choice, and something that would simultaneously build a good foundation to transition to software development down the road.
I've been looking at bootcamps like App Academy and Dev Bootcamp as well as learning at home with assistance by way of Thinkful or Code Academy. The former seem like something that could be worthwhile once I have some coding experience so Thinkful and Code Academy are probably my first step once I'm sure web development is the right choice for me.
Some questions:
1) Is Web Development still as great of a career choice as it has been as far as average pay and job availability goes? BLS says the median pay in 2012 was $62,500. As a graphic designer I certainly can't complain about those numbers.
http://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm
2) In order to be employable as quickly as possible, once I've got plenty of experience with HTML, CSS, JavaScript and jQuery, where should I go next? Ruby? Swift? Node.js?
3) Am I correct in thinking that learning web development would teach me skills and build a foundation that would be helpful if I want to learn c++ or Java down the road?
4) Should I expect web development to potentially be as thankless a job as graphic designing can be? I'm constantly feeling under appreciated as a designer. The non-designers I work with seem to always expect so much of the art team while also thinking that what we do could be done just as well themselves (and as quickly).
I've long considered software development, particularly games, but the industry is such a gigantic mess that it wouldn't be a prudent choice at this point in my life (family, mortgage). I'd also like to make this switch happen as soon as possible so it's looking like web development might be a good choice, and something that would simultaneously build a good foundation to transition to software development down the road.
I've been looking at bootcamps like App Academy and Dev Bootcamp as well as learning at home with assistance by way of Thinkful or Code Academy. The former seem like something that could be worthwhile once I have some coding experience so Thinkful and Code Academy are probably my first step once I'm sure web development is the right choice for me.
Some questions:
1) Is Web Development still as great of a career choice as it has been as far as average pay and job availability goes? BLS says the median pay in 2012 was $62,500. As a graphic designer I certainly can't complain about those numbers.
http://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm
2) In order to be employable as quickly as possible, once I've got plenty of experience with HTML, CSS, JavaScript and jQuery, where should I go next? Ruby? Swift? Node.js?
3) Am I correct in thinking that learning web development would teach me skills and build a foundation that would be helpful if I want to learn c++ or Java down the road?
4) Should I expect web development to potentially be as thankless a job as graphic designing can be? I'm constantly feeling under appreciated as a designer. The non-designers I work with seem to always expect so much of the art team while also thinking that what we do could be done just as well themselves (and as quickly).
Insane Metal
Member
Awesome thread.
Is there one for graphic design also?
Is there one for graphic design also?
Angular and Node.js.
LSauchelli
Member
It's as good career choice as any other. But getting to those 62K might not be as easy as it sounds.
Angular. Node.js is a good choice. Python as well. Hell, even PHP is good.
Not really. Javascript is fairly different from C++ or Java. You can apply the basic logic but you're likely to get some pretty bad habits if you only learn Javascript at first.
I think that depends on the office you're working on. A few years ago I had the exact oposite reaction, with Graphic designers telling me that their work was more important because clients want something 'pretty' and any random developer could turn a design into HTML+CSS+Javascript (that turned out to not be as true as they thought, but that's beside the point).
Syphon Filter
Member
If i helped work on a website along other team members,how would i go about putting that on my portfolio? Do i still link to the website we all made? And specify somewhere what i worked on?
Yep, just write what you part you worked on!
JonathanEx
Member
Bit of a question for web GAF...
Kinda open ended, responsive design related - I'm wondering what approaches people have taken to integrating advertisements on responsive sites? I do a lot of client work (well, almost all my work is client work) and so it's one of the big things for us to tackle - some sizes are better than others of course (not that those are always are the ones requested)... So I'm interested to hear how it influences your designs at all, stuff like that. Or what you say with clients on this sort of issue at all, etc.
Starting it off, right now I'm starting to look in to sort of approaches for getting the right ad sizes (in like, the swap method rather than just scaling - hello skyscraper adverts wanted on desktop, this might help sort this). Like, when you're dealing ads yourself rather than just Google etc.
One thing I read was quite useful for getting in the right mindset was an article saying not to give too much a fuck about what it looks like when you resize your browser each size pixel by pixel cos real people don't do that. In the office we were banding round thoughts, the whole idea of having multiple sizes in say, a holder div, switching in media queries, simple but not great for accessibility I guess - probably better to load in the right size via Javascript or something. Not really read in to it nearly enough, but it was an interesting chat in the office and thought I'd chat about it here.
Kinda open ended, responsive design related - I'm wondering what approaches people have taken to integrating advertisements on responsive sites? I do a lot of client work (well, almost all my work is client work) and so it's one of the big things for us to tackle - some sizes are better than others of course (not that those are always are the ones requested)... So I'm interested to hear how it influences your designs at all, stuff like that. Or what you say with clients on this sort of issue at all, etc.
Starting it off, right now I'm starting to look in to sort of approaches for getting the right ad sizes (in like, the swap method rather than just scaling - hello skyscraper adverts wanted on desktop, this might help sort this). Like, when you're dealing ads yourself rather than just Google etc.
One thing I read was quite useful for getting in the right mindset was an article saying not to give too much a fuck about what it looks like when you resize your browser each size pixel by pixel cos real people don't do that. In the office we were banding round thoughts, the whole idea of having multiple sizes in say, a holder div, switching in media queries, simple but not great for accessibility I guess - probably better to load in the right size via Javascript or something. Not really read in to it nearly enough, but it was an interesting chat in the office and thought I'd chat about it here.
Syphon Filter
Member
If i want to make a slider for some images and it slides on it's own but will have arrows as well for control, should i use plain JavaScript or jquery?
Hey guys, I also have a question... it might be dumb, but I'd really appreciate any help.
I have usually just done small projects for myself and hand coded the pages or written little scripts to generate many pages. I didn't know any better... However, I am currently working on a slightly bigger side project where someone else will need to edit/update the content. Essentially there will be a bunch of pages with the exact same formatting/template, just different content that needs to be updated someone other than me. I assume that this is where a CMS comes into play... However, I've never used one, so I don't know where to start. I already have the design of the site, so I'd just need to specify what sections are to be grabbed from a database (I presume). I really want to just be able to make a CMS work with my current design/static site. I don't want to use any premade templates, etc.
A semi-related question would be, will a CMS store rich text in the database (things likes headings, bullets, etc.). As you can tell from these questions, I am completely new to this side of the development and just don't know where to start.
I use Python, but have never used PHP, if that helps. Any sort of resources that discuss this sort of thing in layman's terms would be great. Thanks so much. I am working my way through this thread, lots of great info.
I have usually just done small projects for myself and hand coded the pages or written little scripts to generate many pages. I didn't know any better... However, I am currently working on a slightly bigger side project where someone else will need to edit/update the content. Essentially there will be a bunch of pages with the exact same formatting/template, just different content that needs to be updated someone other than me. I assume that this is where a CMS comes into play... However, I've never used one, so I don't know where to start. I already have the design of the site, so I'd just need to specify what sections are to be grabbed from a database (I presume). I really want to just be able to make a CMS work with my current design/static site. I don't want to use any premade templates, etc.
A semi-related question would be, will a CMS store rich text in the database (things likes headings, bullets, etc.). As you can tell from these questions, I am completely new to this side of the development and just don't know where to start.
I use Python, but have never used PHP, if that helps. Any sort of resources that discuss this sort of thing in layman's terms would be great. Thanks so much. I am working my way through this thread, lots of great info.
Daffy Duck
Member
Thought about using WordPress?
It handles all that for you and can create your own template/theme as required.
It handles all that for you and can create your own template/theme as required.
LSauchelli
Member
If your project already uses jQuery, I'd say go with it. But if it doesn't, including it just for that is pointless.
Thanks for the suggestion! I did some brief looking into it, do I need a solid knowledge of PHP for creating the templates, or is just basic knowledge required? I had initially avoided it just because most of the resources I came across talked about installing custom themes. I'll look into it further.
Most of them will either store it as raw HTML or in some other sort of markup language like Markdown.
Django CMS might be your best bet.
I haven't used WordPress in some time, but unless things have changed drastically in the last year or two, I would say that creating your own template in WordPress is anything but simple. If you just want something basic, you're probably much better off taking an existing template and tweaking it.
Either way though, to work on a simple template for WordPress you don't really need to know really in-depth PHP. Just enough to be able to pull data from a database and in-line your HTML/JS/CSS. Javascript/CSS is probably going to be more important for the template to look/act like you want it to.
It really depends on the design, there's no one max-width that looks good with everything.
If it's a fixed layout I tend to go for somewhere around 960px and then use media queries for bigger and smaller screens.
more info: http://stackoverflow.com/questions/7415758/why-width-960px
fierrotlepou
Member
Hi everyone, I need some help with this and I hope that someone can help me.
I'm starting a blog with some friends, and we thought we'd use Squarespace to do it. But it's still kind of limited, at least because we want to do something different.
It's much easier to explain with a picture:
(This is not what the website will look like)
This will be the front page. The idea is this: I want the front page to have ALL the titles of ALL the blog posts ever made. So I want it to be full of "BLOGPOST4", "BLOGPOST5", etcetera. The problem is that I just don't have the tools to do it. Squarespace gives me some kind of "summary-block" tool, which can contain up to 30 "titles", but that's not enough. If I happen to make two or three blog posts per day, it will rapidly fill up and I'll be forced to make a new "summary-block", which just wouldn't fit the design really. It would kinda break my website.
I've asked advice about this on the Squarespace forums and they told me that it would also really slow down my website.
Is there a way to do this? It doesn't actually have to be on Squarespace, but I like the professionalism of the website and the tools you get. Tumblr is not really an option...
It comes down to this: I'm just looking for a way to display my blog titles on the front page. Clicking on the titles should obviously bring the user to the blogpost.
Thanks for reading
If my question isn't formulated well, tell me please.
I'm starting a blog with some friends, and we thought we'd use Squarespace to do it. But it's still kind of limited, at least because we want to do something different.
It's much easier to explain with a picture:
(This is not what the website will look like)
This will be the front page. The idea is this: I want the front page to have ALL the titles of ALL the blog posts ever made. So I want it to be full of "BLOGPOST4", "BLOGPOST5", etcetera. The problem is that I just don't have the tools to do it. Squarespace gives me some kind of "summary-block" tool, which can contain up to 30 "titles", but that's not enough. If I happen to make two or three blog posts per day, it will rapidly fill up and I'll be forced to make a new "summary-block", which just wouldn't fit the design really. It would kinda break my website.
I've asked advice about this on the Squarespace forums and they told me that it would also really slow down my website.
Is there a way to do this? It doesn't actually have to be on Squarespace, but I like the professionalism of the website and the tools you get. Tumblr is not really an option...
It comes down to this: I'm just looking for a way to display my blog titles on the front page. Clicking on the titles should obviously bring the user to the blogpost.
Thanks for reading
If my question isn't formulated well, tell me please.
Syphon Filter
Member
What is the best way to approach learning JavaScript? I looked at video tutorials and i now know the basics such as variables,functions,arrays,loops,etc. Now should i just mess around and make stuff like mini programs,where should i go next to improve my JavaScript skills?
Guess I'll post this here too, as I really wanna wrap my head around this:
Can someone please tell me Im just a newbie to the language and I'll adjust in time, when I say that my experience with Javascript leads me to believe it's one of the worst languages out there. Every time I use this piece of shit it makes me want to pull my hair out with how completely unintuitive it is. It's almost like I can't even use logic to solve problems when working with this thing. Maybe it's because I'm too used to C/C++, but why the hell is nothing consistent with this language? I'm finding situations where certain methods can only be used when initialized to a variable, yet some don't have this restriction....and there doesnt seem to be a reason why. Things like subscript methods and split are needlessly complicated for no reason and don't even get me started on the atrocious debugging(or lack of) features. Every time I use this language it makes me question how anyone could enjoy using this thing on a daily basis.
Can someone please tell me Im just a newbie to the language and I'll adjust in time, when I say that my experience with Javascript leads me to believe it's one of the worst languages out there. Every time I use this piece of shit it makes me want to pull my hair out with how completely unintuitive it is. It's almost like I can't even use logic to solve problems when working with this thing. Maybe it's because I'm too used to C/C++, but why the hell is nothing consistent with this language? I'm finding situations where certain methods can only be used when initialized to a variable, yet some don't have this restriction....and there doesnt seem to be a reason why. Things like subscript methods and split are needlessly complicated for no reason and don't even get me started on the atrocious debugging(or lack of) features. Every time I use this language it makes me question how anyone could enjoy using this thing on a daily basis.
PetriP-TNT
Member
Embrace the good parts, forget the bad parts and never ever use them. If in doubt, always double check from MDN (or even the spec). I used to think the same way but these days JavaScript is by far my favorite programming language.
Have you programmed before? If so, read up on JavaScript patterns like Addy Osmani's book. If that's too much, look for other shorter sites with more specific patterns such as the module and class patterns. The problem is that there are quite a few ways to accomplish some things in JavaScript, and they all have tradeoffs.
If not, I'd look at some well established fully JavaScript libraries (so not bootstrap) and start with something simple. Avoid Backbone.js. It's a good API, but is so loose you can easily hang yourself with it if you're new.
Above all else, understand closures and scoping in JavaScript. It will cause you so many problems.
Origami Superman
Member
Any wordpress theme with infinite scroll should help you out.
I think my biggest problem with JS are the lack of robust debugging features like a C/C++ compiler has. So far I've been forced into using alerts on damn near every block of code I write and copy and pasting each block into scratchpad to make sure I don't get any errors, so I avoid having to deal with not knowing where I made a mistake after writing a whole lot of code, since JS never gives you an accurate description of where you made a mistake.
Do you or any other JS programmers have ways of getting around this? It's the most frustrating thing and consumes so much extra time than it should. I just got WS8 yesterday, but I'm still making my around the IDE and as such I don't really know how to use their debugging features. It's nowhere near as straight forward as VS is.
PetriP-TNT
Member
I mentioned linters, which while isn't quite as accurate (or similar) to errors compilers throw, they most often warn you about easy errors like misspelled variable names, unreachable code and so on. The downside of them is that they are somewhat opinionated, which means that they also tell you how you should write your code, which you might or might not like.
The usual ones are JSLint (http://jslint.com) and JSHint (http://www.jshint.com/). Looks like WebStrom 8 has JSHint built in: http://www.jetbrains.com/webstorm/webhelp/jshint.html
Of course this doesn't save you from errors such as undefined objects or trying to compare strings to integers but it's something.
Then there's the other side of Browser developer tools which will help you solve the other problems. All the browsers have their own built in, and then there's things such as Firebug http://getfirebug.com/javascript and other Library specific add-ons. These bring you stuff like breakpoints and line-by-line analysis of JS code and much much more. And of course there are try-catch-finally blocks so you can throw your own errors too. Plus console.log() is much less annoying to use for debugging than using alerts
Further on to test driven development, there are robust test suites available for you, build systems & task runners to automate all this (and more!)... The robust debugging features are there, but they are a bit spread around because of JavaScripts history.
Thanks a lot! I'll show what I'm working on soon. I'm hoping it looks good to the end
EDIT - How do you guys do your spacing with your code? Do you use tab to indent or use space a few times to get the desired amount of spaces? I notice when looking at source code, it looks like the code is indented with spaces instead of tabs
phazedplasma
Member
sup web gaf
Do any of you know what these css animations are called? Or a good resource on how to code something like that?
http://do.live147.com/html/rockox/index-dark.html
Specifically the spinny colored boxes up top and the portraits with social buttons appearing down further.
Do any of you know what these css animations are called? Or a good resource on how to code something like that?
http://do.live147.com/html/rockox/index-dark.html
Specifically the spinny colored boxes up top and the portraits with social buttons appearing down further.