DesignM.ag » Resources http://designm.ag Articles and Resources for Web Designers Mon, 23 Mar 2015 21:01:36 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 Top UX & UI Tools and Resources That You Should Usehttp://designm.ag/resources/top-ux-ui-tools-and-resources-that-you-should-use/ http://designm.ag/resources/top-ux-ui-tools-and-resources-that-you-should-use/#comments Wed, 04 Mar 2015 16:21:03 +0000 http://designm.ag/?p=119781

Advertise here with BSA


When you take on a web or an app design project, how much thought do you give about the tools you are presently using as opposed to new tools that are constantly coming on the market which could make your work easier and in some cases, more professional looking?The list below offers a cross-section of UX & UI tools and resources that you will find very useful. Most tools feature rapid prototyping capabilities together with real-time sharing and team collaboration. Are you looking for the latest UI resources? Browse this listing to see what may be of use to you, and keep in touch with the latest developments in the UX and UI industry. 

Proto.io

1proto

Advertise here with BSA

]]>

Advertise here with BSA


When you take on a web or an app design project, how much thought do you give about the tools you are presently using as opposed to new tools that are constantly coming on the market which could make your work easier and in some cases, more professional looking?

The list below offers a cross-section of UX & UI tools and resources that you will find very useful. Most tools feature rapid prototyping capabilities together with real-time sharing and team collaboration. Are you looking for the latest UI resources? Browse this listing to see what may be of use to you, and keep in touch with the latest developments in the UX and UI industry.

 

Proto.io

1proto

Proto.io has a number of outstanding features, including the most realistic material design prototype-ready UI library on the market today. With this tool you can show your audience prototypes that have the look and feel of a real app. The latest version is packed with a number of fresh or improved features, including 49 new fully interactive UI elements that support drop shadows, ripple effects, and much more. Continuous click or drag sliders, as well as discrete sliders, have been incorporated into the design, as have animated morphing features and an upgraded color picker.

Adaptive UI elements enable you to create different versions for distinct devices and for any screen size. A new top feature is their offline mode which allows your prototype to be downloaded to your device and to be used anywhere and at any time, without having to worry about internet availability. Coding is not necessary, making this tool a genuine time and labor saver.

 

Pidoco

2pidoco

Pidoco is an especially powerful prototyping tool that can be used to create wireframes, mockups, and prototypes for a number of applications, including mobile applications. Pidoco features smart and real time editing features similar to those found in Google Docs, a template system, spec generator, and more. With Pidoco, it is possible to create prototypes that have the look and feel of what the application under development will really look like. Configurable reactions to your prototype can be triggered by clicks, keyboard, or touch. This tool enables you to collaborate with others by sharing information and through its editing, collecting comments, versioning and issue tracking capabilities. Prototypes can be run on mobile devices with a click of a button, bypassing the need for downloading or generating code.

 

Vonn Mobile Material Design UI Kit  

3Vonn

This Vonn material design UI Kit can be a genuine time saver because of its compatibility with Google’s material design guidelines with respect to style, components, and layout. This kit features 100 1920 x 1080 pixel UI templates organized into 8 categories. Each template has drag and drop functionality. PSD files can be opened using Photoshop CS5+.

Using the drag and drop features of this UI kit make building mobile Android apps as easy as it gets, and the other features incorporated into the kit provide all that is needed to produce some particularly stunning Android apps. This UI kit is especially useful for the Android app designer who is not quite sure how to get started. Vonn will give you the inspiration and the resources you need to create your own original app.

 

AppCooker 

4AppCooker

AppCooker is an advanced prototyping tool that can be used from your iPad. Its principal benefit lies in its ability to streamline the workflow of an App development process to the extent that the time taken from start to finish can be remarkably reduced. Spend less time programming and save money by sharing great apps prototypes first! AppCooker is an ideal tool to test an app idea by designing pixel perfect user interfaces in no time. With AppCooker, it is possible to create prototype designs for all Apple mobile devices.

 

Firefly

5Firefly

