nsForum logo

Welcome Guest ( Log In )

 
Reply to this topicStart new topic
> Responsive Redesign
PowderDay
post Sep 23 2015, 12:11 PM
Post #1





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



After an overnight pop in mobile (and total) traffic on July 16th a site redesign is on the table. For those that missed my earlier comment on another thread:

June 17% traffic and 7% sales were mobile ex tablet.
July 16-Aug 4 51% traffic and 4% sales were mobile ex tablet.
In August I worked on redesigning our companies’ main site (NS Hosted – Non-ecommerce site). We launched it in the end of August.

I am currently working on redesigning the ecommerce site to be fully responsive. A daunting task – one that is not a for sure success given the roadblocks the NS Cart has in place. We renewed our ecommerce package for a year last month, so hopefully we can get the redesign working acceptably.

Working on a Bootstrap framework.

Helpful site for research and problem solving thus far include but are not limited to:
http://www.w3schools.com/bootstrap/default.asp

Various Stack overflow google referrals to questions about specific code
http://stackoverflow.com/

Plus a number of others – google your code questions and see where it takes you.

So far we have:
Cloned the current design
Disabled the default stylesheet
Removed modules from columns
Created a header nav with the look and feel we want (not all the functionality yet)
Created a footer nav with the look and feel we want
Recoded some of the custom pages – some are live and some are waiting till the design is live to upload.
Working on a new css sheet – started with the old ones and have made some changes.
Looking good so far!

Problem areas.

-Dynamic Category drop down only sort of works.

Snippet from the header
CODE
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="color: #ffffff";>Shop By Vehicle <span class="caret"></span></a>
<ul class="dropdown-menu" style="width: 250px; height: 450px; overflow: auto;" >
<li><ns:categories depth="5" expanded="true" /></li>
</ul>
</li>



All of the categories display in one long scrollable drop down. Ideally I want just the top level categories. When one is pressed the next level of the pressed category appears. This functionality would be similar to both the standard and mobile enabled version of the site. However I cannot figure out how this is accomplished from inspecting the element on Chrome or Firefox….

-Category layout.

Created a new category layout and applied it to a single category for testing. The cart seems to display the product list jammed on the left side of the screen and I have not found a want to have the items float so that when the screen is narrow the items align vertically vs horizontally.

The NS scripts are in a responsive DIV but do not respond.

-Biggest issue is the cart and checkout pages – the most import part I suppose…

I actually think the mobile enabled checkout is passable in terms of what is displayed and how it functions. Just can’t get close to replicating it.

-The cart seems to add tables that I can’t figure out how to float to align the cells vertically vs horizontally.

-can’t seem make the product thumbnail responsive so I disabled showing it.

- bootstrap .label styles white text. The background is white, so the text labels are not visible for the text boxes that need to be filled out. I have tried several css codes to overwrite it to 000 but seems no matter what I try bootstrap wins…

There are some other issues, and sure more will pop up. Time for a lunch break!
Go to the top of the page
 
+Quote Post
PowderDay
post Sep 24 2015, 01:18 PM
Post #2





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



QUOTE (PowderDay @ Sep 23 2015, 12:11 PM) *
- bootstrap .label styles white text. The background is white, so the text labels are not visible for the text boxes that need to be filled out. I have tried several css codes to overwrite it to 000 but seems no matter what I try bootstrap wins…

There are some other issues, and sure more will pop up. Time for a lunch break!


Fixes this by creating a custom bootstrap - omitting "labels" -- http://getbootstrap.com/customize/ --, downloading it and then uploading it to a folder within the correct theme / css folder. then changed the css reference from the cdn link to a local link to the correct file. Labels the cart generate now show (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif)

Small progress is progress (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif)
Go to the top of the page
 
+Quote Post
PowderDay
post Sep 29 2015, 07:22 AM
Post #3





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



Was able for force the cart, checkout page 1-3 into a 320px wide format with much coercion. Checkout step 4 -order confirmation remains stubbornly stuck at about 360px wide. moving on for now. Checkout is close. it is not responsive but it does work on a typical phone!

Category layout was convinced it should be responsive and is looking good!

getting closer. persistence.

Has anybody successfully made a responsive site on the platform? So for I have only seen a single site that is partially responsive...
Go to the top of the page
 
+Quote Post
robinski21
post Sep 29 2015, 10:31 AM
Post #4





Group: Verified NS Member
Posts: 430
Joined: 10-August 08
Member No.: 1,857



