Make any site responsive. New mod. No more apps?

Has any one used this mod yet? It would completely cut out the need of mobile apps. Does it work? I was going to pay someone tons of money to make my site responsive and now I can get it for $15 bucks. But does this actually replace the mobile apps? http://www.boonex.com/m/make-any-template-responsive-mod

I have not tried this mod but I was thinking about it.  If it would take any template and make it responsive, then that would be a big bonus.

Although this app may make any template responsive, there are other issues. Like if someone joins using their mobile phone the picture/Avatar will be sideways.

 That is a major flaw. How does that happen? It is a weird flaw too. What else is awkward about this mod?

That happens whenever someone joins through the internet from a mobile. Not sure why. They can always get on a computer and pick a different avatar or rotate the pic with a photo editor.

Is this an issue with that mod, or an issue with joining from a telephone.  People sit in front of 80 inch televisions but surf the net with a three inch screen?  Baffles me.

I will prob buy this mod today just for testing as it could be very handy and at $15 its affordable!

I have tested some other responsive templates, they usually 'mostly' work out the box but have found some areas that need general updating. Things like when photos are uploaded within a module like groups, events outside the normal photo module.

They are then not responsive whereas the ones in the photo module are...

Currently looking for a way to make all photos that dolphin uploads/displays set to a 100% width, rather than a fixed size.

I should imagine the same problem would be here with this $15 plugin, maybe others also. Will give it a go later this evening and let you know what I find!

Hi daihlo,

I hope that you are well....

Please let me know how this mod works out.... It sounds too good to be true,

NAthan : )

Hello, I wish first of all to thank you for your interest in this mod. I also want to clear some things and give more details about this product. This mod was designed to be our engine behind all our future templates, something very small in size (just two files, a css and a js) that will turn the "responsive as a rock" classic Dolphin templates to something more close to present time requirements.

The mod will work perfect with my templates because I try as much as possible to retain same div names and not add any custom ones in the already heavy layout, but it might not work PERFECTLY, out-of-the-box with other custom templates.

For example if you have some custom banners in the layout - they will not resize as the layout, flash apps, custom divs etc. They will not resize because they all have custom class names which in order to make them sync with the rest of the layout, they also need to be added to the resize list in the mod's css and/or jquery file (jquery if you have a custom menu).

This mod is not doing any magic, if your template still has same div names as the ones in UNI, it will make your template responsive out-of-the-box, if your custom template has custom slide-shows or any other custom elements, they first must be added manually to the mod so they will also be resized.

I will try to guide everyone that needs help to implement it, but remember that Dolphin's templates were never designed to be responsive in the first place, that's why it might not look perfect without some fine-tuning.

We will try to improve the mod every day and fix the bugs, till now we did not received any support message to state that the mod "if someone joins using their mobile phone the picture/Avatar will be sideways.". Our mod doesn't use any css3 rotation in the css file or through the jquery. Can you please attach a screenshot of the issue?

 Can you please attach a screenshot of the issue?

Hi DolphinTemplate, I will be buying this in the next few hours for some testing. 

Do you know if it has the same issue I outlined in my previous post that some other responsive templates have had regarding photos that are uploaded into module such as groups, events etc... not photos uploaded into photo module.

Thanks 

 This mod is in continuous development, but in short, anything can be resized to fit the screen, by css or jquery. I will do more testing on this area that you mentioned.

The problem I see here is that the original image can be quite large.  If someone is using a 20 megapixel camera the image is quite large.  If we use CSS to resize the image to the page instead of creating the display image on upload, then when someone goes to view the images, very large images are still going to take more time to display because the full image must be sent to the browser.

The key here is to use the free library for GD that manipulates images; can not remember the name of the class at this moment.  What we want to do is to resize the image on the server on the fly, then send that resized image.  I have seen this in action and will find the class and post it to a topic for you to examine.  We store the original image only and we then use the class to generate the thumbnails when needed and the display image at any size we want on the server before sending them to the browser.

Thanks GG, hopefully that will help

I bought the mod, easy setup. Tested on uni at the moment, so far so good on basic layout etc...

Same issue though with images. Even images in normal photo upload module dont resize though.