Firefly is a design management tool that allows its users to upload graphics, website mockups, app designs, and even website pages for the purpose of collaborating and sharing visuals with others. Using Firefly makes design projects easier to organize and manage. Comments can be added to designs and shared. Furthermore, ideas, issues, and issue resolutions can be shared among collaborators as well. With Firefly, new design versions can be uploaded as changes are being incorporated. Finally, information that is being managed while using Firefly can be accessed through a browser anywhere in the world, making it a highly useful tool for a distributed team.

 

InVision

6InVision

InVision is advertised as being the most powerful prototyping platform in the world. Regardless, this prototyping platform is a delight to use. It covers a design-driven product development program from start to finish. Everything the designer and developer needs are all in one place. Its ability to share information with design and development collaborators is outstanding. InVision is more than a prototyping tool, however. It serves as a project management tool as well, having the ability to review, test, and track progress and changes during a product’s design. Prototyping, task management, and version control; all in one package.

 

Infragistics

7Infragistics

Infragistics is a developer toolkit that enables you to build an application quickly by taking advantage of rapid prototyping. Charts containing thousands of data points can be created and displayed on Android platforms. Interactive data charts are easy to build for use on Windows 8, Windows Phone, and Windows Forms. UI controls, including Silverlight and jQuery allow you to deliver HTML applications across all browsers.  Infragistics eliminates the need for coding when developing or revising your prototypes, saving valuable time in the process.

 

Ace iOS 8 Mobile UI Kit

8Ace

This mobile UI kit is well organized and ready to use for building iOS 8 mobile apps. It features 75 PSD templates, organized into 8 different categories, with 300 UI elements and over 100 diferent icons. Another notable feature of the Ace iOS 8 Mobile UI kit is the inclusion of Noto fonts, the Google family of fonts that cover most of the major languages in the world. Designing an iPhone mobile app has never been easier.

 

FileSquare

9FileSquare

FileSquare enables you to impress your clients with your ability to rapidly click through mockups and collect and store real-time feedback on your design efforts. Its drag and drop feature enables you to drag a screen into the editor’s window for uploading, or to drag on top of an existing screen to replace it. Sketches, wireframes, and complete designs can be linked together, and summaries of design progress are instantly accessible. You can collaborate with anyone at any time, and check your team’s progress at any specific time.

 

iRise

10iRise

iRise enables you to design and deliver better software faster than ever. Its Collaboration Visualization Framework keeps team members in touch with one another so that changes can be reviewed, tracked, and feedback provided during the rapid prototyping process. Collaboration can be done on a global basis in support of the agile development approach this tool supports. Teams can work together in a secure environment, sharing and refining designs without needing to resort to code.

 

MockFlow

11MockFlow

The MockFlow toolkit provides an ideal platform on which an application developer can plan, build, and share work. An app planner assists in planning and organizing a project, and UI concepts can developed with the WireframePro feature. MockFlow enables you to quickly create and publish website pages, create animated banners, and design PDF brochures. You can collaborate and review design efforts with team members, and share comments, ideas, and changes.  WireframePro, the flagship software package, is used by thousands of designers worldwide.

 

PowerMockup

12Powermockup

PowerMockup is an extremely cost effective tool that can be used in conjunction with Microsoft PowerPoint to create wireframes and UIs when developing desktop and mobile apps, as well as websites, using a prototyping approach. PowerMockup is often looked upon as a presentation tool, but it brings much more to the table. The tool adds a stencil library to PowerPoint to enable the latter to build mockups without the use of expensive graphics and design tools.

 

Notism

13Notism

Notism enables you to share design information with others. You can share notes and sketches communicated in video timelines, and review and sign off content where it makes the most sense to do so. This tool enables you to turn static screens into interactive prototypes without the need for any coding whatsoever. Design versions can be uploaded, controlled, and easily switched back and forth enabling feedback in real time.

 

Antetype

14Antetype

The Antetype tool was the first tool built by UI designers for UI designers. It is a genuine time saver for several reasons, and does everything from creating website pages to mobile apps. It is at its best when used in long-running projects as it maintains a large library of widgets that can be used time and again. Antetype can take a loose idea, any quickly refine it into a highly-polished prototype. Antetype is a cost-effective alternative to photo editing apps.

