Good example of a responsive shop, anyone?

-- Joomla version -- : 3.3.3

Hi,

I'm investigating what's the best shop component for a new project. Hikashop looks promising, but I have yet to find a single shop that is really decently responsive. In an hour and a half of checking out templates and showcase shops there was not a single one that worked really well on small screens (iPhone: 320x480). There are shops done with other shop components and/or other CMS that do work well - so it is certainly possible ...

Anyone here who could point me at a real good responsive shop?

Thank you!

i was thinking the biggest ecommerce website ll be responisve but not .
amazon like many others market i think take the way to implement their own web application for
android www.amazon.com/gp/product/B004GJDQT8

iphone www.amazon.com/gp/feature.html?docId=1000291661

if you search in google
best+responsive+ecommerce+website&spell=1
you ll be able to find and study many website
joomla is for manage data
Hikashop is for manage product payment
All the design can be apply to joomla if you know well css php order .

i think using asset from a commercila website like this could be a good exercice to test joomla and hikashop .
if website give link to RWD website , you have to test the website yourself .
The link i give has bug so test on many physical device and virtual browser inside browser .

i know it is more easy to find layout problems than create a web design layout !!
don't use too new technologies that ll not work on common device ( android iphone), stay simple efficient .




regard's

Hi Lionel,

Thanks a lot for your answer. Yes, there are many examples of well done responsive shops. I could do it with CSS, no problem, technically, but a lot of work. I'd like save that work by using a template that is already well done (and perhaps adjust it a bit). So my real problem with Hikashop is that there seems to be no good template for it, and I found no shop that uses Hikashop and that is well done. Therefore I assume that it must be rather difficult (i.e. needs a lot of overriding) to get it right.

Regards,
Ralf.

Hi
i think it a lot of work of re write all HKS php file extension ( plug in, module ,component) for have a new layout for HKS and also for main layout template ( index.php) . It is the reason why there is so many post in HKS for css problem ( integrate HKS layout i na choseen template). Template at this time is focus only on the index.php (main template) not extension . I do some work to rewrite an extension for bootstrap ( 2.x 3.x ) but a lot of work issue !! I override extensio ntemplate for "template manager" after take the css code source from a nice web site , the resul is nice and this avoid use CSS framework ( really usefull ? if you know what you do and already done that before )
I ll post if i find something but those kind of template must cost a lot ( time consuming to rewrite php css ) . I think since there is many selector in HKS and joomla code with custom prefix suffix selector , only change order position succession of extensions and then css content file is a way to achieve template customisation easely .

regard's

Ok, thanks a lot for sharing your insights. I use Bootstrap all the time, and lately I worked a lot with LESS and like it a lot. Easy to learn and makes many things much easier. To get started with compiling .less files and to get sourcemaps working is a bit of a hassle. But I find it worth the effort. I heard SASS had some advantages, not tried yet.

What you say about HKS templates is just what I thought. But I hoped that someone might have succeeded already, and I would not mind paying for a good template. Apparently I'm out of luck and HKS is currently no option for me. Hopefully the HKS guys are working on it.

Regards, Ralf.

Hi
Static site can be convert to dynamic ( rwd ) , i read an article about this for not to complicate website .

regard's

Not sure it is a good one to your standard but we tried our best to improve user experience on smartphone and tablets
www.chinabootik.com

Hikashop + Joomlashine template + a lot of CSS customization

Thanks for sharing, cbadmin. This is definitely one of the better shops I've seen, and you seem to have overcome some of the issues I found in other Hikashops. The issues I found in your shop are perhaps mostly matters of taste and/or understanding:

1. search bar breaks on smaller screens
Cart:
2. Starts with mysterious and large list "Carts". On large screen it takes less space. What's that cocktail glass icon?
3. Name text moves into label when reducing width
4. How do you update totals after changing the quantity?
5. Scrollbar has special styling - took me some time to figure out it's actually a scroll bar and not a misplaced red box. I prefer sticking to standards or at least use non-confusing styling.

At least these are things that could be changed easily. Can you estimate how much time you put into this? Do you still think, Hikashop was the best choice?

