I am interested in using this system but I would like to know if anyone has found any good alternatives. In particular I am looking for some layout system that will allow me to build an HTML5 layout that works good in a browser, on an ipad and on a phone.
Does anyone have any suggestions on other layout methods I should consider?
Grids are tricky when building responsive sites that cater for multiple layout sizes/devices because grid systems (certainly 960.gs) usually rely on fixed-width containers.
However, depending on how you approach your responsive build, you can still use a grid system for your desktop view. E.g. I usually approach responsiveness from the same perspective as the 320&up multiple linked stylesheets. This makes it easy to just load a particular grid system (usually 960.gs) only in the desktop view. This way, your mark-up can have the classes required by the grid system, e.g. grid_12, without the fixed widths screwing up the mobile view.
That said, there are some responsive grid systems that are proving popular and are easy to work with, such as the 1140 fluid grid. You could also try the fluid 960 grid
There are also projects that even use the 960.gs grid as a base, while still catering for smaller sizes, such as skeleton
I'd recommend you take a look at 320&up because it is a great resource for responsive builds. The theory of building for mobile first and progressively loading more stuff for larger views is definitely the way to go...
I have used 960 GS for a lot of projects but was looking for something like what you are after. I gave twitter bootstrap a go and have been happy with the frame work. It is easy to build on and to customise.
Use Bootstrap, works with percentages rather than fixed units for a truly responsive interface.
Related
i'm trying to redirect my mobile users and all of small devices users to my mobile version of web site.
but i don't like change my URL.
like below example ,
desktop version : domain.com ( with desktop version of site )
mobile version : domain.com ( with mobile version of site )
Redirect means to Change the window location.
since you dont want to have a seperate mobile site,
The Only feasible solution is to use a good responsive ui framework like bootstrap. but in your tags you mentioned wordpress and i feel most of the wp themes are in fact responsive.
Anyways, use bootstrap if you would like to design a responsive site.or another alternative would be to write all css using media queries.
Hope that helps.
You need to replace the theme of the site for this "on the fly".
You can do it with code but it's too long, use this plugin instead device theme switcher
URls for both should be same and they are same in their case as well. Well done !
Now, for automatically rendering the specific layout, take help of media queries.
Refer
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
They define the specific width range and pick up those specific styles only.
So you have a lot of work to do.
This is a optimal way to work and this is termed as responsive design.
You can find n no of tutorials for same. But to experiment just work with one or two media queries.
Also, read about meta tags which enables to pick those media queries written in stylesheet https://css-tricks.com/snippets/html/responsive-meta-tag/
Good luck !
When customizing a page on WordPress, at the bottom left corner, you can see how your website will look like in phones or tablets.
Also, some page builders like Elementor, allow you to control what sections to appear on what screens.
A better way to state your question question would be, how to make a page responsive?
When reading about Grid Systems, you'll be amazed at how a simple change to the orientation of your divs, can make a huge user experience difference.
When using a framework that uses Grid Systems, Bootstrap being one of the popular ones, you can imagine any screen divided into 12 columns (grids). Then you can specify how many parts a div takes on each screen size by adding classes. For example, <div class = "col-sm-6 col-lg-3" </div> will cover have the screen (horizontally) in small screens (6 being half of 12) and a quarter of large screens.
The reason behind this peocess is to eleminate right and left scrolling which makes it easier to navigate.
Hope this gives you a little overview of what you need to be looking for to make mobile-friendly websites. Good luck!
thanks all of you for commenting my question.
Now that i write my answer to my self , i found my question's answer.
Responsive design not it's answer. You have to show a mobile version of site, not responsive version of site. so using #media()
not useful.
For this issues , You have to detect user's device in your back-end. for example in PHP you can use mobile-detect.
And you can detect your device and show it's template for that device.
Also, mobile detect have a js version. click here
I hope you find your answer here.
Until now I mainly made web sites suitable for PC (desktop) with help with Javascript, jQuery. Now I need to make some small web site Tabular job time records with menus, popups, dialogs, charts and the ability to input and modify data by click events (mouse or touch device) on table cell, plus additional statistics, math, etc. I started by making separate versions including jQuery mobile) but after some time it was very confusing for me to track all changes and understand such complex coding! Then I decided to apply some kind of responsive technique but after reading a dozen web articles I'm still unable to make conclusion what way is right!? Do I need to start web site as primary for mobile and then add some code for desktop, or opposite? Or is there some way, implemented does score for all three type of devices? Thanks.
This question is a little vague. If this question is only about the javascript interactions your answers will vary with UX requirements and libraries. As far as layout etc is concerned, both bootstrap and foundation recommend you start with a mobile design to have the minimum amount of elements necessary for all the content, then add features and readability as you get more real estate.
Mobile first is simply a way to ensure that you don't end up with too many elements to fit on a smaller screen.
We have website that was developed for desktops and now I've been blessed with a task of creating mobile version of it. The mobile design might be quite different from desktop version and the website is build on Wordpress. Now I'm not sure what would be best approach:
shall I stick to CSS changes only (as much as possible) and use media queries to target smaller screens? I'm worried about large images still being downloaded even if these are display:none. There is also quite a bit of JS happening on every page and this JS will not be used in mobile version of the site so I would have to build in additional checks possibly etc. Any other possbile problems with this approach?
server side code should detect if its mobile browser and should return custom html? Any other possbile problems with this approach?
mixture of two above?
any other options?
If anyone has experience with similar project and could point me to what proffered solution would be that would be great.
Use media queries as much as possible for layout changes.
For you JS, create yourself a small breakpoint handler that will trigger the js to run or stop.
I think a lot of people don't realize that a 2x image compressed is smaller than a 1x image compressed. So, if you use compression for you images, you will actually get a better network performance using just large images. How much of that image gets displayed is a potential issue that can cause negative performance, but I imagine that it's insignificant.
Are you using completely different UI for mobile than for desktop or is is just a different positioning of elements? If you have to support two templates then you will want o think about Adaptive(responsive from the server), where the server will determine based on the UserAgent which template to send to the client. UserAgent wont really get you much except for the type of Browser the client has. To figure out the dimensions of the device's screen you will need to know the dimensions or use a service like WURFL.
If you can do all of your UI change in one template using media queries then it might be best to start working on this from a Mobile First approach and basically start from scratch on your mobile look of the site and then figure out how you can re-position the elements on the page to match as close as possible to the current desktop look. Using the Responsive vs Adaptive approach will eliminate the need for UserAgent detection and you will only work with the width of the device.
Thinking of Responsive in "Mobile" vs "Desktop" is really limiting and causes a bit of confusion. Mobile should refer to devices that change location. Try using names like small, medium, and large to describe the layouts(breakpoints) for your Responsive Page.
Finally, there is not preferred way of doing "Responsive." Each site will have it's own requirements that need to be met. It is up to you to learn as much as possible and create the preferred way for your needs.
I am a big fan of the Responsive Theme Wordpress has. It is very customizable, and will allow you to use one site for both Mobile and Desktop.
https://wordpress.org/themes/responsive
You could always use:
<meta name = "viewport" content = "width = device-width">
in your header. Then the whole site will resize to fit the mobile device.
All your js should still work on mobile devices. It would just be 'flash' that wouldn't.
The site isn't "responsive" with this but, depending on the site and how much interaction etc the visitor needs, sometimes this is adequate and simple?
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.
I have been looking at http://www.nytimes.com/chrome and wondering how I can achieve a similar functionality to theirs. More specifically, notice that when you re-size your browser window, the amount of stories and their dimensions change dynamically.
In my case, I have a fluid-width <div> with an unordered list inside and I would like to dynamically adjust number of elements being displayed (<li>) based on the browser window dimensions.
Is there a Javascript library that can help me achieve this?
I use these three articles as references for this type of thing:
Responsive Web Design
Fluid Images
Fluid Grids
The two main techniques for really fluid websites are:
Different themes depending on the size of the browser (this can be implemented with CSS meda queries, JavaScript, etc.)
Each of those themes are defined with percentages/ems, not pixels. (This goes for everything in the theme: text, boxes, images, everything.)
Ethan Marcotte, the guy who wrote all those articles, has an example site employing these ideas.
It's called responsive design. There also css frameworks that supports this type of design like Less Framework 3 or Flaw{LESS} CSS Framework.
You also might want to check out this plugin: Smart Columns. I have used it and it is excellent for this type of layout.