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

Whats the most accurate techinique to get the geolocaiton of certain mobile phone using html5?? I need to get the phone GPS coordenates.

This will be used not for an application, but for certain website section where it will be able to report city's roads and paviment potholes attaching a picture and uploading it all.
0
I am launching a mobile platform in the next 6-8 weeks that will require users to pay recurring monthly subscription fees and also will have non-recurring charges that will need to be processed against a stored preferred payment method. The problem I am running into is finding a CC processor with an API available that can be integrated into the mobile app AND will allow the user to authorize recurring monthly payments to their CC.

PayPal is the first solution I looked at. They do offer this feature but at the moment they only allow recurring payments to be charged thru the customer's PayPal account, not to their CC. I have found dozens of services that claim to offer this functionality but when you dig through the layers of information it turns out their mobile solution is nothing more than a payment swipe device that can be used with an employees mobile device. This doesn't do me any good. I need a service that will provide the following:

1. API to accept CC information through a Mobile APP and the ability to authorize recurring charges to that CC for a set amount.
2. API to accept CC information through web UI and the ability to authorize recurring charges to that CC for a set amount.
3. Virtual Gateway to allow employees to process one time payments against the stored preferred CC payment method for a customer.

Numbers 2 & 3 seem to be widely available and fairly standard. Number 1 is the one that I am having trouble finding. Can anyone point me to a service that …
0
I am building a mobile app and need a UCC db to pull product information from. The products are going to be primarily related to groceries but will not be limited to that sector. I have found several dbs online that allow me to enter the UCC code and will provide results but so far none of them provide an API capability or a way to download the data in mass. Can anyone point me to a source that provides either an API or download access to this data?
0
I'm using position:fixed for my nav here:

http://cjehost.com/ncjwla3/

View in smartphone/portrait (or landscape) and scroll down. You'll see my carousel caption is on top of my menu. Any idea how to fix this?
0
Hi experts,

I try to install latest Phonegap on my Mac OSX Yosemite but I get only a bunch of errors and the installation never finishes. I installed nodejs successfully and used the command "sudo npm install -g phonegap".

I get the following feedback

Mac-mini:~ oliver$ bash
bash-3.2$ sudo npm install -g phonegap
Password:
npm WARN engine npm@1.3.4: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.4","npm":"2.10.1"})
npm WARN engine cordova-js@3.9.0: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.4","npm":"2.10.1"})
npm WARN engine xmlbuilder@2.2.1: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.4","npm":"2.10.1"})
npm WARN installMany normalize-package-data was bundled with npm@1.3.4, but bundled package wasn't found in unpacked tree
 
> ws@0.4.31 install /usr/local/lib/node_modules/phonegap/node_modules/connect-phonegap/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
 
> ws@0.4.31 install /usr/local/lib/node_modules/phonegap/node_modules/connect-phonegap/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
^Z
[1]+  Stopped                 sudo npm install -g phonegap

Open in new window


I stopped after more than 1 hour the process. I did this 3x always the same.

What can I do? I not even know where to start to solve this.
0
I need to align my bootstrap carousel caption to the right of the carousel image so it's formatted exactly like this:

http://cjehost.com/ncjwla1/

Only diff is the carousel will be 100% wide like this:

http://cjehost.com/ncjwla3/slidertest.html
0
Hi,

I have excel template with VBA that generates XML and e-mails data using Outlook. I just found out that some users do not have/use Outlook, but instead are using Outlook Web App. Is it possible to modify code to use Outlook Web App instead of Outlook. If so, how would I do that. I am novice in dealing with VBA.

Current VBA attached.

Thanks.
Option Explicit

Private doc As Object 'As MSXML2.DOMDocument60
Private mstrFile As String
Private mstrPath As String

