Caryn Cziriak

Web Developer

Custom website design and development with personalized service for small businesses and organizations.

If you are interested in working with me please contact me through my company, BuxMont Web LLC.

Bootstrap ~ Sample Landing Page

Bootstrap Sample Screenshot

Sample Bootstrap landing page | October 2015 | HTML5, CSS3, Bootstrap, ScrollSpy, Photoshop View live demo online

Objective

When I came across several responsive websites that impressed me and found that they were built on the Bootstrap framework, I decided I had to learn it.

Bootstrap is an open source front-end development framework developed by Twitter. It includes base CSS classes and default styling for web interface components including navigation, typography, icons, buttons, forms and responsive grid layout elements. It uses JavaScript and includes custom jQuery plugins.

I completed this project as a Bootstrap learning exercise. It is a sample one-page landing page for a technology business.

Approach

Placeholder

Bootstrap sample landing page - collapsible login menu

I wanted to learn how Bootstrap handled various elements, including stacking multiple columns, full-width responsive images, responsive navigation, and generally what it could do. The first step was a web search for online documentation and tutorials. Then I put together this landing page using mostly Bootstrap default styling elements and glyphicons, Font-Awesome icons, some customized colors, and free "no attribution required" images.

General layout and design considerations:

I chose a layout that includes 1-column centered, 2-column and 3-column sections to see how they worked together on a page. I used full-width responsive background images on the page header and section headers.

Navigation:

I like to use a top navigation bar fixed to the top of the viewport so it's always accessible. The mobile view uses a full-width collapsible "hamburger" menu with a collapsible login submenu. In wide screen view the menu is horizontal with the login form button fixed to the right.

To indicate the current section/location on the page, I used the Bootstrap ScrollSpy jQuery plugin, which highlights the current link in the horizontal wide-screen menu. With the inverse styled navigation menu it applies a darker color to the link background and brightens the link text.

Project Thumbnail Image

Bootstrap sample landing page - Services section

Project Thumbnail Image

Bootstrap sample landing page - Products section

Project Thumbnail Image

Bootstrap sample landing page - Learning portal & footer sections

Color palette:

Color palette

Bootstrap provides two default color schemes for navigation bar menus. The default is a light background with dark text and the inverse is a dark gray background with light text. I chose the default inverse colors for this project.

I decided on a monochromatic theme with various shades of a muted purple for the headings, dividers, contact/social media section background and icons. The background images were first converted to grayscale then overlaid with a semi-transparent color layer in the same hue.

I used Photoshop to create the city skyline divider image based on the same shades used in the page design.

Typography:

For the typefaces I accepted the default Bootstrap font-family style stack (Helvetica Neue, Helvetica, Arial, sans-serif).

Project Thumbnail Image

Bootstrap Sample - Mobile view

Project Thumbnail Image

Bootstrap Sample - Mobile collapsible menu

Project Thumbnail Image

Bootstrap Sample - Mobile collapsible login submenu

Project Thumbnail Image

Bootstrap Sample - 3 columns stack to 1 column on mobile

Developing with Bootstrap:

Once I learned how to work with it, I found Bootstrap to be a useful framework for responsive development, especially for mocking up a quick prototype site for a prospective client. As with any framework, it has its limitations, and I have heard criticism that all Bootstrap sites look alike. I would agree that if you use the default styles and don't customize much your result will be similar to a lot of other Bootstrap sites. However, I do believe there is a lot of space for creativity through customizing, and the built-in handling of standard user interface elements that Bootstrap provides can considerably speed up development.

Project Thumbnail Image

Bootstrap Sample - Mobile - Services section

Project Thumbnail Image

Bootstrap Sample - Mobile - Products section

Project Thumbnail Image

Bootstrap Sample - Mobile - Learning Portal section

Project Thumbnail Image

Bootstrap Sample - Mobile Contact section