AppSketcher

15AppSketcher

With AppSketcher, you can build prototypes similar to how you build PowerPoint slides. You just drag and drop, and leave time-consuming coding to the designer who does not use a prototyping tool similar to this. You can stick with a wireframe scheme, or spice it up. Most of the common CSS styles are supported, and the prototypes you design can run on any browser. You can embed with Google Maps, a YouTube video as easy as if you were working with a text field.


Advertise here with BSA

]]>
http://designm.ag/resources/top-ux-ui-tools-and-resources-that-you-should-use/feed/ 0
The Best WordPress Classifieds Pluginshttp://designm.ag/resources/the-best-wordpress-classifieds-plugins/ http://designm.ag/resources/the-best-wordpress-classifieds-plugins/#comments Tue, 03 Mar 2015 05:00:33 +0000 http://designm.ag/?p=119769

Advertise here with BSA


Creating a classifieds website or even adding a classifieds section to your existing page is a fast, easy way to make some extra money.However, it wasn’t always this easy. A while back, creating your own classifieds website was a tedious job and, in the end, it wasn’t always worth the hassle. Nowadays there are a number of plugins, tools and resources that will help you create your very own classifieds page in no time. Here’s a list of the best we could find.WPAdverts1

Advertise here with BSA

]]>

Advertise here with BSA


Creating a classifieds website or even adding a classifieds section to your existing page is a fast, easy way to make some extra money.

However, it wasn’t always this easy. A while back, creating your own classifieds website was a tedious job and, in the end, it wasn’t always worth the hassle. Nowadays there are a number of plugins, tools and resources that will help you create your very own classifieds page in no time. Here’s a list of the best we could find.

WPAdverts

1

WPAdverts is a WordPress plugin that will help you create a classifieds website from scratch or add a classifieds section to your existing website easily. All you have to do is get the plugin, run the one-step installer, set up your shortcodes and you’re good to go. WPAdverts works flawlessly with any WordPress theme and it is fully compatible with the latest version of WordPress. It will certainly look good on any website, and it looks great on any bright theme. What’s more, with WPAdverts you will have complete control over what your classifieds website will or won’t do. This plugin has a modular build which basically means you’re getting a bundle of modules that you are free to activate and deactivate as you see fit. This feature gives you unparalleled control over each functionality of your website. WPAdverts can be easily integrated with third party plugins like Yoast SEO, Jetpack and more. It also offers you a range of free addons that will increase functionality and help you create a one of a kind user-experience.  WPAdverts was created by the team behind WPJobBoard and WPHelpDesk and it takes full advantage from their amassed experience. This plugin was written to respect all the best WordPress coding practices and it makes it easy for developers to add their own hooks and filters. It also provides extensive documentation. Last, but not least, WPAdverts offers one of the best support systems around. If you have any issue with your installation, just send them an email and you’ll receive a response in less than 24 hours.

OpenClassifieds

2

OpenClassifieds is an open-source PHP script that helps you create your very own classifieds website. This script provides you with the basic features you need in order to create a fully functional classifieds website: admin management, social integration, responsive layouts and easy payment integration. Being open-source, OpenClassifieds gives you complete access to its entire source–code that you are free to alter in order to make it suit your needs. The admin management features it offers make it easy to both manage your website and moderate all ads posted on it. OpenClassifieds offers you integration with some of the best known payment gateways like Stripe, PayPal, Bitcoin, PayMill and more.

 

ClassifiedEngine

3

Elegant and highly-functional, ClassifiedEngine is the perfect WordPress theme to run your classifieds website on. It was created in order to monetize ads as well as possible, all the while giving your visitors a first-rate user-experience. ClassifiedEngine comes with built-in design tools that will make it easy for you to customize its appearance and always keep it up to date with the current trends. You can play with colour schemes, adaptive colours, layouts and font settings. The admin panel gives you access to all your theme settings like website title, description, social links and more. ClassifiedEngine also provides a diverse array of features like PayPal Express, Ad Roll, Ad Alert, Ad Map and more.

ClassiCraft

4

