Considerations when building Responsive Websites

It is so important to actually think through how the various elements on your page will flow and be seen on various devices.  Oftentimes, you may even totally leave some sections out on mobile that are definitely included on desktop sites to make the site easier for the user to navigate.

In any case, you will want to consider which item should show first, second,  etc as the elements wrap on the mobile device.  What would make more sense to see first, second , third and so on.  If you aren’t careful when setting up your media queries, then your important information might just get buried way down a page and result in losing your user. So be sure to check, check, check devices to make sure you are giving the experience you want.

If you have a tab or navigation that needs to be accessed, remember that at least 44 pixels should be used so people are actually able to hit it and not too close to another so they aren’t hitting the wrong link which can be very frustrating.

Also don’t forget to change line height or you can get a very interesting mess!

Trent Walton brings up a very interesting thought about embedded maps on sites.  He says it is probably best to set the media query at 90% or your user may get stuck if the embedded map takes up the whole viewport.  I had not even considered that, but it is a very good point.  You can read his article here.

Though I haven’t studied this part yet, I read an interesting article on responsive design at smashing magazine .  They say

Through PHP and JavaScript, we can detect the time of day of the user’s current location. Liz Danzico serves an alternate style sheet to her readers depending on the time of day that a user visits her blog. If you visit it during daylight hours, the style sheet presents the text as dark text on a light background. You’ll see the opposite if you visit the website during the evening or night, which Liz does to optimize readability based on the assumption that your surroundings will have less light. This is responsive design.

That is cool, but for now I am focusing on the part of responsive design that affects layout.  However, I am looking forward to tackling some of that soon!