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,

I am creating a web application, but the user's may access the web application via Desktop as well as mobile.

I am using Bootstrap to design the interface.

My question how shall I differentiate the code for mobile and desktop. I know I can use the grid system of Bootstrap, but the issue comes up many things for example lists i.e. for desktop I am using inline list but when I open on mobile that inline gets distorted. I want to achieve is that when I access the web application in desktop  it should show an inline list but when I open on mobile it should open on mobile it show as unordered list.

Kindly let me know if any more information is required.

Thanks in advance.
0
Hi Experts,

I am planning to make a javascript web application that supports mobile device (especially iOS). For now I need to implement some common UI, such as buttons, menus, popup messages.
 I did some search and found both bootstrap and jQuery mobile can do mobile UI. I am not sure what else I will need when moving forward, and need to decide which one to use.
What are their Pros and Cons comparing to each other?
Thank you!
0
Hello,

We want to hide a left-hand menu (set of links in a div) when the screen shrinks beyond a certain size (down to mobile). How do I code this in?

We're in wordpress, saltydogfarms1.com

Thank you,

Bob
0
Can someone comment on this topic?  What is the best way to get a website to render well on mobile devices as well as computers and also have a google "mobile-friendly" rating?  Also, is there value in having a "mobile-friendly" rating from google (SEO, etc)?

Thanks~
0
We had a Certificate Server TMG, which was causing lots of issues, so its been taken down and replaced with pfSense, TMG server was also responsible for authenticating Mobile phone, for that Sophos Mobile Control application was used.

Now as TMG is out of the picture, how can we configure pfSense to pass the authentication process through Sophos Mobile Control?

Thanks.
0
Hi,

I want to put alarm
everyday morning 6 A.M with song1.mp3
afternoon 12:01 P.M with song2.mp3
morning 6 P.M with song3.mp3
morning 10 P.M with song4.mp3

How can do it. please advise
0
I'm upgrading a website from Joomla 2.x to Joomla 3.x. One of the goals is to make the site more mobile friendly. I'm using a template called Lifestyle2 from Joomla Bamboo. Have made some adjustments to the fonts etc. on the template and it mostly works well. What doesn't work well is the menu on small devices. The menu collapses as it should for "mid size" screens, but when the screen size is reduced more, like when accessing from a mobile phone or small tablet, the menu gets unreadable. Happens when the menu turns into some lines and the word "Meny".

Question is: What can I do to make the menus work on small devices?

Site is at:  www.reverse-therapy.no

-Olaf-
0
Hi,

My samsung SGH-T599N phone memory is too less to add additional apps apart from facebook , twiteer, watsapp.

http://www.gsmarena.com/samsung_galaxy_exhibit_t599-5468.php


i wonder if i take
Samsung Galaxy Core Prime
https://www.metropcs.com/phones/details/samsung-galaxy-core-prime/610214641274.html?cid=ps|GOOGLE|CAPT_PS_B_Samsung+Galaxy+Core+Prime-(E)|Samsung+Galaxy+Core+Prime|samsung+core+prime+metropcs&002=2215272&004=9985226261&005=115622628083&006=45415316861&007=Search&008=&025=c&026=?p&&&gclid=Cj0KEQiAqK-zBRC2zaXc8MOiwfIBEiQAXPHrXsLB31MWB2XKl_Eaa12TIe8Yy2MCnRpB4jlbIToh8eoaAt7P8P8HAQ

will it give additional memory to download more apps and also to insert 128 gb mini micro sd card instead of 2gb mini micro sd card?


are there are any other smart phones which are cheap and best with vvery good specification around 100 $ which i can switch to any carrier like lyca, metro pcs etc non contractr carriers
what is difference between 4gb ROM and 8 GB ROM and Android OS, v4.1.2 (Jelly Bean)

please advise
0
Hi Experts,

I have a project where I need to make a website render on mobile devices, and I wondering what exactly that mean?

Previously I have used the following just to make the website fit, but I know some websites are structured differently, like EE.

<meta name="viewport" content="width=1525" />

Open in new window


This just reduced the website. If I need to restructure it, how would I go about it? It is very a simple site created by WP with 2 columns, and it is FAQ site, so mostly content.

Any help will be greatly appreciated.
0
If you have evaluated and selected  any type of rapid prototyping for web and mobile apps, I would like to know your experience.    Which applications did you evaluate? select? pros/cons?

http://www.justinmind.com/
http://www.invisionapp.com/
http://www.axure.com/

