Web Design/Fluid Design

Advertisement


Question
QUESTION: Hi there Jamison,

I just wanted to ask for some advice on making elements on my sight fluid.

1) Most needed is making a table showing information, such as one from excel. I need this to fit the page perfectly, over different browser widths.

2) The same thing for images

3) The same thing for a menu bar

4) I would also like to check up that if everything is fluid, will it help mobile friendliness?

Thanks alot, I am fairly new to fluid layouts,

- Noah

ANSWER: SOO sorry for the late response!

1) If you use percentage widths and your outside containing container is 100% wide this should do what you're expecting. At smaller widths however you should expect some line wrapping.

2) Images are a little more difficult, but, their height and width's can be set to percentages as well. This could result in unexpected blurriness or distortion though.

3) The menu bar, set at 100% wide like #1 should re-size based on browser size as well.

4) Designing a "responsive" website is different from building a "fluid" one. I would recommend reading up on the differences here: http://www.lullabot.com/articles/responsive-adaptive-web-design

Hope this is enough to get you started.

---------- FOLLOW-UP ----------

QUESTION: Hi again,

With regards to the fluid table I am having some issues. If you could possibly have a look at this page and give me some advice or code snippets for the table and the menu bar.

http://www.technobanter.co.uk/Gadg3t/HTMLFiles/ComparisonPages/test.html

Thanks a lot,

-Noah

ANSWER: AH... the trouble there is if you want all those menu items to show you just HAVE to have a certain width. The only thing i could think of would be to have a min-width, then when you reach that min to add each overflow menu item into a "MORE" drop down.

---------- FOLLOW-UP ----------

QUESTION: Thanks for the quick reply! I like the idea of having a 'more' drop down and is something I will consider.

However the more important issue for me at the moment is getting the table on that page to be responsive to browser sizes. I you could take a peek and offer any advice that would be excellent.

Thanks!

Answer
The "more" is probably the best way to be responsive. The other option would be to use media queries to choose to hide certain links with a special class.


@media only screen and (max-width:800px){
   #menu li.secondary{
       display:none;
   }
}

In this method you'd need to assign a priority class to each link item. once your browser hits 800px wide the li's with a class of secondary will automatically hide.  

Web Design

All Answers


Answers by Expert:


Ask Experts

Volunteer


Jamison Mergens

Expertise

I have over 12 years experience in website design, development and programming. I also am a custom dedicated server host. Pretty much anything related to "web" I can offer advice on. I can offer advice covering: html, html4, html5, css, css3, css animations, JavaScript, jQuery, PHP, server configurations, email related questions, SEO, marketing and business development.

Experience

Over 12 years experience in the web industry

Organizations
Various local charities

Education/Credentials
Over 12 years working experience

©2016 About.com. All rights reserved.