SitePoint Sponsor

User Tag List

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

    Question Designing a fullscreen website

    I would like to design a website like this website: http://whiteboard.is/ or this one: http://read.thisispaper.com/
    (Preferably read.thisispaper.com because it has more simple design than whiteboard.is)

    The coding behind these two amazing website seems very complex but I am willing to take on the challenge.

    I have done several hours of research and tried to figure out by myself but unfortunately I can't. I am just overwhelmed by the complexity of the code. So I am posting a question here.

    I have some experience with CSS and HTML, right now my current website has a full screen image. Nothing complex... Haha

    Created using:
    Code:
    html {
    	background: url('/images/google-data-center.jpg') no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";  
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale'); 
    }
    So, what is the best way to design such website?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, both of those sites are so ... 2013!

    The main thing to learn about to create something like that is "parallax".
    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
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by successfulfail View Post
    (Preferably read.thisispaper.com because it has more simple design than whiteboard.is)
    Before deciding to emulate that site, you might want to try viewing it with JavaScript disabled. It's less than impressive.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like I have to use JavaScript...

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    You seem to have been wanting this for a while eg.
    Responsive fullscreen website design Apr 20 2013
    Responsive website - looking for some advice Sep 14 2013

    You apparently have no difficulty finding sites you like, but have a problem getting started.

    What can we do to help?

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I have been... I just don't know where to start. (I just get overwhelmed by the code, even with that simple website ralph.m has linked (http://richardshepherd.com/smashing/...ackground.html))
    I am just having difficulty studying the code.

    According to ralph.m 's last post, the website that has been linked is using Boilerplate.

    Based on my research, Boilerplate is a good template to base my project on. Would you say?
    In that case, even with most basic Boilerplate 4.3.0 I don't know where to start. (I get most of the HTML part but not CSS and JavaScript. (Some codes I understand some I don't and I don't know if they are important therefore I should keep them or not))

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Yes, it certainly can be overwhelming at first, and even after for that matter.

    It's good that you have some grasp on the HTML, that's what the rest is built upon.

    I won't get in to how I feel about "javascript required" sites, the fact is it depends on your target audience and how willing you are to alienate some visitors. They sure do look nice when javascript is enabled, but can fail miserably when not.

    I think Ralph gave as good an example as any. I suggest you download and study the files at https://github.com/richardshepherd/Parallax-Scrolling that go along with http://richardshepherd.com/smashing/...ackground.html

    You don't need a localhost server to get started with these, but if you have one you could use it.

    To learn what is going on, the way I've learned a lot is to copy what I've found, study it, change it a bit until it breaks, figure out why then fix it, change it some more until it breaks again, etc. etc. until I'm happy with what I've got. True, you may not always learn best practice this way, but you'll learn.

    The first step is to replicate the directory structure on your computer somewhere and download the files into it. Once you've done that and it works OK you can start to get your hands dirty by changing things and seeing what effect the changes have.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been messing with the codes for about an hour now. I have a few questions.


    My current website has fullscreen image background using this code:

    Code:
    html {
    	background: url('/images/google-data-center.jpg') no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";  
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale'); 
    }
    However, the tutorial website is using div

    Code:
    ----- HTML -----
    		<div id="main" role="main">
    			<section id="first" class="story" data-speed="8" data-type="background">
    				<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
    
    				<article>
    					<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
    					<p>Words and pictures by Richard Shepherd / Twitter: <a href="http://twitter.com/richardshepherd" target="_blank">@richardshepherd</a> / Web: <a href="http://richardshepherd.com">richardshepherd.com</a></p>
    					<p>GitHub: <a href="https://github.com/richardshepherd/Parallax-Scrolling/">Fork it here!</a></p>
    				</article>
    			</section>
    
    ----- CSS -----
    .story{
    	height: 1000px;
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	max-width: 1920px;
    	position: relative;
    	margin: 0 auto;
    	border-top: 1px solid rgba(255,255,255,0.3);
    	border-bottom: 1px solid rgba(0,0,0,0.4);
    	box-shadow: 0 0 50px rgba(0,0,0,0.8);
    }
    
    #first {
    	background: url(../images/puckered.png) 50% 0 no-repeat fixed;
    }
    
    #first .smashinglogo {
    	background: url(../images/smashing-logo.png) 50% 100px no-repeat fixed;
    	min-height: 1000px;
    	padding: 0;
    	margin: 0;
    	width: 100%;
    	max-width: 1920px;
    	position: relative;
    	margin: 0 auto;
    }
    #first article {
    	width: 100%;
    	top: 300px;
    	position: absolute;
    	text-align: center;
    }
    #first article p,
    #first article a { color: #CCC; }
    #first article a { text-decoration: underline; }
    #first article a:hover { color: #fff; }
    • What are the pros and cons?
    • The CSS code from the tutorial: there are two
      Code:
      margin
      I don't understand why... Shouldn't there be only one?
    • The CSS code from the tutorial:
      Code:
      max-width: 1920px
      is set to 1920 pixels. This means that this website can only support up to monitors with 1920 pixels horizontally. What would I need to do so that it can support screens with greater resolution? (Also zooming website will mess the background image position...)


    (The last question is related to the first question... I can't figure out how to integrate the codes to fix this problem.)
    Mmmm... its hard to make a universal website...

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    The finer points of CSS aren't my strong suit, but I'll do the best I can.

    Giving the <html> tag a background will result in the full viewport having a background, though being "no-repeat center" might mean it dosen't show in some areas of the page if the dimensions of the page exceed the dimensions of the image.

    I think what the example code is doing is giving the <div> tags backgrounds so that each has a different background that will fill viewport as long as it doesn't exceed the dimensions their the images.

    Good catch!
    margin: 0
    margin: 0 auto
    both are not needed, the last over-rides the first.

    As for 1920px, you are correct in being concerned. Many designers choose a "good" solution that is not necessarily best practice.
    My feeling is that a page should be written such that it will be usable (not necessarily identical) for all users then have CSS added, then javascript. Testing often to make sure it doesn't break anything along the way.

    I have seen many threads saying things like "can I stop desiging for 800x600", "can I have javascript enabled required" etc.
    Truth is, if you know your target viewers and you don't mind alienating some visitors you can still have a sucessful website even when not follwing best practice.

    IMHO it's a matter of Professionalism (in terms of ethic not earning) and Pragmatism (skill, budget, time restraints).

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really would like my website to have full screen on pretty much any screen. If I chose to use the same method as shown from the tutorial I can't...

    What should I do?

  11. #11
    SitePoint Zealot Lieto's Avatar
    Join Date
    Sep 2012
    Location
    Ukraine. Kiev.
    Posts
    106
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Try this, it should be a good start:
    http://dfcb.github.io/BigVideo.js/
    (google ftw)

    As for parallax its overused and quite frankly isnt converting all that well. Anyhow, its not the easiest thing to implement well if you dont have a good designer backing you up. I mean its not hard to move pieces of content separately as user scrolls, but will it look good is another question.

    Also looking on someone else's code might not be the fastest way to learn things, i d suggest taking existing libraries and experimenting with variables. But hey, i am a designer and not a front-end engineer.
    Open for UX career opportunities in London Portfolio

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    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
  •