i want to create a web app that works on a desktop and a mobile. i kinda have one at the moment but doesnt work on mobile well. Whats the best way around this? i know flash is being phrased out and java doesnt work on all mobile devices. I'm not not good with css, etc. This is current web app. http://www.acdcpowermonitor.com/Systemlive.aspx?systemid=1000000001&AspxAutoDetectCookieSupport=1 i want it to just work on a webpage.
hope you can help
regards
jeremy
you can make your web application responsive. bootstrap is a great tool to that with minimum css knowledge.
Yes you can use bootstrap
Ref- https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
And use eclipse if u want else Notepad++
You can use
Bootstrap
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
Bootstrap is completely free to download and use!
latest version bootstrap#4.0.0-beta
https://getbootstrap.com/docs/4.0/getting-started/introduction/
and you can use for this
Grid system
this is a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
you can learn it
https://getbootstrap.com/docs/4.0/layout/grid/
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
look at https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Related
I was going to look into Bootstrap for developing websites. For those that use it, does Bootstrap do most of the responsive coding for you or makes it any easier?
Bootstrap does include classes to help you build responsive websites. It even includes some nice features for responsive navigation bars, etc. So yes it does make it a lot easier to build responsive websites.
I would suggest to just have a look at the docs. You can start here and here and see if you like it.
I know HTML and CSS really well but responsive and continually messing around with css media queries is just a pain in the butt. What do you recommend to make my workflow of making my sites responsive less cumbersome? What can I learn to make my job easier?
I see some sites out there where the responsiveness is so dynamic and perfect. CSS media queries don't seem to create this fluidity.
http://getbootstrap.com/getting-started/
Bootstrap is compatible with the latest versions of all major browsers. It gracefully degrades when used on older browsers such as Internet Explorer 8.
Since version 2.0 it also supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.
Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.
Recently, community members have translated Bootstrap's documentation into various languages, including Chinese, Spanish and Russian.[6]
I'm a big fan of Zurb Foundation. They just released Zurb Foundation 4 which was redesigned to be mobile first. I'm fairly new to responsive design taking into account both mobile, tablet, and traditional desktop experiences. I'm trying to wrap my head around how best to manage my site's content for these different devices. With Zurb Foundation 4, you can hide or show content based on small, medium, or large device sizes. So, it seems with Zurb's approach you drop all of the content down to the device and let the CSS decide what content to show depending on device (this is responsive design).
My question is why do we have to drop all of the content to the device? That seems like a waste of processing on the server, a waste of bandwidth, a slower experience as the browser handles the content some of which may never be shown to the user because of the device they are using. Am I missing something? Wouldn't it be better to go back to the server and let it send content to the client that's appropriate for the device type? Shouldn't we be concerned about mobile user's data plans and not send down content that's not appropriate for their device type? All the examples that I've seen on responsive design has content for desktop and mobile/tablet downloaded to the client which seems to be a waste.
I'm developing a time entry application that has a different user experience based on the device type. Desktops (when in full screen) have a more detailed data entry experience whereas mobile/tablets have a different experience because of device real estate is smaller. I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate? I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
Am I on the right track with my jQuery approach? Am I missing something regarding responsive design and needing to tailor the content to the device? Any ideas, suggestions, and guidance is appreciated. Thanks.
Mobile First with Zurb Foundation is basically a philosophy change by the Zurb team and if you want do develop a responsive site and not take a Mobile First approach then I suggest using Foundation 3 which is still available and fantastic. There is a book that I am reading that gives a great pitch for Mobile First, called Mobile First by Luke Wroblewski who is also listed as an adviser to Zurb.
here is an article by the same author that might be interesting:
http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first
Basically: the premise is that you start your development and design for a mobile, meaning basically an iOS or Android style browser and then add features.
So instead of starting with a desktop / tablet experience and removing things as was commonly done with .hide classes in foundation 3 and could still be implemented in this way with foundation 4, they suggest using .show classes to add additional content.
This can be taken way further by using Compass and Sass Mixins. There isn't a lot of great documentation on how to do this, but you can basically keep your markup semantic, apply an id rather than a class and use the mixins to apply it to that id. There are advantages here in speed traversing the dom for an id vs. a class so it can be a good way to go.
Note: foundation 4 is using the drop in replacement (there are some limitations) for jQuery called Zepto. You can replace Zepto with jQuery if you really need it in foundation 4 or use foundation 3 instead. Zepto is much more lightweight and thus suited well for mobile.
As for it being faster by using jQuery to async load the data (I am assuming) based on the size of the browser, that is one way to do it. I am not sure if you are going to have a huge speed increase here. There are many strategies, pagination, async loading more data on the fly, and it depends on how you arrange the UX / UI around that data.
There are also many other issues such as caching resources, CDN, etc. that are typical in front end engineering that might give a faster load time. One resource you can check out related to this is ySlow.
There are also many design patterns such as off canvas slides, the 3 line (hamburger menu), loading more data on scroll, stateless apps, that can allow you to have the same functionality in a mobile app. If you go stateless, after the initial page load other pages should appear to be almost instantaneous.
I think the question here is more philosophical, in do you need all of the features, which is one thing that I believe taking a Mobile First approach is trying to approach.
Another thing to think about is the perceived loading time. I think I read about this is Seductive UX (another great read) but the faster you can get the page up with a loader or spinner, the faster it is perceived to be loading, even when in actuality it can be loading slower.
As a final note, if you plan on using foundation, you might look into using jQuery/Zepto with Modernizr to pull from the same media queries foundation is using. That way you don't duplicate or create something that is inconsistent with the rest of the responsiveness.
I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate?
It doesn't sound like a good approach do you take orientationChange in to account?
I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
If you are on most tablets visiting the website in portrait and change to landscape you'll have to download the >768px UI after already downloading the <768px UI.
The mobile first approach in zb4 (with media queries) allow you to prevent stuff that belongs to big devices to be downloaded in to small devices. Basically you start with mobile styles and if the device meets the conditions you set on your mediaqueries (you can have much more breakpoints than the zf4 framework gives you by default) then the next rule jumps in.
I have worked in several 'responsive' projects even back in the pre-mediaqueries days were I use javascript to measure windowsize
Regarding javascript and like #powjames3 said zepto is much lighter / faster than jquery and if you could write your own javacript functions will be much better than using a over-bloated library.
Nowadays I do mobileFirst responsive webapps and websites use a mix of user agent sniffing ( sometimes to decide what image src or script / style src to deliver), despite the decision of the user agent tests i always serve mobile first mediaqueries, and conditionally loaded content.
"As Ethan Marcote (and John Allsopp before him), were right to point out, the inherent flexibility of the web is a feature, not a bug."
Here are some resources that might put you in the right track:
User agent parse and detection:http://mobiledetect.net/
Tutorial http://www.html5rocks.com/en/mobile/responsivedesign/ that covers:
Why we need to create mobile-first, responsive, adaptive experiences
How to structure HTML for an adaptive site in order to optimize performance and - prioritize flexibility
How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
What we could do to further enhance our adaptive experience
Hope it helps
I am using CI, but seriously considering a move to ATK4. The SaaS code I build always has to be desktop & mobile accessible, so recent projects have relied on Twitter's Bootstrap layouts to allow a good browser experience, regardless of screen size.
How does ATK4 handle mobile browsers, especially small screen like on phones? Is it really just a matter of the theme you choose with Theme Roller, and if so, are the any themes that are known for a both a good mobile & desktop experience with ATK4?
Agile Toolkit is targeted at the UI development, and primarily the desktop browser UI. The site is still usable on mobile devices, just like any jQuery UI site.
However, if you would like to use a different CSS engine, you are free to do so, simply change your shared.html file to have the necessary includes and you would need to write more templates. Well, you are writing templates right now anyway with CI, so it's pretty similar experience.
I host a small web shop for a client who wants it to be easily accessible from mobile devices.
How do I detect if the user is browsing my site from a mobile device?
When I have done that, should I:
Check if the user has mobile device and then forward them to another site?
I think the advantages would be:
I can optimize layout from both sites for screensize
I can use different techniques in the two sites (eg. jquery mobile for mobile)
Use CSS for the different screen sizes => like on tutsplus
I think the advantage would be:
I only need one site but it seems to me heaps of work when talking about a small webshop
Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.
You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
#media screen and (max-device-width: 480px) {
Main things to consider when aiming at iPhone users:
ensure there's no vital flash objects
on the page as it isn't supported by
many mobile browsers (yet?)
appropriate screen size (using
viewport meta tag)
keeping in mind that there's no mouse
cursors, meaning no
hover/double-clicks are available any
mouse dragging gestures are different
on touch devices
remember all pop-ups are open in new
tabs and won't be seen at the same
time as the main window, use
javascript modal divs as alternative
test all your javascript and css to
ensure everything looks and works the
same (Safari requires -webkit- prefix
for the newest CSS properties)
create a Home screen icon for your
website (a nice thing to have)
most of these things are covered here
take a look at Safari Dev Center for tutorials/videos/coding how to's etc.
There are several options but this is my favorite:
http://code.google.com/p/mobileesp/
Comes with a API in a couple of different languages as well
You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.
Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.
JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.
http://jquerymobile.com/