well i've made a responsive website which handles well in mobile devices. Now there are some Phonenumbers on the website which my cliënt would like to be clickable on any Phone so the visitor can call directly. I found that making a link of the phonenumbers works like so:
make a call
This triggers mobilephones to call the number. But it also triggers the webbrowser on any other device to follow the link, which results in "page can't be found"
I'm looking for a good anwser to tackle this problem. I've been searching for a while now but i'm getting a bit tired and frustrated.
I think i've come with a solution but i don't excactly know how to put this in the html.
There are several ways to conditional comment browsers in html. If i could do this with the link part and rule it out:
<!--[if any **none mobile** webrowsers: don't read:]>003164646464
And all mobile browsers read the link.
It seems to me, that this is the most easy way to do this, but i could be wrong...
I hope that someone can give me any pointers, I really appreciate your idea's and help!
THANKS!
There is no easy way to achieve this. You can use different approaches depending how accurate you want to be:
WURFL - most accurate, allows to check user-agent and get browser / device capabilities
You can try parsing user-agent by your own detecting OS - check this answer Detecting a mobile browser
Use css media queries to target devices with small screen
Unfortunately there is no silver bullet for this (at least I don't know one).
Related
As mentioned on the title, Iv'e just finished making a static website, using - CSS/JQUERY/SLICK/JQUERY/BOOTSTRAP.
And I have no idea what to do or where to start in order to make it responsive, tried google but still feeling confused not sure about where to start...
As for now minimizing the page seems to do nothing but cutting the area been minimized.
Changing the view to phone-view on chrome devtool causing the website to look the same, just extremely small which means you can't really read text or anything without zooming in.
any ideas or guidelines of how to start?... feeling lost which is weird cuz am feeling pretty comfortable with the method mentioned above.
Thanks alot for reading!
Thinking the mobile site after doing the standard one is not a good idea. But you are already at the end of that road and there is no going back now.
Responsiveness mostly works on the CSS side. You cambine media queries to specify which CSS should be used for each screen size, but it also has to do with your content structure. As mentioned in the comments, using rows and columns when designing your site helps doing the mobile site a lot.
I suggest you start reading this if you haven't: http://www.w3schools.com/css/css_rwd_intro.asp
And go through each section under the Responsive Web Design section. It should give you a good introduction to help you get started.
Looking for advice on this - please give your opinion on which is best and the pros and cons.
I've got a site I'm working on that will be catering to basically three types of devices. Desktop/Laptop, Tablet, Phone. It is a responsive site so it looks great on all three.
BUT!
For the tablet and the phone there are a couple of features we will be including that will not be available for Desktop. There are links that will be included just for these and there will be a whole new menu that will sit snugly along the bottom of the site.
AND!
For the phone there will be even more features that will be in that bottom menu (like a "phone" icon to quick call from any page - not on the tablet).
We've got a WURFL setup telling us the device capabilities (is_smartphone, is_tablet, neither) - just want to know what you think is the best way to implement this?
a) set theme based on capability?
b) show/hide certain menus in the CSS based on capability?
c) something else?
Since you are using server side detection you can deliver specific sets of css and html depending on what type of hardware is creating the httpd request. The benefit of this over using media queries is you are able to decrease load times. The issue of doing display none is they are still getting loaded and not displayed. I would recommend to use the RESS technique.
I'm a Ui/Ux designer, and I've been asked to give some advice on the architecture of an iPhone app, the said app implies a section called 'Help and guides' for the users to know how to properly enter their data in the app. While analyzing the app, I was going to recommand that it may be interesting to put that part in the settings, and I was challenged about the reason I would do that. All I could come up with was that it was kind of a habit to put it there. But indeed, why would we put the help in the settings?
While doing some research, it appears that the help and the FAQs are often placed in the settings of the apps, and I was wondering why. Even though it seems obvisous to me that this has evolve into a known pattern to the user, I was wondering if there was a proper justification for this practice. Any ideas or clues?
From my research into this as I am currently designing Android and IOS Apps. The reason to group both these items under the one menu is to keep the screen as clutter less as possible. Due to the screen size of a mobile phone, the need for space is high so removing the buttons by grouping them under the one menu helps greatly.
I would suggest possibly making a Menu button with the options to access help & settings as subheadings personally.
Hopefully someone may know what I mean and where I may find such a thing.
I'm creating a new website and as part of it i'll be offering mobile web design. What I need if possible, is something that, should a user click on one of my examples, it load up a mobile browser (not the mobile site on a normal web browser). More like an emulator that will allow them to see working examples of potential sites.
Is there anything out there that will do this, or am I looking at opening a new window to a set size and displaying the site within it?
Please Note --- Whilst writing this out, I may have stumbled across a potential floor, as this may expose code.
I'm thinking I should perhaps consider putting JPEGs or PNGs that they can scroll through so not to expose the code behind the mobile site itself?!
If there is such an emulator or the likes that is available (and doesn't show code in the background) i'd be more than happy to be pointed in the right direction!!
Thanks
Paul
Please correct me if I misunderstood your question, but it sounds like you want to let users preview a responsive design at different screen sizes while denying them access to the source code.
If that's the case, rendering the design as a flat image file for previewing purposes is your best bet, even though it would sacrifice any interactive aspects of your design. It's a rough trade-off.
I assume you have a legitimate reason for hiding the code. But if haven't already, you might want to ask yourself what's motivating you to conceal your source code in the first place. The web is built on open standards and accessibility; you'll have to go through a lot of contortions to hide static assets like HTML, CSS, and javascript from a browser. I understand if you're concerned about a sketchy client using your work without payment, but that's more of a contracts/legal issue than a technical one.
That said, you can always place the mobile site's main content (or an image of the content if you must hide the code) within a div of a specified width and height to visually emulate a phone. Wrap it with some phone graphics, control the overflow with overflow-y: scroll; and overflow-x: hidden; and there you have it.
Web Design Weekly is a nice example of this concept in action.
EDIT: it occurred to me that another option you could feasibly explore is video instead of static images. Always an option if you need to wow a client. Typeform.com is a good example of what I'm talking about.
I want to know how to design a website. The website is shown normal on the web and mobile, but I need to know which one is better?
Design two different templates (one template for mobile and the other one for a normal monitor).
Check online through the user's device to see if its using a mobile device so I can change the stylesheet.
Is this correct? If there are any ideas, please tell me.
Thanks
I would go for 1. Normally you don't want to show as much content on your mobile website as your "normal" desktop website. But include a link to your normal website from your mobile website.
I would go for one, as axelios suggested, I would include a link.
I, as a user, find extremely annoying websites that refuse to display the full site because they "recognised my browser as a mobile browser". Several newssites do that, which has eventually diminished the number of news I read, and some shops did so, which means I don't visit their sites anymore... so I strongly discourage the second solution.