Responsive Design

Responsive setup is mainly how the layout “changes” when the site is viewed on a phone vs. computer screen. These are the main issues usually:

1. Top navigation menu: The default way a lot of responsive sites are setup – is that when the site is viewed on a phone, the top navigation menu is turned into a vertical list and the items are changed to “full width”.

So if there are four or more items on the menu, when the site is viewed on the phone, it will initially load with the banner at top and then the menu filling the whole screen.

I feel that this is not ideal at all. It is possible visitors (when they first visit) will think the website is just one large menu, as that is all that they see on their screen. I have seen several wordpress responsive themes and they all do that.

So – I took a look around at some of the most successful sites and what happens to them when viewed on a phone. Not all are responsive of course, but on the ones that are, not a single one has a menu that fills up the screen like that on initial visit.

The best way I have seen this handled is to have no menu on the phone when you first visit. But there will be a “toggle” button right below the logo/banner. This button will then “load” the menu which will then fill up the page. But it is OK now since they have seen some of your content and have an idea of what is on the site. And they are “choosing” to load the menu. Also they can turn off the menu at any time by hitting the toggle button again. The site I looked at had three toggle buttons below the logo (menu, “cart” (shopping cart), and “search”). I setup this demo site so on the phone it has two toggle buttons, one for the menu and one for the cart. But I can set this up any way you want.

2. The sidebars are not displayed on the phone. One thing that is consistent on all “responsive” setups is that the sidebars are moved to the very bottom of the website (on phone only). This is because phone screens are so small and screen space is at a premium. And so the whole site is changed into “one column only” when viewed on a phone. We agree this is necessary on very small screens, but at the same time this affects how we think about what we put on a sidebar. To some extent – it is almost as if the sidebar “no longer exists” as it is now at very bottom of site. There are a number of ways this can be addressed. I guess you just need to be aware that on a responsive site will do this – they all do it. Your whole site, when viewed on a phone becomes a vertical one column site with everything stacked one on top of the other. The most important things can be in a toggle button below logo like discussed in #1 above. Another thing that could be done is to strategically place some ads or whatever “in between” posts as people scroll down. These could be coded so they only appeared when the site is viewed on a phone.

– and before I continue, I wanted to stress another point that is important. The ability to have some things appear only “when NOT viewed on the phone”, and vice versa. Two primary examples of that are all of the things on the top right. They only appear on computer screen and are not present on phone. The opposite is true for the toggle buttons previously discussed. These appear on the phone only. So, strategically placing items in this way can be helpful…

3. Finally, the other main issue is how images or “div containers” are handled on the phone. For example you may have 8 pictures across in a row on computer screen. When viewed on the phone those images will be changed to being in a vertical column. They are set to be full width on the phone screen. This in my opinion is totally unnecessary. If there is text with the images then I recommend having it so there are two or three to a row (on phone only). And if there is no text with the images (or divs), then they can be shrunk down even further on the phone screen…

I guess all I am saying is that if you let things load the “default” way – they may not appear that good on the phone. But I know how to control the sizing and placement of things so that it will look much better.