Alrighty, after some time spent in the PHP world I have journeyed back to responsive design. In particular, we have set out on phase one of the responsive site for “Daisy Plates”, an imaginary boutique catering business I designed in past articles. Phase one is the fixed site.
Wait, I hadn’t mentioned what a fixed site is in my previous responsive design articles you may recall? Well before I dove into building this site, I refreshed my memory on some of the responsive design goodness I had previously learned. I visited teamtreehouse.com again, where I found they had two great series on building a website and then making that site responsive. What perfect timing! At the time the series were both nearly finished, but what was there were excellent resources to get me pointed in the right direction. I also reviewed training in CSS including on the box model, which is basically thinking of data elements as boxes with width, height, space around the inside of the element (padding) and space around the outside (margin) as well as a border. Here’s a good explanation of the box model on w3schools. Finally I reviewed a mobile tutorial to remind myself of media queries. I then felt ready to take on that responsive website!
But back to fixed! teamtreehouse.com explains very well here how there are four phases of websites leading to responsive design: fixed, fluid, adaptive and responsive. The fixed site is made for one resolution and will stick to that resolution no matter what we try to resize it to. This site uses pixels (although I may have snuck in a percentage here and there by habit) and no media queries. It is the starting point where we get things to look just like we want them to in our ideal world, before we start making the site stretch and move to suit all sorts of environments. The fixed version of the “Daisy Plates” website is the focus of this article.
Before we get into the code, let’s take a look at the fixed site and compare it to my original design. What are the major items that have changed since?
- I simplified my design to incorporate all the best features of the desktop and mobile versions, so that I have one site to work from. It was still great practice to think of an alternative design for a mobile site, but I have decided to focus the remainder of this project on getting a single site to be as responsive as I can without redesigning it too much between devices. Now depending on how things go once I get into the responsive phase, some of my mobile design could be introduced back in if I find that is a good way to go.
- I changed the font to Arial, as this was the default font used in the normalize.css file I incorporated into the site, and I think it may be more commonly used at this moment than my original choice of Verdana. I also think it looks better!
- I removed the up and down navigation from the news reel, as I decided that if this were to be a real site, this section would hold a maximum of possibly three articles at start, and just expand down the page as needed. The regular browser scrollbar would suffice for scrolling the overall site to see more content or return to earlier content.
There are four files involved in this website, as well as a few images.
index.html – HTML starting page, basically our home page
catering.html – HTML page for the catering section of the site
css/index.css – CSS for both HTML pages, mostly custom and some from tutorials on teamtreehouse.com
css/normalize.css – CSS library file downloaded from here
img/ – folder containing images for the background, logo, social icons and gallery
Before we get into my own code, I want to discuss a few concepts and helpful plugins from my training I used in this site.
- A CSS grid design was used, based on the suggestions of teamtreehouse.com only I redesigned the grid a few times using a tool that they also suggested, gridulator. Think of a grid like a map of your site into even sections across the available space for the screen resolution, considering space between those sections as well. Almost like the old days of tables – but much better I hear! The grid is defined with pixel widths, height, padding, etc. for now, but in the next phase we will make it dynamic with percentages. I also used some pre-defined classes from teamtreehouse.com to help with my grid, for example, to ensure we move down to the next row in the grid when a section is the last one in a row. We’ll take a look at the grid in the CSS in a bit.
- I also used normalize.css which is an excellent plugin CSS file that helps get rid of those little inconsistencies between browsers and start you out on a nice even playing field with your site.
I also tried to make the site nice and light and consider accessibility:
- I validated the HTML pages with an HTML5 validator.
- I ensured tabbing through the site occurs in a logical order.
- I tried to use as few (and small) images as possible for a couple of reasons:
- less and smaller images minimizes the size of the site and improves loading time – for example I used a tiny background image repeated along the x and y axes for the site’s red background pattern instead of a larger image
- text could be easier to resize with CSS when making the site responsive – for example I used text characters or HTML entities such as
<for navigational arrows
Instead of going through the site code line by line, we are going to analyze common themes and specific sections and take a peek at the code as we go.
Defining the layout with a grid in CSS and HTML
I mentioned I designed the grid a few times. Well, you may recall how I originally thought my iPad portrait design was the best starting point. What I had not thought of was that I was actually wanting to start with a fixed site on a 1024 x 768 desktop browser resolution, and my iPad portrait design did not reflect this. That’s when I started reworking things a bit. Then I also determined that I was not really working with 1024 pixels across, because I had the white rounded background on the content. In the end I had to determine what my true content width was at 1024, which was actually about 850px. I then had to determine what the smallest item across my grid would be, which was a social networking icon, somewhere around 50px. This helped me find my best grid to work with: 850px, 12 columns, 58px per section in the grid, with 14px spacing between those sections.
Here is a peek at the grid CSS in index.css:
/* this section is from a tutorial on http://teamtreehouse.com with customizations for the site */
/* a new grid was created using http://gridulator.com/ */
/*
Width: 850px
# Columns : 12
Column width: 58px
Gutter : 14px
*/
.grid_1 { width: 58px; }
.grid_2 { width: 130px; }
.grid_3 { width: 202px; }
.grid_4 { width: 274px; }
.grid_5 { width: 346px; }
...
.container{
width: 850px;
margin: 35px auto;
padding: 32px;
border: 2px solid #ffffff;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #ffffff;
}
...
Here is a look at the HTML using the grid in index.html:
<body> <div class="container"> <div class="grid_5"> <a href="index.html"><img src="img/daisy_plates_logo.png" alt="Daisy Plates logo" /></a> </div> <div class="grid_5"> 123 Lorem Ipsum Avenue<br> Lorem Ipsum, Lorem Ipsum<br> <strong>Mon-Fri 8AM-8PM Sat 10AM-10PM</strong><br> 555-1234-5678<br> <a href="#">daisyplates@addy.com</a> </div> <div id="twitter_icon" class="grid_1"> <a href="#"><img src="img/twitter_icon.png" alt="Tweet about us" /></a> </div> <div id="facebook_icon" class="grid_1 omega"> <a href="#"><img src="img/facebook_icon.png" alt="Visit us on Facebook" /></a> </div> <div class="clear"></div> <div class="nav_links grid_3"> <a href="#">dining</a> </div> ...
Backgrounds and generic styles in CSS
As mentioned, the red background pattern of the site was done with a tiny image repeated along the x and y axes over the whole site. The white main shape of the design was done with some CSS3 rounded corners, as you can see in the CSS for the container class that holds all other divs. This rounded corner was used again in the image gallery, the games link and the news reel.
I left the font size at the standard 16px that normalize.css uses, and set some standard link and first heading styles. I used hover to change the style of links as needed when they are rolled over in the desktop browser. For this partially functional site, for all links except “catering” which goes to a second page, catering.html, I set the href values to “#”, which just takes you to the top of the page.
Here is a look at this code in index.css:
/* daisy plates custom css */
body
{
background-image: url("../img/daisy_plates_bg.jpg");
background-repeat: repeat;
}
a
{
color: #cc1430;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #db5b6f;
}
h1
{
font-size: 22px;
font-weight: normal;
margin: 0px;
}
...
Handling some complex sections in the HTML and CSS
From this point on in index.css, outside of the grid CSS, I defined a number of custom class (for common items) and id (for specific item) styles to place and style the content within each of the grid sections as needed.
The most complex of these was the area with the main content on the left, the image gallery on the right, and the games link below the image gallery. Let’s take a closer look at this.
- The main grid sections here are the main content on the left, which I determined should take up 5 sections on the grid, and the image gallery on the right, which would then take up 7 sections, to equal 12.
- Inside the image gallery however there needed to be a bit of a grid itself for the navigation. I decided to use some smaller grid sections here as well since they were already available, although I did not get concerned with them adding up to 7 for example. The navigation buttons would use 1 grid section, and the text between would take 3 grid sections.
The games button, or more generically the “daisy button”, in anticipation that this button style would be used again in other pages (if this were a real site), added a bit of complexity in trying to get a hover to work on the div to change the color of the text when rolled over. Since it has a few parts working together, namely text, a background image, etc. for simplicity since this exercise is in responsive design and not to get too deep with stylistic design and functionality of the site, I chose to instead just get the button working well so that the mouse pointer shows when the entire button is rolled over.
Here is the code for this section in index.css and index.html:
#service_gallery_container
{
text-align: center;
}
#service_gallery
{
border: 1px solid #cc1430;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #cc1430;
padding: 11px 0 37px 0;
color: #ffffff;
text-align: center;
width: 343px;
margin: auto;
}
#service_gallery img
{
padding-top: 11px;
}
#service_gallery a
{
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#service_gallery a:hover
{
color: #f7e389;
}
#sg_left_nav
{
margin: -13px 2px 2px 9px;
font-size: 42px;
padding-top: 5px;
text-align: left;
}
#sg_mid_nav
{
margin: 7px 2px 2px 2px;
}
#sg_right_nav
{
margin: -13px 2px 2px 2px;
font-size: 42px;
padding-top: 5px;
text-align: right;
}
#daisy_button_img
{
float: left;
margin-top: 10px;
}
#daisy_button
{
border: 3px solid #cc1430;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #f7e389;
padding: 5px 15px 5px 0;
color: #000000;
text-align: center;
width: 290px;
margin: auto;
margin-right: 0px;
margin-top: 15px;
min-height: 50px;
}
.daisy_button_single
{
margin-top: 10px;
}
.daisy_button_emphasis
{
color: #cc1430;
font-weight: bold;
}
...
<div id="service_gallery_container" class="grid_5 omega"> <div id="service_gallery"> Visit our <strong>bakery</strong> for a sweet treat!<br> <img src="img/win7_sample_img.png" alt="Daisy Plates Bakery" /> <div id="sg_left_nav" class="grid_1"> <a href="#"><</a> </div> <div id="sg_mid_nav" class="grid_3"> Lorem Ipsum Dolor Sit </div> <div id="sg_right_nav" class="grid_1"> <a href="#">></a> </div> </div> <div class="clear"></div> <a id="daisy_button_link" href="#"> <div id="daisy_button_img"> <img src="img/daisy.png" alt="Daisy Plates logo" /> </div> <div id="daisy_button"> <h1>The <span class="daisy_button_emphasis">Daisy</span> Special!</h1> Fun, Games and Free Treats </div> </a> </div> ...
Hmmm…this site is starting to get a bit responsive already
I will admit some responsive coding worked its way into the fixed site, just a habit of already using auto widths and percentages in my past endeavours and finding they gave me the look I wanted here. For example, auto widths showed up in the news reel, or more generically, “daisy info section”, to help center it on the page.
Percentages also showed up in the three column layout I used in the same section in the catering.html page. Note, I did not use the grid again in here, but it seemed I accomplished what was needed and started using some responsive design with the percentages. Perhaps when this site becomes fully responsive I will consider using the grid sections instead of these columns.
Here is a look at that responsive code in index.css:
#daisy_info
{
border: 3px solid #000000;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #fffffff;
padding: 20px;
color: #000000;
margin: auto;
margin-top: 15px;
}
#di_left_col
{
float: left;
width: 25%;
}
#di_mid_col
{
float: left;
width: 50%;
text-align: center;
}
#di_right_col
{
float: left;
width: 25%;
}
#daisy_note
{
background: url("../img/daisy_small.png") no-repeat;
background-position: center left;
width: 20%;
padding-left: 50px;
padding-right: 20px;
margin: auto;
margin-top: 60px;
}
...
Lastly, that floating arrow
I designed this site with a floating navigation arrow to take the user to the top of the site again. Currently, this is set up as a caret text character, and indeed does float, although in its fixed state it looks best when the browser is 1024 x 768. In a larger browser window it floats out on the red background where it is not as easy to see, and in a smaller resolution it will overlap elements although the rest of the site remains fixed. This will be improved as the site becomes more responsive. It is also using 12 sections of the grid, so it will overlap other links sometimes when it moves up and and down the site (not noticeable until you try to click them). Ideally this will be resolved with the responsive version of the site as well if there is time.
Here is a peek at the arrow in index.css and index.html:
#up_nav
{
position: fixed;
bottom: 20px;
right: 37px;
text-align: right;
margin-left: 33px;
font-size: 42px;
}
<div id="up_nav" class="grid_12 omega"> <a href="#">∧</a> </div>
Feel free to take a look at the full source code for the site in the usual way through your browser. On to the next phase of the “Daisy Plates” website, where we will make that grid fluid (and find out what that means)!