Solved

Website Setup and CSS

Posted on 2013-01-04
8
319 Views
Last Modified: 2013-01-22
What is the best way to setup a website to take into account the size of a users screen.  Large apple 30 inch screens and small screen.  Also mobile devises.

Should I use a different CSS for each?  Should I only use percentage values in the CSS?

A little brief guidance here will be greatly appreciated.
0
Comment
Question by:rgranlund
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 38744740
Very generally, the use of percentages are recommended in order to fit several screen sizes.

Developers don't agree if it's better to have only one site for all devices or several sites each for one device. Foundamentally, to have only one site makes mutch easier to mantain the site but probably it will oblige you to give up something in design and layout. To have one site for each device allows to always do the best for that device (and its user) but can make tha maintenance a hell.

You can learn more about responsive design here: http://www.9lessons.info/2012/12/responsive-web-design-css3.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+9lesson+%289lessons%29

Surfing the web, you can find many framworks to design flexible layouts using grids: https://www.google.it/search?q=css+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:it:official&client=firefox-a

Cheers
0
 
LVL 7

Author Comment

by:rgranlund
ID: 38744754
@margusG

For example, here is a wordpress theme: http://themes.themedizain.com/dizain-01/
If you decrease the size of your screen you will see the site respond but it will not respond if you make the screen bigger than normal.

What is the way to do this, pure CSS?  How would I get the images to be larger?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38744772
It's called responsive layout or responsive web design, and you can find a lot of material including tutorial, examples & templates on the web.
A good starting point is Ethan Marcotte's article in A list apart.
Some frameworks like twitter bootstrap, already contain sets of css rules to meet different requirements by different devices.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 38744792
You have to set the viewport to 100%. This will make your site occupie all the available space. Once you have set the body width to 100%, you'll can design your layout using percentages. Simply search through Google for responsive web design and/or responsive css
and you'll find tons of infos to realize your site.

Cheers
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 7

Author Comment

by:rgranlund
ID: 38744803
@Hagay and @ Marqus

What I'm really interested is how to make a background image stretch and shrink without causing it to pixelate?
@media 1140px         
@media 768px         
@media 480px         
@media 300px
If you change to any of these the image should get bigger or small.  How do you do that?
0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38744824
The best way is to use different images.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 38744858
I agree with HagayMandel. This is also the tecnique used by css responsive images.
Anyway you can find interesting this: http://viewportindustries.com/blog/automatic-responsive-images-in-wordpress/
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38746623
... make a background image stretch and shrink without causing it to pixelate?
The browser can shrink it for you.  But you don't want the browser to enlarge it for you - the results will be visually ugly.  Agree with HagayMandel - create different images for different sizes.  You will get the best look and you'll save bandwidth and storage when you're working with smaller viewports.

PHP can interact with JavaScript to detect the size of the viewport.  That may help you create a custom CSS document that loads the appropriate background images.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now