What CSS buttons work really well in Web Views (iPhone/android)? - javascript

And it will look like a real button. When you press on the button, it has an "umph" effect.
What CSS button is smooth when done inside a web view. Hopefully, so smooth that it looks and feels like a native button.

"Native" buttons look different on every device. So, you can style a button in a multitude of ways, and if you don't like the effects that CSS offers (and at this point, there are many of them), you can roll your own with images that roll over (and/or animate). But it still won't look native unless you go crazy and detect devices and deliver buttons tailored to look like native buttons.
Are you asking what sort of CSS options you have for displaying buttons?

Related

how does responsive design work?

After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.
In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.
Update, I am working only with JS based widgets. Mostly generating all HTML.
You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).
In this way your design will become responsive, although it will increase file size.
Check GRID. It's a (great) simple guide to responsive design.
http://adamkaplan.me/grid/
After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.
So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.
back to square one,
g

Is their any responsive lightbox with slideshow that has proper swipe?

I have been search for hours for a jquery type plugin that is responsive and also has proper swipe animation during gesture.
http://www.photoswipe.com/ is 99% there except that it dosent support single image lightbox mode, its geared towards grouping images into swipable galleries, which it does brilliantly.
However now and then I may want a few images on a page to have no relation to each other. Id rather have a default class, that when used all images opened up in a single image lightbox. Photoswipe automatically groups any images given the same class.
If I was able to set an option with this plugin to hide the prev/next images on a call, then it would have been perfect.
Important though, is that the plugin must use full screen like photoswipe does. So many responsive plugins seem to waiste the screen with unrequired image chrome. The intended slide show or light box should be like viewing a gallery on a smartphone - again photoswipe does this. its only fall back in being able to have non related instances.
There are a couple out there that appear to be inline with what you want. I never understood why some developers create "responsive" galleries, but waste so much space with padding or decretive chrome elements.
I was thinking of using PhotoSwipe, but the developers stopped supporting it and recently threw it out there for the open source community to maintain. Kind of turned me off during the transition.
Here are a few others I came across that I'm considering myself.
Need higher rep to post more links....so some are just cut and paste. Sorry.
JuiceBox
(http://juicebox.net/)
SwipeBox
(http://brutaldesign.github.io/swipebox/)
(full disclosure...I have an affiliate code for the next links. If you want to remove them, just don't add the "ref". If this helps, I appreciate the clicks)
Touch N Swipe
(http://codecanyon.net/item/touch-n-swipe-image-gallery/5886023?ref=bmoe)
Flare (wow)
(http://codecanyon.net/item/flare-responsive-mobileoptimized-lightbox-plugin/2392703?ref=bmoe)

Stuttery performance issues with Jquery Mobile and Phonegap

So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.

Sliding panel for mobile page

I have a div which is mostly off page but uses translation on hover to display on the main page.
This is my site.
However, on mobile devices this isn't the best solution to display this div. Hover doesn't work well and I have to click often to get it to show up. I'm wondering if it's possible to do it like mobile applications where if I move the page to the right edge enough, this content will display or with a button. Something like this:
Any thoughts on if this is possible or how'd id solve this?
This pattern is called 'Off Canvas layout'. Documented (with some CSS) at http://jasonweaver.name/lab/offcanvas/
There are multiple implementations you could have a look at, perhaps start with this nice demo from Zurb: http://www.zurb.com/playground/off-canvas-layouts
As regards the use of hover, you're better off using a tap/click on both desktop and mobile for consistency. The 3-bar menu button is fairly universally understood these days.

How I can make mobile version of my website which will work in android , iphone,ipad?

I want to replicate a site for it's mobile version. The site have slider , simply header,footer and dropdown.
Are we able to make exact thing for mobile ( in my case I am talking about slider and drop-down made in jQuery).
What I want is make same feeling on mobile as we have for normal site. Like I see in Video example as people shown (demonstrate) for ipad,iphone that click on menu and page slide to right and something show as new page. I don't want this.
I want to choose the existing themes and color-scheme in mobile edition.
How I can do it.
for this we have something called as Responsive Web Design :)
you can have a look at here :
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
Another good place to start: http://html5boilerplate.com/
This topic is much more complicated than simply adding a few lines of code, but here's what I can offer:
If you want separate mobile and desktop (which I would suggest against) you're going to have to do some device sniffing. The easiest way would probably be to check screen size and redirect if it's under 320px or whatever size you decide on.
This will make your page load a little slower, because you're going to have to wait for the page to parse the screen size detecting script, check to see if their screen is too small, and then redirect. That's going to take a long time on a mobile device and you're not going to make any fans because of slow load time.
Responsive design is the best solution. I think you should take a step back and consider why you want your site to split into two different sites and if you are going to have the ability to constantly maintain both.
You need to use media-queries http://www.w3.org/TR/css3-mediaqueries/
with media queries u can set styles for misc devices and save mutual html...
Instead of responsive design, you can use a DDR to tailor your content to particular mobile devices: http://wurfl.sourceforge.net

Categories