As a software developer I am not much of a web designer. Sure I can create a functional website from scratch. It will have all the basic things a normal website would have: a header, navigation bar, main content, and anything else the user wants. Unfortunately, although functional, it won’t be the most eye pleasing design. This isn’t because I didn’t work hard on it or just threw things together but because a well-designed website takes time and skill. Designing a website to look eye pleasing takes a different skill set than what is required for the normal software developer. It must have a nice font, the colors should seamlessly go together, and spacing between things must be taken into consideration as to not overwhelm a single area and make the page look uneven, etc. Some argue that it is close to an art (which could explain why the prerequisite for the user interface classes at my college were art classes.) Luckily for the developers who don’t have a large background in the art side of things there are open frameworks like Bootstrap.
I’ve used Bootstrap before and when I was tasked with updating our Paystub Viewer product (pictured below); I knew it would be a good fit. The task was to update the design of the site to make it more eye pleasing as well as functional on mobile platforms. These are two things that although could be done, would be rather time consuming to do, but I knew Bootstrap (out of the box) could accomplish both of these things. Why spend hours and the customers money rewriting what hundreds of other people have worked hard to make and provide free of charge to the rest of the world?
Once I decided that Bootstrap was the right choice, the next step was the layout of the site. Bootstrap follows a simple grid system, which makes it easy to draw the layout of the site until you have the it exactly the way you want. Then, you can transform that design to HTML. Once the layout was past the design phase, I started coding. In a “built from scratch website,” this is normally where I would write the basic structure of the site in HTML. I then would have to go back and create a new style sheet so that it was styled the way it was in the layout. This would result in the editor being open on one screen and the webpage open on the other. I would make some changes in the editor and then refresh the webpage to see the changes. This would progress back and forth until the design looked like it was supposed to. To finalize it, I would open up the site in as many browsers as I could while changing the resolution to simulate many viewing scenarios. This is a rather lengthy process and can be avoided through the most part using Bootstrap. All the CSS coding I would normally have to write is already done for me and is well documented. This means I can significantly reduce the amount of design time by not having to create or modify a single CSS file.
Once the page is designed and displayed on the screen correctly I would then progress to changing colors, fonts and any other stylistic portion of the site so that it looked aesthetically pleasing. This is where Bootstrap excels for non-designer types. Because of its popularity and it is an open framework there are many sites on line like http://bootswatch.com that provide free of charge bootstrap themes that customize the color scheme and fonts. So now I can save time as well by not having to arrange a nice color scheme and can just download premade Bootstrap files that I feel is the best match for the site.
To sum up the whole article in a few words would simply be: Bootstrap saves you time and money. Time not spent redoing what others have done, time not spent debugging your custom style sheets, and time not spent checking to make sure it works in every browser the client could use because all of this has been created, tested, and verified not only by the developers but by the many sites that already use Bootstrap.
KTL wants to expand their clients and future customer’s knowledge on how KTL will help them save money-especially on customized products. Learn more on how we can customize your products to add value to your business all within your budget! Call 301.360.0001 today!
ANDREW LALLY | Business Solutions Developer
A 2014 graduate of University of Maryland, Andrew Lally received a B.S. in Computer Science along with a minor in Astronomy. His lack of experience in the corporate world does not translate to experience and knowledge in software development. While attending school full time, Andrew was thrust into many different projects as a KTL part time programmer. This gave him experience broadened his knowledge in many different areas. His experience includes working on projects in which he was to define his own programming language and create a compiler for it; programming a robot navigation algorithm that used only a camera and squares on the ground; Creating a smart task manager application for android and web devices that took into account where you are, what you were previously doing, and your preference on doing certain activities in order to schedule tasks more efficiently. With Andrew’s determination, growing knowledge, and great work ethic, he has become a valuable team player within the KTL development team.
