Responsive Web

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hi everyone,

I have been working on creating some touch-friendly navigation buttons; I have used <a> and <div> tags in creating the navigation buttons:

e.g.
<a href="link goes here"><div style=">Home Page</div></a>

div#button has the following CSS styles:
div#button{
      width: 150px;
      padding: 5px;
      background: lightblue;
}

I have also added some "hover" effects on the button:
a:hover div#button{
      background: #999;"
}

I have checked the page in iPad's browser and found out that the hover effect is being rendered correctly however I've noticed that I need to tap the button twice (2x) before the page is being redirected to the link - which is not what I want. I want it to work like a normal button wherein 1 tap (touch), and it will redirect to the link.

Is there any way on achieving this? If there is, how do I achieve it? It would be of a very big help if I can give some sample codes to do it or idea on how to correctly create mobile-friendly button navigation.

Also, if I use the <button> tag, will I be able to achieve this? I'm thinking of using <button> instead of the <a> and <div>  tags however I do not know how should the button redirect the page.

Thanks for any help

Code of the test page I have created:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 

Open in new window

0
Well it's a questions and a tech issue... I have a dolphin CMS site that been heavily modified but now needs a new design and re-write of the code all custom nothing from any new cmd. Also, need to develop a html5/node or socket IO video chat with flash for the camera access. Been looking for 6 months now.. tried various scriptlance, ODesk, and all.. no luck or they didn't know what I was talking about when asking simple php questions so it never would proceed.

Problem is not our design, layout or ideas.. it's getting 1 or more programmer and designer to take the job and want to be paid.. Should be easier in this job market to find a good and dedicated coder that wants to be paid and onetime... but can't.

Our one requirement is that you don't work on our live server or live code. We have development server that does not contain the adult content so even that we have removed as an issue.

Help!

0
hello experts,

I bought a toshiba tablet 10". I cannot make it work with Eclipse so I can debug Android apps.
Toshiba doesn't provide any drives and its site.
is there a workaround ?

any ideas ?

p.s. the device is setup to accept connections and when I connect it to windows it is shown as a device
0
I'm working on a mobile website video page and would like to create links that play full screen YouTube videos, without leaving my site.
 
Right now, I'm linking to the mobile YouTube site (<a href="http://m.youtube.com/#/watch?v=1234567">link</a>). When clicking on the video thumbnail, on the YouTube page, YouTube plays the video full screen. Is there any way to do this on my site?

If not, what is the recommended way to display YouTube videos on a mobile site?
0
I apologize ahead of time, this may seem trivial, with enough time on my hands I could eventually get this figured out - BUT using EE is likely going to save me that time. By all means if you have a simpler way of doing this, I'm open to suggestions.

I have a web-site that displays 10 images on the home-page. It cycles through "1.jpg" ... "10.jpg" - I am using jquery to do this. (to display those images 1.jpg...10.jpg)

In the images folder I have 500 (jpg) images.

What I would like to do is have the site display different images and the way I am thinking of doing it is by renaming 10 different files "xxx.jpg" to "1.jpg" ... "10.jpg"

Using Perl and a simple text file and/as a place holder. (That text file is a list of those files/images) (1...500)

Is it possible using Perl to begin at the top of that file list 'xxx.jpg' and have it sequence all the way up to 500.jpg and rename file 1.jpg...10.jpg from that list of files?

I hope this makes sense and I'll elaborate a little better (see below) BUT, if you know of a way to do this with a lot less fuss, please let me know? I may be getting ahead of myself and jquery may already do this. I've been away from programming for quite awhile so go easy on me, please. I would consider myself a beginner(+) perl programmer.

-------------------------------
1:00PM - the site is visited by the end-user
1:00PM - the web-site home page cycles through images 1.jpg ... 10.jpg

1:15PM - the perl script renames each of these…
0
This is my first android program ever I usually code in python... I've watch a ton of java tutorials but Java is so different  I'm having trouble ...so here is what I need to do... I have my Main class and it collects user input  and returns the variable public string username and public string password then I have a gps Class and it return the variable public double longituts and public double latitude... in python I would make these global variable(ie self.username ... etc ) collect the data into in a method and send it to the server in mysql format... I have a new class  and Its called GetdataandSend

public calss GetdataandSend(){
I want to collect the variables from my Main Class and gps class
store the variables and then send to the server the data (using Mysql fomat) 
}

Open in new window


can some one point me in a direction of some titorials or examples of this ... thanks
0
Experts,

Is there any blog engine that simple, light, fast and ease to integrate to my site? I want create a blog like http://37signals.com/svn.

I want to create blog that can be read also on iPad, Blackberry and other smartphones.


Thanks.
0
Does anyone know where I can find decent tutorials or mobile app templates on how to create the following:

