I'm building a website, and I found a crazy number of favicon sizes to be pertinent for most devices. Really pretty ridiculous. I any event, I understand how to make my HTML read the viewport size and redirect to other HTML docs and stylesheets as needed, but my question is, how many is needed in this world of 30+ different screen sizes?
Is Bootstrap all I need? I imagine bootstrap is mostly about percentages (height: 5vh; width: 100vw;) etc. Seems easy enough to redo my current desktop site to a tablet and iPhone size screen, but if this is anything like the favicon ordeal, then it would be easier to use something like Bootstrap.
You need ONE website, and you need to use media queries in it - depending on how picky you are, a usual way is to create them for three sizes - one set of basic rules and two sets in media queries (though these only have to contain those rules that differ from the basic rules) for the other sizes (i.e. smartphone, tablet, desktop). (favicons are a different thing).
Bootstrap can be helpful with that, but doesn't have advantages only.
Related
I'm not familiar with responsive websites and would like to start creating a website taking all the screens into account.
Obviously media queries is the way to go but they only concern CSS.
In my current project, I would like to organise the page differently according to the width of the page (being completely device agnostic).
The thing is, on small widths, I would like the HTML layout to change completely so I will have to make the HTML "responsive" as well as it should change according to the website width.
How can I achieve that?
Is there any js library (jQuery if possible but not mandatory) that will "serve" another html page according to the width of the page?
The whole website should be build this way so the script should be more than a gadget, it should be rock solid enough to allow the whole website to rely on it.
And, of course, it should work on any device or screen or browser.
Some would say that I'm looking for adaptive techniques more than responsive ones but I believe it's a mix between those two as the elements will still be responsive in general but between some critical breakpoints, it will indeed adapt and change the html.
I read a lot about different techniques but I can't find something that suits my needs.
Any lead would be appreciated.
Thank you for your help.
What you are describing is adaptive delivery. What you want to to is detect the user agent string using a server side language, and then conditionally render your templates according to whether the device is a phone, tablet, or desktop. Realistically, you'll share a lot of code between the screens, but you might have a different navigation layout, or opt to not show more rich features on the smaller screens. This approach not only saves a bunch of hide/show code, but saves a lot of overhead on smaller screens where you would otherwise be loading stuff that would be hidden the entire time anyway.
You can do a lot with CSS and media queries to alter your page layout ("completly") depending on device and screen width. If I were you I would dig a little deeper through the possibilities these techniques can offer.
If you are positive this is not enough. I would look into Redirects and User-Agent Detection to redirect your users to a different page depending on the user-agent.
If you are looking for a full framework that can handle both what you need (redirecting and dynamic content depending on user-agent or width) and a whole lot more, you should look into AngularJS.
You CAN of course do some DOM manipulation with pure JS depending on your criteria, but as your project gets bigger you might be in for a world of hurt.
Is it possible you could use an existing CSS framework such as Bootstrap to achieve a responsive design across your various target browser widths and device types?
Bootstrap in particular will let you specify different layouts depending on the device width where the page is being rendered. More information here - adjust your browser width to see it in action.
If, after evaluating an existing framework, you're still determined to develop your own you can perhaps at least use the techniques in Bootstrap or another framework as a starting point for your own.
try Bootstrap
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
I do not know if it is sufficient to your project, but you can to some extent use CSS to control what markup you would like to show or hide on smaller or larger devices. For example:
<div class="mobile-only">
<p>This content will only be visible on small screens such as mobile devices</p>
</div>
<div class="tablet-up">
<p>This content will only be visible in tablet and larger devices</p>
</div>
/* media query for small screens, such as mobile devices */
#media screen and (max-width: 767px) {
.tablet-up {
display: none !important;
}
}
/* media query for tablet and larger devices*/
#media screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
But be sure that you do not use this technique if you have a really big project, you might be ending up choking performance.
I know you can load in a different CSS sheet with Media Queries, but what if there is a bunch of content and dozens of divs you do not want to show at all on smaller devices. Is there a way just to load in an entirely different set of HTML for very simple mobile pages, when you have a very complex design for larger devices?
One idea will be making the page suitable for small devices, then load extra content with the help of javascript
Try to learn some of Responsible websites. Frameworks like Bootstrap already use what your looking for.
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
Now that I've nailed how I want my website to look, I need a way to make it look good on any screen resolution. To make my life easier, I set static dimensions while I was playing with the design. The dimensions are set at 1040x690. At home I use 1920x1080 resolution, and my boss's laptop is on 800x600. The website looks either too big or too small.
I realize I can set things by percentage in my CSS to fix this. The problem is the webpage has images of varying sizes based on the dimensions of my design. How do I make the dimensions of my website dynamic without making it look bad with the pictures being sized the way they are.
This is called responsive design and is usually applied to re-formatting your layout for mobile devices. Formatting for different sizes is usually done using Media Queries which apply different stylesheets based on the user's screen size.
In general, sites don't make different versions for different resolutions of the non-mobile version and stick to common resolutions: generally 960-wide. The added complexity of supporting EVERY resolution is usually not worth it once you get into supporting different sizes of images.
In short, you CAN support various resolutions, but it's a lot more work. Consider your audience and make it work for the majority of people.
98% of people have a monitors larger than 1024-wide, so your boss is the odd one out.
See: http://gs.statcounter.com/#resolution-ww-monthly-201106-201206
You can try with media queries.
for example, something like this
#media only screen and (max-width: 1023px) and (min-width: 768px) {
div#container {width: 768px;}
}
Try this links
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
http://www.danstorm.com/dan-storm-article-css-15.html
You are able to use CSS framework and prototype design called Foundation. You are able to find it at the follwoing URL:
http://foundation.zurb.com/
It will offer flexible and easy ti use design for your web page suitable for many devices and resolutions.
Yes you can do this by scaling your html division(i.e. area covered by HTML tag -whole site) by scale property of CSS.
CSS Provides property named scale which can scale the size(width x height) of any element in the document.
For example,
<div id ="t_div"></div>
Now we can scale the size of the division as follow:
#t_div
{
-moz-transform:scale(1.5,1.5); //for Firefox
}
Above code will increase the size of division by x1.5 .
you can use this property of CSS to scale your website's main Tag(<html>) to adjust size according to screen size.
Link given below describe in very thorough manner about how to apply this scale property dynamically to your site.
Here have a look at this. http://khuntronak.blogspot.com/2013/12/how-to-fixsolve-screen-resolution.html
Try adding this in the head section : <meta name="viewport" content="width=device-width">
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".