Changing a website home page to be able to be seen on all devices.

[Elbee]

Hi!

It will be a year before we are able to buy a new content management website; therefore, I have been asked to make our current home page of our website viewable on all devices. God help me!

It was originally designed 10 years ago using tables and many CSS styles.
http://jpl.coj.net

My supervisor wants all the menus to remain as they are and rearrange everything else which I believe is unrealistic. I have thought I have to remove all the tables and somehow use percentages to have everything appear on the home page.

Am I thinking correctly?

Thanks for all your help, Elbee

[djr33]

"all devices" is unrealistic. You can get the vast majority, and you can also make reasonable fallbacks so that if something doesn't work, they can at least view a text only, unformatted page. For mobile devices, there are some that are just bad, and their users know that. If they want better browsing, they can get a new device (or use a computer). Your website won't stand out as problematic for them. Therefore, target the most common devices and browsers, and you'll get to probably up to 99% of the users out there, maybe more if you want.


It will be a year before we are able to buy a new content management website;Why? Do you mean a Content Management System (CMS)? There are many free versions available that would be good enough for your (or almost any) purposes. I wouldn't recommend re-designing a temporary one-year website. Maybe I misunderstood your post.



My supervisor wants all the menus to remain as they are and rearrange everything else which I believe is unrealistic. I have thought I have to remove all the tables and somehow use percentages to have everything appear on the home page.

Am I thinking correctly?The website doesn't look that complicated to me. It would perhaps be extra effort to remake everything, but it seems possible. You do seem to be thinking correctly about some of those changes (all of the ones you mentioned, though there may be more).


Does that help? I'm a little confused about what the problem is.

[Elbee]

Hi, thanks for your reply.

Since this is the Jacksonville Public Library website in Jacksonville, FL, management wants to go to a Content Management website (Kentico). I have no say in anything believe me! All they want to do is make the home page better viewable in smaller devices for now. We aren't going to attempt to do the whole website.

If you look at our home page in a smaller device, you'll notice that the center section does not appear correctly.
[URL]http://jpl.coj.net/[/UFL]

This home page was created 10 years ago (most of it) and a table was used to format the page. I just want advice on the proper method of creating it where it looks good on most devices.

Thanks, Elbee

[djr33]

There are a few ways to go about that.

1. Create a separate mobile page for mobile visitors. Keep it simple, add in the necessary links.
If you want, you can try to automatically detect and redirect a mobile visitor to this page. That can introduce complications, though, such as if they want to view the full page.

2. Replace the tables with divs that work based on percentages. They'll get larger and small, regardless of the size of the device.

3. Replace the tables with divs that slide around as the screen gets smaller. CSS properties like "float: left" will allow a sort of stacking when the window is too small to display everything horizontally.

4. Replace the tables with a more modern layout but leave it basically as-is. This won't display beautifully on a small device, but it would allow (awkward) scrolling and keep everything visible.


As a general rule of thumb:
--For modern browsers, try to make the website look nice.
--For everything else including mobile devices, try to make the content accessible.

Mobile visitors won't expect perfection. Just make it easy to find what they're looking for.


There's a lot of information out there about designing mobile websites. And as the mobile devices improve, there's less to be concerned about, even with small screens when the devices allow easy zooming.