# is this even possible?



## Msap14 (Aug 29, 2011)

I am self taught with html, and have used that knowledge to build websites for others. I am trying to put together a website, whose design i have no seen before. To help me expalin this, think of a video game UI...

in the top left corner i want a box that will update with facebook status automatically, and in the top right I would like to put a ROUND google map surrounded by buttons for different store locations, and at the bottom have the nav bar with icons for each type of service. Of course, in the middle will be a content box which has overflow: scroll enabled. I want the background image to change every few seconds, the website to adjust itself to the screen resolution size of the user's computer, and the map, nav bar, facebook to stay in the right spot. 

An attempt to summarize: video game ui website design with changing background images. 

I am trying to think of where i need to start with this. I am thinking it will be heavy on java scripting (which i don't know how to code myself, ive always just looked up tutorials or used a pre made script) but i don't even know if this is even accomplishable.

so can i make this happen? or does it not seem possible?


----------



## Easo (Aug 29, 2011)

Mmmm, i suck at it, yet i think with whole page made of Flash that should be possible. Will be heavy though.


----------



## Msap14 (Aug 29, 2011)

*Flash possible*

I'm trying to also make it as search friendly as possible, so i would like to stear away from flash, but flash would for sure work.


----------



## DonInKansas (Aug 29, 2011)

Sounds like one of those irritating and overly busy looking sites that drive people bananas.  You might go for a cleaner approach.


----------



## Msap14 (Aug 30, 2011)

DonInKansas said:


> Sounds like one of those irritating and overly busy looking sites that drive people bananas.  You might go for a cleaner approach.



yea, maybe... ill have to see how it looks if i can get it working.


----------



## xbonez (Aug 31, 2011)

Msap14 said:


> I am self taught with html, and have used that knowledge to build websites for others. I am trying to put together a website, whose design i have no seen before. To help me expalin this, think of a video game UI...
> 
> An attempt to summarize: video game ui website design with changing background images.
> 
> ...




Don't go all flash. Your website would be a resource hog, slow down people's browsers and kill little baby seals.



> in the top left corner i want a box that will update with facebook status automatically, and in the top right I would like to put a ROUND google map surrounded by buttons for different store locations, and at the bottom have the nav bar with icons for each type of service. Of course, in the middle will be a content box which has overflow: scroll enabled. I want the background image to change every few seconds, the website to adjust itself to the screen resolution size of the user's computer, and the map, nav bar, facebook to stay in the right spot.



You can get the FB status box. Look into FB Like Box.
Similarly, look into the Google Maps Javascript API for the GMaps widget. I have veyr little experience with that.

For the nav bar at the bottom, one way to do it is to have an empty <div> which is used as a spacer to ensure no matter how big the main content div is, the footer stays at the bottom. 
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

To ensure the FB and GMap boxes stay at the edges etc, this is how I do it.
Have a javascript function that returns the height and width of the user's browser. Call it using the onload attribute of the body tage. 


```
<body id="Body" class="body" onload="browserSize()">
</body>
```

Size the <body> of the page according to the results returned.
Size all divs within the body as percentages. When a percentage is supplied as the size of a div, it will be a percentage of the first parent that has a specific size supplied, in your case, it will be the body which is sized to the browser's resolution.

EDIT
As an alternative to your above design, one thing web designers sometimes do, is develop your site for 1024x768. Very, very rarely do people have resolutions lower than that. For resolutions larger than that, you just get empty spaces on the left and right. It doesn't look bad at all...gives the site a very simplistic and streamlined look. Imdb.com does that.


----------



## IlluminAce (Sep 3, 2011)

All the above is accomplishable with the standard trio of HTML, CSS and JS. To echo the thoughts of xbonez, *do not use Flash*. There are too many reasons to mention as to why that would be a terrible idea. Rule of thumb: only use Flash where you absolutely need to use Flash, and even then restrict its use to the smallest section of content possible. Never, under any circumstance, design the main components of your site in Flash, let alone the whole thing.

Finally, be careful with the changing background. That could be terribly annoying for end users - to make that bearable, you'd want to use smooth transitions, keep a reasonably long time gap between changes, and ensure the images don't contrast too much. Even so, for those with very large resolutions, poor onboard graphics, and slow CPUs, ... personally I'd push back against that requirement.


----------



## <<Onafets>> (Sep 5, 2011)

xbonez said:


> Don't go all flash. Your website would be a resource hog, slow down people's browsers and kill little baby seals.



Sigged'

But back on topic. Could you incorporate (just throwing it out there) a moving .gif image for the background with the images already in there? Also for the Facebook you would have to set it to reset at a certain interval, not when new posts appear. I believe you can do this through java script by updating the Facebook app every whatever seconds/minutes. Unfortunately I'm not a web coder but i can only suggest logical ideas from a desktop programmers POV. Could you use a more powerful language? vb .net sounds like a suitable option as it is easy to pickup


----------



## Mussels (Sep 5, 2011)

this aint my thing, but i can honestly tell you websites like this will be bandwidth heavy, and complex. you'll have to test it out on every browser out there because some of them will not like whatever method you end up using.

(thats not counting the whole tablet/phone market as well, which will complicate things)


----------



## FordGT90Concept (Sep 5, 2011)

I think I would use Silverlight to accomplish all that.  It would work so long as Silverlight has somewhere to pull the Facebook and Google Maps data from.  Hell, you might be able to use some Bing Maps module Microsoft already has released.

You'd have to make a basic version of it for users who have scripting disabled.


----------



## caleb (Sep 5, 2011)

Theres just one huge problem with Silverlight and we all know what it is.


----------



## xbonez (Sep 5, 2011)

I honestly would not recommend you to look at anything beyond HTML/CSS/JS for the frontt end. Everything u need done can be achieved by those three. They are light, standard and carry across browsers pretty well. Also, most mobile browsers will render the page as well. 

For the back end, its really up to you whether you want PHP, ASP.NET or something else


----------

