3 Web Design Tools You Should Know About

December 9, 2012 5 Comments by Aziz Kamara


Creating effective and efficient landing pages can be an endless pursuit to marketers who want to get an edge on the competition. The problem is, not every marketer is an expert at coding. Luckily, there’s been enough of a demand for web page development that a multitude of apps have been created so that even those who have never before worked with html can create simple landing pages with utmost ease. In previous posts detailing how to create landing pages, we provided a few techniques utilizing Adobe’s Dreamweaver web development app.

Those tutorials became really helpful to a lot of people, so we decided that in this post we were going to introduce some other apps you can use to create effective landing pages quickly and easily.

Bootstrap Web Design Tools

Bootstrap by Twitter

Twitter’s Bootstrap toolkit was first released a little over a year ago to make creation of apps and websites easier for developers. Bootstrap was created with modern browsers in mind. So, it works very well with all the modern versions of Chrome, Firefox, Safari, Opera and Internet Explorer.

With this toolkit, all you need to do to create quality elements is to download Bootstrap then just link the style sheets and JavaScript to your html page and you can get started on creating quality landing pages.

From containing style sheets that will help you create forms and navigation bars and a design that will allow you to make more responsive landing pages based on display sizes, to JavaScript plugins that remove a bulk of the complications that accompany modals, popovers, and carousels bootstrap is incredibly useful when it comes to creating quality squeeze pages for a wide array of offers for products and services.

Bootstrap includes such a wide array of features and elements that it would take a series of posts to thoroughly explain them all; and while a tutorial series on Bootstrap may be something we create in the future, for the time being, you can check out what’s currently available at Bootstrap’s Home Page. There, you’ll find a brief overview of all of the elements which they’ve developed as well as updates on any features they’ve added along the way.

However, for anyone who isn’t all that acquainted with integrating different style sheets and plugins into their own pages, there are a couple of apps available that take the hassle and guesswork out of using bootstrap and creates a visual representation of the code you want to use with a drag-and-drop design layout.

In-browser Web Design Tools Using Bootstrap

The first web design tool I wanted to highlight is called Easel. With a free trial membership, you can create and edit your own Bootstrap-backed landing pages. The layout lets you drag and drop various Bootstrap elements into the landing page you wish to create. After dropping in the elements of your choice, you can expand and collapse containers, buttons, and other bootstrap elements with just a click and drag of your mouse. Once you’ve created your landing page in Easel, you can then choose to download the entire html file and style sheet or pick and select individual elements you’ve created and download them accordingly. There are other features included in Easel which allow you to create, manage, and share projects with other developers. This feature however is not part of the free membership. It is perhaps for the more advanced developer anyway. Additionally, it will more than likely not be necessary for your landing pages or squeeze pages.

The next tool that allows you to design landing pages using Twitter Bootstrap elements is called Jetstrap. Jetstrap beta is free to use and includes many of the same features and elements that Easel provides. Jetstrap is incredibly useful because if you wish to change any elements that you’ve dragged into the editing area, you can chose to inspect the CSS and HTML created by Jetstrap file with ease.

How This May Help You

One thing has always remained true in my experience in this space: nothing is absolute. Many people will tell you that when it comes to online marketing, ugly works. This has been proven to be true countless times over. No one can really explain why this happens. My guess, however, is that for a lot of people, ugly means simple and simple means trustworthy. But great looking landing pages can be trustworthy, too. That said, not every offer can be properly promoted with ugly landing pages. While keeping things simple, landing pages with greater quality can instill trust and confidence by simply looking more legitimate. Creating well-designed landing pages shouldn’t have to be complicated and the above tools will help you do just that.

  • http://www.rlyb.com/ Brett Warner

    Awesome stuff. I’ve been meaning to mess around with bootstrap for a while now and hadn’t thought to use it for quick landing pages.

    • http://www.ipyxel.com/ Aziz Kamara

      Yeah! We’ll be doing a quick tutorial post on some key features within these apps that will help to create some landing pages soon. You’ll have to check it out and see if it give you any ideas of your own from it!

  • Pingback: Using Easel to Create Landing Pages With Ease! | iPyxel Creations | Demand-side performance marketing software and digital marketing insights

  • blackgoo

    wrong link to Jetstrap. i guess the website is jetstrap.com

    • http://www.ipyxel.com/ Aziz Kamara

      You’re right! It should be fixed now