Making the page responsive

Eventually we still had to make our page responsive, so it could be used on different devices without any problems. Making a page responsive is an important part of its development since nowadays, a lot of users do not longer stick to only laptops or PC’s to use the internet. According to the Office for national Statistics for example “access to the Internet using a mobile phone more than doubled between 2010 and 2014, from 24% to 58%.” Looking at numbers like this, it can easily be seen how important it is that the user is enables to access the page from other devices.

Originally, Becky wanted to take care of making our page responsive. Since we decided not to use Bootstrap, we had to do more work ourselves but we made the decision so we could not just improve our PHP but also our CSS skills working on the project. Becky started off looking at different resources and gaining knowledge about how to turn an already existing page responsive. But she could not quite figure out how to do it, so she asked for help and I also send her some links and explained what I knew about responsiveness. Since I previously looked into it for a bit as well as talked to the other students, I knew about media queries and how to use them to change the way the page looks like depending on screen size. Becky then did some more research and wrote some code, but she could not quite get it working, so she asked me if I could give her an example of how to use the media query and to help her, I used one of them to make the page responsive to an iPad mini (1024px max width). We thought that once Becky saw and understood the query, she could add more of them. To make the page look nice and usable on a smaller screen, I had to work with spaces and sizes. The layout would change if the screen size was changed, and slip into the new line. Because the header is fixed though, it ended up being really big and cover up the posts. To make the header thinner, I changed the size of two of the buttons. After this was done, the rest would fit into one line and not be in front of the posts. You can see the two versions here:

Before:

Screenshot (315)

After:

Screenshot (299)

I then uploaded the following code onto Github, so Becky could look at the query.


/*Media Queries for making to responsive to smaller screen sizes.*/

@media screen and (max-width: 1400px) {

.box_post_gender {
 min-height: 70px;
 color: white;
 margin: auto;
 font-family:sans-serif;
 font-size: 20px;
 background-color: #4F4F4F;;
 width: 100%;
 z-index: 100;
 top: 50px;
 position: fixed;
}

.box_hello {
 color: white;
 font-family: sans-serif;
 font-size: 20px;
 text-align: center;
 margin-left: 20px;
 float: left;
 line-height: 70px;
}

.box_hello2 {
 display: none;
}

.box_post_gender_content {
 text-align: right;
 margin-right: 35px;
 display: inline-block;
 float: right;
 margin-top: 5px;
}
 
.delete_toggle {
 width: 150px;
 height: 48px;
 cursor: pointer;
 text-align: center;
 line-height: 10px;
 background: #d1404b;
 border: 1px solid #be3b45;
 border-radius: 2px;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 20px;
 font-weight: 500;
 display: inline-block;
 position: relative;
 left: 0px;
 top: 3px;
}
 
.delete {
 width: 150px;
 height: 48px;
 line-height: 50px;
 text-align: center;
 background: #d1404b;
 border: 1px solid #be3b45;
 cursor: pointer;
 border-radius: 2px;
 color: #fff;
 font-family: 'Exo', sans-serif;
 font-size: 20px;
 font-weight: 500;
 margin-left: 82px;
 text-decoration: none;
}

.delete a {
 text-decoration: none;
 color: white;
}
 
input[type="submit"] {
 width: 60px;
 height: 48px;
 background: #fff;
 border: 1px solid #fff;
 cursor: pointer;
 border-radius: 2px;
 color: #85c14a;
 font-family: 'Exo', sans-serif;
 font-size: 15px;
 font-weight: 500;
 padding: 6px;
 margin-top: 10px;
}

input[type="submit"]:active{
 opacity: 0.6;
}

input[type="submit"]:hover{
 opacity: 0.8;
}
}


Becky worked for a day on the responsiveness for smaller screen sizes. Then she messaged me again, saying that she still  struggled with doing it and that she had only partly made it responsive to one smaller size and that she might not be able to finish it on her own, so she put her code onto Github, so me and Tina could have a look and finish it. I worked on it then using more media queries and in the following, you can see some pictures that show how it turned out. I then updated Github again, so Becky could look at and go through the code.

Screenshot (311)

Screenshot (312)

Screenshot (313)

Screenshot (314)

References:

Part of Internet Access, Households and Individuals, 2014. Available from: http://www.ons.gov.uk/ons/rel/rdit2/internet-access—households-and-individuals/2014/stb-ia-2014.html [Accessed 19th April, 2014].

Unknown, Unknown. Am I Responsive? Available from: http://ami.responsivedesign.is/ [Accessed 19th April, 2014].

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s