• 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

Man

Member
I hate CSS and responsive design work and my profession is in web technologies.
WebGL, complex JS backend architecture, indexeddb storage synchronization... love it all. But CSS... It's so so simple on the surface which makes me take it less seriously which again makes responsive design work challenging. I guess I should read a book or take a (deeper)course one of these days.
 

strafer

member
I wanna create my own site but I have zero imagination.

How do you guys do it? Do you sit down with a piece of paper and start drawing shit out or just copy other sites?
 
I wanna create my own site but I have zero imagination.

How do you guys do it? Do you sit down with a piece of paper and start drawing shit out or just copy other sites?

I think the biggest thing these days is having something unique to offer. The web is a big place these days, and unless you've got some original quality content, or a client with a set of guidelines and targets for the site to hit, then you're going to struggle I think. Anyone can make a blog site or a games review site, but it takes more work to create something that people haven't seen before.

If you're a member of any clubs or have a hobby, that's usually a good way to start thinking about building a site.You can have pages about upcoming projects or events.

Anyway, I've been using Muse to create a page for my partner's band at the moment. My coding skills are limited to late 90's HTML 3/4 so the modern world of CSS and stuff is way beyond my technical knowledge, so Muse has been a blessing for me as someone who's more used to inDesign. Sure, it can't do a lot of the stuff a manual creator will do, but for a simple site with embedded videos, gig listings and stuff it can turn out some really awesome work extremely quickly :)
 
Joel Crockford - "JavaScript: The Good Parts" if you're already coming from a programming background.

Awesome book.

As for me I've been using Knockout.JS, making a huge ap that's going up in public domain soon ;) Pretty exciting stuff.
 

D4Danger

Unconfirmed Member

Ghost

Chili Con Carnage!
On the IDE front, there's a lot of recommendations here for Mac but on PC I strongly recommend Microsofts Webmatrix http://www.microsoft.com/web/webmatrix/ I'm sure a lot of you groaned when you read Microsoft but it doesn't feel like an MS product at all, for me it's a perfect balance between full blown Eclipse or Visual Studio which seems like overkill for a lot of front end projects and a simple text editor that leaves a lot of work still to do.

With Webmatrix you get:

Great standards based templates
Built in webserver & database server with instant access to error logs and status reports
Integration with Source Control on Git or TFS (or more with plugins)
Code highlighting and autocomplete including full docs for PHP
Web Publish settings to upload to your own server or free Azure box
Plugin support
 

Prelithe

Member
I just feel that PHP is an archaic language that is getting surpassed in many ways, if you have to support a site in PHP I understand but I just don't like it, don't like working in it. I feel like there are more efficient languages out there. But thats just me. I'm sure someone with more experience knows better.

I think that is an overly pessimistic view of things based on an older PHP. These days, frameworks like Laravel, Symfony, Slim and a bunch of others are really solid and are decent alternatives. Granted, if you're starting out, learning something like Python will give you a lot more mileage in the long term, but don't discount PHP just because bad coders were writing bad PHP code in 2005.
 

ckohler

Member
CODA 2 user here.

I'm going to be doing a redesign of work's website this summer. It's a university site with around 1500 pages.

It'll probably be the first site I've built using Mobile First responsive design philosophy. I'm looking forward to it. I retroactively added some responsive stuff to the current site but this time I want to give the "mobile first" concept a try.

The OP is right. Pixel perfect is dead. It's going to be really hard to break that habit of 15 years, tho.
 

Somnid

Member
Somnid can you give a brief run through on your workflow, more specifically how you start your websites? I'm always interested in how people work, I could use a more regimented one myself.

Depends, I do lots of client work and only sometimes start from scratch. Often it's working with what they have and incorporating the good parts next time I get to make the call. So for example the project I'm working on now is of our design and makes heavy use of websockets. For this we started with a node.js backend with express using MongoDB for a data store. For the front end I incorporated Compass for CSS, and Backbone with jQuery for the front. The front-end portion is pretty standard for projects we do as internally we agree on it.

I pretty much start with a simple hello world print to document, build my first unit test and then construct a build process for automation (compiling the sass, running unit tests, jshint etc). Unit tests are written in with mocha and chai assertions (both front and back end), I use sinon for stubbing and spying, and I use karma for running the front end tests. The build process was built using Grunt and our build server runs TeamCity. There's one validation build (compiles whatever, makes sure tests pass and code works) and then the build artifact gets passed over for a deploy on a QA machine, one build sets up a new and clean db with stub data and another then deploys the site. Then a stub API server is deployed to take out dependencies from other teams and fakes their APIs, and finally the smoke tests run on that clean and isolated build to ensure basic functionality works.