Mobile App that connects to a server via HTTPService with pagination capabilities and retrieves an XML or JSON response and utilized that response to populate a list view?

I already use lynda.com and there isn't much there to help me.  I've already achieved this in Titanium  Appcelerator to some extent but didn't like the emulator overhead that gets packaged with the App and would rather be using Flash Builder like I am right now.
0
I have a website that I only want viewed from a regular web browser on a desktop or laptop.  I don't want it viewed from a phone or ipad, etc.  

How do I create an else statement that  will direct desktop users to the website if you are on a desktop or laptop?

PHP is the code this site is written in

Thank you.
0
I am having an issue with an iRule script on F5.

We have a separate mobile application(m.mydomain.com) hosted on different network from www.mydomain.com 
Any request coming for mydomain.com from mobile browser should be routed to m.mydomain.com using the below listed iRule.

The problem comes when we use PayPal for checkout on the mobile browser.  The checkout for paypal sends the user to the PayPal site, where they complete the checkout and then PayPal redirects them back to our site with a URL like this...
URL= https://secure.mydomain.com/Secure/PayPalLanding.aspx?PayPalAction=authentication_process&token=EC-52775104BS323H&PayerID=5GQ567UACXE 

That URL needs to redirect to m.mydomain.com when it's coming from a mobile browser so that the user ends up back on the mobile version of the site.

We have the iRule script shown below.  The bottom portion was recently added to support the PayPal redirect, but it doesn't seem to be working.  I'm not a big iRule expert, so can someone help me determine what the problem is here?
when HTTP_REQUEST {
                if {([string tolower [HTTP::host]] equals "www.mydomain.com") } {
                                if { ([string tolower [HTTP::path]] equals "/") or ([string tolower [HTTP::path]] starts_with "/default.aspx") } {
                                                if { not ([HTTP::query] contains "mobi_stop=yes") and ([matchclass [string tolower [HTTP::header User-Agent]] contains $::mobile_user_agents]) } {
 

Open in new window

0
If I convert pdf into swf file, I can make it printable but not save-able. But it's flash, and flash is not compatible with mobile devices. So I'd like to see if there's any other way that I can convert pdf file or embed pdf file, so it can only be printed but not saved on customer's computer? Thanks.
0
Hello,

I m making mobile version of my website. I want to adjust the font size and image in different resolution of mobile device.

Is there any way to do this with help of javascript,html,css or php.

Thanks
0
Hi Guys,

I have a great project that I will be getting my teeth into in the new year which involves developing a manifested HTML5 web app for the iPad. This will store user data using local storage.

So just to confirm, the app will be used locally and potentially off line.

What the solution will also provide is a means of the user backing up the data within local storage into SQL Server on a web server when a web connection is available.

Can you recommend an efficient method of transferring this data between the web app and asp.net interface and finally into SQL Server.

The transfer method would need to handle approximately 5MB of data (the default for Safari local storage) and be secure and as reliable as their internet connection allows it to be.

Your thoughts/opinions would be very much appreciated.

Many thanks,

Rit
0
Hi All,

I am developing a HTML5 app for the iPad and what I am finding at the moment is that when using the input type 'number' it is auto formatting the value with a thousand separator e.g. 1000 is being forced to 1,000.

Is there any way to turn this option off other than changing the input type to 'text'? - I don't want to lose the number keyboard by default.

Many thanks,

Rit
0
I maintain a small website for a friend who is a "struggling artist". He lives very frugally and has budget all, so I maintain the site out of appreciation for his work.

He brought to my attention that the site does not display properly in mobile browsers (Android and Safari on ipad and iphone).

http://ericwixon.com/

The site breaks on the content under "news". It's an iframe, and on full web browser it displays as a ~350px height frame with a scrollbar for the rest of the content, but on the mobile browsers there is no scroll bar and it displays the entire content of the frame with the rest of the website ("artwork" on down) on top.  A mess.

Are there any Experts who are familiar with mobile web development and could advise me on what to do?

Thank you
0
I have never created a mobile app before and need to make one for my company that can scan barcodes.

- Are there any software packages similar to dreamweaver for developing mobile apps?

- Some tutorials on how to create apps for andriod would be helpful
--- More so if they relate to an available development tool
--- And if they specifically show how to utilize the androids camera as a scanner for barcodes

Project Desc:
User will need to enter some basic info first which will be applied to all items scanned in inventory. Once an item is scanned it should be updated in the DB and give a confirmation screen on successful update before returning to a ready state.
 
0
I have some pdf files, how can I render it so that customer can't save it on their computer, but able to print it. For example, swf file will not be able to save, but can print. But since it's flash. We do not like it. Is there anything that can embed pdf in html or xml or something that can avoid customer from saving it, but still able to print it?
0

Responsive Web

Mobile web development, also known as responsive web design, is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

Top Experts In
Responsive Web
<
Monthly
>