Responsive Web Design: iOS hover issues!

This semester for my senior project I decided to create and code my own online portfolio. The main goal for this project was for my site to be responsive. What better way to showcase my design and code skills than to create my own online portfolio!?

Now, you might be asking, “What is responsive web design?” so for those of you who don’t know, let me explain. Responsive web design is a type of web design with the goal of creating websites which allow visitors to view the page with a variety of devices, normal computer monitors or laptops, tablets and phones. The site should be easy to read and navigate without having to pan, zoom and scroll around too much.

I had almost completely finished my site, code and everything, when I sent the link to a friend of mine to check out. She noticed that the links weren’t working. How could this be?! I have worked to make sure that the site works on various browsers from Google Chrome, to Firefox, Safari and even Internet Explorer. It worked on my phone and my Kindle Fire. Finally, I realized it had to be something to do with the iPad/iPhone and not just Safari.

After scratching my brain and searching through articles on the web, I found one which explained that the hover state on the iPad/iPhone doesn’t translate the hover states into a click event. HOWEVER, there was also a solution shared for the world to use. After adding the onClick rule to my <div> containers the linked worked! HALLELUJAH!

If you’re also building a site with hover states, check out this article. It’s short, sweet and gets right to the point. With all of that being said, now that my site is officially responsive on all devices, feel free to check out my online portfolio here.

Happy coding!

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.