SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive fullscreen website design

    Hello I am developing a full scree website. I have got my basic designs on the paper however I am having trouble with coding it.

    Here is a simple example of my site:
    Google Glass Start

    Since it will be simple like this I think designing it responsive will not be difficult.
    Please put me on to a right track.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Where are you getting stuck? As you say, the site you liked to is pretty simple. Have you studied its code?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by successfulfail View Post
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css
    Lol. I would to. In fact I'd take one look at that and throw it all way. Never to return

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css
    That's the wrong way to study it, obviously. Instead, use the dev tools in your browser. For example, in Chrome, right click > Inspect Element to view the HTML and CSS of the page.

    All the same, this sort of layout is not hard, so I would suggest you just start from basics and build your page up. Firstly, establish the layout that you need to create.

    When you say "a full screen website", it's not clear what you are really picturing. All websites are full screen, so to speak. Perhaps you mean something like this?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The site has a fullscreen effect, actually a full window with a youtube movie, when you press the "How it feels" button, a javascript effect. That CSS is hard to understand because it`s compacted, that`s all. So if browse the whole document pressing enter after each element, you`ll get a nice code so everyone understands. I`m not sure if Dreamweaver does that automatically ?

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    When you say "a full screen website", it's not clear what you are really picturing. All websites are full screen, so to speak. Perhaps you mean something like this?
    Yes that is what exactly what I meant!

    I have studied the code and looks like its using percentages instead of pixels.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    I have studied the code and looks like its using percentages instead of pixels.
    That's fine, though: just switch from % to px on the inner divs if that suits better. Keep width: 100% on the outer divs, though, or it won't work.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't figure out how the color of header-outer and footer-outer is it is.
    I can't find any hex color values for the both of them.


    Here is the full code:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Layout: full width bands</title>
    <style media="all">
    
    body {
    	font: 100% Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    	background: #30353b; margin: 0; padding: 0;
    }
    
    .header-outer, .main-outer, .footer-outer {
    	width: 100%;
    }
    
    .main-outer {
    	background: #f7f7f7;
    }
    
    .header, .main, .footer {
    	margin: 0 auto; 
    	width: 50em; 
    	padding: 20px 0; 
    	overflow:hidden; 
    	max-width: 98%;
    }
    
    .header, .footer {
    	color: white;
    }
    
    a {
    	color: #D45227; 
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    .footer p {
    	margin: 0; font-size: 0.85em;
    }
    
    .logo {
    	float: left; 
    	padding: 30px; 
    	background: #D45227;
    }
    
    h1, h2 {
    	margin: 0; 
    	padding: 0;
    }
    
    .content {
    	float: left; 
    	width: 69%; 
    	padding: 0 5% 0 0;
    }
    
    .sidebar {
    	width: 24%; 
    	float: left;
    }
    
    @media only screen
    and (max-width : 480px) {
    	body {-webkit-text-size-adjust: none;}
    	.content, .sidebar {float: none; width: 100%;}
    	.content {padding: 0;}
    	.sidebar {margin-top: 1em; padding-top: 1em; border-top: 1px solid #e7e7e7;}
    }
    </style>
    <meta name="viewport" content="width=device-width">
    </head>
    
    <body>
    <div class="header-outer">
    	<div class="header">
    		<div class="logo">Your Logo here</div>
    	</div>
    </div>
    
    <div class="main-outer">
    	<div class="main">
    		<div class="content">
    			<h1>Layout: 100% width bands</h1>
    			<p>This is a simple page layout with bands of color across the page.</p>
    			
    			<p>The basic idea is to have outer and inner divs for each section, the outer set to width: 100% and the inner divs centered with a width and margin: 0 auto;</p>
    			
    			<p>The body background color serves as the background for the header section and the footer, but extends to the bottom of the screen if there is extra space. (That's much nicer than having a white gap at the bottom of the page under the footer.) Of course, each section could have its own background color. It's up to you.</p>
    			
    			<p>The .header, .main and .footer divs are given a width in ems to make them more elastic, but the columns within the .main div are given % widths so that they will adjust in width on narrow browsers. (Squeeze the browser to a narrow width to see the effect. Also try zooming in on the page to see how nicely everything fits at a large size.)</p>
    			
    			<p>The .header, .main and .footer divs are set to overflow: hidden to ensure that they <a href="http://pageaffairs.com/notebook/containing-floats">encose any floated content</a> within them.</p>
    			
    			<p>@media rules are added so that, on small screens like handhelds, the floated columns will be unfloated.</p>
    			
    			<p>Return to <a href="http://pageaffairs.com/code/layout-full-width-bands">original Page Affairs article</a>.</p>
    			
    			<p>For more details on the fluid/elastic nature of this layout, see the <a href="http://pageaffairs.com/notebook/fluid-elastic-fantastic">Fluid, Elastic, Fantastic!</a> article.</p>
    		</div>
    		
    		<div class="sidebar">
    			<h2>Sidebar</h2>
    			
    			<p>Content relevant to the sidebar</p>
    		</div>
    		
    	</div>
    </div>
    
    <div class="footer-outer">
    	<div class="footer">
    		<p>Footer text goes here. Layout by <a href="http://pageaffairs.com/">Page Affairs</a></p>
    	</div>
    </div>
    
    </body>
    </html>

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by successfulfail View Post
    I can't figure out how the color of header-outer and footer-outer is it is.
    I can't find any hex color values for the both of them.
    I have solved the problem.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would I put images like https://www.spotify.com has done?

    Looks like they are using CSS, not JavaScript.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by successfulfail View Post
    How would I put images like https://www.spotify.com has done?

    Do you mean the background video? That's relying heavily on JS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Do you mean the background video? That's relying heavily on JS.
    https://www.spotify.com/nz/ is the website.
    Sorry, I forgot the fact that it redirects accordingly to the clients IP address.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    If you mean the full-screen background images, there are various ways to do that, from JS to the new CSS3 background-size property.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,053
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •