Best Non-Web-Based Wireframe Tools for web designers

Wireframes are a simple yet effective way to plan and prototype the layout of a website before writing any code. They help structure ideas and test assumptions, and are great for facilitating early feedback from clients. That’s why, over the past few years, wireframing has become an integral part of web design and web development. Therefore, the question is not whether to create wireframes, but rather how.

Although there are dozens of web-based wireframe tools available, I prefer to do my wireframing in a native desktop application for the following reasons:

• I can work offline at places with poor or no internet connection, e.g. when riding the train or a plane.
• I am not dependent on someone else to take good care of their servers.
• I prefer to pay a one-time fee instead of monthly subscription charges.
• I have the freedom of knowing that I can continue using the tool even if its vendor goes out of business tomorrow.

In this article, I will introduce you to seven desktop-based wireframing tools for Windows, Mac OS X or Linux.

Non-Web-Based Wireframe Tools

WireframeSketcher
WireframeSketcher can be installed as a plug-in for any Eclipse-based IDE and is also available as a standalone application for Windows, Mac OS X and Linux. It lets you choose between two different styles for the look of your wireframes: Sketch (to make wireframes appear hand-drawn) and Clean (with crisp, straight lines). Other major features include the ability to create interactive prototypes and the possibility to present wireframes as storyboards.

WireframeSketcher can be tested for 14 days without restrictions; afterward, you have to pay $99 for a single-user license.

PowerMockup
PowerMockup is an add-on for turning Microsoft PowerPoint into a wireframe tool. It provides a library of wireframe elements and icons that you can drag and drop onto a PowerPoint slide. You can also create your own elements using standard PowerPoint shapes and add them to the library.

PowerMockup works with PowerPoint 2007 and 2010 (Windows only) and can be tested as a trial version free of charge. The full version is priced at $39.95.

SketchFlow
Another wireframing solution for Windows only is SketchFlow, a UI prototyping tool provided by Microsoft as part of its Expression Studio suite. While SketchFlow is a little complicated to use and has a rather steep learning curve, it is extremely powerful when it comes to creating interactive prototypes that simulate real functionality. You can bind controls to data sources or even make use of the .NET Framework for adding application behavior.

Expression Studio 4 Ultimate, which includes SketchFlow, costs $599. A 60-day free trial version can be downloaded from the Microsoft website.

Axure RP
Axure RP is one of the oldest and most comprehensive prototyping solutions available. It supports the whole chain from drawing quick wireframe sketches to creating interactive, high-fidelity design prototypes and generating detailed specifications.

Axure RP is available for Windows and Max OS X. To try it out, you can download a 30-day trial version from the Axure RP website. A single-user license for Axure RP costs $589.

Pencil
Among the seven tools listed in this article, Pencil is the only one that’s completely free and Open Source. It can be installed as a Firefox add-on or as a standalone application for Windows, Mac OS X or Linux. Pencil is easy to use, includes a large set of stencils, supports linking between pages, can export to various formats, and allows you to create your own personal collection of stencils.

As mentioned before, Pencil is free (released under GPL version 2). Don’t hesitate to give it a try.

MockupScreens
By default, MockupScreens uses a Windows XP style for the screen prototypes that you create. This makes them look a bit outdated at first, but you can easily switch to a different skin via a drop-down menu in the toolbar. Compared to other wireframing tools, MockupScreens provides a relatively small number of basic user interface elements and icons. Two great features of this tool are its ability to annotate individual elements and the possibility to group and arrange screens in scenarios.

MockupScreens is available for both Windows and Mac OS X. The price for the full version is $99.95.

DesignerVista
DesignerVista allows you to create both low-fidelity wireframes and high-fidelity GUI mockups. It supports page templates and themes, can export to HTML and PDF, has a slide show feature, and is able to generate UI specification documents.

DesignerVista runs on Windows XP or higher and is priced at $79.99 per license. A free 20-day trial version is available for download at the DesignerVista website.

Read More

Top Free Tools for Testing Website Speed for web designers

Your Website speed should not  be undetermined , particularly it has a big impact on SEO. To get out of this, we have made a collection of free website speed testing tools to test you website speed. These tools will help you to optimize your website and make some suggestion to increase your website speed by reducing the website load, so let’s start your website testing by these tools so that you can get the best solutions.

PageSpeed Insights

PageSpeed Online analyzes the content of a web page, then generates suggestions to make that page faster.

Load Impact

Load test your website online, we offer load testing and reporting as an online service to e-commerce & B2B sites all over the world.

Neustar Web Performance

A quick and easy way to get performance data on any website without having to create a test script.

WebPagetest

Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more.

OctaGate SiteTimer

pingdom

Which Loads Faster

Pages compete head-to-head in your browser to see who’s fastest!

Show Slow

Show Slow is an open source tool that helps monitor various website performance metrics over time. It captures the results of YSlow, Page Speed, WebPageTest and dynaTrace AJAX Edition rankings and graphs them, to help you understand how various changes to your site affect its performance.

Read More

Top Online Tools for Website Validation and Testing

1.W3C markup validation service

This validator checks the markup validity  of Web documents in HTML, XHTML, SMIL, MathML, etc. This is an exclusive standards check for the document, so other checks are not available.

Checks done on:

1. Syntax and style analysis – Yes
2. Source code – Yes

2.CSS validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.The important thing is if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Checklink

Check links and anchors in Web pages or full Web sites.This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup and CSS.

4.Feed

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.You can validate by URL or Validate by direct input.

5.Mobile checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests. And find Is your Web site mobile-friendly?

6.Unicorn

Checks your site for all the general standards and see if there are rooms to improvement. It checks for the XHTML and CSS compatibility.

7.HTML Validator

The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases.

8.Dr. Watson’s site validation check

Dr. Watson is a free service to analyze your web page on the Internet. Just give the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. It rolls many features into one, so if you are looking for a single stop for checks, this one is the place to be.

List of checks :

1. Page load time check – Yes
2. Syntax and style analysis – Yes
3. Word counts – Yes
4. Spelling checks – Yes
5. Link checking – Yes
6. Search Engine Optimization check – Yes
7. Incoming links check – Yes
8. Source code – Yes

9.XML well checker and validator

Use this form to check an XML document for well-formetness and (optionally) validity. External entity references are included, even when not validating.It checks for spaces and syntax errors, while pointing to the line number at which the error was spotted.

10.Robots checker

This tool checks if your Robots.txt file is valid. Thought it may show some exclusions you’ve done as errors, they are good pointers to check if the commands will be misinterpreted or not. Good one and it is simple,powerful and accurate one.

11.URL checker

While it’s important to know if your website is running and your host is providing a good service, it’s even more important to be proactive about getting it back online fast so you don’t lose search engine position, miss out on possible revenue or blow.InternetSupervision™ is a service that monitors the availability of HTML, FTP, SMTP, POP3 email servers), supervises the performance of website and e-commerce transactions (including website forms) and provides website content supervision (cyber-attack monitoring).

11.1.Web page reports

There are various online services offering automated web page checks. pinkjuice.com/check is just a simple tool generating links to the report pages of some of those services, including emulators, validators, and accessibility checkers.And it’s handy to have a list of all the results pages, for example when sending a status report to a client about a website that’s being worked on.

Accessibility and evaluation tools

12.Webaccessibility checker

This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

13.Color contrast

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. AccessColor will find the relevant color combination within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each color combination.

14.Web accessibily evaluation tool-WAVE

WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

15.FAE – Functional Accessibility Evaluator

Use this tool to evaluate the functional accessibility of a single web page. It evaluate multiple pages via web crawling,Generate a Sitewide Report that identifies problem pages,Save reports in an account-specific Archived Reports list.

16.Accessibility with style

HERA is a tool to check the accessibility of Web pages according to the specification Web Content Accessibility Guidelines. HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification.

17.Section 508

The Section 508 checking tool automatically compares your HTML code against Section 508 checklist and shows your results quickly.  Results are simple to understand too.

18.Adobe PDF conversion

This conversion service will convert to text Adobe PDF files that are in English.By submitting content through these tools, you understand and agree that Adobe may occasionally access the content you submit for purposes of quality control and administration of the conversion service.

Website performance checkers

19.Pingdom tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser.The load time of all objects is shown visually with time bars.

20.Webpage analyzer

Free web site speed test to improve website performance.The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time

Cross Browser Testing

21.Browser shots

Browsershots makes screen shots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.

22.IE net renderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high-speed data center located in Germany.

23.Viewlike

viewlike allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP so no need to download anything! To Get started just type your URL in the box above. Free to use!

Read More

10 Best Free Tools to Check Website Loading Time

Everyone knows how annoying it can be having to deal with websites that take forever to load. As per some recent researches, almost 75% of the Internet users do not return to sites that take longer than four seconds to load. A Fast loading website is the first step to a successful online presence, but you will be surprised how many scripts and widgets may be slowing your site to a crawl.

10 Free Tools to Check the Website Loading Time

1. iWebTool Speed Test
- Simple tool to test your website’s loading time and compare with other websites. great tool for benchmarking. It allows you to enter up to 10 websites, and the results display the size of the website, the total loading time and the average speed per KB.

2. Pingdom Tools
- Pingdom is a popular uptime performance monitoring service for websites and servers. They also host a free load time test for web pages. The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes) and displays the load time of all objects visually with time bars. Also see the statistics like the total number of objects, total load time, and size including all objects.

3. Internet Supervision Webserver Monitoring Tool
- InternetSupervision.com monitors the availability, performance, and content of your website, web server and internet services from across the globe. If you ever wanted to know how much time it takes to load your website from different locations in the world, this is the tool for you.

4. Webslug Loading Time Test
- Webslug measures load time as the user sees it. The time it takes for a page to load fully from when the request was made. The main benefit of Webslug is that it doesn’t require any download or any program to be installed. Just enter your website’s address and it’s all done in your browser.

5. OctaGate Site Timer
- Very similar to Pingdom Tools

6. Site-Perf.com
- Though this looks similar to Pingdom tool, it goes a step further by letting you decide the test server location and Max threads per host value. Very good and very accurate!

7. LinkVendor Website Speed Check

- The website speedtester shows the duration of a given website. This value can be used for showing how long a website take to load and if it is better to optimize the website or change a (slow) ISP.

8. Website Optimization – Web Page analyzer

- The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates the latest best practices from Website Optimization Secrets, web page size guidelines and trends, and web site optimization techniques into its recommendations.

9. Uptrends Web Page test tool

- The full page test tool allows you to test the load time and speed of a complete HTML page of your website, including all objects such as images, frames, CSS stylesheets, Flash objects, RSS feeds, and Javascript files. The full HTML page test tool will analyze the page and download all the objects, displaying the corresponding load times, the object sizes, and which objects are missing, including content from third party suppliers such as advertisements. With the full HTML page test tool you will be able to analyze in detail which object slows down your web page, and how to optimize your website. The load time of all objects is visualized with time bars.

10. WebWait

- WebWait is a website timer. You can benchmark your website or test the speed of your web connection. Timing is accurate because WebWait pulls down the entire website into your browser, so it takes into account Ajax/Javascript processing and image loading which other tools ignore.

Read More