Tuesday, November 18, 2014

Useful Web Tools and Links for Web Design

Today, I’d like to share some tools that I find very useful in web design. I use these helpful links in my daily tasks (at work or personal projects) and I hope it will do the same for you!


W3schools.com is a web development site. Here, you can find tutorials and references in HTML, CSS, JavaScript, SQL, PHP, JQuery, ASP, XML and more. The site also has a bunch of quizzes to you can test your skills and knowledge! It also features a color picker where you can grab a color’s hex code without opening your Photoshop.

It also has a Try It Editor. If you don’t have Adobe Dreamweaver to edit codes and create your web pages, the Try It Editor can almost function the same as Dreamweaver.



In this new online tool from Mozilla Webmaker, you can create web pages. You can write and edit HTML and CSS on the left side of Mozilla Thimble, and then you can see the Live Preview of your code on the other side. To know more about Thimble, see their site here.

Mozilla Thimble


1stwebdesigner.com is a site that provides tutorials, references, and articles about coding and web design. It also features design inspirations and plugins for WordPress.



Internet is now available in mobile devices such as cellular phones and tablets. These days, responsive web designs are much preferred – meaning, the design of your website should be viewable in any device and still be aesthetically readable (without cropped images or overlapping navigation, etc.) The design should be compatible and should adapt the width of the devices that will access the website.

You don’t need to use your device every time to check the website you are working on. There are mobile emulators available to use in the web. I use these two mobile emulators:


Mobile emulator by Pixmobi is very useful. Aside from being able to check the website, it also display the real location or path of the mobile website, mostly for non-responsive web design (where in there is a new and separate page that will load when it detected that the site has been viewed in a mobile device).

An example is: www.facebook.com and its page’s mobile version is http://m.facebook.com
Another example: www.dandiely.blogspot.com and its page’s mobile version is http://dandiely.blogspot.com/?m=1

In this tool, you can select the monitor size, resolution, mobile device width and screen orientation.

Mobile emulator by Pixmobi

4.2 http://emulator.mobilewebsitesubmit.com

It's always good to have two mobile emulators to check the mobile website, so I use this as well. You can select default mobile devices on the icons above the website, or click the dropdown to view the selection for tablet devices.



Tired of the default web fonts like Arial, Helvetica, Trebuchet MS, Verdana and Tahoma?

Google Fonts offer a wide selection of new fonts for the web. There are free fonts here which you can easily use for your website. Most are optimized for legibility in different interfaces like print, mobile and web. You don't need to download them to be able to use for your blog. You can click the QUICK-USE button on the lower right of the font box. If you want to use it commercially, you can check the license of the font and see how you can use it.

My favorites are Open Sans (which I use for body content of this blog), Oswald (for Post Titles) and Dancing Script (for my blog title). These fonts are also available in Google Blogger.

Google Fonts

Google Fonts - Quick Use


Let's say you're currently creating a website from scratch but don't have contents yet. Creating random text can be time consuming and using 'This is the H1 tag' or 'This is the main paragraph' can sometimes be distracting. You can use Lorem Ipsum as it is a dummy text. In their website, you can generate random words, phrases and paragraphs.

Lorem Ipsum

7. FIREBUG (Mozilla Firefox Add-On)

Firebug is free and open source software by Joe Hewitt. You can integrate Firebug in Mozilla Firefox. You can inspect, edit, and debug HTML, CSS and JavaScript in any web page you are browsing.

8. Awesome Screenshot: Capture and Annotate

Meanwhile, Awesome Screenshot is a tool where you can, obviously, take screenshots without the need to hit the PrintScreen key and paste it to Paint or Photoshop.

This tool can capture visible part of the browser area or the full page (up to the end of the scroll bar). You also have the option to save it directly as image file (.jpg or .png formats).

No comments:

Post a Comment

Write your comment or message here.

Ads by Google