• 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

Thanks for the answers. Any tips on structuring a project like this?

Laravel is great but it's just going to likely overwhelm you since it assumes a good familiarity with php. You don't need a complicated framework for what you want to do, what you've described could be handcoded pretty simply. Though If this truly is your first foray then I would start with a simpler project and keep it to just HTML, CSS and a bit of JS and then work my way up.
 

Blizzard

Banned
I saw some recent mention of WordPress as an option for websites (free templates etc.) in addition to the normal blog usage.

Does anyone have recommendations about whether that's a good or bad idea for a small business website? I'm not sure I've ever messed with WordPress but I imagine it might be one of the faster options to get going.
 
I saw some recent mention of WordPress as an option for websites (free templates etc.) in addition to the normal blog usage.

Does anyone have recommendations about whether that's a good or bad idea for a small business website? I'm not sure I've ever messed with WordPress but I imagine it might be one of the faster options to get going.

It's definitely a great idea if you're just doing a business informational website. But please, don't hesitate to pay 20 bucks for a really great theme. It's totally worth it. Our company's website is running on wordpress and we chose a free theme. I ended up having to customize it a lot because it didn't have all the features we needed. Not that there aren't good free themes out there, just harder to find.

So yeah, I definitely recommend it.
 
It's definitely a great idea if you're just doing a business informational website. But please, don't hesitate to pay 20 bucks for a really great theme. It's totally worth it. Our company's website is running on wordpress and we chose a free theme. I ended up having to customize it a lot because it didn't have all the features we needed. Not that there aren't good free themes out there, just harder to find.

So yeah, I definitely recommend it.

+1 for this. If you don't have the resourses to go out all the way, WP with a proper theme is much better than DIYing it yourself (unless you aspire to become a web developer that is).
 
I'm not super familiar with the website but I've seen people incorporate Last.FM "now playing" type things into their site.

How would one go about that? Work with their API in some form, I'd imagine.

Anyone do this?
 
I'm not super familiar with the website but I've seen people incorporate Last.FM "now playing" type things into their site.

How would one go about that? Work with their API in some form, I'd imagine.

Anyone do this?

Check out this project for example:

http://devteaminc.github.io/Last.fm-Now-Playing-Widget/

Here's the source which is pretty simple: get some data, sort some data, display the result.

https://github.com/devteaminc/Last.fm-Now-Playing-Widget/blob/master/jquery.lastfmnowplaying.js
 

empyrean

Member
Web Design Gaf - EmberJS or AngularJS?

I've played around a bit with KnockoutJS and love it, however, Ember and Angular seem to be more popular and are more frameworks for complete apps (so includes routing etc).