It can be done. I made ours (http://www.billythetree.com) responsive, with help from NetSol. / Solid Cactus.

I had them do the basic design, and I then proceeded to customize the heck out of it.

Can't tell you how they did the framework, because I have no idea, but you're welcome to look at the code on our site; hopefully, it will help you out.

Cheers,

Robin
Go to the top of the page
 
+Quote Post
PowderDay
post Oct 1 2015, 08:07 AM
Post #5





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



QUOTE (robinski21 @ Sep 29 2015, 10:31 AM) *
It can be done. I made ours (http://www.billythetree.com) responsive, with help from NetSol. / Solid Cactus.

I had them do the basic design, and I then proceeded to customize the heck out of it.

Can't tell you how they did the framework, because I have no idea, but you're welcome to look at the code on our site; hopefully, it will help you out.

Cheers,

Robin



Thanks yes yours is the only live site i have ever seen on the NS platform that does some responding. Some nice features too:)

Made more progress in the last few days. Was able to create a new product layout and was able to get prettyPhoto to behave nice on a phone sized device. This required editing the js file that drives it.

re-coded a bunch of custom pages, about 20 more custom pages to go.

working on new index page. some trial and error but getting closer to the look we are going for.

persistence (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif)
flat out, late nights.

Septembers Google Analytics:
Site traffic
49% mobile
9% tablet
42% desktop

not sure about revenue breakout as google significantly under-reports revenue on the site... Suffice it to say the conversion rate is AWFUL on both mobile and tablet. A situation we hope the new site rectifies.
Go to the top of the page
 
+Quote Post
PowderDay
post Oct 1 2015, 02:44 PM
Post #6





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



Adapted the code here: http://forums.networksolutions.com/index.p...ost&p=16473

to make a modal (pop up) window for search with an icon in the top row of our new header.

using some nice icons from : https://fortawesome.github.io/Font-Awesome/icons/ and styling them to match our new color scheme.
Go to the top of the page
 
+Quote Post
ecomIanS
post Oct 2 2015, 11:31 PM
Post #7





Group: Administrators
Posts: 967
Joined: 14-January 13
From: Jacksonville, FL
Member No.: 19,888



QUOTE (PowderDay @ Sep 29 2015, 08:22 AM) *
Has anybody successfully made a responsive site on the platform? So for I have only seen a single site that is partially responsive...


Your skepticism here is kind of ironic to me, just because I literally build these types of responsive store designs all day long here at Web (among my other duties of course (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif) ).

Trust me, its really not terribly involved as long as you take a reasonable approach to it. Perhaps you can post some specific questions you have in another topic and I can see about helping you out with them?
Go to the top of the page
 
+Quote Post
ecomIanS
post Oct 2 2015, 11:35 PM
Post #8





Group: Administrators
Posts: 967
Joined: 14-January 13
From: Jacksonville, FL
Member No.: 19,888



QUOTE (robinski21 @ Sep 29 2015, 11:31 AM) *
Can't tell you how they did the framework, because I have no idea



I can tell you firsthand: it's really just a matter of going through the cart and providing styling for the "cart specific" stuff, while creating solid styles (LOL no pun intended), helper functions/methods, etc.

I could provide a more in depth set of "bullet points" but the most important thing I'd mention is that you really must use JavaScript in order to properly get things to behave. Not using JS is going to seriously handicap the development of your theme (or really just about any other dynamic site theme in general).

I am actually developing the latest version of our base code that we use for our designs. It's not 100% the same for each store of course, because new things are being added from time to time and all that jazz.
Go to the top of the page
 
+Quote Post
PowderDay
post Oct 3 2015, 11:55 AM
Post #9





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



QUOTE (ecomIanS @ Oct 2 2015, 11:31 PM) *
Your skepticism here is kind of ironic to me, just because I literally build these types of responsive store designs all day long here at Web (among my other duties of course (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif) ).

Trust me, its really not terribly involved as long as you take a reasonable approach to it. Perhaps you can post some specific questions you have in another topic and I can see about helping you out with them?


I am getting close (IMG:http://forums.networksolutions.com/style_emoticons/default/smile.gif) Sorry for the skepticism, but i suppose the forum just is not well supported by members until there is a stability issue with the cart and then they all come out.

I would like to see both more members and more community.

I'll have some specifics in a little bit. so far i have problem solved most of my issues thus far. I like puzzles (IMG:http://forums.networksolutions.com/style_emoticons/default/wink.gif)
Go to the top of the page
 
+Quote Post
PowderDay
post Oct 10 2015, 08:52 AM
Post #10





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



amid a week of unacceptable hosting performance we did manage to get to a point where we were able to release the redesign!

www.headlightarmor.com

There are a number of custom pages that still need to be recoded and a few products' descriptions that need to be recoded but those should be done next week.

There are a number of design wants still to be addressed but the site is live and working.

The number one thing we need to address is the main category nav. the drop down works, just not how we want it to. A topic for another thread.
Go to the top of the page
 
+Quote Post
robinski21
post Oct 10 2015, 06:04 PM
Post #11





Group: Verified NS Member
Posts: 430
Joined: 10-August 08
Member No.: 1,857



Looks great, well done!!
Go to the top of the page
 
+Quote Post
PowderDay
post Oct 14 2015, 10:44 AM
Post #12





Group: Verified NS Member
Posts: 590
Joined: 14-August 08
Member No.: 1,942



Thanks, still working on it. The drop downs on the header bar now open on mouse roll over, click / tap. Working on getting category nav drop down to work as the functionality built into the cart does not behave as needed by default.
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
Tags
No Tag inserted yet

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

RSS Lo-Fi Version    Network Solutions © 2011 Time is now: 23rd October 2017 - 06:24 AM
Domain Names | Web Hosting | Web Design | Shopping Cart Software | Online Marketing | SSL Certificates