Benefits of the Bootstrap Framework

I started playing around with Bootstrap in 2015 when I didn’t understand what Bootstrap was or why a web designer would build websites using Bootstrap. Since then, I have built 6 Bootstrap sites and can now give five broad reasons to choose Bootstrap as a theme/framework for building a website.

Bootstrap is more than a web site theme with a unique set of styles, fonts, and page templates. Bootstrap is a framework, which could be considered a super theme (technically a superset of HTML, CSS, and Javascript technologies). Many Bootstrap developers share and contribute to Bootstrap making it more than a theme but an entire website design framework. The Bootstrap framework is an open source (read: public) project that many developers and designers have contributed to mostly via the Github social network.

Five Benefits of Bootstrap

  1. speed of development
  2. responsiveness
  3. consistency
  4. customizable
  5. support
xxxx
Patagonia only needs one online version of their catalog–a Bootstrap website and no more expensive app(s) development

The first benefit of Bootstrap is speed of web site development. As a web designer and/or programmer, you don’t code to reinvent the wheel. Hundreds of developers have already contributed to the Bootstrap code base and all these developers share their chunks of code or design components. A web designer initially configures the web features desired, and then, the configured Bootstrap files are downloaded for initial site testing. Each configured Bootstrap site can be a unique design and each could be considered a Bootstrap theme. With all the Bootstrap resources available, the developer can quickly start creating a site structure without having to code individual site components.

The second benefit of Bootstrap is site responsiveness. Bootstrap is a mobile-first theme meaning it is designed for small smartphone screens. Bootstrap has a grid layout which scales nicely for wider screens. Bootstrap sites display correctly for almost any internet device available. As a developer, you don’t need to do as much device testing as in the past and this saves the developer even more time.

The third benefit of Bootstrap is consistency. Your Bootstrap site could be handed over to another Bootstrap experienced developer, and the web interface would remain consistent. For example, the menubar would function the same no matter which Bootstrap developer had last updated it. This consistency also relates to the many different web browsers available. The Bootstrap site responds and displays consistently when tested with most modern browsers.

The fourth benefit of Bootstrap is that it is easy to customize. The Bootstrap developer can choose any website components (buttons, sliders, date picker, popups, etc) to create the web experience that the client desires. With lots of Bootstrap components to choose from, the developer can create a unique customized theme.

The fifth benefit of Bootstrap is support. Github has over 600 developers sharing code and ideas on Bootstrap. The framework is always evolving and improving. A standard WordPress theme might be built and tested by a single developer or small team, but the worldwide community of Bootstrap developers would result in a superior theme.

When you combine the tools of faster development, device responsiveness, browser consistency, easy customization, and a good network of online support, the Bootstrap framework offers many time-saving advantages for web developers.

Some Bootstrap sites:

**Bootstrap sites I have built

Creating a WordPress Retina Photo Gallery

WordPress tiled gallery

Recently I decided to improve my WordPress photo gallery. The goal was to improve my pictures when viewed with the new high-end retina or 4K displays. This post covers some of the challenges I encountered and image technology improvements that WordPress now offers.

A 4K screen means 4000 pixels across and now there are even 5K displays available. Apple’s retina iMac display has 5220 pixels. The upper end of TVs now boast 4K as the new hi-def plateau in picture resolution. If you have professional photography or artwork that you want to present visually at the highest quality, then, you may need to upload higher resolution images to display optimally on these new retina/4K/5K displays. Retina images (so called 2x images) double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and inserting the 2x image into half of that space (100 x 100 pixels). In many ways using web images has become more complex and having the optimal images delivered to the many different types of internet devices has become tricky. Internet devices come in many sizes now, some displays are retina quality and others are not. So what size of image is going to work with such a wide range of internet devices/displays? The answer is no image size will work effectively for all the possible devices and display resolutions.

Read More

Images and Widgets in WordPress 3.9

The last time I wrote an article about WordPress it was at version 3.5 and having a WordPress site that was responsive to all the new internet devices was the upgrade goal for many WordPress sites. This post focuses on working with images and widgets including some new features of WordPress 3.9 and a couple of the newer plugins available within the Jetpack set of WordPress plugins.

Read More

Embedding Google Maps in WordPress

This is a tutorial to get your custom Google Maps embedded into WordPress. Your custom Google Maps from My Places can be embedded easily into a WordPress post. First, create a My Places custom map, you are basically creating the overlay content for your Google map. After saving your map, click the link button (chain icon). This brings up the Customize preview panel (shown below). At this point you can:

  • size your map including specific width and height
  • position your map by drag it around
  • set the zoom level you desire
  • select one of four map types to initially display (Standard, Satelite, Terrain, Google Earth)

When you have your desired preview of your map, copy the generated HTML and paste into your WordPress post in text mode. Keep in mind that there are two Google map engines: classic maps (v_1.0) and a newer map API (v_2.0). My example is from the classic engine. The toolsets for the two engines are not equivalent at this time.

customize_embed_code2

The actual Google Map…