This seems to be the key area that needs to be developed on all the responsive templates that Ive tested so far.

Would be great if we can find a fix :-)

The answer for that will probably lie in checking to see what the user agent is that is viewing the site.  Since blocks have fixed sizes, it would need to change blocks to use a percentage as well as the images. setting an image to 100% for a block that is 600 pixels wide is going to have the image at 600 pixels.  So the block needs to be 100% of the viewing container which is going to be the device display and then the image can be set to 100% which then resizes to fit the device window. 

The mod has been updated, added 100% max photo width to groups and events pages and also fixed the main menu jquery trim.

Let me know if you have any other issues.

I've tested a good number of responsive designs...blah,blah,blah.

What I've noticed- None of them are perfect out of the box, and simple little tweaks like photos that need to have 100% width properties applied, tend to be found here and there with various modules. And of course, don't be surprised if you need these tweaks applied to 3rd Party modules, because module-developers hold to- "It's compatible with the base template" (No fault to the Template Makers or The Module Developers- It is what it is)

So far all template designers have been happy to "fix" or pass along the code modification necessary to resolve any slights that need adjusted :)

Another thing I have found, is that there are times where I actually wish that the design was NOT RESPONSIVE When surfing on a mobile device....

SO- What would be cool????-----> If there was some sort of "Mobile MOD" that puts a small icon on the screen (Top-Left or whatever) and can be touched/clicked and switches between the Responsive Design and Uni (OR other design which buyer/webmaster chooses)....It would be cool if the screen simply "FLIPPED" instead of Re-Load when people clicked the button

Yes, I know- there's the design switcher at the bottom of the page....BUT- It's Soooo much easier to find and use if it's a quick-access button always on the screen, I feel.

I still feel- RESPONSIVE IS THE WAY TO GO

Thanks! 

Can you tell me where you add the 100% width within modules?

I have a number of 3rd party modules, may need to add it within them also if thats the way it works...

Thanks

Hmmm... worth investigating for sure. I can afford $15, gonna give it a try. I always HATED the limitations of a full blown mobile app as they leave so much out......

I am assuming since my site is basically built on the UNI template with very little modification (except for a few rss scrolbars here and there), this will work relatively well out of the box? The only concern is I have a very high level of digital photos in my site and like GeekGirl points out, some can have a very large file size.... are we dealing with that to avoid the need to download 2 MBits of file to display an image?

@UnderDogAll - This mod is not a "responsive design", this is like a prosthetic device that will make the "rock" aka Dolphin act more responsive. There are tons of templates out there that all look pretty, but very few are actually functional, professional, light or responsive. We add the responsiveness to such templates, nothing else. Dolphin was not coded in the right way, there are many things that cannot be transformed into something responsive, take for example the thumbs in the Groups photo slide show, it's impossible to align them in center because they have a hard coded absolute positioning generated by a script and cannot be overwritten.. This is just one. I try only to make a "rock" more responsive and be usable on mobile devices. As for the file size of the photos, this can't be done through this mod, I think the solution will be to edit the default modules to resize the photos on upload or just put a file size limit.

 Yeah...There's a little more to it than just a simple- "You simply add THIS to THAT"

BUT, here's a FOR INSTANCE:

I have EVO WALL.....

In order to make photos responsive within the NewsFeed, I had to modify the default.css or common.css files of my responsive template by adding this-

I also will say-

If your's paying DolphinTemplate $15 to make something responsive, then $15 is very little out of you're pocket, and it may give you $15 worth of responsiveness. I think it's totally cool that Dolphin Templates have done this for us :)

My main point is- I encourage the whole "Responsive" idea and hope to see more support for it....Resizing my mobile screen annoys me that much! The more vendors are willing to support their responsive products and the more they are willing to post tips and pass along code snippets freely, THE BETTER!

WHY?

Simply because this particular "responsive" thing falls into a gray area that overlaps the responsibilities of different modules or templates structures...If that makes any sense?

So basically, we got this cool thing here....but with it comes with this whole "who's gonna pick up the ball and make sure THIS is compatible with THAT?"

PERHAPS, This is why Boonex is not as fond of "Responsive" stuff???