Public Function SendEmail(Optional ByVal FileToAttach As String, _
    Optional ByVal XML As String, _
    Optional ByVal Recipient As String, _
    Optional ByVal CC As String, _
    Optional ByVal Subject As String) As Boolean
    Dim wb As Excel.Workbook
    Dim strXMLFile As String
    Dim strGuid As String
    Dim oAPP ' As Outlook.Application
    Dim oAct ' As Outlook.Account
    Dim iMsg ' As Outlook.MailItem
    On Error GoTo errhandler

    If LoadXMLDocument = False Then
    Err.Raise Err.Number
    Exit Function
    End If
    

    Set oAPP = GetObject(, "Outlook.Application")
    Set iMsg = oAPP.CreateItem(0)
    With iMsg
        .To = Sheets("Control").Range("ReturnTo")
        .Subject = "Cash report for " & GetValue("Location", 1)
        .Body = "You can attach the xml as a file or just make it the body of the message like this " & vbCrLf & vbCrLf & vbCrLf & doc.XML
        .Attachments.Add mstrPath & mstrFile
        .Send
        'LogEvent "Email sent", "modUtility", "SendEmail", "Logging",

Open in new window

0
I've got a site I am developing in the newest version of twitter bootstrap. v3.3.4

What I need is for the print version to use the col-sm-* settings to print from, instead of the col-xs-*.  So basically I have a two column grid design so one col is col-sm-6 and the other is col-sm-6, the mobile version is col-xs-12, which is what prints.  How can I configure this to use the col-sm grid setup when printing?
0
Hello,

