-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
a few years back I used HTML and basic CSS to do some basic websites for myself and others.
I'm thinking of getting a personal site back online and wondering how I should proceed.
I have the Adobe Creative Suite and I'm wondering about Adobe Muse? Anyone here use it? I might watch some tutorials on Lynda and see what I can do.
I'm thinking of getting a personal site back online and wondering how I should proceed.
I have the Adobe Creative Suite and I'm wondering about Adobe Muse? Anyone here use it? I might watch some tutorials on Lynda and see what I can do.
itchy. tasty
Member
Thanks, wouldn't mind something with a biggish screen for a bit of real estate to work with. I'll probably go down the macbook route as mentioned above
Ember Spirit
Banned
are mac book airs powerful enough to develop on? it wouldn't be my primary computer, but I wouldn't want it crashing every 2 minutes when I have several things open
I was thinking about getting a mac book pro, but ideally I'd spend as little as possible
also what css frameworks do you guys like? I know some don't like to use any at all due to bloat, but wondering what you guys like for quick and easy work
I was thinking about getting a mac book pro, but ideally I'd spend as little as possible
also what css frameworks do you guys like? I know some don't like to use any at all due to bloat, but wondering what you guys like for quick and easy work
I would image it would be enough to run sublime and a few other programs in the background, though the screen size would be a huge issue. If you're connecting to an external monitor then it's alright. I use bones css framework and compile my less files.
Mac is also popular for its Unix core, enabling front-end dev tu run both photoshop and linux-style terminal programs without emulators.
Macbook if you can afford it. ( I love my Mac as a development machine!)
If you get serious with modern frontend techniques, you'll often be confronted with terminal applications (node, grunt, gulp...), preprocessors (coffeescript, sass, less...). All these can have a substantial demand for performance (often running in the background). Things get even worse, if you have to deal with backends (java...) running locally.
Furthermore, most of these tools often work out of the box on a mac. Compiling etc. are not that natural on a Windows machine.
Anyway, be sure to have enough RAM and a SSD. CPU-wise every modern CPU should be fine. I prefer full voltage processors though. Had an Ultrabook i7-something and the quad core in my Macbook Pro is noticeably faster.
If you get serious with modern frontend techniques, you'll often be confronted with terminal applications (node, grunt, gulp...), preprocessors (coffeescript, sass, less...). All these can have a substantial demand for performance (often running in the background). Things get even worse, if you have to deal with backends (java...) running locally.
Furthermore, most of these tools often work out of the box on a mac. Compiling etc. are not that natural on a Windows machine.
Anyway, be sure to have enough RAM and a SSD. CPU-wise every modern CPU should be fine. I prefer full voltage processors though. Had an Ultrabook i7-something and the quad core in my Macbook Pro is noticeably faster.
Zombie James
Banned
Anyone here have static sites or doing work with static sites? I decided to give https://divshot.com/ a chance and I'm really liking what I'm seeing so far. I have a site hosted on S3 right now and I might just switch to this, it's so much easier to manage (I could literally cut over 100 lines in my gulp script).
I switched to a 15" Macbook Pro about a week or two after using Windows as my primary dev OS for a while now and it's ridiculous how my productivity's improved on this thing. It's a far, far friendlier environment than Windows will ever be and the high-DPI screen really cuts down on the eye strain. Costly but worth it, imho.
If you want to go the Linux route I can't say enough nice things about Elementary OS. It's rough around the edges like most Linux distributions but it has some serious potential.
I switched to a 15" Macbook Pro about a week or two after using Windows as my primary dev OS for a while now and it's ridiculous how my productivity's improved on this thing. It's a far, far friendlier environment than Windows will ever be and the high-DPI screen really cuts down on the eye strain. Costly but worth it, imho.
If you want to go the Linux route I can't say enough nice things about Elementary OS. It's rough around the edges like most Linux distributions but it has some serious potential.
Syphon Filter
Member
When you guys are making a website do you start from scratch or use other code templates? Also do you use the new html5 semantic elements or still use divs?
Generally the only thing I will use is like bootstrap, if the client asks for it. Otherwise I'll do it mostly from scratch - that being said, I'll troll sites for components that fit what I am looking for, and use'm in my app - ie, if I need a good looking floating label input component, I'll find one and use it in my site - usually wrap it in a directive.
I build all my sites atop wordpress and use an un-styled bones framework. WP + Advanced custom fields repeater plugin is the absolute perfect combination for me, I can build most items I need and give my clients the flexibility to add content without emailing me a trillion times.
PetriP-TNT
Member
Usually Bootstrap and I use appropriate elements semantic elements whenever possible. I do start from scratch in that sense that I don't use bootstrap templates, but I do use the components and the (heavily modified) theme. My workflow is to install backend stuff with Node's npm, install frontend stuff with Bower, then create simple project skeleton for other common files... I have done enough projects at this point that I have most of config files, gruntfiles, gitignores and jshintrcs ready to go so at this point I have only spent few minutes to have a basic site up. The projects start out so similarly that I should probably just have a Yeoman generator for them or something.
It depends, of course 
If you build some boring backend interface or a quick prototype, bootstrap et al. are a perfect fit.
From my experience though, in projects with custom designs and crazy ideas, these frameworks may become a real pain later on.
For the DIVs. They are still here and they are for good reason. You'll need them to structure your html.
You should try to build semantic html regardless. A link is a link, buttons are buttons and so forth. You should use the newer tags, too. Every modern browser supports them and there is no good reason not to do so.
If you build some boring backend interface or a quick prototype, bootstrap et al. are a perfect fit.
From my experience though, in projects with custom designs and crazy ideas, these frameworks may become a real pain later on.
For the DIVs. They are still here and they are for good reason. You'll need them to structure your html.
You should try to build semantic html regardless. A link is a link, buttons are buttons and so forth. You should use the newer tags, too. Every modern browser supports them and there is no good reason not to do so.
StopMakingSense
Member
Are you me?
PetriP-TNT
Member
I looked it up but their site barely worked on my highend WP8.1. :V
I dunno!!!!!
About 90% of my clients last year came to me after failing to build a successful site on wix or one of those other site builders.
So in a responsive two column design, what's the best solution for "stacking" them when displaying on a mobile device? Left column has less important info while the right is the main stuff, I was thinking left hidden but easy to slide/toggle out to deal with while displaying the right by default.
Why dont just push the left column under the right?
I hope this isn't off topic but i just suck when it comes to make UI's for my Games!
My colors are all over the place and there is no real consistency.
So i am asking here if someone is interested in helping/consulting me about this topic. If you are interested, just hit me with a PM!
I try to do as much I can by myself but this a field where i have to acknowledge hat I need help from outside
My colors are all over the place and there is no real consistency.
So i am asking here if someone is interested in helping/consulting me about this topic. If you are interested, just hit me with a PM!
I try to do as much I can by myself but this a field where i have to acknowledge hat I need help from outside
Zombie James
Banned
I hope this isn't off topic but i just suck when it comes to make UI's for my Games!
My colors are all over the place and there is no real consistency.
So i am asking here if someone is interested in helping/consulting me about this topic. If you are interested, just hit me with a PM!
I try to do as much I can by myself but this a field where i have to acknowledge hat I need help from outside
Give this a shot: https://color.adobe.com
What information is in each column? Your body text or meat is always the most important so make sure that is readable right away. If the left column is a menu, etc you can always collapse it into another sort of layout. Perhaps icons, dropdown, etc.
Thank you, this helps a lot!
Before:
After:
Now i need to think about those two Score Counters, their placement feel kinda weird :-/
That was one idea. The other was to place it (top or bottom of the main content) and collapse it. I'm of the mind that just pushing it below the right stuff is the better option, one less tap/click to reveal the other info (and makes it harder to miss for certain "special" users)
The right stuff is the main info. The left will be a menu some times, search refining at others, ect, just depends on what main info is being displayed.
I'd move the high score so it is vertically under the highscore label.
Thank you, this helps a lot!
Before:
After:
Now i need to think about those two Score Counters, their placement feel kinda weird :-/
I'd swap the red for yellow or orange. Red on Blue is too harsh.
Syphon Filter
Member
How much more worth it is doing a website for a client vs personal project just to add to the portfolio? Which one is more worth it for someone who hires and is looking at your portfolio? Or does it not matter at all?
Client projects for sure. Your own personal projects are controlled by you whereas working with a client is real world experience, which is what people want when hiring professionals.
PetriP-TNT
Member
Thank you, this helps a lot!
Before:
After:
Now i need to think about those two Score Counters, their placement feel kinda weird :-/
Looks way better! Like others said, the red is too harsh and the highscore number is loose, align it with the text.
Also the triangle in continue is too large, it should have the same margins as the other icons
Looks way better! Like others said, the red is too harsh and the highscore number is loose, align it with the text.
Also the triangle in continue is too large, it should have the same margins as the other icons
Thanks for the suggestions guys! I will experiment further with adobe color to see what other color could match for the Score Counter. And yeah, the continue icon is something i will make smaller, maybe i should change the color instead of making the icon bigger, when it is highlighted?
Syphon Filter
Member
Anyone know if it's ok to use the 960 grid code for my own websites on my portfolio? I am just trying to make sure no license issue happens or something.Still trying to learn more.
Syphon Filter
Member
The 960 grid system is not responsive right? So what do you guys use or do in that case? Do i just create the whole thing on my own instead if i want to make a website with responsive in mind?
Zombie James
Banned
Hello web dev/design gaf.
I've tried teaching myself coding before and quit after hitting a road black early in the process. But after reading through and asking around on GAF, I came upon Teamtreehouse and I literally just finished their first course on web design and built my own website. Anyway was wondering if you guys had any advice on what do next as far as getting experience and building up a portfolio.
I really enjoyed the treehouse course and for once some stuff started to click. I'm thinking now I'll finish up the web design track then move onto the front end web dev track. Though apparently it's a good idea to take the framework basics course in between those 2 tracks.
I'm not in school so I'm basically teaching myself everything and I have no degree. Only did some CC but realized I had no interest in any of the degrees nor did I want waste anymore time and $$ until I could figure out exactly what I wanted to do.
I decided upon coding because besides the obvious $$ aspect I've always been fascinated by it and even when I failed to teach myself I actually enjoyed learning it. I also enjoyed every minute of typing up code and seeing it come to life in the form of a website from the web design treehouse course.
Since I'll be pursuing this without a degree or formal education I'm going to need a good portfolio to prove I have experience and that I know what I'm doing. So far the only things I can think once I get a better handle on things, is to build my build my friend's theme park news site. Besides helping him out, he wanted me to contribute to it anyway and I figure it will be good experience and something to add to my portfolio once I get the ball rolling.
I should also mention I live in the bay area so I'm in the perfect spot to learn but if anyone knows any good communities or places to learn from here I'm all ears. My goal is eventually become self-employed but if/when I get good enough my friend told me he could get me a job at his company.
edit:nvm site worked.
I've tried teaching myself coding before and quit after hitting a road black early in the process. But after reading through and asking around on GAF, I came upon Teamtreehouse and I literally just finished their first course on web design and built my own website. Anyway was wondering if you guys had any advice on what do next as far as getting experience and building up a portfolio.
I really enjoyed the treehouse course and for once some stuff started to click. I'm thinking now I'll finish up the web design track then move onto the front end web dev track. Though apparently it's a good idea to take the framework basics course in between those 2 tracks.
I'm not in school so I'm basically teaching myself everything and I have no degree. Only did some CC but realized I had no interest in any of the degrees nor did I want waste anymore time and $$ until I could figure out exactly what I wanted to do.
I decided upon coding because besides the obvious $$ aspect I've always been fascinated by it and even when I failed to teach myself I actually enjoyed learning it. I also enjoyed every minute of typing up code and seeing it come to life in the form of a website from the web design treehouse course.
Since I'll be pursuing this without a degree or formal education I'm going to need a good portfolio to prove I have experience and that I know what I'm doing. So far the only things I can think once I get a better handle on things, is to build my build my friend's theme park news site. Besides helping him out, he wanted me to contribute to it anyway and I figure it will be good experience and something to add to my portfolio once I get the ball rolling.
I should also mention I live in the bay area so I'm in the perfect spot to learn but if anyone knows any good communities or places to learn from here I'm all ears. My goal is eventually become self-employed but if/when I get good enough my friend told me he could get me a job at his company.
edit:nvm site worked.
I have a question for freelance web dev here. How do you guys manage web hosting for your clients? Do you let your client setup their own hosting account or host the website in your own hosting account? I'm asking because im going to build a website for a small business owner and will be my first time working with a client.
it depends, I would say. We are not freelance devs here, but a small team though.
If you decide to host by yourself don't forget the responsibility and work following that decision. It's a long term relationship.
PetriP-TNT
Member
Not a freelance dev but from my experience the best way has been
1. Agree that you setup the hosting on their money
2. Make sure that your contract includes a clause that states how much you charge for maintenance work (to prevent the client using you as a free general IT worker)
3. After the project is finished, give the complete control to your client (with a 'how-to' guide depending on what kind of site you made)
4. Charge as per your contract for maintenance work and make new contracts for updates.
This way you can
- setup the hosting perfectly for your needs
- prevent turning into a IT monkey
- gain long term relationship for updates and maintenance: note that if they don't want to continue working with you after 3, they can't also make you the IT monkey work, see 2.
This is good advice, that I didn't know myself. Thanks.
Has anyone had to deploy a web app where on development you are testing on just localhost and when you deploy it it gets hosted on www.example.com/app1 ?
I'm having trouble figuring out how to link to my CSS/JS files. For example if I just do this
Then it works fine on localhost and if in the case I deploy it to www.app1.com. However when it gets deployed to www.example.com/app1 it stops working since it makes it so it's being linked to www.example.com/stylesheets/app.css
I'm not sure if relative linking URLs is even possible. Since if i navigate further to like www.example.com/app1/something/whatever, the URLs for the CSS/JS files stop working.
I'm having trouble figuring out how to link to my CSS/JS files. For example if I just do this
Code:
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">I'm not sure if relative linking URLs is even possible. Since if i navigate further to like www.example.com/app1/something/whatever, the URLs for the CSS/JS files stop working.
you could use the <base> element.
this would load your stylesheet from http://www.example.com/app1/stylesheets/app.css
you could just change the base depending on where you deploy it
I don't know if how that would affect the rest of your site though.
more info
Quick Tip: Set Relative URLs With the “base” Tag
Is it recommended to use the <base> html tag?
Code:
<head>
<base href="http://www.example.com/app1/">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
</head>this would load your stylesheet from http://www.example.com/app1/stylesheets/app.css
you could just change the base depending on where you deploy it
I don't know if how that would affect the rest of your site though.
more info
Quick Tip: Set Relative URLs With the “base” Tag
Is it recommended to use the <base> html tag?
Tathanen
Get Inside Her!
It's good to have your development environment configured to match your deployment one. Which means setting up something like localhost/app and developing there, not just at localhost. You can spin up a super-basic server with Node and develop at localhost:3000/app, or map your localhost to a domain in your HOSTS file and set up a VHOST using apache config, or any number of options.
Zombie James
Banned
Finished my move from S3 to Divshot and I think I'm going to stick with these guys for my static sites. Huge improvement over S3 in every area, and they allow custom domains on their free plan and have a rediculously easy to use form to email service. I've been really impressed.
Vagrant (together with PuPHPet) is a godsend for this type of thing. I've gone through the MAMP/XAMPP route and I'd never go back.
Vagrant (together with PuPHPet) is a godsend for this type of thing. I've gone through the MAMP/XAMPP route and I'd never go back.
Investigating this atm, trying to see if it's causing any issues anywhere. It just feels weird to me to have to put the URL in the base tag, but at this point if it works, then I'm fine with it.
The development environment was supposed to be mirroring the production when I was using digital ocean for production env and doing everything working out fine. But when handing out the project now they are hosting as a sub-app rather than getting it its own domain. And I'm a bit hesitant to change up my dev environment cause I know in couple of months they wanna host it on its own domain. So I'm just trying to see if it's possible to have a size fit all type of solution.
Also I have yet to figure out how to set up my Node/Express to serve localhost/app as the default root of the website lol
You write static HTML files? If you use PHP or any other language server side, there should be a way to get the current path of your file.
Relative paths should work fine though, as long as you don't nest the paths of your pages deeper than root level, of course.