I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
Related
I really like the idea of StickyHeaders (https://www.codenameone.com/blog/sticky-headers.html), they're great for usability, but the CN1 implementation was never fully developed or included in CN1. Solutions exist for iOS and Android (https://github.com/emilsjolander/StickyListHeaders and http://applidium.github.io/HeaderListView/).
The two main features I'm missing in the old implementation are: that each header visually 'pushes' the previous out of the top of the screen (and vice-versa when scrolling down), and that the stickyheader which is 'stuck' at the top of the screen is the actual stickyheader itself, so that eg. buttons inside it will work.
Are there any plans to add this to CN1 sometime soon? Or anyone who has implemented a similar solution (I tried Chibuike Mba's alternative implementation mentioned on the original blog post but it doesn't cover the features I'd like)?
Alternatively, any pointers to how I might implement this myself?
I've already tried a couple of times, but given up since I don't master the details of CN1 graphics etc well enough. The approach mentioned here How to make sticky section headers (like iOS) in Android? sounds like a good approach (add a container on top for the stickyheader, scroll that container when the next stickyheader arrives), but then how to force the size and scrolling of such a container?)
This should be much simpler to implement today as we have two helpful features:
Scroll listener
Layered pane
You can use the scroll listener to detect the location of a header and appropriately place another component in the NORTH of a Container within the layered pane. Then as scrolling happens and you detect a new header is coming in you can just place it in an X/Y position below the existing component and use animateLayout to push it out.
I have inherited a non-responsive website that was created using reactjs. It is a fairly large website, that uses fixed layout. I have been tasked with evaluating/measuring the risks/effort of making the current website responsive. As i see it, these are the different things that I need to evaluate/accomplish that will help me with my goal
Go from fixed layout to relative layout. This might include using a grid layout or something similar
Decide on the app's flow, look and feel on mobile vs desktop. By this I mean, how should the links look when viewed in a mobile phone (maybe a hamburger menu) vs links that are laid out flat in a desktop browser.
What does it take to make individual components that make up the website responsive using media queries.
My question is should I prioritize one over another for whatever reason? And am I missing anything else that I should be focussing on
Thanks
K
We are creating a RTL version of our site pages for Arabic, and have found that using solves many layout problems, but with the side effect that on mobile devices, our viewport code no longer results in correct scaling on initial load (testing on iphone). If we remove the rtl tag, the scaling returns to being perfect. Here's an sample page:
http://www.tribeofheart.org/sr/pkj_arabic_m.htm
We've tried several commonly suggested variants of viewport code for mobile devices, but so far no luck. For example, these did not resolve the issue:
Any suggestions would be so greatly appreciated.
cayugaman
I have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
I'm retro-fitting a website for Mobile First Responsive Design (MFRD). My question is - how far do you go with the "Mobile First" part?.
For example - on the homepage I plan on having a list of upcoming events, say 4 or 5. On the mobile version I thought 2 would be enough to save screen real-estate. Should I load the other events in dynamically for the larger views, or should I just hide them since it will only be a few elements anyway?
Loading them dynamically for larger sizes means I have to attach an event to the window resize which typically gets fired every pixel. Even though I can offset that with Timeout, that's still a lot of client side checking is it not (even though it's not like users are constantly resizing their browsers).
I mean, even though you're designing for mobile first, you also have to consider the larger sizes right? Obviously larger JavaScript libraries and other assets that are needed for larger only you want to pull in later and not load for mobile - but how crazy do you want to get with the bandwidth saving?
What is the target market for the website? Are you making a completely responsive website that encapsulates smartphone to desktop? Or are you just concentrating on smartphone to tablet?
Mobile First really just means start your styling and content views at the smallest form factor and work up as the device dimensions get bigger. HTML, CSS (media queries) and jQuery all play a part to expand the UI and manipulate (show/hide) content elements as the browser gets bigger.
Take a look at Smashing Magazine, their responsive layout is one of the most extensive I have seen so far, it will give you an idea of how far you can take the MFRD or DARL (Device Agnostic Responsive Layout) methodologies.