I have a website at http://bit.ly/1h3HLVE
There are two issues I am trying to resolve regarding viewing the website on mobile devices.
The dropdown boxes in the top navbar do not work on mobile viewing (with my iphone anyway)
When I load the website the first time it is zoomed in on my mobile, and I need to zoom out to see it properly. I'd like to find a way to have it automatically open at the right size for the mobile device.
Can anyone help with either of these?
What you are trying to do is called responsive design, the easiest way would be learn a little about Bootstrap, Bootstrap is framework for design, there is a gem for rails called bootstrap-sass for easy integration, with this you can set different behaviours for different devices (this is one of the functionalities of bootstrap), you can hide for example your navbar in mobile devices and show another smaller in mobile. Bootstrap also has responsive adaptive support for images and tables, that it will change according to the width of the device dynamically.
Of course, if you are hiding items they will still loading to your site so eventually it could be a little hard to loading, you can use browser gem then, this one allow you to have different behaviors for different devises with conditionals(mobile? desktop? e.g.) and also let you have different views for each one.
Check both of them, is a good place too start and there is lots of guides for those, regards.
Related
I'm looking for some pre-built layouts in jQuery mobile.
Like the camera layouts for example. I would need lets say at least 5-10 layouts to cover the entire process from the engagement of the camera phone to apply the final pic(s) to a photo gallery and albums. Another set of UI layouts Im looking for is chat messages.
Think about how many unique layouts are on an iPhone? There's about 4-5 layouts for your texting on your iPhone from the list view of the people you've been texting to the thread messages inside each conversation and more. Im looking for all the source code files that come along with each layout. Since Im now using jQuery mobile to do my next set of layouts, Im looking for mobile layouts that is compatible with jQuery mobile.
Any help would be appreciated.
John
I'm starting to think about how to solve the problem of developing an app for all iOS devices with different screens (resolution, ratio, retina, etc). I'm working with Adobe Air (AS3), but that really doesn't matter because I'm in a conceptual phase and I'm concerned about the patterns to use.
If I was only developing for iPad, the problem would be as simple as doubling measures and sizes to adapto to retina and non-retina devices. But I need to take into account iPhones, iPods, and eventually Android too with it's myriad of screens.
So far I see those possible options. I'm sorry if there's already some terminology for those options, but I'll just say in it my own words.
Intelligent views that have some sort of liquid layout, and also intelligent components that adapt to the space the view is assigning to them, and to the screen dpi for font sizes, and image sizes. For example: the view says "here goes a button on the bottom with this width/height". The button already knows what font size the text must be depending on the screen dpi.
Factorization with parameters of different UI view classes. So I'd have one view class for iPad, another for iPhone, etc. and there would be one class that would factorize the instantiation of the view depending on the device. Each of those classes could be hand tailored to be completely different from each other, but the underlying model and (hopefully) the controller would be the same on every device.
A middle way approach: One UI View class for tablets, another for phones, and each of those with some sort of liquid capacity to fine tune the position and size of elements (buttons, texts, images, etc).
External config files that give the View some parameters depending on the device. That would be some sort of custom CSS.
I'm sure I'm not the first person to find this rock on my path.
So how is this problem usually solved?
Is there some stablished pattern for those scenarios?
Is there some reference (book, article) I should read?
I haven't been able to find an in depth answer to this. If it's already been asked/answered please don't downvote. Post the link in the comments and I'll just delete this question.
You are describing Responsive Web Design. There are multiple approaches and ways to make you site responsive (i.e. capable of running on multiple screen sizes without having to modify or reconfigure the codebase or rely on user-agent to detect the browser info).
Start from here: http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
Also consider various open-source CSS frameworks that will simplify your life. For example, Bootstrap and HTML5 Boilerplate. Both of those are fairly independent of your development platform and should work well with MVC.
I've been developing an iPad web app over the past three days, and I'm trying to have internal horizontal scrolling, without allowing the rest of the page to move/zoom in ect. Essentially I want to lock it to specific co-ordinates, whilst allowing certain elements to scroll. If you're on an iPad you can see it here: http://streamerforipad.webs.com/app.html. It'll look kinda weird on a desktop. Also, sorry for my abysmal coding skills, I plan to clean it up with external CSS at some point.
P.S. Remember this is a web app so native code is a no-go.
Thanks!
You can disable scrolling within certain element areas using the following:
$("element,element2").bind("touchmove",function(e){
e.preventDefault();
});
We're building an admin panel for managing bookings and payments. I would like to use the style of Apple Mail on the iPad as it is clean, simple and user friendly. We are quite capable of building it but the question remains on scrolling content.
Image a Clients page. We'd want a list of clients on the left and onclick the content to load on the right. On iPad mail these two colums scroll independently. Yet to achieve this on our own pages I have found only a handful of inadequate solutions.
1.) Overflow content and two finger scroll
- no scrollbars
- not particularly user friendly
2.) JS libraries such as iScroll
- over complex and lacing in cross browser compatibility.
Thus any other simple ideas on how to do this. Would a good old fashioned frameset accomplish this goal?
What's wrong with two divs with overflow: auto;?
While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.