Media Queries

Leave a comment

In order to make my website fully responsive, I needed to use media queries to define breakpoints where the website would change slightly to accommodate the size of the browser. For example, a fully functional 960px width website would be inappropriate for a mobile device as everything would be too small to read, or the dreaded scroll would have to be used.

I have defined two standard breakpoints:

@media screen and (max-width: 720px) {}
@media screen and (max-width: 480px) {}

I also have these but they only apply for the interactive map:

@media screen and (max-width: 1350px) {}
@media screen and (max-width: 990px) {}
@media screen and (max-width: 790px) {}
@media screen and (max-width: 660px) {}

Finally, I added this to make my website work on my iphone. This basically is an exact copy of the 480px media query, just with a different name that the iphone prefers:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {}

Here are my two main media queries, and I will explain what they do to the elements, and will show a picture at the end of all 3 formats next to each other so you can see the difference.

More

Advertisements

Footer

Leave a comment

I didn’t want to make my footer really complex, so I simply coded it like this:

<footer>

There are only to <p> tags with a <br> tag to separate them. &copy; is the html way of writing the copyright logo. The <em> tag is the standard way of expressing italicised text and I used this to emphasise the point I was trying to make. This only appears on the home page and the events page, with both have asterisks aiming people to read this.

<P>Created by Daniel Tooley &copy;2013</P>
<br/>
<p><em>*We will not be liable for any damage to person or vehicle, nor loss of life</em></p>
<br/>
<p>

</footer>

Here is the css that went with it:

footer{

I set a clear attribute so that it didn’t conflict with anything around it.
clear:both;
Width is 100% so that it stretches right across the container.
width:100%;
Height is 120px to accomodate the text.
height:120px;
I’ve set the borders at 2px, and used the same box sizing rules as before, allowing me to have padding that doesn’t increase the size of the div.
border: 2px;
border-style:solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:3.75%;
The background colour is the same gradient as I used in the footer, and again I’ve added a yellow background as well so that when IE can’t read the gradients it pushes out a yellow background instead.
background-color:#FF3;
background-image: linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -o-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,5) 10%, rgb(224,224,9) 55%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.1, rgb(255,255,5)),
color-stop(0.55, rgb(224,224,9))
);

This css shows that there is a box radius of 20px on the bottom left, and top left and right corners. The bottom right is a 200px radius so it matches the footer but in reverse. This matches the designs I drew for the footer.
-webkit-border-bottom-right-radius: 200px;
-moz-border-radius-bottomright: 200px;
border-bottom-right-radius: 200px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
}

The overall effect of the footer is shown here:

footer

 

Hero

Leave a comment

The hero is the main feature of my website. Although my location page will have an interactive map, I will still include this hero div as it is the central piece to my website. After looking through and researching quite a few different types of slider, I decided that the one I would use is the NivoSlider. This is because it was the best looking ready responsive slider I could find. I looked at various sliders and carousel jquery plugins, but at the end of the day I thought that although I couldn’t find a good looking, smooth responsive carousel that matched exactly what I wanted it to look like, it would be a lot easier to use a responsive slider as i’m not 100% confident on implementing jquery and javascript into my work, especially when it comes to altering java code. This is something I do want to learn, but I haven’t got enough time during this assignment to funnel all of my time into one aspect. Besides, the NivoSlider looks great!

jquery slider 3

Here is the HTML and CSS for the Hero:

<div id=”hero”>

This div defines the theme the nivo slider will be using, linked to a folder in the root called ‘themes’
<div class=”slider-wrapper theme-default”>

More

Sliders

Leave a comment

One of my designs included an interactive slider that I could use to switch through 3-5 different images/offers. I researched some j-queries that offered this.

Slider 1
http://blog.karachicorner.com/2010/12/new-fancymoves-jquery-product-slider/

jquery slider 1

This is the ‘FancyMoves’ slider. In my design I wanted a slider that contained a large central image, with about a third of the other pictures shown either side before changing. This one does pretty much what I wanted it to do, but I thought that it showed too much of the other pictures. I want the attention to be focused on the central image rather than being drawn to those around it.

Slider 2
http://galleria.io/

jquery slider 2

I searched for a couple of hours looking for one that looked exactly like what I wanted, after which I decided to be a bit more open minded into choosing a slider that looked good and functioned in the same way that essentially I was trying to find in the slider I initially designed. This slider showed a small thumbnail of the image in the main picture area. I liked this one because it offered the chance to use more images than the last one, but I still wanted to see what else I could find.

Slider 3
http://nivo.dev7studios.com/

jquery slider 3

The ‘Nivo’ slider was simple and effective. I liked that it was widescreen and it didn’t draw attention away from the main picture. The slide indicator was subtle, and when you hover over the slider the autoplay feature stops,which is handy when wanting to focus on one image.

Slider 4
http://wowslider.com/jquery-slider-mellow-blast-demo.html

jquery slider 4

The ‘Wow Slider’ was pretty similar to the ‘Nivo’ slider. The difference being that this one had 11 different preset transitions between images to choose from, rather than playing a random assortment of transitions (although i’m pretty sure you could randomise the transitions on this also).

Slider 5
http://codecanyon.net/item/all-in-one-bannerjquery-rotatorcontent-slider/1534434?ref=wdgs