We were lucky that the client gave us so much leeway. They aren't web devs and they're also kinda slow getting their API up, most clients would balk at this but it's going to save them huge down the line because we can essentially validate and push releases automatically. We can get 10-20 QA releases per day based on checkins and instantly validated at no developer cost while it takes the client's side 15 minutes dev time to do one plus they'd have to manually regression test (which of course they don't because manually regression testing each build is insane). It's amazing what a good build system buys you. I highly recommend getting to automated and push button releases as it's an immense time saver.
 

gutshot

Member
Earlier in the thread people were suggesting different icon font sites, but my dev friend just told me about this: a Grunt plugin which will automatically build you a custom icon font with any SVG files in a given folder. Similar to how Compass will build a custom sprite with all PNGs in a folder. Sounds pretty cool.

https://github.com/sapegin/grunt-webfont
 

toxicgonzo

Taxes?! Isn't this the line for Metallica?
Silly question here, but given the advancement of web technology, isn't it possible to create just about any web software?

For example, couldn't someone post a fully fledged 3d modelling web software? (Business plan: offer it for free and undercut the competition, but make it up in ad revenue)
Or is it too risky because a patent troll could claim you are infringing on their software patents?
Or do developers not do large scale software since it might be easy to copy/steal the code?

Assuming, of course, that your website reaches a large enough audience to be noticed.
 
Silly question here, but given the advancement of web technology, isn't it possible to create just about any web software?

For example, couldn't someone post a fully fledged 3d modelling web software? (Business plan: offer it for free and undercut the competition, but make it up in ad revenue)
Or is it too risky because a patent troll could claim you are infringing on their software patents?
Or do developers not do large scale software since it might be easy to copy/steal the code?

Assuming, of course, that your website reaches a large enough audience to be noticed.

If there are enough talented people, sure.

Some dude made a web app of Illustrator: http://mondrian.io

Not that amazing yet but its a pretty solid start.

Also, you will never ever recoup your costs by ad revenue. Better to just charge a subscription for it like every other web app.
 

toxicgonzo

Taxes?! Isn't this the line for Metallica?
If there are enough talented people, sure.

Some dude made a web app of Illustrator: http://mondrian.io

Not that amazing yet but its a pretty solid start.

Also, you will never ever recoup your costs by ad revenue. Better to just charge a subscription for it like every other web app.
Ok, so he has an illustrator like web app. Right now, it is not a very popular site, but someday it might be.

When it hits critical mass, why couldn't Adobe or other company shut it down and say we already own the patent for a pencil, airbrush, etc. tool in a drawing program?
 
Ok, so he has an illustrator like web app. Right now, it is not a very popular site, but someday it might be.

When it hits critical mass, why couldn't Adobe or other company shut it down and say we already own the patent for a pencil, airbrush, etc. tool in a drawing program?

I'm pretty sure they couldn't ding him on that—after all, those are real-world tools, Adobe didn't create them. If he somehow used their underlying program code, though, I'd imagine he'd have some problems.
 

Kreed

Member
For CMS in the OP, I'd throw in Expression Engine. It's not as beginner friendly as say Wordpress (you'd want to get familiar with Code Igniter to get the most out of it), but it's very flexible when it comes to front end design/creating your own design templates.
 

Somnid

Member
Silly question here, but given the advancement of web technology, isn't it possible to create just about any web software?

For example, couldn't someone post a fully fledged 3d modelling web software? (Business plan: offer it for free and undercut the competition, but make it up in ad revenue)
Or is it too risky because a patent troll could claim you are infringing on their software patents?
Or do developers not do large scale software since it might be easy to copy/steal the code?

Assuming, of course, that your website reaches a large enough audience to be noticed.

No reason this isn't possible. Obviously you won't have full performance of a desktop app but this is entirely possible. Given that a pure client webapp is easily replicable it's also easy to steal and so many software companies in the web age are more service oriented than product oriented. So you'll probably see this with some back-end social sharing and file-exporting shoe-horned in or something.
 
Depends, I do lots of client work and only sometimes start from scratch. Often it's working with what they have and incorporating the good parts next time I get to make the call. So for example the project I'm working on now is of our design and makes heavy use of websockets. For this we started with a node.js backend with express using MongoDB for a data store. For the front end I incorporated Compass for CSS, and Backbone with jQuery for the front. The front-end portion is pretty standard for projects we do as internally we agree on it.

I pretty much start with a simple hello world print to document, build my first unit test and then construct a build process for automation (compiling the sass, running unit tests, jshint etc). Unit tests are written in with mocha and chai assertions (both front and back end), I use sinon for stubbing and spying, and I use karma for running the front end tests. The build process was built using Grunt and our build server runs TeamCity. There's one validation build (compiles whatever, makes sure tests pass and code works) and then the build artifact gets passed over for a deploy on a QA machine, one build sets up a new and clean db with stub data and another then deploys the site. Then a stub API server is deployed to take out dependencies from other teams and fakes their APIs, and finally the smoke tests run on that clean and isolated build to ensure basic functionality works.

We were lucky that the client gave us so much leeway. They aren't web devs and they're also kinda slow getting their API up, most clients would balk at this but it's going to save them huge down the line because we can essentially validate and push releases automatically. We can get 10-20 QA releases per day based on checkins and instantly validated at no developer cost while it takes the client's side 15 minutes dev time to do one plus they'd have to manually regression test (which of course they don't because manually regression testing each build is insane). It's amazing what a good build system buys you. I highly recommend getting to automated and push button releases as it's an immense time saver.

