for my web application using AngularJs and Bootstrap as a web framework.
I'm implementing a table for insertion of working hours, overtime, travel expenses, repayments etc ..
The table is currently composed of 6 columns collapsible in 5.
Here are two screenshots with the desktop version:
These however are 2 screenshots mobile version on Nexus 5:
The visualization on the mobile version is clearly very bad. Plus it must consider that the user, in this version, should scroll sideways on each line. Which makes the application a non-friendly application.
The question is: How to make a table of this type in such a way that in both versions, the visualization is clear, clean and friendly?
Related
on my website wordpress + theme twenty-twenty-two, I've a large table on a page that shows the schedule and prices.
It's unreadable on mobile phone because the size of the screen it show only the first 2-3 column. on computer it's ok.
The theme twenty-twenty-two is responsive.
What can you advise to make this table more comfortable on smartphones?
Here is the url (access it with mobile phone to reproduce the issue): https://axelingo.com/horaires-cours-anglais/
thanks!
Ok I found some wp plugins to do that easily. wp table builder fr example as an option for responsive. This build the raw vertically basically when on mobile phone.
I've got a big table that displays a lot of data.
On Destop it looks quite ok, but on mobile it just cuts of the data and I am not able to access what is on the table, like this:
Desktop Version of Table
Mobile Version of Table
Is there any way to make Tables accessible on Mobile? Or is the only way to just keep the data on a couple of rows only? And separate the columns on different cards?
(And yes, I know that this is not the best use for a card, I am still experimenting with mdl).
Thank you a lot.
If this is not late you can use this trick to make it responsive
https://css-tricks.com/responsive-data-tables/
These jquery.mobile-1.4.2.min.js and jquery-1.10.2.min.js are auto included in all of my HTML pages, while developing the UI screens using jquery mobile.
But this Auto-added JS files causes a delay/sluggishness while navigating between the multiple screens.
Is there any way to improve the sluggish behaviour?
I've used the Worklight 6.1 project you've emailed me, added the Android environment to it and ran it in the Android Emulator(!) (with API level 19 - Android 4.4) and did not observe any sluggishness.
In fact, your application does not even contain any animations. The pages simply switch from one to another. So, no slowness even in the emulator...
You'll need to create a test case application demonstrating what you are referring to because right now it is not reproducible. Also mention if you are testing it on a device or not - which device model and which Android version.
I will be spending the next several weeks transitioning content for my webpage into a mobile version AND a tablet version. I have a few questions to this affect:
What is the accepted way to send users to their correct site, depending on the device/browser they are using? (i.e. do we check in PHP for some kind of browser type or something)? I've looked into nice CSS grids that display great on all devices/resolutions - but at this time I'm not ready to make that full switch - so I'm looking to just have a reduced-version of my current site (whether it's via redirection or something else).
How do we account for hover/mouseover effects in the mobile and tablet space?
Thanks all.
Update:
I did find this for #1: http://code.google.com/p/php-mobile-detect - looks like it's perfect actually.
You should redirect the user based on the user agent, in PHP you can use $_SERVER['HTTP_USER_AGENT']. Using server side detection is by far the most reliable way to redirect someone. In the future you may consider using a responsive style sheet to change the way your layout is displayed (based on screen size, in a sense is more reliable for future devices)
Touch devices do not have a hover state, that doesn't mean you can't do it with some Javascript onTouch events but it's either on or off when you touch something like an anchor
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.