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

We have a new mobile product in beta test with about 50 or 60 Users.  This is our first foray into mobile software so we are learning as we are going.
The User logs on via the browser on their phone or PC, but most use their phone.
One User (and only one User) has complained that she cannot log on.
She enters her e-mail and password correctly, but when she selects Submit to log on her page simply refreshes and presents her with a new blank log on page (no error codes indicating incorrect password/email entry or anything else).
We have confirmed that her account and log on details are correct and have successfully logged on as her on several different devices.
It is obviously an issue with her phone (Apple iPhone 5 / Safari browser) but we are at a loss as to what advice to give her.  We are setting up a log file so that we can at least check if she is connecting with us.
Any ideas as to how we might help her would be most welcome, and what we might do to prevent this in the future.
0
This is my first Bootstrap website, and everything works the way I need it to except the printed version. I'm in the process of making the website responsive, but just can't find anything online to print it properly.

The CSS file is interesting to say the least. The order is strange but important (for some unknown reason).

If the CSS is included inside the HTML file, the print preview displays the content larger (around 3 pages), the .contact-links and .contact-links2 classes showcases the text properly, and if "Background graphics" is checked in the print options panel, .jumbotron-special class displays the correct grey backdrop, but isn't vertically centered, and the <strong> text is in black where it should all be white.

If the CSS is linked to the HTML, the page fits mostly on one page with the footer hanging on the second page. The .contact-links and .contact-links2 text isn't formatted, the .jumbotron-special class doesn't display the grey backdrop at all, and all the text is black and larger. See css-in-html.jpg.

I suspect that the printout is for some reason displaying at a smaller, narrower screen, which isn't currently fixed in respect to the CSS media queries. I'd like if the links didn't show the URL link and the logos/icons weren't skewed.
See css-linked-to-html.jpg.

I need it to print out exactly like it appears online at full - 3/4 width.

You can download the source files here: https://drive.google.com/open?id=0B7SM5Lky-I-WakhyWjFyUkdab1k
And for Mac…
0
Hi,

I have an existing website that was built in Dreamweaver using a template. I now need to make the site mobile friendly. I've began researching today, but all it's really done is confuse me. From what I understand if I want to make it responsive I would have to rebuild the entire site. Is there an easier way to create a mobile site and place it into the root folder and just check for a mobile device? I've seen people reference Bootstrap and Muse. Is that something I could use to create a mobile site? Any help or suggestions would be greatly appreciated.
0
I am interested in developing a mobile app to track GPS devices, and am curious which among the mobile-friendly mapping sources would best meet my needs.  

I'm looking for either a free service, or a low-cost one, which is scalable, lightweight and able to render points quickly.  

My source data will have 10-20 thousand records (and hopefully more moving forward), and approximately 20 fields of data, although my API might not expose all records and all fields depending on the call.  

Note that I'm interested in using a framework such as PhoneGap or Ionic to develop in one language and compiled into native Android or iOS code.  If there are considerations for how the different free or low-cost mobile-friendly mapping sources would play with those frameworks (or the code they produce), thoughts on that would be appreciated.
0
I have seen that many companies have a mobile version of their website. Often it is m.mysite.com instead of www.mysite.com

When you visit their site, it redirects you to the mobile site when you are on your smartphone.

How is this accomplished?
0
I have a 3rd party developer, developing the customer (front end) mobile application and the language of the contract doesn't specify Unit Testing. The only clause mentions delivering the code according to industry standards. I am late into the picture and cannot redact the contract. As it stands, do you know if anyone's definition of Industry Standards includes the creation/execution of Unit Testing?

Thank you,
JohnD
0
Hi

I want to build a mobile app in Visual Studio 2015 with Xamarin according to the words at the following link:

https://www.visualstudio.com/en-us/features/xamarin-vs.aspx

I am downloading Visual Studio Community 2015. Do I need to download Xamarin separately. If so where
would I find the correct version
0
On a site I'm helping a friend fix http://emotionalfuel.com/ most of the site looks good in mobile view except the header. I've put

@media screen and (max-width: 1002px) and (min-width: 768px) {
#logo {
      max-width: 597px;
      overflow: hidden;
}
#topform {
      position: relative;
}
in CSS but logo is still way too wide and topform is still plastered over header.

How do I fix this?
0
sometimes my samsung galaxy 3 powers off but has battery

I want an alarm app that will still wake me

Please do not suggest an alarm app
0
I have a problem with the scrolling of content when my website is viewed on an iphone or ipad.

Infact, if you try this website on an iphone (not by shrinking the browser window) http://www.piedicosta.com/jnuovo/it you see that the content do not scroll fluently.