I have a mobile-friendly / mobile-optimized website. I am trying to create a very simple iOS app that simply loads the website in a mobile app. It works perfectly, except it does not retrieve the mobile version of the website. The following is the code found in ViewController.m:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // Load the url into the webview
    NSURL *url = [NSURL URLWithString:@"http://www.example.com"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Open in new window

0
signature pad uses finger to write  signature. but signature pad moves in mobile web page.
using jQuery
#container1 is DIV id

how to I stop a page form moving at all?

I am making a mobile web page,  HTML5,    Jquery.  CSS
maybe I need different signature code?
thanks
0
for a pc, when we do a clean reinstall, it helps with maintenance. is there a similar version of cleaning up you can do for an android?
0
Im building a webview app in xamarin/android and I made the minimum and target android version to be 4.2 jelly bean .
The app is working perfectly on my phone samsung duos 4.4.4 and on the emulator 4.4.2 but Im trying to test it on emulator running 4.2.2 ,it is not working and the application stops responding .
After so many tests ,I found that the issue seems to be occurring from the jquery.mobile-1.4.5.min.css .
If you remove the reference the app will work .
I tried older versions of the jquery mobile css ,but the issue is still there and it is simply can be seen if you reference them in a fresh new webview android solution .Below are the repro steps :

-Open Xamarin .
-File-->New-->Solution-->Android WebView App
-Now click run to test the application .
-Stop debugging and click on the Views folder on the left pane ,you should be able to see the RazorView.cshtml
-Open the RazorView.cshtml file
-Check the head tag ,it only has reference to the css file
-Now add references to the jquery mobile and its css from the below link
http://blog.jquerymobile.com/2014/10/31/jquery-mobile-1-4-5-released/
from the 'Copy-and-Paste Snippet for CDN-hosted files'
-Now run the app on 4.2 or 4.3 device or emulator,you will see a blank page with the loading icon spinning .
-Run the same on 4.4 emulator and it will work and display the default html page .

I did lots of research but I couldn't find any reported issue which is very strange  .Maybe the css has features that is not compatible …
0
Problem:
I have made a sortable list in jquery using the sortable property applied to a div that contains a series of unordered lists. This is for a mobile web app, so think small screen and other limitations such as people scrolling the page by dragging in the middle of it rather than using scrollbars. The list works great and you can sort via drag and drop. However, when there are more list items on the screen than the available viewing area, the user needs to scroll the page by dragging anywhere on the screen. But the user can't do that because everywhere he drags, he moves an item instead of scrolling the page because the items have essentially taken up all of the viewing area that otherwise would be scrollable.

Desired Solution

I want to make the drag of a button, image, or just simply an area within  each sortable item to cause the item to move. Anywhere else on the item that is dragged will cause the page to scroll. I know how to make the item itself move when you drag on it, but I have no idea whether you can make the whole item move by dragging on only a specific part of it. The sortable method just doesn't seem to have any parameters or any means of doing this that I can tell and I can't find anywhere where anybody has done this and posted a sample.

Has anybody else run into the problem? If so, what was the best idea or workaround for this potentially unsolvable problem?
0
Hey,

I'm building Hybrid app application for Android, using Cordova & Ionic.

I have a webview inside my app, allowing users to search google from it.
I need to be able to communicate between the WebView and the Android program.

I'm adding a button to each page in the web view,
the button should know some details from my app,
and I want to know when the user clicked the button.

I tried looking online; but I couldn't find a decent explanation for this.
Already tried to save the info on local storage, but the local storage being deleted when moving between pages.

Appreciate any help on this!
0
I have a page here:

http://nofryzone.com/faqs/

that when displayed on a mobile device is screwed up.  The image of the girl should move to the top of the page and the faqs should resize and not overlap the bottom content.

http://mobiletest.me/iphone_5_emulator/#u=http://nofryzone.com/faqs/

the other pages on the site seem to work fine...just not this one.

Any help is appreciated.
0
This is killing me and I've been all over the web trying to find a solution.

When I click on an image, it won't open. Rather, it gives me a series of prompts: Open | Open in Background | Add to Reading List | Save Image | Copy

I'm actually using the image as a link, but I'm thinking that what I'm describing is what's preventing the link from being opened. Head out to http://www.brucegust.com/rodgers/mobile/about.php to see what I'm talking about. The scrolling menu at the top of the page is what I'm referring to.

I use this navbar for every mobile friendly site I've built and it's worked until recently. I have no idea why and I'm at a point where I've got to figure this out.

Does anyone have any ideas?
0
See title.

www.terrehauteoms.com

Navigation disappears on mobile devices.  Any ideas??
0
http://ikonltd.com/current/bs.html

The above code works seamlessly on desktop in all browsers (except safari windows). It also works perfectly on iPad (Chrome).

However, once I move to Safari on iPhone or iPad, it is very buggy.  Sometimes the correct image will come up in the modal and scrolling to previous and next works perfectly. Sometimes the wrong image pops up when I click on a thumb and it scrolls back to the first image. And, a lot of the time, the modal pops up without any image (see embedded) again on iPad Safari.

ipad-modal-missing-image.PNG
Here's the js I'm using:

<script src="http://ikonltd.com/js/jquery.mobile.custom.min.js"></script>

<script type="text/javascript">
    /* copy loaded thumbnails into carousel */
$('.row .thumbnail').click(function(e){
    e.preventDefault();
  
}).each(function(i) {
  if(this.complete) {
  	var item = $('<div class="item"></div>');
    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");
    
    item.attr("title",title);
  	$(itemDiv.html()).appendTo(item);
  	item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a 

Open in new window

0
Using Windows Mobile 6.5.  Looking for Messaging Apps.

Search results lead me to Apps, such as Line & What's APP.  

Reading the descriptions they all seem sketchy: though I searched for Windows Mobile "6" results I'm led to seem to be for Windows 8, or higher.  Or, they seem like sort of after-market / jury-rigged versions of software for Windows 6.  Or, just abandoned web pages - where the many thousands of downloads and "happy" installs listed all occurred years ago.

Really don't want to import anything that's either un-sanctioned by the App developer (thinking it may have malware) nor something that's too high for my phone, nor something that's been abandoned by the developer entirely, or disavowed.

Do any of you good experts out there know of messaging apps that are legit and that can be installed on Windows Mobile 6.x?  Lots of the leading apps, such as Line, WhatsApp et.al were out when WM 6.x was the latest version.

In particular, I'm looking for a safe place to download from.  Anywhere you have successfully downloaded from, installed and run.  Really want to find somebody who is using a 6 phone and using one of the Apps.

Thanks!

OT
0
We currently use MaaS360. We want to look at other options. How does Meraki compare to MaaS360? What are the price comparison? Are there other's out there that would fit our needs for a good deal and good support?

Here is what we are after

1. Cloud capabilities
2. VPN feature
3. Great alerting feature to notify admins when a device is OOC (Out-of-Compliance)
4. Active Sync
5. App White-listing feature that will actually prevent users from installing any app if the app they are trying to install is not white-listed in the policy.
6. WIFI configuration option
7.  And all relevant security features

We currently use MaaS360 from Fiberlink, but we are not pleased. We will only manage about 100 devices, and no more. The only device we are managing will be for iPads (Old and new). No phones, or Android devices.
0
Hi,

I had a PHP file in place that would re-route incoming traffic to a different website when people used a mobile browser

up until one of the more recent IOS updates it worked on iphones and ipads

currently it only works on android... can someone please help me correct or change the code so that it works with the newer IOS version

<?php
$tablet_browser = 0;
$mobile_browser = 0;
 
if (preg_match('/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $tablet_browser++;
}
 
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}
 
if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}
 
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    …
0
I have some experience with MySQL and mobile device programming using apache cordova and phone gap.  I am just starting to work with databases using a plug in and I want to convert a MySQL database to a format that the plugin can read.  It sounds like it needs a .db format or a .sqlite format, and I am looking for tools that will perform the conversion.  I have my MySQL database exported as a .sql and .csv file, but I don't know what the .db or .sqlite formats are or how to convert them.

Thanks.  It is going to take awhile to figure out how all the plugins work and how the devices work.
0
Hi EE,

We are are trying to setup a testing process internally for our website development team to review websites before they go live and we hand over to the client.

This list does not include SEO testing or reviews.

If you have any ideas, missed steps or other online providers than the ones listed below, that would be great.
Some steps are repeated.

Following are the steps in order.

1. Developer to review and test the entire site using their chosen tools. (comparing against Photoshop files provided)
2. Designer to manually view on desktop, mobile and tablet. (chrome browser, iphone 6, ipad air, galaxy tab) These are the physical devices we have in the office at the moment. (comparing against Photoshop files provided)
3. We carry out Mobile responsive testing here http://quirktools.com/screenfly and http://www.responsinator.com/
4. We add content to the site.
5. Designer to manually view on desktop, mobile and tablet. (chrome browser, iphone 6, ipad air, galaxy tab) These are the physical devices we have in the office at the moment. (comparing against Photoshop files provided)
6. We carry out Mobile responsive testing here http://quirktools.com/screenfly and http://www.responsinator.com/
7. Page speed and performance testing here https://developers.google.com/speed/pagespeed/insights
8. We carry out a mobile friendly test here https://www.google.com/webmasters/tools/mobile-friendly/
9. Check markup validity with http://validator.w3.org/
10. Check css…
0
Curiously, there is sparse information on this subject on the Web and none (at least, that I can find) in the jQuery Mobile documentation or the four books I have specifically on jQuery Mobile. Curious, because it is a very important question where good search engine page ranking is concerned.

After the first page is loaded, jQuery Mobile will grab the unique title from the head section of any subsequent page, when that page is a separate URL entity. However, everything else in that head section is ignored. You can programmatically change the meta description in the DOM, but I don't think a Search Engine bot is going to see it at that point.

This is an important concern, as that description is what search engines show to attract people to your site. I have spent hours searching for reliable information.  A couple of people have mentioned that the problem is non-existent because the search engine bot is going to read all the text on the page and recognize the header information on that particular page. I am not so certain that is correct, as I believe (correct me if I am wrong) the bot is going to see what the page displays  and what the page is going to display is the head section of the first file opened on the site - NOT that of the current file.

This is pretty important to me. I have a client loosing faith in me because his SEO people don't understand JQM at all and are at odds with me on this mobile version of the site.
0
Folks,

I have a one web site that has no backend ( IIS and resource on the same server) I would like to know how can I deliver the content using the citrix, We only have VDI option in our network,

Can you tell me what my options are? thanks
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
>