I'm starting to use phonegap and phonejs to write mobile hybrid applications. I've followed the tutorial http://phonejs.devexpress.com/Documentation/Tutorial/Getting_Started/Your_First_Application and the app works but both on the emulator and on the device the widgets are extremely small (see screenshot https://db.tt/ZhdrOt0R, sorry for the volume dialog on the screenshot). Like this, the app is completely unusable. I checked the various css files for font-size and other size tags but there are so bloody many places...
This leads me to a more generic question: I'd like buttons with rounded corners, different margins etc. What's the strategy to change the style? There are so many classes, is there any how to how to address this other than in a trial-and-error fashion?
Thx
Kai
Related
So, I started making this app a while ago, and it is now finished, excluding the question I wanna ask. How do I make an app suitable for all sizes? I used the following 3 tools- VS Studio, Expo, React-Native. I have built an app suitable for my screen size; But when I tested it on IOS (with different dimensions), Android (with different dimensions), everything is messy. That is understandable as I simply put numbers in margins, paddings, widths, heights, etc. How do I make this app auto-adjust to all screen sizes? Please Help. This is my first time making a React-Native app.
You should check each and every screen during the app development with React Native on each platforms (Android and iOS) because it saves your time. Also you should take care of some of the things at the start of new app development. Like responsive layout, internet connection check, portrait and landscape view, etc…
Here is the way to make an app suitable for all screen sizes and dimentions.
You can use “react-native-responsive-screen” package to use fully responsive UI elements. Below is the link of that package.
https://www.npmjs.com/package/react-native-responsive-screen
Also here is the link which will help you to understand, how to use it.
https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23
You can see the example code in below link using expo.
https://snack.expo.io/#ahmedmkamal/react-native-responsive-screen
Thanks.
I'm planning to write a common component library with Vue.js 2.0 and hope the library can work on multiple platforms. This question is about the best practices when it comes to a component's style.
On the PC / browser, We usually write CSS for fixed-width or flow layout with px. On a mobile platform (webview or browser), We usually write the CSS for flexible layout with vw / rem.
I see, some components only suit either one ( PC or mobile platform ), but still some components are common and versatility, such as Button, GridView, InputField and so on.
For example, there is a Button component that has a default padding style. In order to better adaptability, should I set the padding value by what unit? px? rem? For the goal, what is the best practice to do the things?
In fact, this question is not only related to Vue, but it's relevant for any frameworks that allows developing components, such as: React, Angular, Ember, etc.
I suggest that you stop thinking of browser / PC layout and mobile apps as being different. As it looks, you can't be sure what form factor's going to come next for both of them. That's true even for platforms that have been proven to be consistent, such as iPhone / iOS.
Responsive web design is the same in both environments, your layouts should be 'prepared' for a change in form factor.
Responsive web design is not different from React to Angular or anything in between. The only thing that differs is how CSS actually gets in your app.
No matter what you're designing for, you should:
Respond to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device.
The basic principles are: Adapt, respond, and overcome.
Technical perspective
In Vue the way to go is: isolate components, including styles -> use scoped styles whenever possible <style scoped></style>.
Then (not specific to Vue), use fluid layouts however you want; some people choose %, some use vh / vw or em / rem. As long as it's fluid, you'll probably be fine. Many choose vh / vw for containers and use percentages afterwards, but there's no default pattern. With percentages, some people find it easier to mix in calc(), which can be a useful responsive tool.
Regarding your button example, it's probably a good idea to use rem or em as a default. However, for some components it might make sense to use px - don't be afraid to mix and match. This can save you a lot of code and there's no golden rule about it.
Your breakpoints shouldn't be shaped after devices, instead figure out where your content can be presented better. This way you'll build a more future-proof layout, which can turn out to be a nightmare to maintain.
Choose whatever makes you feel comfortable.
It's up to you to combine your tools and get the CSS to work for you / follow certain RWD patterns.
Wrap up
That being said, here are some patterns you can follow when building your responsive apps:
Mostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
There's a course I encourage you to take if still in doubt.
In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between. It might feel a bit slow in the beginning, but you'll learn a lot by the end of it.
I am studying CSS best practices and methodologies like OOCSS and SMACSS to use in a medium scope project that uses Twitter Boostrap 3 and LESS. I'm starting to get a grasp of these methods but I have some trouble to find out how to handle responsive design and CSS modules relationship.
For example let say I have a button module with all different kind of buttons used in the project (color, shape, size). How could I make the button change depending of the device. The same button should be large in mobile and a normal in desktop.
Following OOCSS I should have 2 skin classes like btn--default and btn--large. But as the HTML is the same for each device I can't switch this class in the HTML. Also using a media query in the module's CSS that would change the size of the button depending of the device size doesn't seem a good idea as I would be coupling the module with this specific need (and what if I want a normal button in mobile later?).
As an other example, I have product section module that have different possible layouts (vertical / horizontal). What if I want to use the vertical layout in desktop and the horizontal in mobile. I'm facing exactly the same issue. I can easily create 2 different submodules (product--horiz, product-vert) but I can't change them.
I could use javascript to switch classes but it doesn't feel right and would break the design with JS disabled. You could tell me that maybe the design is not right if an element is changing so much from one device to another but it would be a real limitation to restrain this.
So what are your thoughts about this issue. Is there any generalised practice used to face it?
To use your example for buttons:
Mobile is also tablet and tablets come in a variety of viewport sizes that are just as large as desktop. Media queries are not detecting features, like touch, so making a media query is only for visual at that viewport size. It's best practice to use large buttons and large click areas for fat fingers for every device unless you do feature detection with js such as .touch .btn- {big styles}. I use a little script to put .no-touch and .touch on my html, but I don't bother making larger areas just for .touch. I make them for everything if at all possible.
Your base button style should be defined in the button module in your 'modules.scss'. Apply any styles here that will transcend across all buttons. Then handle the differences in your smacss 'states.scss' file (compiled last). You should have one 'button' section in your states file in which you handle media queries and unique classes that will alter the appearance of the button. Hope that helps, I can elaborate more if you need.
I'm looking for some feedback on this issue, i'm using Sencha Touch 2.0 to build hybrid apps packaged via PhoneGap/Cordova.
I would love to use a font to embed symbols (& get rid of resolutions issues auto-magically). I just love http://fortawesome.github.com/Font-Awesome/ for desktop & i'm wondering if it can fit in mobile apps as well.
However, I'm also trying to get the best possible perf.
Idea is to be able to use theses symbols on huge lists (>500 items). And i'm totally clueless on how theses methods (png vs. inlined-base64 vs. font) would compare.
Looks like Sencha team is using inlined-base64 over static pngs.
FontAwesome
I'm working on a project where we used to use FontAwesome and everything was working fine on iOS. But we had a big problem, it didn't work on Android and we didn't figure out how to solve this issue. So if you don't consider making your app for Android phones or if it happens to work fine for you, then I would suggest to go for it. With a webfont, like you said, you don't have to care about screen resolutions, you can change the colors and the size of the icons easily which I found quite convenient.
PNG
I guess the only problem with PNGs would be the number of HTTP request you make to get them. So the only advice I can give you is to use sprites. You could use something like Glyphicons which gives you icons pretty much like FontAwesome.
Inline Base64
The only problem with this solution is that images URIs must not be larger than 32k (according to When to consider base64 (DATA: URI) images?). It's apparently not supported by IE6/7 which I think is not an issue because Sencha only support webkit browser.
So, from my experience, go for FontAwesome if possible, otherwise sprites should always be the way to go for static images.
Hope it helped
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.