Created with usability and functionality in mind, ClassiCraft is a WordPress theme that is robust and flexible and will make your classifieds website look great effortlessly. ClassiCraft is fully responsive, comes with eight unique design styles, offers two list view options and gives you full control over your ads. ClassiCraft comes with a built-in lead captures system for ads and an easy to use ad submission payment system that will make it easier for you to collect revenue.

ClassiAds

5

ClassiAds is well-documented, fully Google Map integrated, offers unlimited colours, custom fields for each category, frontend user panel and more. In summary, it is one of the best classifieds WordPress themes available anywhere. This theme gives you unparalleled control over every aspect of your website. You have control over enabling free ads, which type of list view you prefer, what categories you show, choosing the way your admin view looks, managing pricing manually and more. The team at ClassiAds worked very hard in order to provide their customers with everything they needed and they continue to do so. ClassiAds has one of the best support systems for any WordPress theme and any issue you might have, they are more than capable to help you resolve it.

Yclas

6

Yclas is a tool that helps both professionals and beginners alike set up their classifieds website. Creating your website on this platform is as easy as introducing your website’s name and your email address and clicking on “I’m ready.”. After this, you will have a classifieds website at your disposal that you can customize as you see fit. You’ll have a varied array of features designed especially by Yclas for classifieds websites to choose from. You can create categories, locations, set up payment gateways, custom fields and more. You’ll also get access to your website’s design in order to alter it in order to suit your needs.

SOFA Front Post

7

SOFA Front Post is a WordPress plugin by Sofarider that is aimed at classifieds websites. It will provide you with all your basic needs in order to get your website up and running as fast as possible. SOFA can be integrated in any theme, gives you access to an array of Custom Widgets and shortcodes, and is fully integrated with GoogleMaps. With SOFA Front Post you’ll be able to easily control your content as every ad must first be revised by an administrator, your sponsored ads will always be listed and you can configure the period for which your ads are available.

Another WordPress Classifieds Plugin

8

Another WordPress Classifieds Plugin has long been one of the favorite plugins for creating a classifieds website. It came out approximately two years ago and quickly produced a stable, reliable build version that encompasses all the basic needs of a classifieds website. This plugin offers great features for admin users, like easy moderation of posts, provides integration with PayPal and 2Checkout as well as giving you a first-rate security system. What’s more, it gives you control over HTML use in your ads. In case you need any extra addons or features that aren’t comprised in the standard download, you can purchase them straight from Another WordPress Classifieds Plugin’s website.

Osclass

9

Osclass is an open-source script that helps you create your very own classifieds website. Using this script you will have a classifieds website that can run real estate, jobs or car ads in no time and will be available in 5 different languages. Installing Osclass is a simple process: you download their latest build from their website, you upload it to your hosting, access the installer through your browser and follow the instructions. That’s it. At the end of that process you’ll be the owner of a fully functional website. What’s more, you can then customize it as you see fit by choosing from the templates and plugins available on Osclass.

 


Advertise here with BSA

]]>
http://designm.ag/resources/the-best-wordpress-classifieds-plugins/feed/ 0
15 Platforms and Tools that Will Help You Build Killer Websites in 2015http://designm.ag/resources/15-platforms-and-tools-that-will-help-you-build-killer-websites-in-2015/ http://designm.ag/resources/15-platforms-and-tools-that-will-help-you-build-killer-websites-in-2015/#comments Wed, 04 Feb 2015 23:39:51 +0000 http://designm.ag/?p=119695

Advertise here with BSA


There’s nothing you *can’t* do once you set your mind to it. Every creative knows this. How many client projects have you aced so far? That’s nothing compared to what you stand to achieve from now on.Glory is just around the corner: 2015 is setting out to be a lucrative year for web designers. Be ready for it. Find the ideal website building platform, CMS, or WordPress plugin, and stick to it.To get you started on your 2015 Design Odyssey, we rounded up 15 of the industry’s leading tools and platforms in one place. The pleasure of discovering the most suitable options is all yours. 

Webydo

1-webydo

Advertise here with BSA

]]>

Advertise here with BSA


