I am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
Related
i have been having problems in wix mobile website version I have a javascript quoter embedded on the desktop version now how do i make that fit in the mobile dimension? any tips on getting that done www.yourfamiliesfirst.com/tq is where it is i have resized the first page of the quoter where you put in your information and what not. i had to scale the image and push it out of the box to fit the screen, problem is when second page after that loads its not proportional to the mobile version and it looks like the page being displayed is greater than the mobile screen. Please help me out as i have no coding skills to be able to code my way out of it but I'm open to suggestions. Thank you for whoever takes the time of reading this and give me a suggestion much love god bless.
Hey #exodus seems like you're running into responsive site issues. Normally you could resolve it by developing with mobile-first in mind by setting #media responsive CSS.
I'm not too familiar with Wix, however I did find this Wix documentation here which guides you through having a mobile-friendly view and layout.
I'm pretty new to web development and I'm having trouble making a website that I've created for my portfolio responsive. My main issue is that my website uses a sidebar navigation menu...so I'm stuck on how to incorporate that in the responsiveness. I'm thinking about using Bootstrap to make the process easier but I'm still unsure on how I could rearrange the sidebar so that it fits smaller screen sizes without making any major changes to it.
Any tips, help, suggestions will be greatly appreciated. Thanks!!
You should check out css media queries. They allow you to change the your sidebars with the size of the browser or to disable them you browser is too small.
You could use media queries or you can also use display flex for responsive behaviour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In css, you can use percentages when defining dimensions like so:
.sidebar{
width: 50%;
}
As long as you sidebar isn’t in any other element, it will automatically resize to 50% of the users screen. If your sidebar is contained in another element, you will have to resize the other element first.
I'm building a CMS based on Zurb Foundation, and one thing I'd really like to do is allow the user to switch between large/medium/small layouts via a button so that they can both preview how the page looks at this size, but also so they can set up columns etc. for different breakpoints.
Media queries are predicated on the window width, and I've been so far able to build something that my users find quite intuitive, and I feel that asking them to resize their browser window to change the mode seems a bit iffy.
An immediate way that I can think of would be to use an iframe for the main edit view, but the problem is that the page interactions I have are quite complex, drag & drop, drag to resize etc. - I have all of these working at present with both mouse and touch, and in order to drag & drop between the parent and an iframe I'd have to rewrite a significant amount of code. So I'd rather avoid this if at all possible.
I'm looking for suggestions/advice on how I could make this work - workarounds and hacks are fine.
This is how it looks at the moment, to give you an idea of the kind of interface I currently have - no live link that I can share atm, sorry:
OK - this is the solution I've come up with so far - the whole page, not just the editor area goes in an iframe.
https://gist.github.com/nrkn/00e1fb7cc4c7b43329a3
https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/69a85b12dda7cece2b7ed602503c45d16f898d15/iframe-rawgit.html
I have found a website feature that I really like. I'm still fairly new to front end web development and I can't find any information regarding what the scrolling technique is used here.
It's the 'page to page' scrolling I'm interested in, all I require is the name of the technique so I can research and self learn.
Thank you!
I don't know what's the name of this "page to page scroll" effect, but when you scroll at the beginning of the page there is a parallax effect used on the desktop lamp.
Also, the library to do the "page to page scroll" effect is fullPage.js and it's located here: https://github.com/alvarotrigo/fullPage.js
You can see those related questions on SO: How can I achieve this background scroll effect? and Differential scrolling?
Edit: quoting myself from linked post to have complete answer:
a great demo from Nike http://www.nike.com/jumpman23/aj2012/
a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design
(make sure to see each example, some are really great ! ex:
http://benthebodyguard.com/index.php http://www.siebennull.com/
http://janploch.de/)
Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not
really parallax but still great)
a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
a library to do parallax https://github.com/cameronmcefee/plax
another library https://github.com/markdalgleish/stellar.js
You may also like this:
http://johnpolacek.github.com/scrollorama/
http://joelb.me/scrollpath/
It's the latest technique in web design, called
Parallax Scrolling
With new technologies like HTML5 and CSS3, it's becoming possible to create more advanced, interesting and remarkable effects in the browser.
One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page.
Useful Links
Wiki
Simple Tutorial
46 great examples of parallax scrolling websites
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.