• 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

Silveredge9

Neo Member
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on.

Anyhow I feel as though I should be earning more. Just looking to get some opinions from people about my salary expectations. Thanks.
 

ponpo

( ≖‿≖)
Subbed ~
Codeacademy from the OP seems kind of useful, at least for basics. I'm not doing any web design or dev stuff, but have to use python and ruby for school so thanks for some of the resources posted.
 

smuf

Member
Any plugins/tutorials for making a cool animated logo like this? I'm using Wordpress, and I'm semi-clueless about web development. Didn't stop me from making my messy site, though :)

http://css-tricks.com/svg-line-animation-works/
http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/

I based it on this, but used TweenMax instead of CSS transitions.

There's also this: http://lazylinepainter.info that pretty much does everything for you, as long as you feed it an SVG.
 

Kinitari

Black Canada Mafia
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on.

Anyhow I feel as though I should be earning more. Just looking to get some opinions from people about my salary expectations. Thanks.

I'm not sure what £18k is equivalent to here, especially when you factor in cost of living, but there are things you can do to improve your opportunities on the front end.

Learn a JavaScript framework. And by that, I mean learn angular. If you're not comfortable with restful APIs, take some time to get comfortable. I assume with SASS knowledge, you're pretty confortable with css libraries and responsive development.

All that together is enough to make some apps - make some apps, small things, but functional. Build a portfolio on github, and it wouldn't hurt to make your own website.

At this point you'll have many more opportunities, especially if you put yourself out there, and are proactive about finding new work.
 

gutshot

Member
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on.

Anyhow I feel as though I should be earning more. Just looking to get some opinions from people about my salary expectations. Thanks.

According to Google, £18.5k is equivalent to $31k. Maybe the cost of living where you are is really low, but that is still on the low-end for a web dev. Just based on your current skill set alone, you could be making more. If you take Kinitari's advice and expand your skillset, you should be able to double or even triple your current salary.

I'd say to start sending your resume out and seeing what opportunities there are for you. If you do good work, my guess is you would be able to get hired somewhere else fairly quickly and probably be able to get a nice raise.
 

Jarmel

Banned
I'm trying to find a company to do a professional medical website design. Does anybody know a company that isn't absurdly expensive?
 
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on.

Anyhow I feel as though I should be earning more. Just looking to get some opinions from people about my salary expectations. Thanks.

Seems very low. I was making a decent amount more than that 2 months after I graduated from post-secondary school with a 2-year diploma. And that was 6 years ago.
I would honestly say that a decent salary that you should have right now with the skills you list is 35000 GBP and it wouldn't take too much to go higher than that.
 
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on.

Anyhow I feel as though I should be earning more. Just looking to get some opinions from people about my salary expectations. Thanks.

You sound like a good candidate for my Digital Nomad thread! You should be getting freelance gigs going. You could literally be traveling the world while you work, for much less money than you think. The couple that runs http://www.neverendingvoyage.com/ do this, and seem to be having a great time.

http://css-tricks.com/svg-line-animation-works/
http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/

I based it on this, but used TweenMax instead of CSS transitions.

There's also this: http://lazylinepainter.info that pretty much does everything for you, as long as you feed it an SVG.

Awesome, I will look into them. Your photos and the look of your site are really nice, man. They've inspired me to make some serious changes on mine!
 
http://css-tricks.com/svg-line-animation-works/
http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/

I based it on this, but used TweenMax instead of CSS transitions.

There's also this: http://lazylinepainter.info that pretty much does everything for you, as long as you feed it an SVG.

Just a question about how to integrate the lazylinepainter thing into my wordpress site. It says I need to use Raphael.js. Would I just copy that javascript into my header file or something? I'm kind of a moron with this stuff. There's a guy on Fiverr that usually does this stuff for me, but I think I can do it...if you guys tell me how :)
 

smuf

Member
Just a question about how to integrate the lazylinepainter thing into my wordpress site. It says I need to use Raphael.js. Would I just copy that javascript into my header file or something? I'm kind of a moron with this stuff. There's a guy on Fiverr that usually does this stuff for me, but I think I can do it...if you guys tell me how :)

I think you'll just need to import raphael.js before you import the Lazylinepainter script.
 
What do you mean by "import"? I think that's the crux of my cluelessness.

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js" /></script>

Just copy that line into the <head> section of your site before the rest of your JS. That's a really quick and dirty solution. If it works, then report back and we'll see if we can get you to host a local copy in case the CDN goes down.
 

jesalr

Member
What do you mean by "import"? I think that's the crux of my cluelessness.

<script type="text/javascript" src="path/to/file.js"></script>

will import/include/add a Javascript file to your page. The order they're added can matter (one file might call a function in another, but the other might not be included yet)
 
Hi Gaf, so looking to get a bit of advice regarding my career. I've been working as a web designer / front-end developer since graduating in 2010 and since at the start of 2013 I've been working for a small company (5 employees) and earn £18,500 a year.

At the mo I handle all the web work we get from concept to completion and then deliver training to the clients in the form of user manuals / presentation / helpline etc. I work with Photoshop, Illustrator, HTML5, SASS, jQuery... skills which I'd like to think would make up to date with industry standards and so on..

Where do you work? I know wages in the industry aren't particularly high outside of London but if you came here you could earn £45k+ after 4-5 years (from scratch).

Wages are all over the place but my advice is to push your coding over your design work. I'm from a design background too but the larger net you cast the smaller a wage you can expect. Sounds crazy doesn't it? But specialise in UX/front end and start looking for jobs in the £25-30k range as your next move. And keep looking for jobs even when you have one. I used to work at Amazon earning £37k but I kept my eyes open and it quickly became apparent that I could be earning a lot more.
 
If Javascript and JQuery by Jon Duckett gets delayed one more time...

Oh man this book is never coming out. I've been waiting for it since last fall when I got his HTML & CSS book.

I agree with this. Out of the CodeSchools, Treehouses, Udemy's of the world, there isn't a one stop shop to getting 'deep' in web design/dev. I learn by looking at something on the web I would love to re-create, then I find out HOW to do it.

Yep. I think many people, after knowing how to write markup and make a static page or so, are completely confused as to how to actually make a real site and deploy it to the web. This is where all of these courses totally fail at.

I learned majority of modern web development from a personal project. Ended up learning some basic Ruby, Rails, how to use Git, Heroku, Command Line stuff, AWS, as well as using jQuery & JS for real world applications. I'm still a total noob but I'd say this was a much better learning experience. The way I look at it is these learning sites give you basic information and instruction so you're familiar enough with the topic to have the courage to start your own projects.

Recreating stuff on the web is also good practice too.
 

Silveredge9

Neo Member
Where do you work? I know wages in the industry aren't particularly high outside of London but if you came here you could earn £45k+ after 4-5 years (from scratch).

Wages are all over the place but my advice is to push your coding over your design work. I'm from a design background too but the larger net you cast the smaller a wage you can expect. Sounds crazy doesn't it? But specialise in UX/front end and start looking for jobs in the £25-30k range as your next move. And keep looking for jobs even when you have one. I used to work at Amazon earning £37k but I kept my eyes open and it quickly became apparent that I could be earning a lot more.

I work up in Sheffield. I originally was more design focused but have gradually drifted over to front-end development which gives me a more rounded skill set I guess. Definitely going to start looking out for new opportunities anyhow. Does anybody have any tips/advice for how to craft a decent web designer / front-end development CV / Resume? I've read so much conflicting accounts on what works and what doesn't haha.
 

hachi

Banned
Any thoughts on CMS systems? Is Wordpress still king? Any better alternatives? Preferably more secure.

I've been using Drupal 7 for the last 2+ years. Out of the box it has a lot of shortcomings but modules fix most of the annoyances (my main pet peeve being the godawful markup it spits out by default). Definitely like it better than my brief strokes with Wordpress and Joomla.

I've used Drupal off and on for many years, as a more powerful alternative to Wordpress, but in the past two years I've tried to slowly wean us off any dependence on it for future projects, unless there is a very specific need.

The things is... CMS systems are inherently bloated and perhaps backwards in their thinking. One crucial problem is that you're effectively running a ton of code (typically PHP, which isn't the greatest language) on your webserver for every request, even though your content is not constantly changing. That's a lot of excessive overhead and security risk for sites that are essentially stable and static, except for (1) pushed content updates from a small set of content authors (who don't need to be doing this on the live site), and (2) smaller changes like commenting, which are better handled by external services anyway.

These are some of the reasons that many of us have started drifting away from CMS frameworks and towards static site generators, coupled with various other front-end tools to achieve the same ends.

This article is a good entry point and required reading for understanding the CMS-free trend:

http://developmentseed.org/blog/2012/07/27/build-cms-free-websites/

And I would point you in the direction of any of these tools:

