If you are interested in working with me please contact me through my company, BuxMont Web LLC.
Bootstrap ~ Sample Landing Page
Sample Bootstrap landing page | October 2015 | HTML5, CSS3, Bootstrap, ScrollSpy, Photoshop View live demo online
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.
I completed this project as a Bootstrap learning exercise. It is a sample one-page landing page for a technology business.
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.
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.
Bootstrap sample landing page - Services section
Bootstrap sample landing page - Products section
Bootstrap sample landing page - Learning portal & footer sections
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.
For the typefaces I accepted the default Bootstrap font-family style stack (Helvetica Neue, Helvetica, Arial, sans-serif).
Bootstrap Sample - Mobile view
Bootstrap Sample - Mobile collapsible menu
Bootstrap Sample - Mobile collapsible login submenu
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.
Bootstrap Sample - Mobile - Services section
Bootstrap Sample - Mobile - Products section
Bootstrap Sample - Mobile - Learning Portal section
Bootstrap Sample - Mobile Contact section