IDK

One thing for sure- You're always going to find that the grass is greener on the other side of the responsive/non-responsive/mobile-app/desktop fence.....I like the fact that I can cross these fences easily and affordably...anytime I want...and the vendors who can spread the grass-seed more evenly are big winners! X~)

 Hey, so did anyone find out more about this?

Not had time to test yet, caught up with other work yesterday. Will do this test this eve.

Thanks 

 The mod has two files a css and a js. The css controls the layout, including the main menu, the js is there only to trim the main menu as screen size requires, on page load and also on resize (delayed). You must add the class inside the css where you see width 100%, next to other classes that are already there.

I have made some collages to show exactly how the mod works under different resolutions, different layouts with 1, 2, 3 or 4 columns and also how the main menu elements are moved under the "More" element depending on the screen size.

1 Column Layouts: On one column, it's easy: 100% width for the only column no matter what screen size. The main menu elements are moved dynamically under the "More" element depending on the screen size.

2 Column Layouts: On two column layouts, the mod preserves the original widths of the columns (set in admin panel) until the screen size gets smaller than 1152 pixels, then the columns become 50% - 50% in width. Under 720 pixels the two columns become 100% in width. The main menu elements are moved dynamically under the "More" element depending on the screen size.

3 Column Layouts: On three column layouts, the mod preserves the original widths of the columns (set in admin panel) until the screen size gets smaller than 1152 pixels, then the columns become 100% - 50% - 50% in width. Under 720 pixels all the three columns become 100% in width. The main menu elements are moved dynamically under the "More" element depending on the screen size.

4 Column Layouts: On four column layouts, the mod preserves the original widths of the columns (set in admin panel) until the screen size gets smaller than 1152 pixels, then the columns become 100% - 50% - 50% - 100% in width. Under 720 pixels all the four columns become 100% in width. The main menu elements are moved dynamically under the "More" element depending on the screen size.

WOW! Now that's cool!

OK, SO- Does this also mean that it will work with Full Width Columnsmodule?

With that module, we make page layouts like you show in your examples- 100%, 50%-50%, 100%

This is another challenge I've seen and been dealing with on the "responsive" front.

And also curious how it might impact those who already have responsive designs and would like to apply this to just the UNI or ALT templates?

@DolphinTemplate- I REALLY like what I see on your responsive demo site...I know you've really put a lot of work into the layout and design area...(ie- Super HTML Blocks)  Being able to create a better layout has long been one of the biggest challenges with Dolphin, SO THANKS :)

I just buy the mod will test it soon....

 Working fine on my custom template..... Great mod!

 Thanks for this, 

just to check, the ref to #anteprima - I guess thats what Evo Wall is named as?

Thanks

 @daihlo-
"#anteprima - I guess thats what Evo Wall is named as?"

Anteprima is an Italalian word meaning "preview", as in- Image Preview in a gallery view or something to that effect...

#anteprima img is the CSS class (not sure if class is the right word) associatiated with the images that are added and displayed on the EVO Wall....

As you know- When you add a few images to EVO Wall within say 24hours, it groups them together into one post....When you hover over them, a preview gallery appears inside Evo Wall and displays each image as you hover from one to the next. The size of that image is set in the EvoWall admin panel. I have mine set to like- 650-700px.....SO it displays fairly large and takes up most of the column width that Evo Wall uses. But if I resize my screen/window to a smaller size, without that CSS code I added, that preview gallery doesn't re-size with the display resolution and the image ends up getting cut-off as it extends beyond the screen view and I can only see part of it. (Even though my design is responsive). With the simple code I mentioned added to my template's Default or Common CSS (I prefer the Default.CSS), it re-sizes nicely as the screen resolution becomes smaller.

You can also make the change by adding the code to evowallstyleDark.CSS or evowallstyleUNI.CSS  in the Evo Wall Module- evowall/templates/uni/css directory....But I prefer making my modifications to the templates Default.CSS if possible so it's easier to deal with if I Upgrade, and also because the template's CSS will override the Module's CSS (As long as I add !important at the end of each line of the code) and wont matter if which Evo Wall design I use- (Light or Dark).