Regards,
Ralf.

Hi
I test the hikashop demo web page and i try the css xpath expression "[style]" . And you ll see that in the main page there is "45 matching node". In many case design with column or design that need to be place in a new line use css value in joomla php code . This code could be writte / store inline or in an external css file . The inline seem to be a wrong choice .
It seem bootstrap don't have /use inline css code so , new joomla user ll have to know css and nobody ( beginner) ll use joomla !!


www.chinabootik.com/ for their main page demo use
230 matching nodes styles and it seem it use
18 css : => different specificity for span and dynamic class selector !!
34 js => 4 libraries ( spin.js ) !!
really nice but i think bootstrap layout is to complicate to have RWD by manage with selector wrapper and selector specificity

regard's

We did add incremental improvements over a period of 6 to 8 months which also included a learning/discovery phase or what kind of design issues our customers were having on smartphones/tablets. Now we consider this still a work in progress and your feedback is quite useful.

With regards to the solution choice, we do like the flexibility and ease of use of Joomla + Hikashop (for example in comparison to Magento) and the quality of the commercial Joomla templates available, including RWD templates.

Now what we did not plan for was that the cost of flexibility and easy of use is speed.
A Joomla + Hikashop + RWD template is generating a lot of SQL queries and standard Joomla caching cannot be used for an e-commerce site. With standard Joomla cache you run into issues with the shopping cart and currency switch for example.

Hi two more information

a-- speed loading page ( generate page )
Iread paper article from specialist ) about LAMP and nginx . The article say that speed can be really better if dynamic page ( WAMPJoomla) can be static ( serve by nginx) . This can occur only if page can be predictable so that content ( store in rdbms) ll not change or static page have to be update after rdbms when a product have been buy ( if the session don't end buy a payment , the product number don't change and so the static page don't have to be update ) . I don't search a lot in jomla JED if such extension exist to swicht in real time beetween static and dynamic page .
search engine like speed page ( SEO ) !!!

b-- bootstrap
people think bootstrap is the way to go and i think too but one thing ( stee.. Jo..) ...... . the idea behind boostrap is that it is a library buillt on the experience from many web designers to resolve many issues at a time against differents browsers versions with a higher layer UI design (css js ) and more behaviour ( css js ). i write ( css js) because since js can be use for design and css can be use for manage dynamic change ( css menu ) ..... . All browsers ll have an update soon to follow standard and some issue ll disseppear so bootstrap library ll also be update . So as a developper we don't have to use old shim . Jquery is use for boostrap and it is very nice since there is a lot of third jquery library that can be use. It seem jquery in bootstrap is not the same that jquery alone ( don't test only read and that few people use JQuery bootstrap functionnalities ??.,,!!) . But jqjuery has giant third library mean not officially support by bootstrap but available ( a jquery repository) . bootstrap is bundle by default with many functionnalities but al lthe functionnalities don't have to be use . IT is the same with joomla many extension can be install and enable ( buy) and ll never use ..so can be forget /Remove/ disable. To remove disable change some functionalities ; people need to understand the functionnalities that is bundle with bootstrap and if they need thoses. HTML5 boilerplate in a way is the same thing that boostrap in the way it support many functionnalities and developpers can mix HTML 5 boilerplate with bootstrap even i shure they share some common functionnalities ( reset file) and has been write for same aim : support many devices and browsers problems and a standard /efficient way to solve thoses problems .

