Thursday, January 16, 2014

Easy Bootstrap 3 based responsive web design using drag drop

Designing responsive web sites and user interfaces, which adjust their layouts and sizes depending on the device on which the website is being used, is all the rage now.

Twitter bootstrap is the most popular framework for designing responsive websites. Bootstrap primarily uses CSS3, javascript, jquery and most importantly media queries to make a website responsive.

But having to add all the botostrap css classes by-hand is quite painful and makes developers who are not designers cringe. Just when HTML/CSS builder tools were becoming easy to use, comes this little twist of using bootstrap responsive css classes all over html markup.

Well, just found this little website, http://www.layoutit.com, which allows developers to quickly build basic skeletons of bootstrap 3 based components, using drag and drop, instead of hand coding.

I use it to quickly build a basic responsive page markup, then paste it in my IDE and fine-tune it from there on.

This has definitely taken the pain out of remembering and putting in bootstrap class names by hand.

Do check it out.

This is a good convenience till more sophisticated and free tools for building responsive UIs come up in the market.

8 comments:

Unknown said...

Awesome! Thank you for sharing. I'm trying to enhance my current blog website, and as advised by a local SEO AZ company, I should try learning more about responsive web design. Alas, reading and learning is different from actual implementation. So I hope I understand the tips here clearly. Thanks again!

Responsive Web Design Companies said...

The major benefits of selecting responsive website design is create the effective website with attractive designs and eye catching colours.
Responsive Web Design Companies | Web Designing Company Bangalore

web design companies said...

Responsive web designer should make a unique design for the web page and that web page should be impressed to who are visiting that web page.
Web Design Company | Web Designing Bangalore

Anonymous said...

This constantly amazes me just how blog owners such as your self can find the time as well as the dedication to keep on crafting superb blog posts. Your website is good and one of my personal must read weblogs. I just had to thank you.
Professional Web Design Company

Web Development Indore said...

The ideas and information provided in the blog was really interesting. Keep sharing information like this.
Responsive Web Design Indore

Cado Magenge said...

Nice and useful. Thanks. Very informative and nice blog. I will surely stay tuned

Unknown said...

Wow is just the simple word that may explain that how much I liked it. It was nicely stuffed with the material I was looking for. It’s great to be here though by chance.
utah professional web design

Robert said...

Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. front end developers