Adapting website for mobile

My website,  www.mauitradewinds.com , works well on desktops and tablets, but more of our visitors are using iPhones, and the bounce rate is ~60%, compared with ~33% average for all devices.  If I am interpreting this correctly, it suggests that iPhone visitors aren't having an experience which is comparable to iPad or desktop visitors.  I attached a screen shot of Google Analytics Mobile Devices statistics.

I'm overwhelmed with the variety of templates and recommended strategies for adapting to mobile, and could use some advice.  However, I have one requirement: I'm interested in preserving the large slide show which appears on top of the landing page.  I know it doesn't conform to "best practices" for web design or SEO, but it quickly attracts visitors who will enjoy what we offer, and they consistently applaud the presentation.

In general, the site has a fluid layout, including automatic resizing of slide shows and many static images.  But the content is cluttered for small devices, and there may be other issues of which I'm not even aware.  Thanks in advance for your input.

Mobile stats
LVL 1
ddantesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I use bootstrap http://getbootstrap.com/css/ or foundation http://foundation.zurb.com/ as my base for making a responsive site.  Essentially, both of these are using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.

Each media query is based on a different size screen where you typically have 2 to 4 size variations.  You might  have  4 columns in a div for desktop, 3 columns for a tab and stacked for mobile.

You can do the media queries by hand without bootstrap et el, but I find it makes it easier and I have done it enough the grid has become second nature.  

Example below creates 2 columns for desktop and stacked for mobile using bootsrtrap.
<div class="row">
<div col-xs-12 col-lg-6>stuff</div>
<div col-xs-12 col-lg-6>stuff</div>
</div>

Open in new window

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Fyi, the average for a handful of my sites shows 40% to 50% mobile and tab on google analytics and of those, ios is 60%+ as well.
0
4umCommented:
Please choose a Responsive designed theme .
Here , You can buy one. themify
0
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
A warning on themes, some are created by hand and only work for the specific pages they created.  There are responsive themes that use a popular grid like bootstrap/foundation.  I think if you find the themes built with something common, you will have an easier time in the long run.
0
4umCommented:
please visit www.4um.in  ..then You can see responsive designing.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
4um, that theme is riddled with errors.  

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.4um.in%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

This is the kind of thing you need to watch out for on some of these things.
0
ddantesAuthor Commented:
padas: Thank you for your comments.  I'm using media query on most of my pages, adapting certain features for mobile visitors.  Without that, the situation would have been worse.  At least everything works on iPhone -- it's just too cluttered.   Is there a way I can avoid re-designing the entire site structure, and still have an iPhone-friendly version?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have to run out now.  But it may just be easier to start with bootstrap in my opinion and for the long run.  Otherwise, it is just a matter of putting the right classes and id's in the proper media queries.   The answer is you can use what you  have.  Just need to add more items to your @media
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ddantesAuthor Commented:
Thank you.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Glad that worked!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iPhone

From novice to tech pro — start learning today.