I was looking for case studies or UX research to figure out what is the best practice for button alignment especially in email templates, but couldn't find anything relevant.
Our practice:
We tend to align buttons to left on the desktop version
Buttons on the mobile version are automatically stretched to full width
Can you refer any study / research / whatsoever which deals with this topic?
While I cannot provide you with a case study on the matter I have done a lot of research (~24 consecutive hours) and I can provide you with both my methods and reasonings as to why I believe them to be both sound and practical:
In my websites, the ones I write, I style my buttons to be:
The exact ranges depends on what you wish to use. Here is my reasoning:
Making buttons larger relative to smaller screen sizes (widths) was the most obvious solution I could make.
To conclude on the topic of button size, your logic is sound, and your concern is a very real one. Thank you for asking! I'm glad more people care about this!
You also mentioned left aligned buttons on desktop!
In my flagship website, I have a sticky back to top button which automatically avoids the footer at the bottom of my pages with a simple JavaScript condition. On desktop it is located on the right, but on mobile (300-400px or less), in this case one-handed devices, I add a class which places it on the left. Why? Because most people operate their phones using their right hand, and having a button so close to their palm can be both damaging over time and possibly annoying. It is far more natural, and uses less muscles to simply drop the thumb down without bending it, or at least not as much.
Here are some images and sources which back up my points made earlier, and hopefully bridge the gap if I did not explain myself clearly enough (I provide the images and quotes only as a archive of both what I feel best answers the question, and as a way to prevent loss of information if the following sources were to cease to exist):
Most natural thumb areas on mobile phones:
(Source: http://blog.experts-exchange.com/ee-blog/smartphone-thumb-zone/)
And on the larger side of things, the natural touch regions of laptop devices:
(Source: http://alistapart.com/article/how-we-hold-our-gadgets)
Honestly when it comes to what makes a good button placement, this second link does a wonderful job at describing what is best for the comfort of all users, short of providing (cookie-based if anonymous website use) options for left vs right handed use:
only a third of the screen is truly effortless territory: at the bottom, on the side opposite the thumb. For example, if you hold a phone in the right hand, your thumb falls naturally in an arc at the bottom left corner of the screen—no stretching your thumb or shifting the phone required. The same arc shape applies to the two-handed cradle grip, but the arc is larger because the thumb has greater range of motion.
What about lefties? The thumb zone flips from left to right. But this left-versus-right distinction isn’t especially crucial, since most of us switch hands easily (and frequently) depending on context. Even so, optimizing for one hand penalizes the other: the best solutions put core features at screen middle, where left and right thumb zones overlap. In the end, top versus bottom is more important than left versus right. No matter which hand you use, screen bottom is most comfortable, while the top demands a stretch. That rule holds true for all phone screens, large or small, but as phones grow to jumbo dimensions, that top-screen stretch becomes a strain.
The size and shape of the thumb zone shifts when the phone’s dimensions require support from the little finger.
We tend to grab tablets at the sides, and while the specific location wanders up and down, thumbs settle at the middle to top third of the screen. This grip makes the neighboring sides and top corners most friendly to touch. On the flip side, the top and bottom edges of tablet screens are hostile zones, because of the necessary reach. The bottom is especially tough, since thumbs are rarely near the bottom...
So there you have it! I hope that the information provided is as helpful for you as it was for me! While I knew most of the information already, it was very helpful to find that someone had created some wonderful illustrations and I hope this helps many others as well!
I found some tips over here so I shared it with you below.
http://uxmovement.com/mobile/10-tips-to-get-you-started-with-responsive-design/
https://www.campaignmonitor.com/dev-resources/guides/mobile/
Though I am not expert. Hope this will help you.
Based on my personal experience A/B testing and the results of numerous eye-tracking studies, I recommend that the button (which I assume counts as the "conversion") be inline with the movement of the reader's eye.
That means the full-width button is always inline (but can get silly when too wide).
The smaller button on the wider viewport is beneath the strongest vertical, visual element(s). Easiest example is a form where the eye typically tracks down the left-hand edge of the form fields. There, the button would be left-aligned. If it were an email with a strong centered image or text, it would be reasonable to place the button also centered.
Let's take the example of the login screen. Typically we will have a logo, Heading, User Name, Password, Remember me, Login Button, Forgot Password, Register/Signup fields. As users naturally read from left to right, after entering their password they are almost close to the end of password text fields. So, I suggest to right aligned the login button to the password text field. It will reduce the time in reaching the button from your current position and also balances the screen if we are using good white space in the design.
If we are aligning the button to the left side of the text field, the user needs to travel back from the current position in a reverse direction ( Right to left ) for a positive action which is not intuitive. Comments and suggestion are always welcomed.
As a user experience, button should be eye catcher and it should be highlighting color,it should be align right side, because user is more preference the right alignment.