To give an end , i go to drupal web site to see how is manage template . For each templates , the main drupal website has a database ( static , page ?) where all template specification and version is available with no marketing words and many technical term. IT is better than joomla repositories that only manage php server side extension but never template . Template like php extension ( CMP) are part of joomla eco system why not a repository with review from users ?. In a way it is my experiences : I post a negative review and my post has been banned so i don't trust joomla website and don't take care of reviewer that post only 1 or 2 review only on the same company and I take in account only bad review ( like in google play ) . Jed could be enhance by force people to document their extension not by functionnalities but by technology that has been use :
php : php framework fof laravel symfony ....
joomla framework : T3 , jtA ,
css : no css , dynamic css , inline css , responsive , custom css, framework bootstrap , JTA , T3
js : use library( mootool , jquery , spin other library fof ) , don't add library , manage version library
raster : bundle with psd , cut image ( slice from psd) , no image
and for all this ressource the location of all those assets .
At this time ( september 2014) you have to study the extension to know how it work to understand what you do when you use the GUI BackEnd to custom the extension as you want .
If all extension support bootstrap , All this information ll be not usefull but if bootstrap version in joomla 3 is bs 2 and nowoday the last version is bs 3 ! you are far behind the reallity .
Drupal is bootstrap 3 and it is not the case for joomla 3 . This is not a problem if you understand / know joomla 25 , how menu work and CSS framework ( don't speak of joomla framework that are a kind of layer that work like an IDE more functionnalities parameters for backend )

so custom joomla php cs js is something that need strong knowledge that we could have after months / years ? of experiences/issues / users cases .

Regard's

About Responsive design must be responsive but not only ; it is also optimization and gesture.
take the rs clario template and some information about the assets that are load in the client side when use mobile or desktio client :

for design
menu swicht from horizontal to icon menu
vertical menu is like Hikashop menu : stick to the bottom so ll always appear when scroll vertical .
The layout change only for smaller size ( one column) so not some breakpoints are virtual ( use right left space around the design )

for optimization
-the menu vertical and icon menu use the same tag element ( hikashop website use second menu and hide the others one )
-the images are the same size

gesture ( mobile)
All work menu and gallery

there is a lot of article ( recent book) about optimize RWD but i find that each technologies/polyfill create new problems. I ll give some feedback after test read more . Is there technology that manage at once hdi screen , speed connection to select/toggle dynamic widget /layout ?

That's a beautiful template you found there. I wish this would work with Hikashop (without lots of adjustments to HKS ouotput) ...

Conditional recource loading is a complex topic, and there are many interesting articles to be found:
www.google.ch/search?q=load+resource+conditional

Also a lot of work to implement all the options. Just need to find a client who's ready to pay for that.

Some Joomla template frameworks (T3, e.g.) have such things included. Probably a good start if you don't want to code everything yourself.

The responsive template for joomla ( before speak about e commerce) must manage menu design and behaviour. Joomla is menu oriented so template has to focus on menu like rs clario or HKS website . T3 use bootstrap and when go from v2 to v3 ; dropdown sub menu has been removed . I don't know what it mean ? , does multi level menu item are still support by others bootstrap widgets ? Study Menu take time so go to toggle , Dropline, CSS , Moo , mega Menu . see RESS

Since HKS installation has a way to install at once ( one cllick) a HSK website . I think after buy the template ( or ask for testing purpose ) , i can easy see if HKS layout widget template is compatible with RS clario main template .

regard's

for problem relative to cache , wordpress has many options than joomla .
wordpress.org/plugins/tags/memcached

by searchig memcached using the joomla jed search engine it 's return sh404 SEF and github cache ( google app ) .

regard 's

here another RWD joomla template goo.gl/V8Go7Z
the forum is here

it is more than a template , it need framework and support preprocessor less, psd , megamenu ( yes) .
see more .

I was thinking main template /framework are free and only extension have to be paid but find nothing ( unbelievable except many download URL return 404 and bug )

The "nice" thing is that the template come with a psd file .
expose-expertexplorer\templates\atomic\css\ blueprint \src\templates\psd\fixed-width.psd
after test ; the psd is more a grid layout than a template layout since it contain a raster of template ( a capture screen) in front and a usefull grid beneath ( if you know howto use a grid ) .

I create resposive shops with yootheme and hikashop.
You can take a look at www.lacestamagica.com
www.pxmilitar.es

Hi condorazul,
Thanks for sharing. This is definitely one of the best hikashops I´ve seen, beautiful. Especially on small screens it's pretty good. One suggestion: move the related items below the Add to Cart section, otherwise it's a long way to scroll. And in the cart table, on small screens the labels disappear. Not a desaster, because it's not hard to guess what's in the fields, but some clients might be confused.
Regards,
Ralf