Social networking apps have become all the rage, especially with mobile users. You can’t search on Twitter or any corner of the web without finding some reference to checkin apps. The two industry giants are
Foursquare and
Gowalla which have both been online for just a few years. They feature many similar functions such as user checkins, badges, and friend feeds.
I’ll be demonstrating how to code a simple profile page similar to that of Foursquare. Their design is very simplistic with a 2-column layout split. We’ll be coding this page in HTML5 and CSS3, so I’ll be sure to introduce some of the newer techniques. Additionally I’ve offered the source code for free along with a live demo which you can check out below.
Live Demo – Download
Starting the HTML Document
To begin open up a blank HTML sheet. We can start with some bare-bones template tags to define our page document type as standard HTML5. I have included the code below to help you get started.
4 | <meta charset="utf-8" /> |
5 | <title>Social User Profile Page in HTML5/CSS3[DEMO]</title> |
6 | <link rel="stylesheet" type="text/css" href="global.css" /> |
You’ll notice right away the HTML5 doctype has been significantly simplified. This is appended directly above your page on each HTML5 page you write. We’ve also added the optional
lang="en" attribute to our HTML element. This feature will let Google and other search engines know that our page language will strictly be written in English.
Nothing here is too out of the ordinary. So let’s begin to examine our full page structure. Immediately you should notice I have taken advantage of two(2) new HTML5 elements. These are
<header> and
<nav> to separate our heading and navigation bar, respectively. These elements add to our semantic markup and help to distinguish our code as HTML5 specific.
Below is the full HTML page code. I’ll break it down a bit more as we move forward. I’ve left the head portion of our document out since this was just added a few paragraphs ago.
4 | <a href="#"><img src="img/Logo.jpg" alt="mysquare logo" title="mysquare - checkin and go home!" /></a> |
6 | <span id="usernav"><a href="#">Logout</a> - <a href="#">Settings</a> - <a href="#">My Profile<span><img src="img/user_avatar_s.jpg" /></span></a></span> |
11 | <ul id="n" class="clearfix"> |
12 | <li><a href="#">Homepage</a></li> |
13 | <li class="sel"><a href="#">Profile</a></li> |
14 | <li><a href="#">Archives</a></li> |
15 | <li><a href="#">Badges</a></li> |
16 | <li><a href="#">Search</a></li> |
17 | <li><a href="#">Find Friends</a></li> |
21 | <div id="content" class="clearfix"> |
23 | <div id="userStats" class="clearfix"> |
25 | <a href="#"><img src="img/user_avatar.jpg" width="150" height="150" /></a> |
29 | <h1>Johnny Appleseed</h1> |
30 | <h3>San Francisco, CA</h3> |
31 | <h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4> |
32 | <div class="socialMediaLinks"> |
33 | <a href="http://twitter.com/jakerocheleau" rel="me" target="_blank"><img src="img/twitter.png" alt="@jakerocheleau" /></a> |
34 | <a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank"><img src="img/gowalla.png" /></a> |
36 | <div class="sep"></div> |
37 | <ul class="numbers clearfix"> |
38 | <li>Reputation<strong>185</strong></li> |
39 | <li>Checkins<strong>344</strong></li> |
40 | <li class="nobrdr">Days Out<strong>127</strong></li> |
46 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
50 | <div class="gcontent"> |
51 | <div class="head"><h1>Badges(3)</h1></div> |
53 | <p>Keep working to unlock badges!</p> |
55 | <div class="badgeCount"> |
56 | <a href="#"><img src="img/foursquare-badge.png" /></a> |
57 | <a href="#"><img src="img/foursquare-badge.png" /></a> |
58 | <a href="#"><img src="img/foursquare-badge.png" /></a> |
61 | <span><a href="#">See all…</a></span> |
65 | <div class="gcontent"> |
66 | <div class="head"><h1>Friends List</h1></div> |
68 | <p>Your friends - 106 total</p> |
70 | <div class="friendslist clearfix"> |
72 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Jerry K." /></a><span class="friendly"><a href="#">Jerry K.</a></span> |
76 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Katie F." /></a><span class="friendly"><a href="#">Katie F.</a></span> |
80 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Ash K." /></a><span class="friendly"><a href="#">Ash K.</a></span> |
84 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Sponge B." /></a><span class="friendly"><a href="#">Sponge B.</a></span> |
88 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Frank" /></a><span class="friendly"><a href="#">Frank</a></span> |
92 | <a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Alexa S." /></a><span class="friendly"><a href="#">Alexa S.</a></span> |
96 | <span><a href="#">See all...</a></span> |
Please note that you aren’t required to stick with these new elements.
<div> tags will work just as well in HTML5. And if you’ve noticed I have included a lot of divs within the code here, mostly to contain a wrapper class. But using these elements will free up space for IDs and clean your CSS code up a lot. Another example are the two
<section> elements holding the right and left columns of our layout structure. This will make more sense as we begin to add styles and positioning.
Block Areas of our Template
Let’s now move into defining the areas of our page. The first thing to explain is how some portions of the site content are limited in width. However we have background colors spanning the entire width of our webpage. This is where the class
.wrapper comes into play, since we can just wrap our page content and center it regardless of resolution. I’ve utilized this technique in each main area – heading, nav bar, and core content.
For our header we only set 2 positions. The logo over to the left and a small set of links for the user to work with when logged-in. I split this small area with a
<span> tag, and also included a smaller version of the user avatar near “My Profile”. This is a classic technique originally adopted by Digg a few years back.
The navigation area is split with a simple unordered list. I have taken the liberty of also adding a selected class which only displays on the currently visited link. So as you move from the home page to your profile the
class="sel" should switch list items. Check out the navigation code I’ve copied over.
2 | <ul id="n" class="clearfix"> |
3 | <li><a href="#">Homepage</a></li> |
4 | <li class="sel"><a href="#">Profile</a></li> |
5 | <li><a href="#">Archives</a></li> |
6 | <li><a href="#">Badges</a></li> |
7 | <li><a href="#">Search</a></li> |
8 | <li><a href="#">Find Friends</a></li> |
Now viewing our content area you’ll see I actually used a simple
<div> here with the class “clearfix”. This is a set of styles used to clear floating elements within a container. Or simpler, the outer div(container) holds 2 inner
<section> elements with IDs
#left and
#right. These float next to each other and the
.clearfix class helps to remove extra white space.
On the left side we have a profile area with the user avatar, checkin stats, a link to their homepage and external icons to their alternate profiles. I used a free set of
sweet social icons from Dribbble which is perfect for what we need. Additionally in the right sidebar I borrowed a small badge icon from Foursquare. The box elements are given a class
.gcontent and split between a header and content area.
Building the Core CSS
Now you should open up the
global.css file which you can find in the root of our demo. This stores all of the page styles split into groups labeled resets, core, navigation, left, right, and clearfix. The whole document is fairly long even with single-line styling, so I’ll only include specific bits of code.
We can skip over the resets group since it doesn’t hold much use for this tutorial. If you know anything about resetting document styles, there’s nothing here to surprise you. Instead let’s focus first on the @group “core” which defines our page IDs.
2 | .wrapper { width: 850px; overflow: hidden; margin: 0 auto; background: none; } |
4 | header { height: 100px; background-color: #afafaf; } |
6 | header #usernav { float: right; line-height: 100px; font-size: 14px; font-weight: bold; color: #555; } |
7 | header #usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; } |
8 | header #usernav a span img { position: relative; top: 8px; background: #cecece; margin-left: 5px; padding: 3px; border: 1px solid #969696; } |
10 | #content { display: block; width: 820px; margin: 0 auto; } |
11 | #left { display: block; width: 560px; float: left; overflow: hidden; margin-right: 20px; } |
12 | #right { display: block; width: 240px; float: left; overflow: hidden; } |
The .wrapper class is given
margin: 0 auto; so all of the content will automatically center on the page. Our specific width is set to 850px but you could change this to anything you want. However because of this our scale for #left and #right has also been limited to 560px and 240px. All overflow content is hidden so as to remove rendering bugs. Inside our #usernav span element we are making great use of the CSS3
text-shadow property.
By adding a 1px offset and using a bright color the drop shadow appears to bold our text and jump right off the page! Apple has been seen using a similar effect, which I have duplicated throughout the profile page as well. This is a small addition but really can affect how your users perceive the page design.
Simplifying Other CSS3 Ideas
There are just a couple other CSS3 techniques which I’ve incorporated here that I would love to go over. The first you may notice is in our left column of the profile page. This
<div> box has an ID of #userStats which can be found in the left @group of our CSS. Notably we have added some extra padding and a
.clearfix for the avatar/statistics. But I have also utilized in-browser rounded corners without any images.
By default if the user is on a legacy browser they simply can’t experience the rounded effects. Instead the user statistics block will load with square corners – not too big of a deal. The code below shows our #userStats and profile pic styles. Notice I have included all 3 properties of rounded corners, these being
-moz-border-radius,
-webkit-border-radius, and simply
border-radius.
1 | #userStats { display: block; width: auto; background-color: #f9f9f9; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 12px; } |
3 | #userStats .pic { float: left; display: block; margin-right: 10px; } |
4 | #userStats .pic a img { padding: 7px; background: #fff; border: 1px solid #ccc; } |
You may also enjoy the data list styles right next to the user profile picture. These include a small separator class for the line above along with an unordered list for each of the statistics (reputation, checkins, and days out). Also a small dotted border separating the 3 stat blocks.
1 | #userStats .data .sep { clear: both; margin-top: 40px; width: 320px; height: 1px; border-bottom: 1px solid #ccc; margin-bottom: 0; } |
2 | #userStats .data ul.numbers { list-style: none; width: 320px; padding-top: 7px; margin-top: 0; border-top: 1px solid #fff; color: #676767; } |
3 | #userStats .data ul.numbers li { width: 95px; float: left; display: block; padding-left: 8px; height: 50px; border-right: 1px dotted #bbb; text-transform: uppercase; } |
4 | #userStats .data ul.numbers li strong { color: #434343; display: block; font-size: 3.4em; line-height: 1.1em; font-weight: bold; } |
It’s not too big of a deal but just a little bit of CSS can go a long way towards perfecting your layout. The UL and .sep class are both set to 320px – this is because they cannot take up the entire width of the division. There simply isn’t enough room. But we must keep them identical so everything will line up in browser display.
The internal list items are actually given padding on the left. This helps to move our numbers over a bit so the blocks aren’t stacked right next to each other. Inside the li elements I’ve included each of the label text while the numerical values are within
<strong> tags. We set them to
display: block; giving the appearance of label/value pairs. We are also using the
text-transform property so the label text stands out more in comparison to other text on page.
Live Demo – Download
Conclusion
I hope you enjoyed this introductory web development tutorial. To build such a user profile page in HTML5/CSS3 only takes a bit of dedication and some time in front of your computer. I have only covered some of the main areas in styling our page. However I do recommend downloading the demo source files and scrutinizing my code a bit more. You’ll surely pick up on a few tricks and it may clear up any confusion you run into.
No comments:
Post a Comment