I've been researching responsive design recently and had the thought why not use a flow layout instead of something like a 960 grid? From my research, 960 was chosen to fit the most popular monitor size. But on larger or wide screen monitors, there is still a lot of empty space.
The thought I had is shouldn't the largest size for media query be 100% page width? Instead of 960 px?
Can anyone explain why this isn't the norm, or why people default to a fixed width for responsive design?
If you want to use widths wider than 960px, then the Bootstrap grid is one option, so you don't need to reinvent the wheel.
Bootstrap 3 is in the process of being released and while the grid classes have changed you can still get responsive full page layouts or responsive layouts with a max width of 1200px
An example of a full page grid
An example of a max 1200px grid
Foudation used to have max grid options around 1100px though as far as I can tell, out of the box with Foundation 4 the max is now around 1000px. It should be easy enough to change this though by using a custom setting for the width of the .row class
As for your question
The thought I had is shouldn't the largest size for media query be 100% page width? Instead of 960 px?
as #cale_b noted, readability could be an issue with full width layouts unless you are carefull with typography and font sizes. I think it is certainly doable if you are careful with the design though.
It will depend on the site design.
Good luck!
Related
I am trying to implement a virtual UI ID card that would look like a card on all devices. I will need 4 rows total and 3 columns. I also would like to have the width about twice the size of the height (2:1 ratio).
1) I considered the border layout. but it seems like it spans the whole screen size. Quickly the size of my card width was like 5 times the size of the height. So that did not visually work. I suspect the Gridlayout would suffer from similar issues.
2) I used the table layout (4 X 3). I tried using padding / margin and it seems like the look & feel of the card UI quickly gets out of proportion on tablets while looking decent on phones since phones seem to naturally have a similar width to a card.
3)I tried specifying widthPercentage as a constraint on the table UI. Again this approach sufferred from similar issues. Since on smaller phones I would have to remove add small percentage margins but on big tablets I may need bigger margins. This can get quickly challenging to get right / test.
I am thinking now of attempting to take one of the following approaches:
1) I am not sure if there is a way to specify the TextField width based on the number of characters. For example when the card issue date grows on tablet it can fit 10s of characters where I want it to fit only couple for moht(mm) and 4 chars for year(yyyy). Is there a way to do that?
2) Can I tell the screen width in inches or mm ? I can implement a function to attempt and scale padding / margins on different screen size.
I appreciate any feedback.
See the Kitchen Sink demo which has the default "cards" mode in the start. It uses grid layout with special cases to fit the columns in a sensible way for Tablets/Desktops.
https://www.codenameone.com/demos-KitchenSink.html
Since it's a bit difficult to explain, I did a mockup to get across as much as possible visually:
http://sassmeister.com/gist/70624a740b1ca4ae7764
(If there's a better way to share a sass gist, let me know. First time using it)
Basically, this is the layout I want for a tablet in landscape mode. What I'm trying to do is make sure it fits perfectly on different tablets with different aspect ratios. Some things are fixed. The main content area is a 16x9 video, so that aspect is locked.
I have the header and footer (main column only) fixed right now as they need to be for portrait mode, but I could bring them into the regular flow if it's helpful for tablet landscape. Anyway, it's all basic responsive right now via susy2, and the sidebar is totally separate so it can scroll independent of the main content. What I would like is for the whole main area including header and footer to fit perfectly with even margins above and below vid, but then have the sidebar column change it's width to match the tablet.
So... if the tablet is wider, the teaser thumbnails go out to 16x9 ratio. If the tablet is narrower, the main column remains unchanged, but the teaser thumbs narrow down to squares.
If it's easier first to just figure out how to responsively shrink the right column only, so the aspect of thumbs is unchanged, that's ok. I just don't want the overall layout to get screwed up on one device vs another because of aspect ratio, so main focus is that the header hits top, footer hits bottom, main vid fits perfectly between them, then sidebar responds to fill in the rest (within reason).
thx for any input. First time making a website here, so lots to learn.
ps. I had vertical scroll enabled for the right column, but disabled it (by adding extra letter to to the scrolling class in scss column) since it's not actually letting me scroll. Not sure if that's because there's no actual content, or it doesn't recognize the empty padded cells as something worthy of scrolling.
You're biting off a lot for your first website, but Sassmeister is a great way to show what you are doing. I approve. :)
One of the problems you'll find is that CSS don't have the concept of aspect ratio built in, so the sort of layout you are attempting is non-trivial. CSS is best at handling widths, and letting everything overflow vertically. It takes some effort to make it handle height well.
If you can get away with it (depending on browser support), your best option is to use flexbox. Flexbox should make this much easier, but doesn't ave a lot of support yet. You could consider table-cells, which have more support, but can be harder to control.
In any case, you should ignore most of Susy for this — at least in laying out the large sections. If you want Susy to help you with grid calculations, ditch the mixins and just use the span() and gutter() functions to help you set widths. Something like this:
.flexbox {
flex: 1;
flex-basis: span(3);
}
.tables {
display: table-cell;
width: span(3);
}
// NOT THIS
.no {
#include span(3);
}
You can go back to using Susy mixins for simpler bits, like the items in the top navigation.
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
Sounds like you want to have pretty fine control over the font sizing.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
Something like:
p {
font-size: 2vmax;
}
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
SlabText
FitText
Is it possible to decrease the default width of a Panorama control's PanoramaItems?
They can be made wider by specifying Orientation="Horizontal" and a width larger than 432. However, specifying a width less than 432 does not result in a smaller PanoramaItem. It's minimum width is 432 always.
I played around with the templates but couldn't figure out how to achieve this.
I'm afraid there isn't anything you can do about that. The Panorama has the width of its items baked in as 48 pixels less that its own width.
PanoramaItems are not designed to have a smaller width. If you wanted to do this you'd probably need to create your own version of the Panorama control.
Don't do this though!
Not only would it be a lot of effort to get right you'd break user expectations about how the panorama would work.
Would/could you allow multiple items to be displayed at once?
What would be the impact on navigation?
How would you communicate to users that your app works slightly differently to all the other ones on the phone?
How would you justify the mental cost to the user of the different behaviour?
What would the impact be on the item headers if they were smaller?
With the PanoramaItem width set to at least (almost) the width of the screen it allows the user to see and focus on a single item at a time.
Also, potentially having fewer items on screen at once can also help with performance too.
My developer's box has a screen resolution of 1680 x 1050. I'm developing a full-screen Silverlight 3 application that I'm considering deploying to the Internet. So, I want to make sure the application looks good on a variety of screen resolutions. I just started testing on other boxes, the first one having a screen resolution of 1024 x 768. During the test I found some of the pages on the application were partially truncated. It seems the controls on the page didn't adjust for the lower screen resolution. So, I'm looking for some tips on how to make a Silverlight application, to the extent possible, adjust for screen resolution. For example, are there things one should or should not do on XAML to make adapting to screen resolution easier? Should I just optimize for a minimum screen resolution? Your thoughts and suggestions are welcomed.
You can easily enforce a minimum acceptable resolution by setting the MinHeight and MinWidth properties of your root visual. (Of course, this should be less than the minimum screen resolution to account for browser chrome.)
Try to specify absolute Width and Height only when necessary: for example, for images or icons of fixed dimensions, or for obvious cases like TextBoxes (whose width should reflect the average length of the data entered).
Grid panels are excellent for mixing scalable and fixed layout areas. The star sizing specification takes a bit of getting used to--it's not as simple as a percentage-based proportioning--but it's much more flexible, especially in combination with row/column min/max dimensions.
You don't really need to test on multiple resolutions unless you're interested in testing a range of dots per inch--just resize the browser to approximate different screens. Since there's always a bit of give and take depending on the user's browser configuration, you'll have to account for some variance anyway.
You can make your application scale with the Silverlight Toolkit ViewBox or make it strech with layout controls like the Grid, StackPanel, and WrapPanel. Make your main UserControl have a Width and Height of Auto (or remove the width and height entirely) and the size of the app will resize to the size of the parent div (the default HTML template uses 100%x100%). Then just resize the browser accordingly. IE8 has developer tools that can help you see your app resized to specific screen resolutions.
Testing on a variety of screen resolutions is always a good idea.
I covered the resizing of elements and making it resolution independent on another thread.
You can have a look here, there are multiple ways to sizing and resizing things automatically.