There’s nothing you *can’t* do once you set your mind to it. Every creative knows this. How many client projects have you aced so far? That’s nothing compared to what you stand to achieve from now on.

Glory is just around the corner: 2015 is setting out to be a lucrative year for web designers. Be ready for it. Find the ideal website building platform, CMS, or WordPress plugin, and stick to it.

To get you started on your 2015 Design Odyssey, we rounded up 15 of the industry’s leading tools and platforms in one place. The pleasure of discovering the most suitable options is all yours.

 

Webydo

1-webydo

Webydo is a web design canvas, made for designers. Actually, it’s a professional website design platform that empowers graphic and web designers to create and manage pixel-perfect responsive websites for their clients, completely code-free.

Led by a community of over 120K professional designers, design studios and agencies, Webydo enacts a radically democratic process for its roadmap. Webydoers constantly recommend new advanced features and vote on the community’s suggestions, with the most popular being developed and added to the platform.

Webydo helps creative professionals concentrate on what is most important – the creative element of web building. With features like a built-in CMS, a full white label solution and personal support, designers can truly build their web design empire.

It’s intuitive drag and drop interface allows you to fully express your creativity in high definition, down to the individual pixel. You can create responsive, dynamic, and stunning websites all while working with a UI that corresponds to other graphic design tools with which you’re already familiar, such as Photoshop.

 

Visual Composer

2-visualcomposer

If you’re like most web designers, you’re more than accustomed to WordPress. But let’s face it, it’s not a perfect platform. At least, it wasn’t very good until plugins for better page building stepped into the picture. If you take the classic page editor and compare it to Visual Composer, it seems like a fossil from the Jurassic era.

Since you can now create a complex page layout with easy drag-and-drop functionality, non-visual builders are used less and less. For only $28, you get 40+ elements to move in either Front end or Back end. So it’s a matter of minutes versus hours. 500K websites have so far been created with Visual Composer. In 2015, that number will grow exponentially.

 

Qards

3-qards

There are so many tools out there that simplify your work. Take redesigns, for instance. Every website needs reconditioning from time to time. You don’t get a timeless website by creating something brilliant, and then leave it to its own devices. You get a timeless website by tweaking it regularly. For WordPress websites, you can use Qards.

It doesn’t matter what theme you have. Work with this fully compatible page building plugin to either create a new website, or to change an existing one. It’s a lot easier than getting a whole other theme and learning your way around it. Not to mention that you never write code. Edit cards in-line and add content in the visual environment provided by Qards.

 

Sidengo

4-sidengo

For the times when you don’t have anything to do with WordPress, you can always work with other platforms. Sidengo is easy to use. You can just choose a template. And if you want to change it, change it. Don’t worry about your website design breaking, or anything like that.

 

IM Creator

5-imcreator

If possible, Im Creator is even easier to use. It’s so simple and matter-of-factly, that even your grandfather can learn how to make a website and show everyone what nice yellow tulips he’s grown in the back yard. A user can scan through template categories and choose one that fits their purpose. Designers pick a template, or a clean canvas, and start working towards their goal. Im Creator’s in-browser studio is very easy to grasp. On second thought, why don’t you test it out? No need to register for that.

 

Zoho

6-zoho

You can find a great website builder over at Zoho, as well. It’s impressive how many good-looking themes they stacked in the vaults. Apart from that, you have the option to create several page versions. Feel free to save the ones you choose not to publish, for later reference.

 

SnackWebsites

7-snackwebsites

As we continue on a similar note, there are other website building platforms that may interest you this year. We know for a fact that SnackWebsites is one of the most useful platforms around. It’s quick, it’s easy, and it enables even absolute beginners to make websites and use their own domain for free.

 

Themify Builder

8-themifybuilder

Ever worked with one of the gems from Themify to create a WordPress website? If you had the pleasure of using one of their themes, then you must have noticed that the page building process went very smoothly. That is owed to the module system behind Themify Builder. Whether you get one of these themes, or purchase the plugin separately, this page builder has every you could possibly need to give shape to beautiful client websites.

 

MotoPress Editor

9-motopress-content-editor-wordpress3.jpg