It seems this is a conflict between the responsive navigation and the flexslider animation for background images because if I cancel the div that contain the flexslider image, everything seems to be fine.

Do you have an idea about how to solve this issue?

I thank you very much in advance for your kind help.

Filippo
0
I have a proyect where i need to do a photo gallery, actually I use the masonry plugin from this page:

http://masonry.desandro.com/

and it is working right now, but at the bottom of the gallery as you see in the image: image1.jpg
alignmentimage1.jpgthe images are not alignament.

Looking for an alternative I found the webpage from michigan university (http://umich.edu/), and if you see at the bottom of the page a gallery that looks made it with masonry(image2.jpg)image2.jpg
Did somebody know how to alignment at the bottom of the gallery the images like the webpage from michigan university???

Best regards
0
I'm trying to get a look at a good mobile or responsive cart. When I go to these websites on mobile emulators, the page is blank. I'm curious, what do you see on a real smartphone?

http://www.jcpenney.com/

http://kohls.com

http://overstock.com

Thanks, this is really just curiosity, but I'll give the points to the first person who answers. Screenshots would be nice.  If person one answers without screenshots and person two answers with screenshots, I'll split the points.
0
I'm having an issue with, what I think, is an easy fix issue, but it's got me stuck.  I'm just trying to call in some json content via AJAX into a brand new Cordova iOS build.

My process:
- Install Node JS
- via CLI -> cordova create abc
- via CLI -> cd abc
- via CLI -> cordova platform add ios

Add/change some code in the www/index.html file

<!DOCTYPE html>
 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>

        <script src="js/jquery.min.js"></script>

        <script>
        $(function(){
          $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://domainname.com/get.php',
            success: function (data) {
              alert("success");
            },
            error: function () {
              alert("error");
            }
          });
        });
        </script>

    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" 

Open in new window

0
Hi,

How to turn off samsung android phone text message vibrate sound. Whenever incoming message my phone vibrates with beep kind of sound. I want to silence it. How to do it. Please advise
0
Our iPhone's safari web browser seems to halt loading even the simplest page.  Everytime this happens, we have to exit the Safari, delete from memory (triple-HOME and swipe up) and open it again so it can load the page (and this happens everyday).

How can we solve this problem?

Note: we have the latest ISO9 but this problem is happening since previous IOS versions.
1
Are metas such as description redundant?

Additionally are there any good text books that deal with SEO?
0
In website PC mode rendering these lines are good but not in mobile ...can you help me tweak these buttons to stack up on one another when on mobile mode.

PC-MODE
pc-mode.JPG
MOBILE-MODE
mobile-mode.JPG
Below is the code I use it to render these button controls




<div class="col-lg-6 col-md-6 col-sm-6 " style="text-align:right ">
 <input class="btn-vmsPrimary btn-sm" type="button" value="Save Bid" id="BidSave" onclick="saveBidItems()" tabindex="2" />
 <input id="field_terms" type="checkbox" checked="checked" nvalue="field_terms" required name="terms" title="Accept terms and conditions" hidden>
 <label id="lblTerms" for="field_terms" value="lblTerms" hidden style="color:black">I accept the <u>Terms and Conditions</u></label>
<input class="btn-vmsPrimary btn-sm" type="button" onclick="submitBid()" value="Submit Bid" id="BidSubmit" hidden tabindex="3" />
                </div><br />

Open in new window



I am using these libraries
<link href="~/Scripts/jqGrid/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link href="~/Scripts/jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jqGrid4.8.2/js/jquery.jqGrid.min.js"></script>
<link href="~/Scripts/jqGrid/themes/jquery-ui.css" rel="stylesheet" />
0
We are looking for a tool that we can use to create a simple site, not too complex, but somewhat not-time-consuming; that would display areas such as About, Product, Contact, etc.

Please advice.
0
Hi experts,

I was looking for some recommendations, both hardware and software, for how I can filter web traffic after it has traversed an IPSec tunnel.  The configuration is like so:

-Mobile devices are sent to users which have their SIM cards bound to traffic that is only allowed to hit our network via IPSEC tunnel that exists between our data center and our mobile network provider (AT&T)
-once the traffic traverses the tunnel, due to some application dependencies, we then allow that traffic to not only get to our web servers, but also out to the public internet
-we have found that the mobile users are now consuming a high volume of data, which consequently is getting billed to our account, because they have discovered they can get to anywhere on the internet...not just our application

Is there a way to filter web traffic after it gets out of the tunnel?  We used to only allow the traffic to our web servers, but due to a dependency on some Google and Microsoft public APIs, setting an ACL that only allows traffic to their IPs and denies all others seems to be the resolution...but we can't be certain of which IPs blocks to allow.

