logo

Mead.Design

Audio Space

Responsive Design

Making webpages that work for various screen sizes is one of the most important techniques today. This webpage was designed to be a good place for students to cut their teeth on responsive design. The simple layout makes it easy to make this page squish down into something that looks good on mobile. You can check out the full project and see for yourself.

Audiospace02

audiospace03

Animated Flip Effect

As an added bonus, I built in an animated flip effect that works when you hover the mouse over each album cover. However, you run into a bit of a problem with this on mobile, because there is no real hover state on mobile and because of that the flip effect was behaving erratically. To fix this problem, I had to write some tricky JavaScript removing the hover effect and putting it entirely in the hands of JavaScript to properly handle both a mouseOver event and a tap event for mobile. You can see the slightly broken one if you open it on your phone here:

http://mead.design/audiospace/v1

Screen Shot 2016-07-03 at 11.24.36 PM

Mobile Navigation

Even though the other pages of this site have not been built out, I wanted students to practice building mobile navigation. This page has a simple menu with just a few links. It is not too difficult to convert this menu into something that will work well on mobile. The placement of the link to the menu on the right hand side and making it quite large is important for mobile users. If you try the site on your phone, you will see it is not too difficult to tap the menu and access the menu items. Often time, navigation on mobile can be a problem for a variety of reasons.

Screen Shot 2016-07-03 at 11.42.16 PM

Featured Projects

  1. ZAP Creative

    Responsive Design, HTML, CSS, JS, PHP and WordPress

  2. Animal Shelter

    Responsive Design, HTML, CSS, JS, PHP and MySQL

  3. Experimental JavaScript

    Responsive Design, HTML, CSS, and JavaScript

  4. KITTENS FOR SALE!

    HTML, CSS & JavaScript focusing on jQuery plugins

  5. Syllabus Generator

    PHP & MySQL Web Application

  6. CodeSnap Web Application

    PHP & MySQL web application

More Projects

  1. 4.23 Microsite

    Experimental JavaScript Microsite

  2. Audio Space

    HTML, CSS & jQuery

  3. Bttrfly Productions

    HTML, CSS, JS, & WordPress

  4. Desktop Repainter

    HTML, CSS & JS

  5. Bluephant Dental

    HTML, CSS, & JS

  6. Zen Music Festival

    HTML & CSS

About William Mead…

William Mead Photo

This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

Find me on these networks

Professional Qualities

  • Enthusiastic about teaching, learning, managing projects and building products for the web.
  • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
  • Thoroughly engaged in the design and web development industries.
  • A visual learner with an analytical mind.
  • Introspective and always striving for improvement.

Skills

I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

Contact Me…

I look forward to hearing from you. Please contact me using the form or directly by email or phone.

bill@mead.design
530-219-8998

Your Name (required)

Your Email (required)

Subject

Your Message

Anti Spambot Question