__HTML:__

- Since the the navigation is the only thing inside your `<div class="footer">`, how about moving the class to the `ul`?
- Instead of using `span`'s there, you can add the `&raquo;` to a pseudo-element (see the CSS part)

__CSS:__

- For your arrows, use pseudo-elements:

        .footer a:after {
            content: "\00BB";
            float: right;
            padding: 9px;
            border-radius: 2px;
            background-color: #ca0000; /* hex-based values are shorter */
        }

  You won't need to hide them on bigger screens either, if you define them inside a media .query

- Instead of actually writing the links in capital letters, write them like you would in normal language and make them appear uppercase with `text-transform: uppercase;`
- I don't see a purpose for the `min-width: 1px` part in your media query. Just unnecessary.
- Defining `display: block;` on list-items is not necessary, because they behave like block-level elements already
- Select `.footer li` instead of `.footer ul li` and `.footer a` instead of `.footer ul li a`. No need for this extra layer of specificity and dependency. There will probably no other links and list-items in this ul other than these you already have