Naturally, you want to see whether what you’re doing looks good or not. And you want to get that bird’s eye view over your website design with the least amount of hassle; no switching back and forth on your WordPress dashboard. Thankfully, the best page builders give you a live preview function in Front end. You find that with the MotoPress content editor, and you also find it easy to create more motion design for your end users. Give your website a video or parallax background using MotoPress.

 

AllYou.net

10-allyou

Do you suffer from the Crazy Schedule Syndrome and find it difficult to squeeze in a little work for your own benefit? You know you want to have an awesome design portfolio, to but that website won’t build itself by magic. Try for AllYou, and set up your creative portfolio in a jiffy. This brand-savvy builder gives you many options in terms of web fonts, so you can build you brand image more effectively.

 

Onepager

11-onepagerapp

It’s common knowledge that one-page websites are infinitely more accessible. For starters, they’re easier to navigate and mobile-friendly. End users who use a smartphone or a tablet find everything they need know by swiping down, and they don’t have to wait for other category pages to load. Use Onepager and craft simple websites.

 

Portfoliobox

12-portfoliobox

Now for a website building platform that doesn’t confine you to any theme. Portfoliobox breaks out of the standard model, by giving you a different route to come by gorgeous online portfolios. Simply choose any style for any page, and then piece pages together as if you were playing lego.

 

Strikingly

13-strikingly

A little earlier we mentioned one-page websites and how well they complement this mobile age. Another great builder that’s perfect for this category of projects is Strikingly. And it doesn’t just make one-pagers. All in all, the upper limit for how much time you spend with the editor is half an hour.

 

Surreal CMS

14-surrealcms

One of the biggest problems you face after your client’s website goes live, is how to let the owner edit content areas without messing up your design. In an ideal situation, you decide exactly what sections can be meddled with, and also track every change so you can undo it if anything goes wrong. All that is possible with Surreal CMS.

 

Ether Builder

15-ether

The last page builder you need to know about is a brilliant WordPress plugin named Ether Builder. It’s compatible with all valid themes, and gives you free reign to create any sort of layouts with a wide variety of widgets. You have 40 widgets to begin with, but the widget database is extendable.

 

Conclusion

Did you spot your favorite website builder platform or tool in this list? It wouldn’t surprise us if you did! Most of these website building platforms and tools stood out over time precisely because web designers used them to great success. For lots and lots of client projects. Notice how the best of them are geniuses of compression. Choose well, and you end up building client websites in a hassle-free environment.


Advertise here with BSA

]]>
http://designm.ag/resources/15-platforms-and-tools-that-will-help-you-build-killer-websites-in-2015/feed/ 0
Best Debugging Tools & Resources for Testing Website Layoutshttp://designm.ag/resources/best-debugging-tools-resources-for-websites/ http://designm.ag/resources/best-debugging-tools-resources-for-websites/#comments Tue, 20 Jan 2015 18:52:04 +0000 http://designm.ag/?p=118904

Advertise here with BSA


Once a website reaches the stage where its coded and running in a browser the project is almost complete. Party time? Not yet Wayne, because after expelling that heavy sigh of relief you'll realize there are likely a few missteps or slight errors in the code. It never hurts to debug areas of your HTML, CSS, or JavaScript to ensure full compatibility with all browsers and screen sizes.

geek stuff android iphone smartphone

This article will focus on some handy tools you can use for testing freshly-minted layouts. Modern standards of HTML5 and CSS3 have allowed for greater control over rendering and layout styles. But support for older browsers has been waning in recent years. As a developer you need to decide which browsers are worth supporting and how much effort you'll put into debugging potential issues.


Advertise here with BSA

]]>

Advertise here with BSA


Once a website reaches the stage where its coded and running in a browser the project is almost complete. Party time? Not yet Wayne, because after expelling that heavy sigh of relief you’ll realize there are likely a few missteps or slight errors in the code. It never hurts to debug areas of your HTML, CSS, or JavaScript to ensure full compatibility with all browsers and screen sizes.

geek stuff android iphone smartphone