? something else?

I have been using https://www.omnigroup.com/omnigraffle the last 6 years or so.  It's good for quick stuff but looking for more power and ability to collaborate.
1
hi,

I am having trouble to design form using bootstrap grids(rows and columns).Please find the attached screen shot which needs to be designed using bootstrap grid system.
employeeform.png
0
Hi,

A website quiz is being developed here

After a user enters their profile details on the splash screen (no email required), they are taken to the quiz. The quiz question appears at the top of the screen. It appears to work fine on PC and Android, but for iOS devices the question does not appear at the top. Troubleshooting indicates that iOS users must tap the top bar for the question to appear.

Is there an easy fix to ensure that the question shows up on iOS devices without the user having to tap the top bar?

Thanks.
0
I need to create this webpage into a mobile view.  Its pretty much just text and a form at the bottom all in html.  Any ideas how?

<!doctype html>

<html lang="en">
<head>
    <title>Company Name - Public Wireless Access Agreement</title>
</head>
<body>
<p>You are about to access the Internet through a wireless Internet access node (the "Service") operated by Company Name, Inc.  The purpose of the Service is to provide free public wireless Internet access to members and visitors of Company Name.  You may use the Service only if you agree to the following terms of service each time you access the Service.</p>
<center>Terms of Service (TOS)</center><br>
<br>
<b>Access to WiFi</b><br>
The WiFi service is a free public service provided by Company Name, Inc. Your access to the Service is completely at the discretion of Company Name, Inc., and your access to the Service may be blocked, suspended, or terminated at any time for any reason including, but not limited to, violation of this Agreement, actions that may lead to liability for Company Name, Inc., disruption of access to other Users or networks, or violation of applicable laws or regulations. Company Name, Inc. may revise the TOS at any time. You must accept this Agreement each time you use the Service and it is your responsibility to review it for any changes each time.  This is an open wireless network.  No network communication is 100% secure.<br>
Please remember: NO network communication should be considered 

Open in new window

0
Hi Experts,

I am going to develop WCF Soap based services (VS 2013) which will return XML by executing Sql store proc. I want to know can mobile/PDA
devicedes consume this XML or not ?
0
I have small retail company and doing most of the marking stuff thro. hand leaf lets  and expenses are very high . is there any apps are developed and ready to customized to used like web site template form

please share your thoughts on the above for me to get the right solution .  I did not go for web site  due to the above apps market getting popular in the market . do we need to have the web site and app both  ? or only app is cover my requirement
0
I am just learning Bootstrap.

Please look at http://rkassoc.org/Lakos_config/index.htm

At wide screen widths, this is perfect. However, as I narrow the width, there are 3 issues:

(1) The "xs" classes kick in at much greater than 768.

(2) The menu items (top right), scrunch up to & overlay the logo image; I would rather they slip underneath the logo. I had that working once, but I lost it.

(3) As the window becomes narrower, the item "register" starts to disappear.

Source attached.

How can I fix these things? Is there a way to use a smaller version of the logo if the width is less than xxx?

Thanks
index.htm
0
I'm struggling trying to add two separate off-canvas menu bars - one from the left and one from the right - using Twitter Bootstrap 3.0.  3.0 doesn't seem to offer off-canvas menus straight out of the box, although using Jasny Bootstrap does.  But I can't figure out how to add two separate menu bars, and haven't been able to find examples of this being implemented via Bootstrap.  

UIKit (http://getuikit.com/docs/offcanvas.html) and Foundation (see the "Advanced" section on this page:  http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html) do out of the box.  How do I do this in Bootstrap?  

Jasny Bootstrap's off-canvas functionality:  http://www.jasny.net/bootstrap/javascript/#offcanvas-usage


Thanks in advance.
0
Hi all.
I'm learning Java for Android development using this book: http://www.apress.com/9781430266013
Though the book be recent, I get into some issue following it.
Now the problem is that building app Reminders something has changed and I'm not able to understand what exactly it be.
If I set the AppTheme to NoActionBar the app is rendered but  I don't have the app bar. If I set an app bar, whatever it be, I get rendering errors like this one:

The following classes could not be instantiated:
- android.support.design.widget.CoordinatorLayout (Open Class, Show Exception, Clear Cache)
- android.support.design.widget.AppBarLayout (Open Class, Show Exception, Clear Cache)
 Tip: Use View.isInEditMode() in your custom views to skip code or show sample data when shown in the IDE  Exception Details java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.   at android.support.design.widget.ThemeUtils.checkAppCompatTheme(ThemeUtils.java:34)   at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:178)   at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:172)   at java.lang.reflect.Constructor.newInstance(Constructor.java:422)   at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:704)   at android.view.LayoutInflater.inflate(LayoutInflater.java:492)   at android.view.LayoutInflater.inflate(LayoutInflater.java:394) Copy stack to clipboard