jquery slider 5

I saw this slider, and it looked like what I wanted, but it revealed too many pictures, it wasn’t smooth enough in its transitions, and it also had an annoying little timer wheel in the top left of the main image to indicate that the slider was about to move on to the next image.

I then refined my search. The one above was listed as a carousel slider. So I changed my search to ‘jquery carousel slider’.

Carousel 1
http://www.bkosborne.com/jquery-feature-carousel

jquery carousel 1

 

My search immediately came up with what I wanted, albeit this one was slightly wider than I wanted (by this I mean the images on either side were too wide). It also revealed the slide indicator which has been a feature of a couple I’ve seen, but the way that this one does it renders it too messy for what I want, and if I use a slider like this i’d rather it was simpler in its conveyance.

Carousel 2
http://www.jacklmoore.com/monte

jquery carousel 2

 

This was exactly what I wanted. It had smaller previews of other pictures, a better focus on the central image, and a subtle slide changer with an autoplay function. The only problem was that you had to physically press a button to pause the slides, and the transition was a bit boring because you had to wait for one image to slide across before the other will take its place.

Carousel 3
http://fredhq.com/projects/roundabout

jquery carousel 3

I liked this one, and if you imagine pictures instead of grey blocks it looks a lot better. The only downsides to this one were that you had to click other pictures to rotate the carousel, and there was no autoplay function.

After looking at lots of different sliders, I think I might rethink my design and go for a ‘one image at a time’ format. I liked the three wider image sliders in my searches, and these would be easier to make responsive than a carousel slider. I don’t plan on using a slider for viewing on a phone, but I want it to remain a feature of the tablet version of my website.

During my searching, I came across this slider that I really liked:

3d Slider
http://codecanyon.net/item/ccslider-jquery-3d-slideshow-plugin/full_screen_preview/162445?ref=lvraa&ref=lvraa&clickthrough_id=97927834&redirect_back=true

3d slider

I am really considering using this slider. The transition between pictures is so smooth, and the 3d element makes it even better than the one i’d seen before. There were many different transitions, and the shadow effect was pretty good too. This one would cost me $12 to purchase a license to use this on my websites, but I think that whether I use it for this assignment or not, I want to be able to use it at some point! I might look for an alternative first that doesn’t require a license so that I don’t have to pay for it though.

 

Content

Leave a comment

For my main content, I had two divs – left and right. I’ve used the new css properties:aside and article, but I also used normal divs to construct this.

Here is the html and css involved with this section of my website.

I set left to indicate what I wanted on the left of the container – simple 2 column layout.

<div id=”left”>

New html5 tag. Each of the divs in the left div follows the same suit. They either contain an image, some text, or alternating text/images depending on the media query (I will discuss these in another post)

<aside>
<p>TEXT</p>
<br>

</aside>

<div id=”aside2″>

I’ve given all of the images a class: ‘imgsize’. This is to save adding height and width attributes until the css, as if I add values here, they won’t be responsive, and if I add responsive values such as 100% or auto, they will not validate and will not be read by IE (surprise surprise).

<img class=”imgsize” src=”images/car1.jpg” alt=”car”/>

</div>

<div id=”aside3″>

<p>TEXT</p>
<br>

I’ve added a link here which links this content to the location page. I’ve deleted the content for this post simply to make it easier to read.

<p>TEXT<a href=”location.html”><strong>here</strong></a>TEXT.</p>

</div>

<div id=”aside4″>

<img class=”imgsize” src=”images/map2.jpg” alt=”map preview”/>

</div>

</div>

These are the divs that will be appearing on the right side of the container.

<div id=”right”>

<div id=”article1″>

More

Interactive Map

Leave a comment

I decided today would be a good day to start my interactive map! I was working through a tutorial, so I figured it would be a nice relaxing and constructive way to spend my day and do some work.

The tutorial I was using was this:

Making an Interactive Picture with jQuery « Build Internet

Here is the image I will be using to be my map. I made this on photoshop and my photoshop skills aren’t great, but it does the job!

map

Following the tutorial and making changes where necessary, this is the code and css for what I came up with:

<div id=”map”>

This is where I placed the image of the map.

<img class=”imgsize” src=”images/map.jpg” alt=”interactive map”>

More

Navigation

Leave a comment

For my nav bar, I only had 3 pages so I wanted to make them interactive buttons for each page.

Here is the css and html for my nav bar. Like with the header, I will go through it and explain each bit:

This is the main nav container

<nav>

<div id=”nav1″>
Here is the text for each of my nav buttons. The font style gives the text a yellow background. <strong>Puts everything inside the tags as bold text in the html standard form.
<p><a href=”index.html”><strong><font style=”background-color:#CF0;”>HOME</font></strong></a></p>
</div>

<div id=”nav2″>
<p><a href=”location.html”><strong><font style=”background-color:white;”>LOCATION</font></strong></a></p>
</div>

<div id=”nav3″>
<p><a href=”events.html”><strong><font style=”background-color:white;”>EVENTS</font></strong></a></p>
</div>

</nav>

nav{

The dimensions of the nav bar holder match the container for width, and the height will stretch depending on the size of the navigation buttons
max-width:960px;
width:100%;
height:auto;

More

Older Entries