Folks voting to close as not constructive, read the whole thing please. Specific questions at the end. Looking for real world examples and approaches.
Context
With numerous devices like smart-phones, tablets being used increasingly to access the web its important to plan, design (responsively) and develop (esp. your front end) to give the devices a fast and tailored user experience.
There's some amazing sites being built. Have a look at mediaqueri.es (resize your browser)
We see approaches such as
big screen first, then target smaller devices.
mobile first then media queries to spice things up for bigger screens.
device detection with different techniques (including server side)
and serving completely different markup and content to devices.
Question(s)
What are you folks doing out there today? Why did you choose your approach and most importantly if it isn't the most efficient approach to tackle this, then what is?
Things I'm looking for:
Is it a pure CSS / JS / HTML approach, or server side, or a combination - why?
Each device gets only the resources (images etc.) that it needs so it performs well
Maintenance of the site is easier, i.e. adding / changing features is not a huge pain
Some code samples are always useful
lets leave out old shitty browsers like ie7 and below
I think what you are looking for is Responsive Web Design.
See:
http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsive Web Design (using CSS) does not necessarily address performance issues but is a good starting point. Keeping in mind that premature optimization is the root of all evil, you can profile your users and bandwidth and determine where you need to optimize once you have a working design in place.
For a discussion of some of the downsides, e.g., image resizing in the browser (you can work around this with CSS and/or AJAX, though), see:
http://www.webdesignshock.com/responsive-design-problems/
You will want to use a framework like PhoneGap. HTML evolves slowly but every day, about 10 new devices with new bugs "features" hit the market and you innocent app - there simply is no way for a small group of people to handle the necessary work.
As for different devices, there are two trouble areas:
Screen sizes
Render bugs
For screen sizes, there are pretty cool solutions today. For example, some frameworks add the CSS style "640x400" or "480x800" to the body element. That makes it dead simple to style elements depending on the screen size. Or you can use JavaScript pull in the matching style sheets.
For render bugs, you'll need workarounds. As I said above, this is nothing a single person or a small group can handle. Every few months, there is a new version of Android with a new render engine and new "features". You fix problems for one of them and break ten others at the same time. Select a framework which plays well with many devices and which is open to changes (read: avoid anything proprietary).
That way, you get solutions for the common problems and you can fix small issues yourself.
I would definately recomment RedFilters Answer (+1).
I just wanted to add some libraries which you might find interesting relating to this topic. They involve Browser feature detection & conditional resource loading.
check them out:
http://www.modernizr.com/
http://yepnopejs.com/
Related
I'm trying to build an app that looks great on all devices but I'm having an issue with the responsiveness, actually I have a dought for what should I do. so here is what I'm thinking about:
1- If I build the app using the device toolbar which means I start with a media querie of 320px up to 1440px
like this :
and that's what I did actually and everything is going Ok at least that's what I thought but when I use the viewport width ( increasing, decreasing it) I see some unexpected results
this is on 605px viewport width:
I built this app with absolute positioning and I applied a position relative to the img in the background, maybe this is bad practice I know , please note that the app looks great on all devices that the device toolbar offers me.
some of my friends adviced me to use a framework and get rid of all these headaches but really I wanna practice vanilla CSS very well please consider that this is my first app and I'm doing my best to make it look great on all devices
so my question is:
should I leave it like this because logically If it looks ok on the
devices like Iphone 6 ... (the devices that the device toolbar
offers me) I don't need to address the viewport width issue.
or should I use a framework and I don't like this solution I know
it's feasible and as I told you I wanna practice vanilla css.
or should I use another technologie like flexbox or grid system and
this is the hardest solution I think because I'm gonna rebuild the
entire app, but it's ok.
and the last thing I wanna ask about is: is there anythings should I be aware of in my future projects especially if I'm working with vanilla CSS
Congrats on building your first app!
1) When posting questions on Stackoverflow, it is always helpful to provide either an example of your code directly in your post, and/or to include a link to a running version of your code on a site like jsfiddle.net, JSbin.com, codepen.io, etc.
2) For most responsive apps, there are almost always a couple of widths where things do not look exactly perfect. These points are usually right before/after a breakpoint transition.
3) In general, you don't want to use position relative or absolute for handling page layout. There are a number of situations where they can be helpful, but I think its safe to say that they should never be the first thing you reach for when trying to create the layout of a page.
4) Right now, the best way to handle page layout with regular CSS -- no library -- is probably Flexbox because of its versatility and adoption of all major browsers. I highly recommend you learn it and become familiar with it.
5) There is nothing wrong with using a library for general page structure stuff. Because of its use with a ton of companies, I highly recommend you become familiar with Bootstrap -- specifically its grid framework. If you do go this route, read the rules for certain things very carefully. For example, I cannot tell you how many people have their apps look screwed up because they don't follow the cardinal rule of Bootstrap's grid system: The only children of a row should be col. Say that 10 times.
Best of luck to you!
I have coded a very complex php game with around 40 pages. I am now in the process of designing it. Would responsive design be the right choice in this case? What other options are available? Maybe I should just make three layouts (3 different stylesheets - normal, tablets and mobiles)?
It just seems like a ridiculous amount of work moving all these elements since there are so many pages.
Creating a responsive site is not that difficult from the html/css point of view, although I'm not sure how your php will affect that. You actually always have the same classes/ids, and just apply styles to them using the media queries (inside the same sheet). It would mean a lot more effort to write 3 separate sheets, but then again: depends on your code. In general, the trick is just to have good semantic, clean code (use positions wisely, for example). It takes some time to get everything organised at first, but once you have the basics structured with responsiveness in mind it gets really easy. Those 40 pages should all have the same structure, right?
Another option would be a liquid design. Instead of changing the styles, you use percentages or dynamic measures. But I strongly recommend grids, and you only have to do it once and it won't be long until everyone does responsive sites.
But if the game is complex and need some serious tweaking, you should consider doing a completely separate thing for mobile (tablets should be easy enough to adapt, your choice). It really depends on the product design, things can look very different in 320px wide. Good luck with the game!
If the content will be the same on all the devices and you can't think of a good reason to fork the code to provide different content for different devices, responsive design is the way to go.
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".
I read somewhere that once you log in here (http://skweezer.com/) and put the website url, we can get the way the site will appear on mobile browsers. I tried getting this url (http://sachindra149.wordpress.com/) and was baffled to see he way it looked.
1) Can anyone please let me know why is that so ??
2) Why such a major difference???
3) And also what needs to be done ...
keeping one thing in mind that I dont have the control over the web codes for the page as it is a blog....
Hope I am clear enough !!!!!!!!
It looks like it just dumps pages to text. That isn't a realistic view of what mobile browsers do these days. Unless you are explicitly developing websites for low end and old mobile devices, don't worry about it.
If you are developing websites for such devices, then:
Don't use generic blog hosting which doesn't give you lots of control
Avoid tabular data
Avoid chrome (large navigation, anything that isn't the primary content)
Keep content short and to the point
Test of real mobile devices instead of third party emulators
First of all, it's not as bad as it looks. Mobile device have only very limited resources but they are much better today.
What you see on skweezer.com is just the raw text without CSS styling, tables and other complicated HTML. This way, the site loads much (!) faster and you only transfer a fraction of the data. Your original site needs 320KB, the skweezer version needs 50KB - less than 1/6th. Mobile browsing got much faster and cheaper but it's still many times slower and more expensive than on the desktop.
As for what you can do about it: Not much. You could select a design which is optimized for mobile devices but to know how good it looks, you would need all mobile devices that access your site. I suggest to rely on the experience of the designers at Wordpress. Your site does look much better on most mobile devices.
I prefer checking them on real devices.
Chrome extension like this will help you vew your website on different screen sizes if there is a limit on devices.
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