0
Please go to http://dev2.magickitchen.com/menu/main_courses.html  and add something to the cart.

If I look at it on a large screen, it looks good. If I resize to a medium screen, also looks good. But on a mobile emulator, it shows a blank screen, only the background image.

I'm hoping it's something simple that a smart, experienced person can find. Thanks for your help!
0
Hello Guys-

Was just wondering if anyone had recommendations for a web filtering solution / appliance for medium to Large business, e.g. 200- 500 users. We need control at the AD group level, e.g. management have access to everything, user1 and user2 have access to most things, and thanks

alex
0
Ok here is my dilemma...

I need to replace an ancient application that gets preliminary demographic data from clients.

The users have a mix of Windows 8.1 tablets, laptops, and a few desktops.  I am not sure of the OS for the laptops and desktops but I think they are Windows 7 at a minimum.

The app will need to create a CSV file for upload.  In the future it will upload the data in a more modern way, probably to a  web service that consumes XML or JSON.  

The locations that these tablets/laptops are used have unreliable wireless (hence the occasional desktop).  Connectivity has been ameliorated, but we have to assume that its is not fail proof.

We are a .NET shop but open to using open source options.  I have had a couple of ideas on how to build this app...

An ASP.NET MVC web app using HTML5, CSS3, JavaScript, and Angular.  This would be a nice mix of new technologies but the main problem here is how to handle the possibility of being offline.  I have seen some approaches as to how to deal with losing connectivity while you are gathering data or before you have a chance to upload it (or create the CSV file in our case), but nothing with respect to what to do if you start a new client workup with no connectivity...
A Universal App for Windows 10.  This would allow me to create one clean application that uses HTML5, CSS3 & and JavaScript...This seems (not completely sure) to deal with the problem of connectivity better, but
0
My jquery mobile checkbox:

<input type="checkbox" id="chkboxRememberMe" /><label for="chkboxRememberMe">Keep me logged in</label>

Open in new window


is disabled by default.  That is, when it's rendered, it already contains the class "ui-checkbox-off":

<div class="RememberMe">
      <div class="ui-checkbox">
	<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off" for="chkboxRememberMe">Keep me logged in</label>
	<input id="chkboxRememberMe" type="checkbox">
	</div>
</div>

Open in new window


Why is this?  It's unusable.  How do I make it enabled by default?
0
Back in 2004, Facebook front-end was written in PHP. What are the latest web technologies? If I have to develop something like facebook "today", what technologies are suggested? It should work on all devices which exist today. It should be scalable and fast. and should be able to handle the media files that facebook like service handles on daily basis. Thanks.
0
Needing to find a mobile notifications app as a tool to bring attention to various news worthy and news alerts.  The department director’s vision is to draw attention to information we web publish.  The end user would have ability to configure their app for only items of their personal interest.  

I see needing some backend push notification script that would hand out snippets or tweets with a link back the the website for more detail if requested by end user.  The data format would obviously need to be designed for mobile screen viewing and include text, audio, and video options.   I think ideally, at the same time these headlines and short articles are published, a script runs that would do the push notification.

Hopefully already something out there?    Maybe WhatsAPP kind of thing?   The website is done with WordPress.
1
We have a site at http://www.theherbsplace.com and we need to comply with PageSpeed's flagging our links as being too small on a mobile device.

https://gyazo.com/4eb82b8e88d112868a37537a9cef1d80

This is the section on the site that requires the changes
https://gyazo.com/6d252536908390ca0fe994cad33353f2 it can be found at the far left of any page on our site.

@media screen and (max-width: 768px) {
#header_user_info a, ul.tree.dynamized li a, #block_footer_html.block div li a, div.block_content ul#myAccountNav.mobiFooterNav.open li a, ul#cmsFooterNav.mobiFooterNav.open li a, li#shopping_cart a, ul#responsiveAccordion li a, li span.grower.OPEN a, li span.grower.OPEN ul li a.selected {
			 padding:10px;
			 font-size:25px;
			 line-height:48px;
		 }
}

Open in new window

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
>