Which one should i go with? (my gut says I'm expecting an AngularJS positive response)
 

Tathanen

Get Inside Her!
Web Design Gaf - EmberJS or AngularJS?

I've played around a bit with KnockoutJS and love it, however, Ember and Angular seem to be more popular and are more frameworks for complete apps (so includes routing etc).

Which one should i go with? (my gut says I'm expecting an AngularJS positive response)

Angular... as long as they don't ruin it with 2.0. Which all signs point to them doing. But that's a few years out.
 
Web Design Gaf - EmberJS or AngularJS?

I've played around a bit with KnockoutJS and love it, however, Ember and Angular seem to be more popular and are more frameworks for complete apps (so includes routing etc).

Which one should i go with? (my gut says I'm expecting an AngularJS positive response)

For past few projects I have been using Handlebars and plan to implement Ember in the next one. I already tried Ember in one prototype and like it: relatively simple but robust. If you have experience with Mustache/Handlebars, Ember is a pretty good choice over Angular. That said, I don't have actual Angular experience outside of doing few simple tutorials and reading the documentation. Just pick one and stick with it.
 

Ikuu

Had his dog run over by Blizzard's CEO
Try them both and see which you like. I tried Ember and liked it, but I've found Angular much easier to work with.
 

Ghost

Chili Con Carnage!
I went Angular because it's so well supported by the community now, I've never had any problems finding answers to my questions about it even when I thought they were pretty obscure.

It's also great at encouraging you to develop the right way, the incubator project you start with comes with Unit and e2e testing built in, all the documentation details how to test each component part, it really gives you everything you need to build a robust application.
 
I've only just started looking at the crazy world of javascript development frameworks and such. Coming from the world of ASP.NET MVC it just seems a little...off. I went through the basic Angular tutorial and I really can't stand it. It feels completely wrong to have all this framework stuff mixed into the HTML. I could handle some but it feels way too intertwined.

The separation of concerns just isn't there.

Maybe I just need a change in perspective or something?
 

Ghost

Chili Con Carnage!
I've only just started looking at the crazy world of javascript development frameworks and such. Coming from the world of ASP.NET MVC it just seems a little...off. I went through the basic Angular tutorial and I really can't stand it. It feels completely wrong to have all this framework stuff mixed into the HTML. I could handle some but it feels way too intertwined.

The separation of concerns just isn't there.

Maybe I just need a change in perspective or something?

Angular does take a bit of getting used to, it's a much more rigid approach than anything else out there but that's ultimately in service of making it better to work with in my opinion. I think the key to understanding it is laying out your project in it's terms (ie write down what your controllers, factories and providers will be and start to think about how the more complex parts of your application will work).
 
I have a client that requires a Gold and Silver Rates Bar and Table for a Website he is launching. He wants it to update automatically in case of a Rates Fluctuation. I did something similar for another client years ago but it was a manual updated bar/chart where he controlled the rate he wanted to buy at.

Here are examples of what he wants.

https://silvergoldbull.com/
http://www.bordergold.com/

What he will want is to pull the official price the Rates are at and have his Rate included into the Price shown. I am assuming it will be Gold, Silver, Palladium and Platinum as the Precious Metals

This seems a pretty simple enough job but it is beyond me since I am not a PHP guru.

Is there anybody here that would be able to write a script for me and handle any trouble shooting that may arise from getting into Wordpress. Sometime conflicts arise when installed.

Send me a PM if you are interested along with a Price Quote and I will look into getting you better details.
 

Pepto

Banned
Just wondering... why does gaf use <i> instead of <img> for the buttons on top?

All the images are on this one big sprite:

sprite.png


All those buttons on top are using the same file but different positions (background-position: -40px -20px;) to display the icon. This helps to speed up the loading of page by getting all the icons with one http request.

If you are wondering why neogaf is using the <i> tag and not something like a <div> then I have no idea.
 
Huuuuuh websites use spritesheets now? Is this how modern sites are done? Is there some kind of tool people use to automate it instead of manually aligning each icon and computing the coords?

It makes icon updates a pain though.
 
Huuuuuh websites use spritesheets now? Is this how modern sites are done? Is there some kind of tool people use to automate it instead of manually aligning each icon and computing the coords?

It makes icon updates a pain though.

Like he said, it's to eliminate all the separate file requests.
 
Yeah, individual icon file sizes are tiny. If it was all separate requests you would likely almost double the data transferred because of all the handshakes and crap.
 

D4Danger

Unconfirmed Member
Yeah, individual icon file sizes are tiny. If it was all separate requests you would likely almost double the data transferred because of all the handshakes and crap.

this and the other biggest issue is browsers (used to?) only handle between 2-6 concurrent requests from the same domain. So having hundreds of tiny icons could block other assets from loading.

I don't know if this is still an issue in the world of HTTP2/SPDY and modern browser though. Not had to think about it for a while.

more info: http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/
 
I saw some recent mention of WordPress as an option for websites (free templates etc.) in addition to the normal blog usage.

Does anyone have recommendations about whether that's a good or bad idea for a small business website? I'm not sure I've ever messed with WordPress but I imagine it might be one of the faster options to get going.

For sure, Wordpress is the most popular CMS by a wide margin and powers some ~30% of new websites built today. Almost all of my freelance clients want Wordpress because it's something they've heard of and it's easy to pick up learn quickly while still giving decent control of their site.

There are definitely some drawbacks:
  • Security. WP is no more or less secure than any other CMS, hell, the codebase itself is probably more secure than most... but due to its popularity and the sheer number of plugins, it's really important that clients keep their website updated or pay their developer to keep it updated. Updating only takes a matter of seconds... I use ManageWP to keep all of my WP client sites updated.
  • Won't fit most clients out of the box. It's important to remember that WP started primarily as a blog CMS, and added page functionality later. WHile WP serves pages just as well as any CMS it still has its roots in blogging and that can be felt throughout the CMS. I end up creating custom content types for every one of my clients.
  • Deploying WP can be pretty annoying. Again, I use ManageWP's clone when I can, but for at least.. 50% of them, cloning in ManageWP won't do the trick. For others I have to manually rsync changed files, dump the database, change the necessary site settings in the DB, re-upload, etc. It's painful with larger sites. I've used capistrano recipes to handle this but many of my clients sites wouldn't support that, and for the servers that do, usually they work well with ManageWP.

That said... for developers, Wordpress is very lucrative right now. There's a huge need for good Wordpress developers and clients are willing to pay highly for it. I'm averaging about ~200 hours for most full site builds of WP for viable clients, and so if you do the math of what you might charge hourly, it works out pretty well for a month or two of work.

I need feedback on a website I'm redesigning.

https://dl.dropboxusercontent.com/u/1039093/Web/template_orig.png

What are your general thoughts on that and what can be improved on it? I still need to fix a few things especially terms of cropping, aligning etc. and I also need to add some images.

Looks good, but I'd drop the bevel/shadow on the bio boxes in the "Meet the Lawyers" section. You're using mostly flat layers throughout the layout, and then that section has bevels/shadows. It's fine to keep the slight shadow on those buttons, though, because those are interactive.
 

scurker

Member
Huuuuuh websites use spritesheets now? Is this how modern sites are done? Is there some kind of tool people use to automate it instead of manually aligning each icon and computing the coords?

It makes icon updates a pain though.

There's a couple of tools out there (namely grumpicon and grunticon) that'll automate the process for you. But this has been pretty commonplace for the past couple of years. For example, here is one of google's sprite sheets.

Of course the new hotness is creating icon fonts. There are a bunch out there. There's a great post out on Github on how they created their own icon font, Octicon.
 
So, there's a good chance I can get an internship with a small web design company north of Atlanta next summer. I really like the company and want learn as much as possible, but I haven't put together a website in awhile. Is there any recent trends that I should be aware of if I'm not already? I'm in the process of learning the ins-and-outs of WordPress and HTML5.
 

Somnid

Member
There's a couple of tools out there (namely grumpicon and grunticon) that'll automate the process for you. But this has been pretty commonplace for the past couple of years. For example, here is one of google's sprite sheets.

Of course the new hotness is creating icon fonts. There are a bunch out there. There's a great post out on Github on how they created their own icon font, Octicon.

There's a bit of debate on whether to use icon fonts or embed SVG directly into page. I personally like icon fonts, but there are definitely drawbacks. You can't do multi-colored icons and it's ever so slightly less semantic. Always a good idea to assess what you need, there's no magic bullet. But the golden rules:

- Fewer file requests is better
- If it's man made do not use png/gif/jpeg etc. Use a vectors or CSS.
 

scurker

Member
There's a bit of debate on whether to use icon fonts or embed SVG directly into page. I personally like icon fonts, but there are definitely drawbacks. You can't do multi-colored icons and it's ever so slightly less semantic. Always a good idea to assess what you need, there's no magic bullet. But the golden rules:

- Fewer file requests is better
- If it's man made do not use png/gif/jpeg etc. Use a vectors or CSS.

Actually, you can kind of do multicolored font icons. http://codepen.io/parkerbennett/pen/tIzho It's kind of cheating because you're stacking icons on top of one another, but it's certainly possible. Since you can have :before and :after psuedo elements, it's possible to have up to 3 colors. But I would argue in most cases having a monochrome or single color font is enough.

I don't really have an opinion on svg vs icon font as both scale nicely in respective browsers from what I remember.
 

Daffy Duck

Member
There are definitely some drawbacks:
  • Security. WP is no more or less secure than any other CMS, hell, the codebase itself is probably more secure than most... but due to its popularity and the sheer number of plugins, it's really important that clients keep their website updated or pay their developer to keep it updated. Updating only takes a matter of seconds... I use ManageWP to keep all of my WP client sites updated.
  • Won't fit most clients out of the box. It's important to remember that WP started primarily as a blog CMS, and added page functionality later. WHile WP serves pages just as well as any CMS it still has its roots in blogging and that can be felt throughout the CMS. I end up creating custom content types for every one of my clients.
  • Deploying WP can be pretty annoying. Again, I use ManageWP's clone when I can, but for at least.. 50% of them, cloning in ManageWP won't do the trick. For others I have to manually rsync changed files, dump the database, change the necessary site settings in the DB, re-upload, etc. It's painful with larger sites. I've used capistrano recipes to handle this but many of my clients sites wouldn't support that, and for the servers that do, usually they work well with ManageWP.

Interesting site for remote management of WP sites.

We use https://wpremote.com for the ones we have. Only thing is not really heard of it before so unsure how safe it is really. There's always that nagging doubt in your mind.
 

smuf

Member
Huuuuuh websites use spritesheets now? Is this how modern sites are done? Is there some kind of tool people use to automate it instead of manually aligning each icon and computing the coords?

It makes icon updates a pain though.

You can automate it pretty much completely with Compass. It used to be a major PITA to do it manually. I'm sure there's other tools too.
 

YoungFa

Member
Anybody knows what can cause a webapp to continiously write to the harddrive via browser?
Monitoring hard drive read and write processes have revealed that that there is a constant write into the browsers (tested ie and chrome) temp file and into pagefile.sys (and volume information logfile accordingly) to the point where it uses 100% of the harddrive r/w capacity. Even though javascript wise absolutely nothing is happening on the site.
 

Somnid

Member
Anybody knows what can cause a webapp to continiously write to the harddrive via browser?
Monitoring hard drive read and write processes have revealed that that there is a constant write into the browsers (tested ie and chrome) temp file and into pagefile.sys (and volume information logfile accordingly) to the point where it uses 100% of the harddrive r/w capacity. Even though javascript wise absolutely nothing is happening on the site.

Sounds like you've used up usable RAM and the system is paging it to the hard drive. Check for a memory leak.
 

Somnid

Member
What would be the best way to find this?

You can use dev tools in Chrome under timeline to collect samples and see if you are constantly allocating resources or preventing the free of them. Another way to do this is to collect a heap snap shot and compare with a earlier one to see the differences. Overall, finding memory leaks isn't easy, there's a fair bit of skill and intuition involved.
 

moka

Member
So, there's a good chance I can get an internship with a small web design company north of Atlanta next summer. I really like the company and want learn as much as possible, but I haven't put together a website in awhile. Is there any recent trends that I should be aware of if I'm not already? I'm in the process of learning the ins-and-outs of WordPress and HTML5.

Well, here are a few points:

  • HTML5 - you've already got this I know
  • Responsive web design (Bootstrap, Foundation etc.)
  • JS Frameworks (Angular, Backbone, Ember etc.)
  • A web design company would probably want you to be able to work with various content management systems, one of the most popular, as you've already mentioned is Wordpress
  • Learn about about UX - this is quite important
Probably loads more to think about. I'm more or less done with web design in general as I prefer programming more and perhaps more importantly, I don't have the time. However, it is quite an interesting area and there are so many companies willing to hire if you're good!
 
The current project I am working on, our company's new front facing website, first internal project I have worked in a while, is looking so good right now that I am kinda annoyed by the fact that the end result won't look anything like it. The problem is right now is that there's no copy, at all, no assets, at all. It's been a long while since I have done a truly creative product where I have a blank canvas for a while with no restrictions. I know that everything from fonts and colors to paddings and line heights to sections to semantics are going to change, but I am almost tempted to take some shots and save them for my personal portfolio because it's looking sooooo good and working so great.

Then again, this was the project I chose to use Ember with. Not because I had to, but just because I wanted to. I have been using Handlebars templates for a 6 months now almost exclusively and I have a background in doing heavy Flash MVC projects but getting started with Ember has still be a bit... tricky. Mostly because I am not entirely sure what Ember can do and can not and like Handlebars itself, the documentation isn\t the most profound around. Still, after figuring out what and how thing should be done, I am so far liking it a lot. Last large project ended up being a full blown MVVM or MVC application, with thousands of lines of selfmade code. I was thinking about doing it in Ember in the first place. but I thought I didn't have time to figure it out. Turns out that I was right or wrong: right in that my solution was probably the right one for that, wrong in that sense that I could have done it much much much more quickly with Ember if I had know what it would be in the end.
 

Lombaszko

Member
Hey DevGaf! I'm helping our developers with our digital library website and we need to block some video content in the UK.

They have made modifications to the geoblock.conf file:

<Location /videos/Steve_Wozniak_Interview_Merged.webm>
SetEnvIf GEOIP_COUNTRY_CODE UK BlockCountry
SetEnvIf GEOIP_COUNTRY_CODE GB BlockCountry
Deny from env=BlockCountry
</Location>

We've been unable to find a good way to test if this is actually working or not. I've tried VPNs, Chrome Extentions, and all kinds of other shady location proxies.
Does anyone know a good way to test this?
Thanks!
 

moka

Member
Hey DevGaf! I'm helping our developers with our digital library website and we need to block some video content in the UK.

They have made modifications to the geoblock.conf file:

<Location /videos/Steve_Wozniak_Interview_Merged.webm>
SetEnvIf GEOIP_COUNTRY_CODE UK BlockCountry
SetEnvIf GEOIP_COUNTRY_CODE GB BlockCountry
Deny from env=BlockCountry
</Location>

We've been unable to find a good way to test if this is actually working or not. I've tried VPNs, Chrome Extentions, and all kinds of other shady location proxies.
Does anyone know a good way to test this?
Thanks!

You could ask a few people from the UK to try it out ;)
 

Lombaszko

Member
You could ask a few people from the UK to try it out ;)

Thanks! I ended up doing that. The geoblocking didn't work, it might have something to do with that we're trying to block file's location on the media server, but the video on the page may be getting served through the normal domain. Funky Apache stuff I think.

Someone recommended the Hola extension for Chrome, I'm going to try that.
 

jesalr

Member
So, I just left a startup incubator and am currently without a job.

Was looking at freelance webdev, but I never considered it before because finding clients seemed a fairly large task for someone with no freelance history.

How did you guys who do freelance find your first clients?
 
Does anyone here have any experience coding on a tablet? I've been interested in the idea and I wanted to know if there were any IDEs that are top notch, if iOS is truly preferable to Android, and what are the overall feelings on coding on a tablet.
 

jesalr

Member
Does anyone here have any experience coding on a tablet? I've been interested in the idea and I wanted to know if there were any IDEs that are top notch, if iOS is truly preferable to Android, and what are the overall feelings on coding on a tablet.

I used Diet Coda for a little while on an iPad. It was doable, but I still much prefer an actual laptop.
 

fixedpoint

Member
So guys, I'm developing at home for fun from time to time, just to keep in touch with what's new (my current job doesn't involve computer programming just CAD/CAM and CNC stuff).

I'm playing with node.js (really like it), angular, mongodb (basically the MEAN stack) and everytime I begin working I have a bat file that starts:
- monogdb daemon
- nodemon
- node inspector
- another empty console for housekeeping/tests

Is this the way everybody works? I mean, there are 4 consoles open on the taskbar, at all times. I've been searching for a way to have them included in the editor perhaps (currently using Webstorm for the jade watchers, have tried Sublime Text and Brackets as well) so they automatically launch in separate panels when I open the editor?
 

Ikuu

Had his dog run over by Blizzard's CEO
So guys, I'm developing at home for fun from time to time, just to keep in touch with what's new (my current job doesn't involve computer programming just CAD/CAM and CNC stuff).

I'm playing with node.js (really like it), angular, mongodb (basically the MEAN stack) and everytime I begin working I have a bat file that starts:
- monogdb daemon
- nodemon
- node inspector
- another empty console for housekeeping/tests

Is this the way everybody works? I mean, there are 4 consoles open on the taskbar, at all times. I've been searching for a way to have them included in the editor perhaps (currently using Webstorm for the jade watchers, have tried Sublime Text and Brackets as well) so they automatically launch in separate panels when I open the editor?

I use Cmder and made some alias, for example I can type m and it'll start up Mongo.
 
Top Bottom