Web Design Tools to Keep in Your Arsenal
Every web designer has a few tools that they can't imagine working without. There are some obvious ones, like a great text editor and Photoshop, but there are other web design tools that might not seem so obvious. Here are a few of our favorite tools for web designers.
Twitter
While at first Twitter might not seem like it should be a tool, it's definitely something that's used heavily by those in the web industry. Since the technology that we use changes daily - sometimes it even feels like hourly - it's a great place to scan a feed and get some quick insights on new ideas. The web community is one that loves to share, help as well as teach. You can usually find a lot of great links to innovative articles as well.
It could be helpful to install a Twitter client, like TweetDeck, as well. They can help you organize your tweets, build timelines, help you search for specific topics and manage multiple accounts. That way you can keep your Beyoncé updates separate from your Responsive Design ones.
Here are a few of our favorite people in the web industry to start following:
They also have an app available for iPhone and Android, so you can update your tasks wherever you are.
Trello recently published a blog post about how using their service could even help you to stay organized when looking for a job.
HTML5 Boilerplate is everything that you need to put in your files in the first place. So in the simplest of terms, you can use as a starting point for an HTML-based page or file. It also includes a bunch of comments and documentation to help you understand why the things that are part of the Boilerplate are there. Since the documentation is included with the download, it makes it easy for you to reference them even if you're working offline.
Using the HTML5 Boilerplate can give you a headstart when you're creating your document files.
HTML5 Boilerplate comes with a index.html and 404.html file as well as a CSS folder that has a main.css file. The main.css file includes helper classes and some media queries to get your started with a responsive design. It also has a normalize.css file to correct browser bugs and a more consistent base to build your CSS. To learn more about HTML5 Boilerplate, check out the Pluralsight Course Get Started with HTML5 Boilerplate.
What makes CodePen different from some of the other in browser editors, often called Code Playgrounds, is the ability for you to create an account with a profile and join the community. It's almost like Dribbble for front-end developers. Once you've created a few Pens (which is what each saved session is called) you could even use CodePen as your portfolio. They also have a Hire Me feature that you can add to your profile to help you find work.
What's really great about CodePen is the ability to see other people's work. You can simply see some of the amazing things that people are creating with just HTML, CSS and JavaScript. You'll see things like animations, solutions to new problems, and just really cool code-based stuff.
It's also another way to learn how to accomplish something with code. Since you're able to see the code and the result at the same time, you're able to tinker with it too too. CodePen also supports many preprocessors, like Sass, LESS, Markdown and Haml, so you don't have to feel limited if you're used to using a preprocessor.
Having a way to simply take a shot of something your site is doing that's weird or even just send it to a client or someone you're working with can be incredibly helpful.
It could be helpful to install a Twitter client, like TweetDeck, as well. They can help you organize your tweets, build timelines, help you search for specific topics and manage multiple accounts. That way you can keep your Beyoncé updates separate from your Responsive Design ones.
Here are a few of our favorite people in the web industry to start following:
- Jeffery Zeldman @zeldman
- Ethan Marcotte @beep
- Lea Verou @LeaVerou
- Chris Coyier @chriscoyier
- Luke Wroblewski @lukew
- Paul Irish @paul_irish
Trello
It can be incredibly difficult to keep track of all the different things you have to do. Trello is a free service that can change your life. You just create lists for different tasks. So, say you're working on your portfolio site, you can create a board called "Portfolio" and then add lists for all the different things that you need to get done. This will create a simple way for you to stay organized and get a quick look at the things that you have left to do.
They also have an app available for iPhone and Android, so you can update your tasks wherever you are.
Trello recently published a blog post about how using their service could even help you to stay organized when looking for a job.
HTML5 Boilerplate
HTML5 Boilerplate is a simple template and set of rules that can be used in any web project. It's a template that started in 2009 and was mostly created by Paul Irish and Divya Manian. Once you start creating sites, you'll notice that you're probably copying and pasting code all the time.
HTML5 Boilerplate is everything that you need to put in your files in the first place. So in the simplest of terms, you can use as a starting point for an HTML-based page or file. It also includes a bunch of comments and documentation to help you understand why the things that are part of the Boilerplate are there. Since the documentation is included with the download, it makes it easy for you to reference them even if you're working offline.
Using the HTML5 Boilerplate can give you a headstart when you're creating your document files.
HTML5 Boilerplate comes with a index.html and 404.html file as well as a CSS folder that has a main.css file. The main.css file includes helper classes and some media queries to get your started with a responsive design. It also has a normalize.css file to correct browser bugs and a more consistent base to build your CSS. To learn more about HTML5 Boilerplate, check out the Pluralsight Course Get Started with HTML5 Boilerplate.
CodePen
CodePen is a code editor that's built into your browser that lets you preview the HTML, CSS, and JavaScript that you write.
What makes CodePen different from some of the other in browser editors, often called Code Playgrounds, is the ability for you to create an account with a profile and join the community. It's almost like Dribbble for front-end developers. Once you've created a few Pens (which is what each saved session is called) you could even use CodePen as your portfolio. They also have a Hire Me feature that you can add to your profile to help you find work.
What's really great about CodePen is the ability to see other people's work. You can simply see some of the amazing things that people are creating with just HTML, CSS and JavaScript. You'll see things like animations, solutions to new problems, and just really cool code-based stuff.
It's also another way to learn how to accomplish something with code. Since you're able to see the code and the result at the same time, you're able to tinker with it too too. CodePen also supports many preprocessors, like Sass, LESS, Markdown and Haml, so you don't have to feel limited if you're used to using a preprocessor.
Markup Validation Service
Even thought a validation service isn't as exciting as the rest of the tools on this list, validating your code is important. Using a validator makes sure that your code is following best practices and guidelines by using correct syntax. A well-respected validator is directly from the W3C. It's pretty simple to use as well. You can either upload your file or just paste in its content. It'll help you find if you've made any mistakes or forgotten important aspects of your code, like adding a UTF encoding.Skitch
Skitch is an app that's used to take screenshots. What makes Skitch great though, is the ability to write on or add shapes, arrows or sketches on to the screenshot directly within the app. Skitch is now part of Evernote, so it's even easier to to save and organize your screenshots.
Having a way to simply take a shot of something your site is doing that's weird or even just send it to a client or someone you're working with can be incredibly helpful.