Jekyll -- for simple static blogs, Github integration, and some extensibility
Middleman -- more powerful static site generator, gets a lot of use in my group now
Yeoman -- great for scaffolding projects that are front-end heavy, gets you into Grunt without too much setup

EDIT - missed this prior discussion in thread, on point

Wordpress actually is significantly less faster and less efficient than static web files, thanks to its database-driven structure. There are ways to mitigate that inefficiency, but for a simple site with only a handful pages, using static web files is a good way to go. There are a lot of tools that allow you to build a site in static web files, but still manage the content through a GUI dashboard. I've linked to a bunch of them in the OP.

Wordpress is great for what it is, a blogging tool that doubles as a fairly full-featured CMS, but I don't think it is optimal for 90% of the websites out there.
 
Like I said before, you can just build something in WP and cache it using any number of tools out there.

These days I'm just using Kohana and building what I need for the given website from there.
 

smuf

Member
I've used Drupal off and on for many years, as a more powerful alternative to Wordpress, but in the past two years I've tried to slowly wean us off any dependence on it for future projects, unless there is a very specific need.

The things is... CMS systems are inherently bloated and perhaps backwards in their thinking. One crucial problem is that you're effectively running a ton of code (typically PHP, which isn't the greatest language) on your webserver for every request, even though your content is not constantly changing. That's a lot of excessive overhead and security risk for sites that are essentially stable and static, except for (1) pushed content updates from a small set of content authors (who don't need to be doing this on the live site), and (2) smaller changes like commenting, which are better handled by external services anyway.

These are some of the reasons that many of us have started drifting away from CMS frameworks and towards static site generators, coupled with various other front-end tools to achieve the same ends.

This article is a good entry point and required reading for understanding the CMS-free trend:

http://developmentseed.org/blog/2012/07/27/build-cms-free-websites/

And I would point you in the direction of any of these tools:

Jekyll -- for simple static blogs, Github integration, and some extensibility
Middleman -- more powerful static site generator, gets a lot of use in my group now
Yeoman -- great for scaffolding projects that are front-end heavy, gets you into Grunt without too much setup

EDIT - missed this prior discussion in thread, on point

I'm aware of frameworks like Jekyll etc and the huge overhead Drupal comes with. All my sites are cached with Varnish which alleviates this to a large degree. Still, it's true that often for smaller sites Drupal offers too much functionality, but I prefer the uniformity across all my projects that comes with sticking to a single platform (i.e. being able to migrate/update with Drush etc).
 

kodecraft

Member
I'm aware of frameworks like Jekyll etc and the huge overhead Drupal comes with. All my sites are cached with Varnish which alleviates this to a large degree. Still, it's true that often for smaller sites Drupal offers too much functionality, but I prefer the uniformity across all my projects that comes with sticking to a single platform (i.e. being able to migrate/update with Drush etc).

I agree with the bold part. I equate this to Resident Evil 6's HUD change from Leon to Chris to Jake.

Isn't it the same game and timeline-wise happening at the same time? So why the need for different HUDs when the user would appreciate the devs sticking to a single one.

Uniformity for me in development is a strong preference.
 

hateradio

The Most Dangerous Yes Man
Does anyone here know the name of this particular CSS pattern. I remember seeing it before but I forgot about it.

Basically, it tries to keep elements modular or something, and it uses underscores a lot.

It looks like this:

header
header__somesubsection
header__somesubsection__something

I think the page was on github and it had an Eskimo or something.
 
Does anyone here know the name of this particular CSS pattern. I remember seeing it before but I forgot about it.

Basically, it tries to keep elements modular or something, and it uses underscores a lot.

It looks like this:

header
header__somesubsection
header__somesubsection__something

I think the page was on github and it had an Eskimo or something.

It's called BEM... Block Element Modifier.

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

I think it's just another fad in CSS syntax.
 

Mephala

Member
I have been asked by a family member to make them a website. It is just a small, simple site but will need a store. I have some basic programming knowledge (c, c++) so I'm not scared of learning nor coding but I am stepping into unfamiliar waters here.

I have 2 weeks to hack this up from scratch. Any suggestions? Is there a light and easy CMS or alternative you would recommend?
I'm not sure if I should tell her I'm up for this. I don't want to make a shitty site and let that be a mark of annoyance in an otherwise good relationship.
 

subrock

Member
Shopify or Squarespace. Shopify if in needs to be a fully featured Ecomm site. Very minimal coding required for either.
 

Tathanen

