I am developing a PHP/MYSQL website.
For most of the pages the responsive design with Bootstrap is fine.
But for a few pages not only the columns have to rearrange for xs screen sizes, but the content of the divisions change also. Below is an example of a page which is quite different on for the xs version.
What I did is simple: I used hidden-xs to hide the layout on large screens and visible-xs to show the layout on small screens. So I guess the page needs twice the resources to load which is not highly optimal.
Is there a more optimized way to deal with this issue of different style and content for different screen sizes when it only concerns a few pages? (if all the pages where very different I guess the best solution would be to create a mobile version on a sub-domain).
I am familiar with a method although I personally never got the chance to use it. You can create stylesheets for different screen sizes.
<head>
<link rel='stylesheet' media='screen and (min-width: 1px) and (max-width: 257px)' href='your-css.css'/>
</head>
Related
So I am making this personal website that has very litte content, and if I use the standard 960px width, there are very wide white spaces. It would be nice to have a shorter width, but then other problems arise such as bad view on other resolutions. What would you suggest?
To suit any screen resolution and make your website look good in any size, I would recommend going for a responsive design, using Media Queries. You can read up on the topic here.
That way, you can use 960px width for visitors with a browser window larger than that, and then make the website resize gracefully for visitors using mobile devices etc.
However, don't get too hung up on 960px width, that is no standard but simply a format that often works well, since 960 is a number that is easy do divide (to make columns) and is a width that is below the still quite common 1024px resolution.
You can try media queries, something like this
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) href="shetland.css" />
You should start thinking of building Responsive websites using CSS3 Media Queries.
I recommend the Skeleton CSS Framework (link), pretty easy and lightweight.
Its depends on your webpage. And there are some standards for dimensions.
Check this: http://www.hobo-web.co.uk/best-screen-size/
use "position=relative"
for every layer!!! this will eliminate your problem with width modifica
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}
I have got a requirement where I need to write a HTML/CSS, which should display Landscape and Portrait, depending upon the orientation of the iPad, that is initially I want to write this using HTML and CSS and then later use it for the iPad developement.
My question is what is the best way to achieve this?
Does it make sense to have two different html/css files and load them depending on the orientation of the device or is there any other way to implement this. Any information regarding this would be appreciated.
Thanks
Raaks
You want to look at using responsive web design to achieve this. You can determine what styles to apply depending on the size of the screen. Remember, the screen is wider when it's in portrait view.
What you do is, you create two different stylesheets. One for when it's in portrait and the second for landscape. Then, you use CSS3 media queries to switch between the two.
Sample code:
Portrait:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />
Landscape:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />
As you can see, you are passing the target medium and declaring a target width for each stylesheet. The portrait stylesheet will only be applied if the screen's current width is less than or equal to 768 pixels. Conversely, the second stylesheet will only be applied if the screen resolution is a minimum of 1,024 pixels wide.
A simple tutorial describing the technique.
The original A List Apart article describing the technique.
Now if by iPad development, you mean native applications then this will not work. For native applications, you need to use the cocoa framework to determine the device's orientation. However, if you are simply using a webview in a native application then this will work fine.
Hope this helps.
I have had a look around but need a more concise answer to this question.
I'm trying to workout the best way to construct the CSS in my current project for multiple media devices. I want to be able to have a stylesheet for:
CSS resets (everything to use)
The normal desktop 'screen'. (only desktop computers)
Printing 'print' (only printing)
The iPhone/handheld (only handheld)
IE6 stylesheet (only IE6)
So my question is: Am I right to think the right way to control this would be..
set the media="all" for the resets.css
set the media="screen" for the
desktop.css
use conditional comments 'here' for
legacy browsers.
set the media="print" for printing.css
use css3 media queries such as :
#media only screen and
(min-device-width: 320px) and
(max-device-width: 480px){ }
has anyone got a little more experience setting up multiple device css that could share their methods? how do you organize this yourself?
It can depend on several factors not the least of which is how your designs flows. This is a great article on designing from mobile up:
http://stuffandnonsense.co.uk/projects/320andup/
You can learn a lot just by looking at how these guys developed their boilerplate.
And, to see how different media queries react on resize or orientation change, try the demo on this page:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
You can adjust the media query attributes to get a feel for how they affect a page.
I am a rookie learning to develop web sites. To this point I have been just making pages without any regard of screen resolutions. As I have been doing some research I see that everyone says to stay around 900 pixels wide.
With the size of monitors and screens today that seemed a little small. Am I making too much of this or should I be adhering to some type of screen resolution rules or nothing at all?
If you're only planning on desktop users viewing your site, 900 pixels could be a little small and you could, easily, go for a screen resolution of 1024 pixels x 768 pixels, or greater with no, or minimal, consequence.
On the other hand, if you're planning on your sites being usable to those surfing on a nettop, or a mobile phone, however, they may require a great deal of scrolling. Which is irritating at the best of times.
That said, you can take advantage of things like #media queries to serve different stylesheets to your users based on their screen size, so a desktop user with an Eyefinity > 3000 pixels display will get a different look to a user surfing via iPhone.
As an example:
<link rel="stylesheet" href="ridiculousDesktopScreen.css" media="only screen and (max-device width:3000)"/>
<link rel="stylesheet" href="largerDesktopScreen.css" media="only screen and (max-device width:1280)"/>
<link rel="stylesheet" href="normalDesktopScreen.css" media="only screen and (max-device width:1024px)"/>
<link rel="stylesheet" href="mobileStylesheet.css" media="only screen and (max-device width:480px)"/>
And then use each of these stylesheets to serve whichever is likely, based on screen size, to give the best view to the user.
Personally I'm a fan of the fixed-width-centred layout, which allows ease of designing and allows a certain liquidity. The benefits to this approach, for me, are that long-lines of text are difficult to read (and presumably why A List Apart a variation of that approach in its articles).
I think that if you design a site to be useful to yourself with the window maximised and then at different sizes, you should end up with something that looks good at most. But remember that as screen size gets larger, handling white-space properly becomes a necessity.
It's worth noting that, when you design for a particular horizontal resolution, you do have to take into account the browser's chrome (things like screen borders and scroll-bars. I think that's usually about 40 pixels for the scroll bar, if I remember correctly). This seems to have been the onus behind 960 Grid's use of 960 horizontal pixels, not only is it divisible into columns, but it also allows for the (average) user's browser to have a scroll-bar without causing an overflow and a horizontal scroll-bar as well.
I do work for many media agencies and they prefer the rule of thirds in their designs so they tend to stick with the 960 pixels grid system. You can read more in Optimal width for 1024 pixels resolution?.
It flows better and allows for late adopters to see your full site without scrolling.. That said, what is your target and what are the usage stats for that group?
http://www.w3schools.com/browsers/browsers_display.asp
Absolutely not.
The whole idea of a windowing system is to have several windows visible at the same time. If your website requires more than half of my screen, I won't bother with it.