Help, I Need to Prototype Forms in HTML5

by admin on May 6, 2013

Dreaded forms? Feel like you’re looking the barrel of a gun? Want to impress your boss? Don’t worry, bootstrap is here to help. Actually forms aren’t that difficult when you know which tools to get the job done— since there are a plethora of resources on the internets , let’s take a closer look at how you can simplify your workflow and use the right libraries and tools to rapidly design and extend your forms. Although this post is not a tutorial it would be wise to use a front end framework that supports responsiveness as there are many of devices out there that support the full web.

Forms UI / UX

If you’re not using Bootstrap then you should be for rapid development and to keep yourself sane when styling form elements for different browsers. Of course not to mention the responsive features that are built in. Alternatively you can try using Formalize.me by Nathan Smith or style your own form elements using CSS or Javascript.

{ Comments on this entry are closed }

Code Snippet: Pakistani Cities in Select Box

by admin on April 18, 2013

I’ve been working with forms these days and was looking for all the major cities in Pakistan in a select field. Obviously I went straight to Google and searched for a quick copy and paste. To my amazement I couldn’t find anything, nada, nunca, zilp, zich.

All I could find were the major cities and those too not in alphabetical order. Actually I found one in alphabetical order, however there was the issue of them being all capitalized. Anyway I went ahead did the grunt work myself.

If you’re a dev looking for something like this, well here it is. Just toggle the line wrap in the code editor below then copy and paste :-)

 

{ Comments on this entry are closed }

Web Flow — Visually Build Responsive Websites

by admin on March 21, 2013

Adobe has been trying to abstract the complexity of web design for a number of years now. WebFlow, founded by two brothers Vlad and Sergie Magdalin based in Mountain View California is a fantastic tool to help would be web / mobile designers create visually appealing websites without writing a single line of code.

Web Flow

The UI is especially gorgeous and Adobe-esque:

Webflow UI

A quote from an article on Venture Beat Magdalin says:

There are lots of recent startups (and Adobe, of course) that are trying to abstract away some of the the complexity behind web design,” said Magdalin.

As far as I know, we are the first (and only?) visual tool to focus very strongly on abstracting away some of the core concepts behind CSS, namely selectors and cascading. These are pretty hard concepts to pick up at first, and are not as easy as just dragging-and-dropping something, but are insanely powerful because they mimic the process of people who are fluent in CSS.

This is a fantastic web tool, the first of it’s kind and boasts tons of features including:

  • Create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.
  • Webflow aims to make the full power of CSS3 available in a straightfoward visual interface. This means no compromises as you craft your unique designs.
  • Tweak your design for all screen sizes.
  • Style whatever, however you’d like.

For those who have hit the design chasm the best feature is that you can create clean code without writing a single line with the export feature. I have never seen anything like it on the web before, it truly is a unique web application and well worth a blog post.

With each passing day we see more and more web applications appear and the browser is becoming the OS for them. Very exciting stuff!

 

{ Comments on this entry are closed }

← Previous Entries