Interesting, I should start looking into backbone. The company i work switched switched from php to node.js and express last year. We have incorporated ember.js into all of our sites, for now, its used only for checkout. However, this time next year they will have probably get rid of the handlebars templating system and have all the views be done in ember.
 

Daffy Duck

Member
Nice thread bookmarked!

I'm a web developer of 7 months now, so still learning a lot but I've come a long way in that time.

I need to learn jquery and more php/MySQL, got lots of reading to do.

Used DW as it's what I've always used since the macro media days as my text editor but recently moved to php storm by jet brains.
 

Ties

Banned
hi my name is tyler and i'm a high school junior studying web design at my magnet school

what would you recommend majoring in at college if you want to go into the industry? i was thinking of doing something technical related in the military and web stuff on the side. surely there is a degree that allows me to do both?

also i need some help with wordpress because my teacher hasn't gone over php and it's just a headache trying to move my html framework over to the php stuff.
 

Somnid

Member
Interesting, I should start looking into backbone. The company i work switched switched from php to node.js and express last year. We have incorporated ember.js into all of our sites, for now, its used only for checkout. However, this time next year they will have probably get rid of the handlebars templating system and have all the views be done in ember.

Never used Ember so I don't know how it compares.
 

Zoe

Member
hi my name is tyler and i'm a high school junior studying web design at my magnet school

what would you recommend majoring in at college if you want to go into the industry? i was thinking of doing something technical related in the military and web stuff on the side. surely there is a degree that allows me to do both?

also i need some help with wordpress because my teacher hasn't gone over php and it's just a headache trying to move my html framework over to the php stuff.

Depends. Do you want to specialize in client side or server side? Most schools won't offer something that captures both.
 
Depends, I do lots of client work and only sometimes start from scratch. Often it's working with what they have and incorporating the good parts next time I get to make the call. So for example the project I'm working on now is of our design and makes heavy use of websockets. For this we started with a node.js backend with express using MongoDB for a data store. For the front end I incorporated Compass for CSS, and Backbone with jQuery for the front. The front-end portion is pretty standard for projects we do as internally we agree on it.

I pretty much start with a simple hello world print to document, build my first unit test and then construct a build process for automation (compiling the sass, running unit tests, jshint etc). Unit tests are written in with mocha and chai assertions (both front and back end), I use sinon for stubbing and spying, and I use karma for running the front end tests. The build process was built using Grunt and our build server runs TeamCity. There's one validation build (compiles whatever, makes sure tests pass and code works) and then the build artifact gets passed over for a deploy on a QA machine, one build set.s up a new and clean db with stub data and another then deploys the site. Then a stub API server is deployed to take out dependencies from other teams and fakes their APIs, and finally the smoke tests run on that clean and isolated build to ensure basic functionality works.

We were lucky that the client gave us so much leeway. They aren't web devs and they're also kinda slow getting their API up, most clients would balk at this but it's going to save them huge down the line because we can essentially validate and push releases automatically. We can get 10-20 QA releases per day based on checkins and instantly validated at no developer cost while it takes the client's side 15 minutes dev time to do one plus they'd have to manually regression test (which of course they don't because manually regression testing each build is insane). It's amazing what a good build system buys you. I highly recommend getting to automated and push button releases as it's an immense time saver.

I just don't see us selling the build up time for this level of testing and QA to clients in any but the highest profile /complexity projects.

hi my name is tyler and i'm a high school junior studying web design at my magnet school

what would you recommend majoring in at college if you want to go into the industry? i was thinking of doing something technical related in the military and web stuff on the side. surely there is a degree that allows me to do both?

