almost 9 years ago from Sean Geraghty, Design @ Nested.com
I am looking to develop my website again and I was wondering what other designers or even developers start building a website. In summary: What tools etc do you use? Any frameworks? Any recommendations?
I'm a windows user but feel free to list Mac programs here in case it helps anyone else out :)
I always like to know what is needed before touching any code.
That means I’ll rough out ideas on paper, in Adobe Illustrator or Adobe Photoshop first. I realise those approaches aren’t always popular with responsive web design, but I think static tools have a lot of value, especially early on in the process.
For websites, I’ll typically only work out components in Illustrator/Photoshop (header, footer etc), and jump into HTML/CSS pretty early.
I do use SASS (SCSS). I don’t use any frameworks or grid systems any more (percents and box-sizing: border-box make life pretty easy).
I’ve been using CodeKit to remove white space and compile SASS to CSS. https://incident57.com/codekit/
I currently use Hammer for static site compiling, and to convert Markdown to HTML (handy if you have tons of text pages, articles or help docs). http://hammerformac.com
And, I’m using Coda for pretty much all the editing and FTP. http://panic.com/coda/
All three of those tools have different ways to preview your pages in realtime, but I usually use Coda for that task.
It’s another Mac app (I think everything I’ve listed is Mac only), but Espresso is also worth checking out. http://macrabbit.com/espresso/
+1 for Espresso and CodeKit. The workflow is so fluid when they're used in tandem.
I tried Hammer and it was mildly useful but as soon as I had to pass a project (unexpectedly) across to another agency the client bought in to do other bits on, it became a bit of a nightmare as they were Windows devs so Hammer became a bit of a burden as they couldn't compile the files or work in the same way and the project that was neat and tidy fell apart a bit.
Something to consider as not everyone is on a mac.
OH DEAR GOD!, YOU DON'T USE SUBLIME TEXT! WHY WOULD YOU DO THAT TO YOURSELF?
My votes up for Atom in this case, never could get into Sublime.
Also I use Brackets for certain things, it's slightly more project oriented structure can be better for certain things. Unfortunately I place way too much value on good syntax highlighting and the CoffeeScript highlighting in Brackets is.. how do you say.. garbage?
I usually draw up a quick wireframe in my sketch pad then design it in Photoshop.
I recently switched to Brackets (http://brackets.io) for my text editor and really like it so far as I was using Notepad++ in the past (don't judge).
I've stripped down Bootstraps grid system as it's the only thing I like about the framework and also use SASS.
For static sites I like to use GitHub Pages and maybe Jekyll depending on the needs. If it's a blog I'm building, I try to persuade the client to go with Ghost (http://ghost.org) and learn some markdown instead of Wordpress because you know, PHP sucks.
GitHub pages has some restrictions when building a site such as the capability to add a contact form but I found Brace forms - http://forms.brace.io which is a nice little alternative.
Oh and I use Gulp now and then :)
Thank you so much for mentioning Brace Forms! I've wanted a contact form on an otherwise static site as long as I've been using Jekyll. This is a godsend.
I haven't really looked into how it works but it's a great free service and is really easy to integrate into your forms.
The only downside is that for a confirmation message, it sends you to an external page.
I've been trying to create a modal window or even a new browser window to display a confirmation message but no luck yet
I've just tested it and you can either use a hidden form field to declare where the user gets sent when they submit the form, or send it by AJAX. Here's a demo, pls no spam 'coz I used my real email.
Just what I need, thanks!
You can also check out BitBalloon - we have integrated form handling and you can control the page shown after the form submission.
+1 for BitBalloon :)
In addition to the other points made already, have a look at gulp/grunt.
I have a set up of gulp tasks for SCSS, Compass, Browserify, Coffeescript if needed, and SVG optimisation at https://github.com/BurntCaramel/guilty-gulp
It lets you customise the tasks and automatically sets up watch tasks for the paths you have specified.
I do recommend getting to know gulp by itself as it’s purposely been made simple to use. These tasks I’ve created make it a bit easier and more flexible once you’ve got your head around how it works.
SublimeText is a must... it's Mac & Windows http://www.sublimetext.com/3
Depends on the type of site you are building...
Bootstrap - http://getbootstrap.com Foundation - http://foundation.zurb.com
Jekyll - http://jekyllrb.com Hugo - http://gohugo.io Rails - http://bit.ly/1C1LF6m
Here is a nice comparison of front-end frameworks: http://www.monolinea.com/css-frameworks-comparison
I just pushed a repo from where I start with Bootstrap & Jekyll: https://github.com/aaronkwhite/bootstrap-jekyll
For static website forms I would most definitely recommend https://fabform.io
Thanks so much for all the tips guys, I think I've got a few new tools now to work with. Now to tackle learning Ruby.
Can you give me a little more information about the concept about your website and what all features basically you're looking to upgrade in the new design - can suggest you better.
Let me know Agile Infoways
I investigate the problem and talk to the client a lot before doing anything else. Also, include users into the conversation as soon as you can — through surveys, interviews and whatever other tactics you have available.
Edit: Here I'm considering develop in the broader sense of the word (i.e. making). For actual dev there are already a bunch of killer suggestions in the thread.
Okay. So, first of all I use Sublime Text 3 with Predawn as my theme. I have Emmet and HTML-CSS-JS Prettify as my extensions. They really help speed up my workflow and keep my code spick and span. I use Git Bash as an alternative to Command Prompt. I use yeoman, Grunt and Bower to start my site. yo, scaffolds the site and creates my directory structure, files and code. bower installs my dependencies and grunt serves and compiles my files on a local server. I use the angular-webapp generator for most projects but the humble webapp generator can do all jobs quite efficiently. I also use SCSS and jQuery. So what about the design? I simple sketch out the whole webpage and some of the important components like the topbar or some special buttons. Hope it helps :) Cheers!
If you are wanting to build a webapp I can't recommend yeoman enough.
It allows you to scaffold out your project really quickly, easily and following best practises.
If you are familiar with Rails you will know how powerful that can be not having to worry about configuring boilerplate stuff.
You get loads for free: + Separate tasks for watching files with live reload developing and compressed build version + Compressing your images and minification + SASS plus bootstrap if you fancy + Tests + etc
Meteor.js is simple to use and if you already know a bit of jquery won't be too hard to pick up. It's so simple even I learned to use it in a few weeks.
It's a fullstack framework but Meteor does most of the backend work for you.
You can check it out at http://meteor.com to install it.
To start learning it check out http://meteor.academy/
I use http://mixture.io with Foundation/Sass
also http://brackets.io
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now