Get Inside Her!
I have been asked by a family member to make them a website. It is just a small, simple site but will need a store. I have some basic programming knowledge (c, c++) so I'm not scared of learning nor coding but I am stepping into unfamiliar waters here.

I have 2 weeks to hack this up from scratch. Any suggestions? Is there a light and easy CMS or alternative you would recommend?
I'm not sure if I should tell her I'm up for this. I don't want to make a shitty site and let that be a mark of annoyance in an otherwise good relationship.

Needs a store, huh? Yeah that won't be happening in two weeks, especially if all you know is C languages. Your best bet will be to find an ecommerce framework and just customize how it looks a bit, but honestly I wouldn't do it at all with a timeframe like that.
 

diaspora

Member
I have been asked by a family member to make them a website. It is just a small, simple site but will need a store. I have some basic programming knowledge (c, c++) so I'm not scared of learning nor coding but I am stepping into unfamiliar waters here.

I have 2 weeks to hack this up from scratch. Any suggestions? Is there a light and easy CMS or alternative you would recommend?
I'm not sure if I should tell her I'm up for this. I don't want to make a shitty site and let that be a mark of annoyance in an otherwise good relationship.

I would second the squarespace recommendation. There's no way 2 weeks is enough to make something from scratch.
 
GAF i'm working on a REALLY important project and I need someone experienced and professional to convert some PSD files to html/css (1-2 pages). As vague a request that may be, i'm asking ANYONE who feels they'd have the time and would be willing discuss further details, including payment, etc. PM PLEASE if interested.
 

kodecraft

Member
GAF i'm working on a REALLY important project and I need someone experienced and professional to convert some PSD files to html/css (1-2 pages). As vague a request that may be, i'm asking ANYONE who feels they'd have the time and would be willing discuss further details, including payment, etc. PM PLEASE if interested.

Check your PM.
 
I'll see if I can post more details later, but I was wondering if anyone had ever seen any good solutions to a slideToggle sort of functionality that worked right and left instead of up and down.

I tried just animating the width with jquery .animate(), but instead of animate it just disappears. I tried using jqueryui and the Slide effect on the .toggle() method, and I don't know if it's incompatible with flexbox layouts or something but before it animates it switches the location of the div from flex order 1 on the left side to the far right side of the layout.

Edit: I realized that since I was using a flex layout I should probably try the animation on the flex property, but still no dice.
 

jesalr

Member
I'll see if I can post more details later, but I was wondering if anyone had ever seen any good solutions to a slideToggle sort of functionality that worked right and left instead of up and down.

I tried just animating the width with jquery .animate(), but instead of animate it just disappears. I tried using jqueryui and the Slide effect on the .toggle() method, and I don't know if it's incompatible with flexbox layouts or something but before it animates it switches the location of the div from flex order 1 on the left side to the far right side of the layout.

Edit: I realized that since I was using a flex layout I should probably try the animation on the flex property, but still no dice.

Not 100% clear on what you're trying to do, but does this help any? http://jsfiddle.net/hcmLw/2/light/
 

Somnid

Member
I'll see if I can post more details later, but I was wondering if anyone had ever seen any good solutions to a slideToggle sort of functionality that worked right and left instead of up and down.

I tried just animating the width with jquery .animate(), but instead of animate it just disappears. I tried using jqueryui and the Slide effect on the .toggle() method, and I don't know if it's incompatible with flexbox layouts or something but before it animates it switches the location of the div from flex order 1 on the left side to the far right side of the layout.

Edit: I realized that since I was using a flex layout I should probably try the animation on the flex property, but still no dice.

Flex properties are not continuous, you can't animate them. I think jquery slide just animates the left property which if the positioning isn't right it won't work. If you can use flex-box then you can use css animations. Animate the transformX property.

Edit: actually since it's simple a css transition would be even easier.
 
Flex properties are not continuous, you can't animate them. I think jquery slide just animates the left property which if the positioning isn't right it won't work. If you can use flex-box then you can use css animations. Animate the transformX property.

Edit: actually since it's simple a css transition would be even easier.

Yeah I don't know why I didn't even think to use transform/transitions there. I'll give it a shot. There doesn't seem to be any other way to do it on a flex-box layout.
 

cjp

Junior Member
Bipv6jA.png


Anyone know why the layout now has the two columns on either side? It looked better before.
 

Chris R

Member
Anyone know why the layout now has the two columns on either side? It looked better before.

body.forumhome #container {max-width: 1000px;}

Remove that style and it fills the page. Wonder if it is in preparation for vertical ads on either side of the main content?
 
Top Bottom