also i need some help with wordpress because my teacher hasn't gone over php and it's just a headache trying to move my html framework over to the php stuff.

Computer Science or Graphic Design, depending on what part of the process you enjoy most (Development vs. Design).

I'm CS, but I work at a shop with designers that handle 90% of that side of the business. You won't be doing a ton of web development in CS, but you won't really have any issue picking any of it up either.
 

sk3

Banned
I think that is an overly pessimistic view of things based on an older PHP. These days, frameworks like Laravel, Symfony, Slim and a bunch of others are really solid and are decent alternatives. Granted, if you're starting out, learning something like Python will give you a lot more mileage in the long term, but don't discount PHP just because bad coders were writing bad PHP code in 2005.
Anyone that wants to see the "current" state of PHP, or perhaps what PHP can be if you use it properly in the year 2014 - Check out Amazon's AWS sdk.

https://github.com/aws/aws-sdk-php

I just started writing apps for their elastic beanstalk PaaS and have been using it a lot, and it's one of the best PHP codebases I've ever worked with. Amazon's PHP team is stellar.
 

Sourcerer

Member
Anyone that wants to see the "current" state of PHP, or perhaps what PHP can be if you use it properly in the year 2014 - Check out Amazon's AWS sdk.

https://github.com/aws/aws-sdk-php

I just started writing apps for their elastic beanstalk PaaS and have been using it a lot, and it's one of the best PHP codebases I've ever worked with. Amazon's PHP team is stellar.

Speaking of awesome PHP, has anyone used Phalcon? I've been using CakePHP for 2-3 years and having grown tired of it I tried Symphony, Laravel and Phalcon. I really like Phalcon though and it has the extra benefit of being extremely fast since it's written in C as a PHP extension. I like the more loosely coupled nature of it when compared to CakePHP. It requires more knowledge and set up, but to me that seems like a large benefit in the end.

Anyone with more knowledge of it know of any reasons why I shouldn't stick with it?
 

Maiar_m

Member
Thanks for the Angular replies, as well as for the CMSs in the OP. I need to master one. I've been working on a Drupal project these past two months, I have nothing good to say about the thing :p Then again, I'm really no developer, PHP remains quite alien to me (I only have notions). Anyways. I'll try out a few.

How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...
 

Somnid

Member
I just don't see us selling the build up time for this level of testing and QA to clients in any but the highest profile /complexity projects.

Depends. We do marketing websites that won't use this but they aren't especially interactive. Just roll them a Wordpress site. It's the difference between a "website" which is mostly styled text and images and a "webapp" which is highly interactive and code-heavy which is more and more what our clients are asking for and what good web devs should be able to provide. I would encourage most people to think of all their projects as the latter because it'll make for a better experience. Code is code, you should test it and you should be able to deploy it quickly and confidently.
 

Hop

That girl in the bunny hat
How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

I'm predominantly Mac. I'm finding it easier to manage my environment on my Mac, vs. on my Windows desktop. Stuff just seems to cooperate better. I know some designers prefer Mac for the displays' color profile, but I doubt you're concerned with anything so particular. But Mac is definitely popular, when I go to Javascript meetups or other front-ender get-togethers, they're almost ubiquitous.

But if Windows is working for you, stick with it. As web developers, ultimately everything we're making is platform-agnostic anyway, so it's not an issue with deployment or working with others or anything. All comes down to your workflow. So, if Windows is becoming an issue there, it might be worthwhile to migrate.
 

smuf

Member
How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

Most people seem to use Macs, but it really doesn't matter. Just use whatever environment you prefer. Pretty much all the popular tools run on both.
 
How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

I work on both Mac(at work) and Windows(at home). I have no preference and fine working on either. As a designer, one thing I love about Mac OS is being able view files (particularly psd, ai, eps files) without having to launch any software to do so.

Man, my boss refuses to let go of Go Live. He used to build(and update) web sites for two of his clients...and they are a total mess lol. They are always complaining about something not working on the sites. On top of that, his web host is running outdated software so I can't even install wordpress on it.
 

ShadiWulf

Member
Thanks for the Angular replies, as well as for the CMSs in the OP. I need to master one. I've been working on a Drupal project these past two months, I have nothing good to say about the thing :p Then again, I'm really no developer, PHP remains quite alien to me (I only have notions). Anyways. I'll try out a few.

How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

