The final phase in the responsive site for “Daisy Plates”, an imaginary boutique catering business I designed in past articles is to apply media queries to make the site adaptive and then further tweak these media queries along with adding a meta tag to create the responsive site.
Daisy Plates Responsive Website
It had been a while since I visited the responsive design world, so it was time to brush up – and learn some new things as well – with some teamtreehouse.com tutorials.
First, I had to determine what my target devices would be. In an earlier article, although I was in practice building for desktop, iPad and iPhone, I said I would test in the devices available to me: an Android tablet, an Android phone, Windows 7 desktop in the latest IE, Firefox, Chrome and Sarafi browsers, as well as Safari on a Mac if I could access one.
In the end, I tested using quirktools.com/screenfly/ as suggested by teamtreehouse.com, which provided me simulated environments for a number of brands of phones, tablet and tv setups. I also tested on Windows 7 in IE 9, Firefox 15 and Chrome 23 as well as on an Android Nexus 7 tablet and an Android HTC One X phone. After a bit of trial and error involving a meta tag, I am happy to say that things look pretty good in all my test environments.
But back to the process to build the responsive site.
After I determined my target devices, it was time to find the breakpoints in my fluid site, which are the browser dimensions where my site starts to look a bit out of sorts. I used the Chrome Window Resizer plugin as suggested by teamtreehouse.com to help me transfer easily between various browser dimensions, including some I set up myself, and I dragged the edges of the browser window to achieve the sizes in between. The idea was to start with the landscape or widest dimension of the target devices, which was still iPad and iPhone according to my design, thus 1024px for iPad and 480px for iPhone. Then once you find and fix the breakpoints of those, you check out the portrait widths, so 768px for iPad and 320px for iPhone. In doing this I also took care of my minimum desktop resolution, 1024px x 768px. Then drag in between all of these and see what happens. You may as I did, need to lower some of your breakpoints, i.e. I found that at 600px width things start to go a bit funny in some cases. Try to keep these middle breakpoints simple even numbers approximately where things start to break down if you can, might make things a bit easier. After these breakpoints are determined, we handle them in the CSS with media queries. We’ll get to those in a bit. First, let’s take a look at my particular breakpoints and how I handled them.
Navigation Links
Immediately I was drawn to the navigation links at the top of the site to dining, etc. They just didn’t respond the way I wanted them to in that they quickly overlapped each other. I was envisioning them wrapping down to two lines, then eventually one column for the very small resolutions. Once we get to the smaller devices, they were not going to be very intuitive as buttons either. So I decided to rework them a bit outside of the media queries. They turned into four buttons with rounded corners and a background color, two on each line, allowing them to now really stand out as buttons. Their breakpoint comes along at about 600px browser width, where I decided they would become a column of buttons stretching across the screen. Once this was all worked out, they scaled up and down nicely, with their best minimum appearance at 320px browser width.
Logo and Contact Info
After the navigation links (now buttons) were sorted, things started to come a little easier when adjusting. I saw how the logo and contact info, including the social icons, start to run into each other at certain points, so I fixed those up to move to different aesthetically pleasing locations depending on the space available, starting with allowing one social icon to move under the other, then the address and icons to move down to the next line altogether, etc. I also removed the scaling on the social icon images, as they are quite small to begin with, so for the best user experience they shouldn’t scale down.
Main Content
The main text, image gallery and games button were acting fairly well already, but I could see how the text below the image in the gallery was getting cut off, so I made a little fix overall outside of the media queries to move this text up a bit. It is still not the most dynamic text area as it only fits so much text, but will do for this site. I decided that at a certain point, the main content text would take up the whole width of the screen, with the image gallery and games button (since it is a part of the gallery section), appearing below it. The gallery as you may notice scales down until this point, and then it returns to it’s original size with this fix which will be good on the smaller devices. I adjusted the games button a bit at this point so that the daisy icon is closer to the text as well, as with more space available for the button it had placed itself too far to the left of the text.
News Reel and Catering Menu
The news reel was already scaling beautifully, although I did notice at very small widths it could use a little less padding, so I applied a fix for that in the media queries. The catering menu in the catering.html page was another story however. I took a little time to fix this so that the two menu columns never show the costs on a second line. Things squeeze together a bit better here for a while, and then it just moves to a column with the first menu on top, the daisy icon and message in the middle, and the second menu on bottom. The daisy icon gets away from the message a bit at times with the increased available space but I think overall it looks fine. There is also a lot of whitespace on the right when the items are in column, but better this is set up this way in case there is more text to be added in the make-believe future, and it’s better than the cramped text alternative.
Copyright, etc.
These were all scaling great, no changes made!
Return of the Floating Arrow…
Ah, that floating arrow. I moved it over just a tad outside of the media queries, but it still will overlap borders and background image in some cases. I decided to leave it as is in all resolutions as well, instead of removing it like I thought I might for desktop. Since small devices are starting to have large resolutions, as is the case of the Nexus 7, it might get harder in the future to narrow down when to remove it. I probably could have done this in this case however, because I have a meta tag that ensures the device width is picked up instead of the high resolution. So it is there, and works nicely on the two actual devices I tried.
Items I removed altogether
I decided that on phone resolutions, I would remove the news reel, as well as anything in the main content text that is not the first paragraph (let’s assume this first paragraph has the most important info). I left the catering menu however as this would be important info to know when making an order on the phone.
Now about these Media Queries?
So how did I handle these breakpoints, outside of the general changes I first made to my HTML and CSS to help things be a bit more dynamic as noted? I used a series of media queries placed at the bottom of my index.css file. In addition to what I noted above, you may notice odd little CSS done here and there in the media queries to achieve the best appearance, for example margin-left: -7px on the daisy_info div in the 480px media query. I also created and applied a few new ids and classes to implement the styles in the media queries. Once this was done, I noticed two issues on the Android devices.
- Everything was scaling down, meaning it was picking up the large resolution on those devices.
- The news reel on the tablet seemed to be in a larger font than the rest of the site.
I realized I needed to have a meta tag that indicated “use the device width please!” as well as set things up to initially scale properly. I left out the part of the meta tag to restrict the user form zooming in if they like however, if the device allows this. This improved the large text in the news reel as well, but there is still a bit of text scaling in various places, particularly noticeable in landscape, which if I understand correctly is due to Nexus 7 increasing/decreasing text size a bit to fit the space available. Thanks stackoverflow for advice on these issues, always a great help!
The same files are involved in this version of the site as the fluid version. All modifications were made to the two HTML pages and index.css.
Let’s take a look at the meta tag I used in index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> ...
Here is a peek at some media queries in index.css. Notice I used the max-width attribute but there are various ways you can define these, i.e. min-width etc. These media queries basically say for any screen where the width is 960px or below, add these styles, then for any screen where the width is 768px or below, add these styles, etc.
@media screen and (max-width: 960px) {
#di_left_col
{
width: 35%;
}
#di_mid_col
{
width: 30%;
}
#di_right_col
{
width: 35%;
}
#daisy_note
{
width: 30%;
margin-left: 10px;
padding-left: 55px;
}
}
@media screen and (max-width: 768px) {
#twitter_icon {
margin-right: 5%;
}
#di_left_col
{
width: 100%;
}
#di_mid_col
{
width: 100%;
}
...
Take a look at the full source code for the site through your browser if you like.
Some additional points on the final responsive site:
- The clickable items generally seem big enough on the Android devices, but there is always room for improvement next time.
- I validated the HTML pages with an HTML5 validator again and also checked tabbing was still working in a logical order.
In summary, I learned that I took a graceful degradation approach to building this responsive site, as I decided to build my desktop site first and work backwards to support mobile devices. Since I used media queries this makes the site adaptive and since this site is on a fluid grid and has been optimized to support my target devices, from 320px width to hopefully skies the limit, the site is now responsive.
It has been a long and very interesting journey, and I’m happy that I didn’t steer too far from my original design in the end. I have learned that there are additional ways to make your site text and images responsive, using jQuery plugins, alternate image formats etc. and there are great code starting points existing out there for responsive sites. It sounds like designing mobile first would be a beneficial option in the future as well if a site is to be responsive to mobile environments and beyond, possibly providing more focus on what is really needed in the site in various platforms and overall, and for better future-proofing.
This responsive site design and development has been a great learning experience for me and hopefully you found something useful in it as well. Fair thee well fellow coders!