Okay,I designed my webpage to my liking. Finally. But of course, I designed it on a Chromebook with a 1366x768 resolution. So when I looked on my 1600x900 resolution computer, everything is jacked up. How do I use responsive design to get my webpage to look the same on a 1600x900 resolution as it does on a 1366x768? That's just an example. I would eventually like to format my website for mobile phones, but right now, I am focusing on laptop and desktop resolutions. Any help is appreciated, I'm stumped.
If you are not using a framework, such as Bootstrap, then you would have to use CSS's media queries which would allow you to use specific CSS properties depending on the size of the screen of your output device. You can read a clear explanation, at the Mozilla Developer Network, here.
Learning to use them it's not a bad idea, but the most popular means to implement responsive design is using Twitter Bootstrap. Of course you would have to read a lot, but there are a lot of tutorials on how to use the framework and once you are familiar with the grid system and some of it's classes you can make your site responsive quite easily.
The official Bootstrap site and documentation can be found here.
Personally I would suggest you to use Bootstrap since it offers so much functionality without having to make everything from the ground.
This Link may be useful for what you are looking for.
https://spin.atomicobject.com/2015/03/06/bootstrap-add-xl-grid-size-option/
You may use this technique for your need
Related
I've recently been tasked with the of making a website for a department in my school. One problem I've encountered is that the webpage will appear differently on all screens and like to know if it exists some kind of tag or way in css to make it auto adjust on all screens.
There is no easy answer, certainly none that would fit here. Here's a good place to start:
Here is a good introduction to responsive web design, which will help you deal with how your sites will appear on different screen sizes, and different devices. Good luck.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Try using media queries. Please check:
Media Queries
Take a look at responsive CSS: W3Schools Responsive CSS. This includes information about how to make your own as well as examples of existing popular frameworks such as Bootstrap and Framework.
I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.
Afters googling I found out about responsive griding.
After reading that I wanted to ask that whether responsive griding is nothing but making your web page responsive to different changes in screen sizes or does it have anything more to it
Also I am using purecss to make my web page responsive so I needed to know whether this is the right way or and what other ways are there to do this.
Pretty much, it's also about curtailing content based on your audience. Say that people on mobile don't need to read all the reviews on the page you would hide it or show it in a different way. Whether or not to use pure is completely your personal preference. There are a gargantuan amount of responsive frameworks, you should look at what they offer to your own goals of customization or extensibility. Foundation for example offers lovely JavaScript addons you can use for modals, sliders and navigation.
Good luck and please add to your question if you need to ask more!
Your choice to use pure I feel is a good one because its extremely light weight and style agnostic. While bootstrap and foundation are more popular choices they can be up to 10 to 20 times larger.
Check out TukTuk as well, its similar in nature to Pure:
http://tuktuk.tapquo.com/
Yes, you've got the right idea. You can use frameworks like Twitter Bootstrap, or Zurb Foundation, which have all the CSS you need for responsive grids. The basic idea is using CSS media queries to apply different CSS rules for different screen sizes. Javascript can also be used to show/hide features which might work better on mobile.
I've never done this before. The website I have just built is the second one I have ever built. There is a main container div and a header. I noticed that this simple html/css and js site looks terrible on mobile devices.
When it comes to making the site fluid are there any rules or approaches to make it quick and easy? If I just start changing all set pixel widths to percentages will the elements lose thir alignment in relation to each other? For example, the image in the main image slider is aligned, using pixels, based upon the position of the logo in the header.
Before I get started any pointers would be most appreciated. Here is the site: www.hauswoods.com
I would suggest you look into media queries instead, this will allow you to specify CSS related to different screen sizes. Yes, you could change your website to a liquid/fluid layout but with your current content, getting the slider and images to look right will be a headache.
A quick and easy approach would be to use a framework like Bootstrap (http://twitter.github.com/bootstrap/)
I'm sure some people would argue that you won't learn if you use that (because it will do a lot for you), but I think you can learn by example.
Bootstrap uses progressive enhancement principles to improve UIs and uses something called 'Less' for making CSS a bit more generic (at the expense of some complexity). Still, you can use whichever bits you like from it. If you've got a greenfield site it's a good place to start. It supports fluid layouts and explains to you how your design will degrade on mobile devices with smaller screens.
There are plenty of good tutorials out there:
http://green-beast.com/blog/?p=199
http://www.maxdesign.com.au/articles/liquid/
http://css-tricks.com/the-perfect-fluid-width-layout/
Below are IMHO some of the best JS-frameworks/html5-templaters that help with what you're trying to achieve. No need to re-invent the wheel.
Twitter Bootstrap
Foundation
CreateJS
Skeleton
HTML5 Boilerplate
HTML KickStart
Montage HTML5 Framework
SproutCore
Zebra
if you want your website to be fluid just use percentage instead of pixels.
.classname{
width: 80%;
}
Confused regarding best methodology to make website usable and consistent across all devices - Desktops, Netbooks or Ipads and Mobiles(mostly smart phones).
I'm not a Front End Developer or Designer so i'm not sure what is the best thing out there.
I've been reading on Liquid Layouts, Keeping 2 different version of style sheets(1 for screen and 1 for hand held devices) and CSS Media Queries.
I'm not sure which one of these is the best fit to provide a consistent experience to the users of my site whether they're on smart phones(any android, BB, iphone, Nokia) netbooks or desktops.
Please help.
As I said in the comment, I think you should keep things as simple as you can and comply with good standards as HTML and CSS.
Let the browser / user choose the best way to use your site.
Also keep in mind graceful degradation / progessive enhancement and a logical structure that supports the pages.
What you are looking for is called Responsive Web Design.
Fluid grids, flexible images, and
media queries are the three technical
ingredients for responsive web design,
but it also requires a different way
of thinking. Rather than quarantining
our content into disparate,
device-specific experiences, we can
use media queries to progressively
enhance our work within different
viewing contexts. That’s not to say
there isn’t a business case for
separate sites geared toward specific
devices; for example, if the user
goals for your mobile site are more
limited in scope than its desktop
equivalent, then serving different
content to each might be the best
approach.
But that kind of design thinking
doesn’t need to be our default. Now
more than ever, we’re designing work
meant to be viewed along a gradient of
different experiences. Responsive web
design offers us a way forward,
finally allowing us to “design for the
ebb and flow of things.
There is a good free introductory video on Think Vitaimin.
Responsive Web Design: Fundamentals : Introduction
Watch until about 3/4 the way through, where they start demonstrating what they are talking about.
From what I've gathered (been researching it myself) it's really a combination of everything. Liquid layouts work great for different monitor sizes, while media queries help target mobile and tablet devices. I've been looking the 978 Grid System to format a few websites I'm working on. It has grids for several devices, but part of me thinks it might be a bit too bulky for what I want to do.
I think that liquid layouts are the best because they are the most cross-platform and are very easy to do. I use them on every site I make.
Even among tablet devices the difference in screen size and screen resolution can require different fonts size and link spacing, for legibility of the font and the accurate touchability of the links. Pages that render on the 10" iPad legibly may be difficult to read and clumsy to use on a 7" tablet. The 7" tablet might make you feel as though you had fingers like Shrek. This just happened to me recently when I used a 7" tablet to look at a site that I'd modified to work well on the iPad. Too tiny to read on the 7" tablet, and you don't always want your 7" tablet users to be pinch-zooming just so they can read your page and interact with it. You must determine the size of the target screen and employ appropriate CSS styling for that form-factor, and you may also be required to reduce the amount of content and/or to provide alternate mode of navigation for the smaller and smallest form-factors. Dynamically-served form-factor-specific content may be required, or highly granular control of content visibility using CSS.
I'd start with pages that have an "airy" look -- avoiding pages that have too much content and are too "busy".
How do you make your website look good in both a standard browser and on the various mobile devices available?
Currently I am undecided between trying to make my layout resizable so that it will work for small devices, or providing a separate CSS for mobile devices.
My use case is a chess game where I want the entire board to be available without scrolling down.
What would you recommend?
basically there is no easy way to do this, you can use CSS on most modern phones to control the output but you need to resize the images before they are displayed on the phone as all phones have different screen sizes.
The best site I have come across dealing within mobile design is : http://patterns.littlespringsdesign.com/index.php/Main_Page
In this particular case, it sounds like for optimal viewing it might be worth targeting mobile devices specifically.
I would recommend the CSS approach. Otherwise, I fear you'll have an interface that will only look adequate in both and only mediocre at that.
You don't want your site to look like it's compromised for one audience or the other.
I don't know if you realise how big a question you're asking -- "the various mobile devices"? That's a lot of devices, a lot of resolutions and a lot of bugs and limitations, all the way from iPhones, which can handle anything a normal browser can handle, to tiny little black-and-white screens.
In theory, you can write separate CSS to target hand-held devices
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">
but personally, if you're trying to support a large number of devices I think detecting the device and trying to feed it code it can handle is the only real solution.
You can start looking at how big the problem is by getting WURLF which is a 13MB XML file of details about the different devices and their capabilities.
Try Google's new Mobile friendly test tool to evaluate your site 1