This article will focus on some handy tools you can use for testing freshly-minted layouts. Modern standards of HTML5 and CSS3 have allowed for greater control over rendering and layout styles. But support for older browsers has been waning in recent years. As a developer you need to decide which browsers are worth supporting and how much effort you’ll put into debugging potential issues.

Code Validation

Although this process isn’t always required there’s no downside to validating your code. HTML5 and CSS3 have specifications that should be followed to ensure standards-compliant code. This establishes some trust that your page will render properly in all modern browsers.

The W3 Validator is a common tool which can check the code of any live website. There is also a CSS Validator made specifically for CSS stylesheets. Since web standards are put out by the W3C I’d say they’re a trustworthy resource.

html5 w3 validator website

Otherwise you might try a quicker solution and use browser extensions. Validity for Chrome is a free option which checks HTML content on any webpage. There are other choices for Firefox and Opera which are also free to download. The process only takes a few seconds and it will help you locate obscure hiccups in your code.

Responsive Design

Obviously mobile smartphones have taken the World Wide Web in a completely new direction. Designers are now creating websites that adapt naturally to any screen size. CSS3 has made the process easier but it’s still a bushel of work.

Thankfully there are online webapps to help web designers check responsive states of individual layouts. Responsive Test is one such webapp that lets you resize the window to any width of your choosing. In the corner you can also choose between preset resolutions for common devices like tablets, laptops, and smartphones.

responsive test website webapp dynamic

Another cool webapp Responsinator offers device-specific solutions. You can load any webpage into the device windows and they should render as expected. Designing for mobile can be tough when you’re trying to match a laundry list of devices that you don’t even own. Thankfully this handy little tool can help.

Classic Browser Support

Very few people are still running Internet Explorer 6, but somewhere in the caves of Nepal they do exist. Just a decade ago this was a very common problem amongst web designers who needed to support the widest audience possible. Thankfully Microsoft has come a long way since those days but even recent versions of IE have dealt with a fair share of criticism.

The latest version IE11 is much more reliable than previous releases. But unfortunately there are many Windows users who rarely update or just stick with what they got right out of the box. This means a wide collection of users browsing on IE10, IE9, and even down to IE7. Granted the number of users running IE7 is small, but still noticeable.

An online webapp IE NetRenderer is somewhat new but offers a choice for all the older and newer versions. This website could also be useful to developers who only have access to computers running Mac OS X.

ie internet explorer tab extension browser

If you’d prefer a browser plugin might I recommend IE Tab? It’s been released for both Chrome and Firefox with a large assortment of options to choose from. The whole project is open source and has garnered support from a small community of developers. Great choice for anyone who wants to test IE rendering for local HTML files instead of websites already online.

CSS & JS Debugging

Aside from rendering HTML pages you also have to worry about the rendering of CSS styles and JavaScript in different browsers. These are separate items altogether but they share a similar process of debugging after the initial development.

CSS Lint and JS Lint are free tools for debugging your code. You might also try using the browser console window but this isn’t always a great solution. These online linting tools will offer helpful advice about which lines of code are causing problems, possible duplicate lines, or generally incorrect syntax.

After you’ve checked for bugs and you know the code is ready for production it might also be worth minifying the files. CSS and JS code is often separated from the HTML into external files which are included in the main document. By minifying & reducing the amount of whitespace it makes the file sizes smaller and quicker to load.

Of course it would be ridiculous to go through every file and delete each empty character one-by-one. There are tools like JSCompress and Clean CSS which can perform this process automatically. Just remember that it’s a lot tougher to edit code that’s been compressed so you should try to keep two separate versions if possible. Save the original for future edits but use the compressed version live on the web.

Final Thoughts

If you were writing a for-profit dissertation you wouldn’t write the first draft and call it finished right? Well maybe you would, but don’t expect to find that piece in any scientific journals. I feel the rule of editing written documents also applies to editing coded websites. You are looking for mistakes but you’re also looking for ways to improve the code.

I hope these tools will provide a reliable post-development validation process for web developers. Nobody ever said it would be easy to build a website – but there are some logical steps you can follow to make the process a whole lot smoother.


Advertise here with BSA

]]>
http://designm.ag/resources/best-debugging-tools-resources-for-websites/feed/ 0