Any suggestions are appreciated.
0
Hi,
I am trying to use a .htaccess redirect to redirect mobile phone users to a mobile site. The issue I am having is the redirect is working but it's applying it to all visits. Including PC users. Am I right to user the HTTP_USER_AGENT?  I only want mobile users to be redirected. Below is a copy of the contents of my .htaccess  can anyone see why it would redirect all users?

Thanks in advance

Matt

RewriteEngine on
RewriteCond %{HTTP_HOST} ^.*$
RewriteRule ^www\.mysite\.com\.au\/Home\.html$ "http\:\/\/www\.mysite\.com\.au\/My_site\/Home\.html" [R=301,L]

RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]
RewriteRule ^$ http://mymobilesite.com [R,L]

RewriteCond %{HTTP_HOST} ^mysite\.com\.au$ [OR]
RewriteCond %{HTTP_HOST} ^www\.mysite\.com\.au$
RewriteRule ^sa$ "http\:\/\/www\.mysite\.com\.au\/My_site\/SA\.html" [R=301,L]

RewriteCond %{HTTP_HOST} ^mysite\.com\.au$ [OR]
RewriteCond %{HTTP_HOST} ^www\.mysite\.com\.au$
RewriteRule ^SA$ "http\:\/\/www\.mysite\.com\.au\/My_site\/SA\.html" [R=301,L]

RewriteCond %{HTTP_HOST} ^mysite\.com\.au$ [OR]
RewriteCond %{HTTP_HOST} ^www\.mysite\.com\.au$
RewriteRule ^Home\.html\/?(.*)$ "http\:\/\/www\.mysite\.com\.au\/My_site\/Home\.html$1" [R=301,L]

RewriteCond %{HTTP_HOST} 

Open in new window

0
Hi Experts:

I wrote this code to try to make a canvas in the middle of web browser:
<!DOCTYPE html>
<html style="height: 99%; width: 99%; padding: 0; margin:0">
<head>
    <title>abc</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.5.css">
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.5.css">

    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; padding: 0; border: 5px blue solid;">
        <canvas style="background-color: red; width: 50%; height: 50%; position: relative; top: 25%; left: 25%"></canvas>
</body>
</html>

Open in new window


The vertical positioning of the canvas does not work, such that it still locates at the top of the web page.
However, if I remove the reference to jQuery mobile:
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

Open in new window

then the canvas will be in the middle of the web page.

Seems jQuery mobile has conflict with the vertical positioning. Is this a bug? or jQuery mobile is designed to do that? How can I do vertical positioning when using jQuery mobile?

Thank you!
0
This page is fine on all devices except high res display desktop.

The left column form fields overruns into the right column (shaded). See screen shot and url

https://www.housecarers.com/test3/member_login4.cfm

Not sure what to do to fix this. Happens on other pages too.

Below is example problem  page with CSS
https://www.housecarers.com/test3/member_login4.cfm

Open in new window


Thanks for your suggestions.
Screenshot-2015-09-18-11.49.16.png
0
0
down vote
favorite
      

i have an issue in Auto detect mobile browser , when from my phone the posts and subjects i have sent via my website to facebook after you you click on the post then it will not enter to the fully of the article in mobile version. for example this link http://tendrustikurd.net/Topic_80_11

if i open it using Computer then its fine also in mobile version its fine too http://tendrustikurd.net/Mobile/Topic_80_11 , but if i send this link to facebook and then i open it via mobile phone then it will not show the post but only show the main page of the website i mean it will redirect you to the home page .. that is big issue for me please i need solution for this...

i used this code:
protected void Page_Load(object sender, EventArgs e)
{
    if (isMobileBrowser() == true)
    {
        Response.Redirect("~/Mobile/");
    }
 }


public static bool isMobileBrowser()
{

    HttpContext context = HttpContext.Current;


    if (context.Request.Browser.IsMobileDevice)
    {
        return true;
    }
    //THEN TRY CHECKING FOR THE HTTP_X_WAP_PROFILE HEADER
    if (context.Request.ServerVariables["HTTP_X_WAP_PROFILE"] != null)
    {
        return true;
    }
    //THEN TRY CHECKING THAT HTTP_ACCEPT EXISTS AND CONTAINS WAP
    if (context.Request.ServerVariables["HTTP_ACCEPT"] != null &&
        context.Request.ServerVariables["HTTP_ACCEPT"].ToLower().Contains("wap"))
    {
        return true;
    }
    //AND FINALLY CHECK…
0
On my iPhone, what are my options to unzip a zip file?

On my Android?

Thanks.
0
We are creating a web based application ...to be accessible from any device Laptops, tablets and mobiles

I want an accurate list of Browsers from an expert to consider while developing and testing...

Keep in mind we target all devices...

Thanks So much
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
>