Windows is fine, platform doesn't make the web designer/developer. Although arguably if all I was doing was back-end stuff I'd probably stick with Linux. I've been learning Compass/SASS/Zurb Foundation, and it was a pain figuring out how to get all this working in Windows, Powershell is good, but, it doesnt seem to work for everything, i had to install node.js and then use a node.js specific command window to install something. don't remember what. but it was quite complicated to figure it all out. Compare that to Linux where everything is taken care of in a single terminal with ease.

Like someone else mentioned, Windows/Mac share the same core apps that you need to design things. Although, I won't lie, if I had the money I'd probably have a Mac by now, because it uses the same terminal as Linux, and has the same good apps that Windows has. Would be the best of both worlds, IMO.
 
How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

Our office is pretty much entirely Mac. Smaller office, but the resale value on the hardware is high enough that staying up to date every few years is surprisingly cheap after the initial cost.

I use Parallels for .NET work, testing IE, etc.
 
I couldn't even conceive of doing modern web development on Windows. You will spend more time fighting to get command line tools to work than you will actually coding. Especially if you are working on large projects with other dveleopers. You may as well dual-boot into a Linux OS if you're not willing to get a Mac. I see Windows devs struggle all the time. It's not worth it. If web development is your primary source of income, consider seriously Mac or Linux.
 

Zoe

Member
I couldn't even conceive of doing modern web development on Windows. You will spend more time fighting to get command line tools to work than you will actually coding. Especially if you are working on large projects with other dveleopers. You may as well dual-boot into a Linux OS if you're not willing to get a Mac. I see Windows devs struggle all the time. It's not worth it. If web development is your primary source of income, consider seriously Mac or Linux.

I don't need any command line tools to run asp.net.
 

Ghost

Chili Con Carnage!
I couldn't even conceive of doing modern web development on Windows. You will spend more time fighting to get command line tools to work than you will actually coding. Especially if you are working on large projects with other dveleopers. You may as well dual-boot into a Linux OS if you're not willing to get a Mac. I see Windows devs struggle all the time. It's not worth it. If web development is your primary source of income, consider seriously Mac or Linux.

I struggle is OSX way more than I ever have with Windows, it just comes down to what you know.
 

flyover

Member
I struggle is OSX way more than I ever have with Windows, it just comes down to what you know.

Yeah, it often doesn't matter, for the most part. At work, I'm on Windows, using Visual Studio (when opening projects) and Notepad++ (when making quick edits to individual files). At home, I use Webstorm on my Mac. I used to use Coda. And I can't even remember how many years I used Homesite, long after it'd stopped being developed.

Often, the best tool isn't always the best tool. It's the one (or ones) you're most comfortable using.
 

injurai

Banned
anyone know of a good web book or tutorials on nginx?

edit: maybe this is the wrong thread for this degree of backend work...?
 

reilo

learning some important life lessons from magical Negroes
I don't need any command line tools to run asp.net.
Eh? CLI is really only needed to have gcc installed. And any proper *nix distro should have gcc. Apple's biggest mistake is not having gcc installed by default without CLI (and well a newer version than 4.2 but that's not here nor there).
 
How many of you guys work on Mac? I know most back-end devs work on Linux, but for a front-end activity...I'm being advised to make the jump (I ran Windows these past two years). Considering the steep price, I'd really like to hear as much as I can on how valuable it really is...

I work on Mac and dual boot Windows. Best of both worlds.

Eh? CLI is really only needed to have gcc installed. And any proper *nix distro should have gcc. Apple's biggest mistake is not having gcc installed by default without CLI (and well a newer version than 4.2 but that's not here nor there).

I can't believe I had to go out of my way to install gcc on my mac. Whoever made that mistake is really dumb.
 

Zoe

Member
Eh? CLI is really only needed to have gcc installed. And any proper *nix distro should have gcc. Apple's biggest mistake is not having gcc installed by default without CLI (and well a newer version than 4.2 but that's not here nor there).

I don't use any of that. Everything I need is built into the Windows server or is available as an update.

C# MVC 3 or 4 ASP.NET projects
 

reilo

learning some important life lessons from magical Negroes
I don't use any of that. Everything I need is built into the Windows server or is available as an update.

C# MVC 3 or 4 ASP.NET projects

Cool.

Anyway, my most recent dev environment as of Friday:

zsh 5.0.5 with prezto (https://github.com/sorin-ionescu/prezto)
tmux (for sessions, window, and pane management)
homebrew
gcc 4.8
Vim 7.4.5 (yep, for writing code as my primary editor) with NerdTree
Ruby 2.0.0 with rbenv 0.4.0 and Rails 4.0.0
Python 2.7.6 with pip 1.4.1 and Django 1.6
PostgreSQL 9.3.2
MySQL 5.6
 
Top Bottom