For now, things will need to be done this way, as there are so many possible customizations we have for each of our sites, and there's simply no way that any one product a vendor/developer puts out there thaot can cover ALL possibilities...But I guess that goes without saying.

Hope this helps :D

Thanks. I dont have evo wall but good to know :-)

I need to resize for Groups, Blogs, Events and ultimate articles... 

Will take a look where to adjust.

Thanks

 IDK if this helps a bit?

added to default.css-

 unfortunately doesn't work.

Still no joy with all images resizing. 

Images in photo module resize fine, not in other modules though such as groups, articles, blogs etc...

Any other ideas greatly appreciated!

 PM me with some links to the pages/images that need to Auto-Resize, and I'll have a look and see if I can get ya little further.

(Will need to have CSS caching off/unchecked)

 The most common reason is due to the orientation of the phone when the user takes a photo.  Most phones default to landscape orientation but a profile photo is portrait orientation, which is 90 or 270 degree rotation, which brings up another issue, it is very easy to hold most phones upside down while taking the picture so you will also commonly see inverted pictures.

Phones like the iPhone store metadata that describes the orientation of the photo relative to what is actually considered the "top" of the phone camera.  Most desktop software uses this information to re-orient the image so that up is up no matter how you held the phone while taking the picture, but dolphin doesn't look at that.  It would be pretty cool to add that capability or to at least add rotation to the cropping tool so that users can get their photos into the correct orientation.

Hello.

I have buy the mod and I have a little problem.

We use 7.1.4 with this template http://www.boonex.com/m/Faceman_WRRed_Template_25_2011_02_21 and the graphic in the mainmenu is broken after install.

I have insert two pics to show you the problem.

Any ideas to fix this?

Rappi

I bought this for testing, in case it came in handy on future projects as I have a responsive template Im using on main site that Im already happy with.

Started playing with a new site build today, installed a non responsive template and installed this mod.

At first glance, it looks good, although the header on my template doesn't like it... The main nav menu is not responsive but then thats due to the custom template. have to work that one out...

Then I tried viewing my test site on an iphone and it still looks exactly the same as before the mod. The mod responds when I resize the screen on desktop, but doesnt appear to do anything on an iphone!

Any thoughts?

OK....Been playing with this mod a bit....

My initial feeling are this-

I am used to working with responsive designs, and all do much better with menus than this mod does....

This mod arranges blocks nicely....But anyone who has owned a responsive template will likely not be very pleased with the overall functionality of this code.

This is made more to work with UNI perhaps?

It may make "ANY" template responsive, but a very common non-responsive template such as Black Is Black does not look good with this code.

If you have UNI, and aren't buying a custom template from any one, then you may be satisfied...you'll probably still need to do some header customizing for it to look good on smaller devices....And if you have purchased a custom FOOTER, then there is yet another place that this code will disappoint you.

It really should be named- "Make Uni Responsive"- I do like how it works with Uni

My advice, is- If you want RESPONSIVE, You'll be much happier purchasing a responsive template.

 Indeed, this mod is created JUST for CUSTOM templates that keep the same class names as the UNI template (and there are plenty of such templates). This is just a mod that will help your "ROCK" template fit in mobile screens. Of course a template DESIGNED to be responsive is much better than a template that was not meant to be responsive.. If you have a template that you like very much but you don't have it to be responsive, then use this mod and it will be a almost responsive template..

For videos & audio you will still need mobile app . this module is for older handsets with buttons.. new smart phones can already adjust your website but can't play flash video or audio players. it is gud module if your users are not andriod or ios device based.

I just purchased but the zip file is empty. Downloaded twice to check. On the mod page in the marketplace there is post from someone else - same issue.

  I emailed the vendor about it.. didn't  reply back.. "I just purchased but the zip file is empty."

I sent a message here on boonex but got an autoresponder to send an email directly, which I just did.  I'll let you know if I hear back.

viptopia.net uses this module,, me and dolphin jay set it up a couple weeks ago

dolphintemplate replied to my email today and provided a download link, did you get a reply also BoucheTalk?

 No not yet... It's been 21 days so far........

 What's the module???

BoucheTalk I PM'd you.