There are countless variations when it comes to different sections that can be incorporated into the design of a single page website. In this tutorial, we will cover how to create a generic section that can be extended to multiple sections. This section provides the ability to display any information your website needs.
Single page sections are commonly used to display the following data to the user:
- Contact form (will be implemented in the next chapter).
- About us: This can be as simple as a couple of paragraphs talking about the company/individual or more complex with images, even showing the team and their roles.
- Projects/work: Any work you or the company has done and would like to showcase. They are usually linked to external pages or pop up boxes containing more information about the project.
- Useful company info such as opening times.
These are just some of the many uses for sections in a single page website. A good rule of thumb is that if it can be a page on another website it can most likely be adapted into sections on a single page website. Also, depending on the amount of information a single section has, it could potentially be split into multiple sections.
This article is an excerpt taken from the book,’ Responsive Web Design by Example‘, written by Frahaan Hussain.
Single page section examples
Let’s go through some examples of the sections mentioned above.
Example 1: Contact form
As can be seen, by the contact form from Richman, the elements used are very similar to that of a contact page. A form is used with inputs for the various pieces of information required from the user along with a button for submission:
Not all contact forms will have the same fields. Put what you need, it may be more or less, there is no right or wrong answer. Also at the bottom of the section is the company’s logo along with some written contact information, which is also very common. Some websites also display a map usually using the Google Maps API; these mainly have a physical presence such as a store.
Website link—http://richman-kcm.com/
Example 2: About us
This is an excellent example of an about us page that uses the following elements to convey the information:
- Images: Display the individual’s face. Creates a very personal touch to the otherwise digital website.
- Title: Used to display the individual’s name. This can also be an image if you want a fancier title.
- Simple text: Talks about who the person is and what they do.
- Icons: Linking to the individual’s social media accounts.
Website link—http://designedbyfew.com/
Example 3: Projects/work
This website shows its work off very elegantly and cleanly using images and little text:
It also provides a carousel-like slider to display the work, which is extremely useful for displaying the content bigger without displaying all of it at once and it allows a lot of content for a small section to be used.
Website link: http://peeltheorange.com/#recent-work
Example 4: Opening times
This website uses a background image similar to the introduction section created in the previous chapter and an additional image on top to display the opening times.
This can also be achieved using a mixture of text and CSS styling for various facets such as the border.
Website link—http://www.mumbaigate.co.uk/
Implementing generic reusable single page section
We will now create a generic section that can easily be modified and reused to our single page portfolio website. But we still need some sort of layout/design in mind before we implement the section, let’s go with an Our Team style section.
What will the Our Team section contain?
The Our Team section will be a bit simpler, but it can easily be modified to accommodate the animations and styles displayed on the previously mentioned websites. It will be similar to the following example:
Website link—http://demo.themeum.com/html/oxygen/
The preceding example consists of the following elements:
- Heading
- Intro text (Lorem Ipsum in this case)
- Images displaying each member of the team
- Team member’s name
- Their role
- Text informing the viewer a little bit about them
- Social links
We will also create our section using a similar layout. We are now finally going to use the column system to its full potential to provide a responsive experience using breakpoints.
Creating the Our Team section container
First let’s implement a simple container, with the title and section introduction text, without any extra elements such as an image. We will then use this to link to our navigation bar. Add the following code to the jumbotron div:
Let’s go over what the preceding code is doing:
- Line 9 creates a container that is fluid, allowing it to span the browser’s width fully. This can be changed to a regular container if you like. The id will be used very soon to link to the navigation bar.
- Line 10 creates a row in which our text elements will be stored.
- Line 11 creates a div that spans all the 12 columns on all screen sizes and centers the text inside of it.
- Line 12 creates a simple header for the Team section.
- Line 14 to Line 16 adds introduction text. I have put the first two sentences of “Lorem Ipsum…” inside of it, but you can put anything you like.
All of this produces the following result:
Anchoring the Team section to the navigation bar
We will now link the navigation bar to the Team section. This will allow the user to navigate to the Team section without having to scroll up or down. At the moment, there is no need to scroll up, but when more content is added this can become a problem as a single page website can become quite long. Fortunately, we have already done the heavy lifting with the navigation bar through HTML and JavaScript, phew!
First, let’s change the name of the second button in the navigation bar to Team. Update the navigation bar like so:
The navigation bar will now look as follows:
Fantastic, our navigation bar is looking more like what you would see on a real website. Now let’s change href to the same ID as the Team section, which was #TeamSection like so:
Now when we click on any of the navigation buttons we get no JavaScript errors like we would have in the previous chapter. Also, it automatically scrolls to each section without any extra JavaScript code.
Adding team pictures
Now let’s use images to showcase the team members. I will use the image from the following link for our employees, but in a real website you would obviously use different images:
http://res.cloudinary.com/dmliyxggm/image/upload/v1511699813/John_vepwoz.png
I have modified the image so all the background is removed and the image is trimmed, so it looks as follows:
Up until now, all images that we have used have been stored on other websites such as CDN’s, this is great, but the need may arise when the use of a custom image like the previous one is needed. We can either store it on a CDN, which is a very good approach, and I would recommend Cloudinary (http://cloudinary.com/), or we can store it locally, which we will do now.
Create a folder called Images and place the image using the following folder structure:
- Root
- CSS
- Images
- Team
- Thumbnails
- Thumbnails.png
- Thumbnails
- Team
- Index.php
- JS
- SNIPPETS
This may seem like overkill, considering we only have one image, but as your website gets more complex you will store more images and having an intelligent folder structure/hierarchy will save an immense amount of time.
Add the following code to the first row like so:
The code we have added doesn’t actually provide any visual changes as it is nothing but empty div classes. But these div classes will serve as structures for each team member and their respective content such as name and social links.
We created a new row to group our new div classes. Inside each div we will represent each team member. The classes have been set up to be displayed like so:
- Extra small screens will only show a single team member on a single row
- Small and medium screens will show two team members on a single row
- Large and extra large screens will show four team members on a single row
The sizes/breakpoints can easily be changed using the information regarding the grid from this article What Is Bootstrap, Why Do We Use It?
Now let’s add the team’s images, update the previous code like so:
The preceding code produces the following result:
As you can see, this is not the desired effect we were looking for. As there are no size restrictions on the image, it is displayed at its original size. Which, on some screens, will produce a result similar to the monstrosity you saw before; worry not, this can easily be fixed.
Add the classes img-fluid and img-thumbnail to each one of the images like so:
The classes we added are designed to provide the following styling:
- img-fluid: Provides a responsive image that is automatically restricted based on the number of columns and browser size.
- img-thumbnail: Is more of an optional class, but it is still very useful. It provides a light border around the images to make them pop.
This produces the following result:
As it can be seen, this is significantly better than our previous result. Depending on the browser/screen size, the positioning will slightly change based on the column breakpoints we specified. As usual, I recommend that you resize the browser to see the different layouts.
These images are almost complete; they look fine on most screen sizes, but they aren’t actually centered within their respective div. This is evident in larger screen sizes, as can be seen here:
It isn’t very noticeable, but the problem is there, it can be seen to the right of the last image. You probably could get away without fixing this, but when creating anything, from a website to a game, or even a table, the smallest details are what separate the good websites from the amazing websites. This is a simple idea called the aggregation of marginal gains. Fortunately for us, like many times before, Bootstrap offers functionality to resolve our little problem. Simply add the text-center class, to the row within the div of the images like so:
This now produces the following result:
There is one more slight problem that is only noticeable on smaller screens when the images/member containers are stacked on top of each other. The following result is produced:
The problem might not jump out at first glance, but look closely at the gaps between the images that are stacked, or I should say, to the lack of a gap. This isn’t the end of the world, but again the small details make an immense difference to the look of a website. This can be easily fixed by adding padding to each team member div. First, add a class of teamMemberContainer to each team member div like so:
Add the following CSS code to the index.css file to provide a more visible gap through the use of padding:
This simple solution now produces the following result:
If you want the gap to be bigger, simply increase the value and lower it to reduce the gap.
Team member info text
The previous section covered quite a lot if you’re not 100% on what we did just go back and take a second look. This section will thankfully be very simple as it will incorporate techniques and features we have already covered, to add the following information to each team member:
- Name
- Job title
- Member info text
- Plus anything else you need
Update each team member container with the following code:
Let’s go over the new code line by line:
- Line 24 adds a simple header that is intended to display the team member’s name. I have chosen an h4 tag, but you can use something bigger or smaller if you like.
- Line 26 adds the team member’s job title, I have used a paragraph element with the Bootstrap class text-muted, which lightens the text color. If you would like more information regarding text styling within Bootstrap, feel free to check out the following link.
- Line 28 adds a simple paragraph with no extra styling to display some information about the team member.
The code that we just added will produce the following result:
As usual, resize your browser to simulate different screen sizes. I use Chrome as my main browser, but Safari has an awesome feature baked right in that allows you to see how your website will run on different browsers/devices, this link will help you use this feature—https://www.tekrevue.com/tip/safari-responsive-design-mode/ Most browsers have a plethora of plugins to aid in this process, but not only does Safari have it built in, it works really well.
It all looks fantastic, but again I will nitpick at the gaps. The image is right on top of the team member name text; a small gap would really help improve the visual fidelity. Add a class of teamMemberImage to each image tag as it is demonstrated here:
Now add the following code to the index.css file, which will apply a margin of 10px below the image, hence moving all the content down:
This very simple code will produce the following similar yet subtly different and more visually appealing result:
Team member social links
We have almost completed the Team section, only the social links remain for each team member. I will be using simple images for the social buttons from the following link:
https://simplesharebuttons.com/html-share-buttons/
I will also only be adding three social icons, but feel free to add as many or as few as you need. Add the following code to the button of each team member container:
Let’s go over each new line of code:
- Line 30 creates a div to store all the social buttons for each team member
- Line 31 creates a link to Facebook (add your social link in the href)
- Line 32 adds an image to show the Facebook social link
- Line 35 creates a link to Google+ (add your social link in the href)
- Line 36 adds an image to show the Google+ social link
- Line 39 creates a link to Twitter (add your social link in the href)
- Line 40 adds an image to show the Twitter social link
We have added a class that needs to be implemented, but let’s first run our website to see the result without any styling:
It looks OK, but the social icons are a bit big, especially if we were to have more icons. Add the following CSS styling to the index.css file:
This piece of code simply restricts the social icons size to 50px. Only setting the width causes the height to be automatically calculated, this ensures that any changes to the image that involves a ratio change won’t mess up the look of the icons. This now produces the following result:
Feel free to change the width to suit your desires. With the social buttons implemented, we are done.
If you’ve enjoyed this tutorial, check out Responsive Web Design by Example, to create a cool blog page, beautiful portfolio site, or professional business site to make them all totally responsive.
Read Next:
5 things to consider when developing an eCommerce website
What UX designers can teach Machine Learning Engineers? To start with: Model Interpretability
