If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Responsive web design for my website

Hello there,

I've been building this website for a while now, and I can't seem to solve the issue of adjusting it to certain screen resolutions in desktop or to mobiles.
I've heard of "responsive web design" and I understood that it's basically setting sizes for the elements in my website differently in every screen width. I can't seem to fully understand how to do that.

I'll be more than happy if someone can review my website and css code and try to fix the website for me so it'll fit to any screen resolution & to mobiles as well. I'm willing to pay and not little (if you have PayPal account it'll be great)
my website is www.mypresent.co.il

Responsive Web Design is essentially just a set of methods and standards that help websites better adapt to a variety of resolutions. Obviously mobile devices such as phones and tablets are becoming more popular for browsing the web and so it's definitely a good idea to make sure their experience is just as 'fair' as anyone else's. I'll try to help demonstrate and explain some things you can do to help adjust your site to fit a responsive design.

Media Queries are a popular way to create a responsive web design. They allow you to adjust your CSS based on conditions of the person viewing the page. You can set different values for parts of your page or completely rearrange how things are displayed based on who is viewing the page.

There are a number of queries you can preform and essentially you will simply end up 2, 3 or maybe even 4 different query designs that alter certain CSS values on your page to adjust to different resolutions and orientations. Personally my aim would be to set 'default' CSS values for your PC users and then have 2 seperate queries to adjust your CSS (one for tablets and one for phones). Here is a useful reference if you need help understanding media queries better: http://css-tricks.com/css-media-queries/

Another important part of responsive web design is relative values. Using percents or EMs instead of pixels can be a big help in allowing your site to better adjust to various resolutions. Typically height values in pixels are more acceptable as with any browser you can expect to scroll vertically. It's horizontal scrolling that starts to become less user-friendly on mobile devices. One little trick I like for adjusting content is the use of the max-width property.

Code:

.contentContainer {
width: 800px;
max-width: 90%;
}

With something like this you will get an element that is 800 pixels wide unless it exceeds 90% of its container (such as the body or another element on the page). So as a page got smaller you would see that content element reduce its size to adjust and fill 90% of its container rather than staying at 800 pixels and forcing a horizontal scroll. Also remember you can use percents and EMs for fontsizes as well as elements/containers. This can be useful for mobile devices as you may not want some size 72 font on your phone, but on a PC it is reasonable for some huge attention-drawing header.

On your site there are obviously some of these adjustments that could be made and so I'll try to cover those now. I'm not going to recode all of your CSS to make your site responsive but I will certainly try to make sure you know what to do and how to do it.

Your header uses 3 images. Changing these to 'responsive images' would help adjust your header for mobile devices. Setting a 'max-width' value of 100% and 'height' of auto, all you then would need to do is allow 'header' <div> to scale (using percents). But make sure you set a 'min-width' value so your images do not shrink too much. It's also not a bad idea to simply use a media query that removes the two images on the sides under a smaller resolution (@media screen and (max-width: 320px)) so you only really see your header logo, keeping things from getting to cluttered.

Next, your search bar is also using a fixed width and so it isn't user-friendly on smaller mobile devices. Try using the content trick I mentioned earlier so that it stays at 650px until it becomes greater than 90% of its container. You would also need to make sure the elements inside will properly break to a new line if the search bar becomes smaller.

The last thing would be your sidebar. Sidebars are great, however they are terrible for webpages on smaller mobile devices. Typically the best thing to do is move the sidebar above or below your main content. This way your page is able to use the full width of a phone or tablet and not feel 'crammed' and you won't lose any content from your sidebar. The goal is to have a page that only needs to be scrolled vertically and doesn't contain too much clutter or junk that isn't needed for mobile users.

I realize my post might be a bit long and perhaps wasn't what you were looking for but I'm merely trying to share some knowledge on responsive web design. You can always reply if you give these things a try and still need help. I don't mind looking at some of the source and making suggestions or even giving little samples of code.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Dear Sup3rkirby,
WOW this reply is great and very helpful! I've also done some of your tips towards the end and it does improve the looks of my website. However, the pictures, the sidebar and the search bar still doesn't show properly when going to it via Ipad, which luckily I have and can check this with. In the current form of my CSS (please have a look at it) can you give me more tips for changes I can make to improve some more?

Next, as far as the actual HTML of the search box area goes you need to get rid of the use of tables. Tables are not really friendly to responsive CSS designs (but to be fair there are methods for responsive tables out there). In any case the table isn't needed here and can be avoided. You'll need 2 things: an additional CSS class and modified HTML for your search box.

Keep in mind this is just a rough draft, but it should put you where you want to be. But feel free to make any minor adjustments.

As for your sidebar, again the best thing to do is force it to be either above or below your main content when the page is on a smaller resolution (using media queries). You won't want it to be taking up any space on the side when a user is viewing the website on a tablet or phone. This too will take a little restructuring of the HTML and CSS and rather than me sit and dig through all the code and do it myself, it might be a good practice exercise for you to try this part on your own.

Try using the "display: inline-block;" method like I used with your search bar. The containing <div> for the sidebar and the <div> for the main content would each have this display mode set. If the page becomes too small for them to fit side-by-side, one (which ever comes second in the code) will fall below the other. Another method is to set your content area with a percentage width and have the sidebar set to "float: right;" with a percentage width set for it as well. Using a media query you can set new rules for these two so that you "clear: both;" causing them to no longer appear side-by-side but again one below the other.

Just give that a try and see what you are able to do. As for the top images, this again would be similar to what I did with the search bar. You will want to take away the exact width and height values from the <img> tag and instead have it fill a container <div>. From there you can use media queries to adjust the size of those <div> tags or even remove them (for instance removing the two present images and only leaving the main logo). If you still need help after trying any of that let me know and I'll see what else I can do.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"