More with a sense of relief than anything else I announce the arrival of version 4.4.0 of Suffusion, a.k.a. the Responsive edition, which went live just a while back. The following are the changes in this version:
- New Features
- As mentioned above, this release was all about checking the box against “Responsive”. I did try to put a good amount of power in the hands of the users:
- The feature is “opt-in”. It is turned off by default and you can configure your settings by going to Suffusion Options → Layouts → Responsive Layout.
- You can pick which breakpoints you want to configure. Note that for every breakpoint there is a good bit of CSS added, so exercise prudence.
- Typically themes either kill a sidebar or shove it to the bottom of the content when they decide to go responsive. Suffusion lets you as a user decide what you want to do. If your sidebars have enough content to warrant a display on a small screen you can decide to show them at the bottom, and more importantly you have the choice of putting your sidebars side-by-side if you have more than one sidebar. This is of particular advantage on midway screen sizes such as 650px.
- You can also do some fancy things like switch your navigation menus to “select” boxes if your width goes down below a point.
- While most elements have been made responsive, the following need to be noted:
- Featured content is responsive only if you check the setting to make images stretch to the full width. It took a huge effort getting JQuery Cycle to behave in a responsive manner.
- The Headline box in the Magazine template and the Masonry-based layouts are NOT responsive.
- The featured content slider doesn’t respond to swipe gestures – that will be handled in a later release.
- I have to make some modifications to the menus so that they play well with touch devices. Currently if you tap on a menu item on a touch device it opens up the sub-menu if the menu item itself is not linked to a separate page. However if the menu item is linked to a separate page, tapping takes you to the page rather than showing the sub-menu.
- As mentioned above, this release was all about checking the box against “Responsive”. I did try to put a good amount of power in the hands of the users:
- Bug Fixes
- A missing CSS file was being loaded for BP 1.6+. This has been corrected.
- The setting for the number of widgets in the “Widgets in Header” was not being respected. This has been fixed.
- I fixed an issue where the audio shortcode was not showing the audio player even if it was enabled.
- A couple of layout-related issues have been addressed: Webkit browsers (Chrome and Safari) weren’t automatically setting boxes to a fixed height in the Custom Layout and the Magazine template. In addition, Opera 12.x was misbehaving for the Custom Layout template.
- The Featured Posts widget was, in some cases, repeating the post index. This has been addressed.
- I have corrected a bug where the left and right arrow icons were reversed in some iconsets.
- Another bug was causing a post with no title in the Query Posts widget to show up with no linking text. This has been rectified to match the behaviour of the Recent Posts widget, where an id is shown as the linking text.
- Activating FancyBox was causing a lot of errors to show up in the logs for IE browsers. Since Suffusion doesn’t support IE6, I saw no harm in removing the lines causing the errors.
- Changed Features
- I have removed the version of the Meta widget that came with Suffusion. This widget was mostly identical to the default Meta widget and it served no great purpose by itself. If you had the meta widget in your sidebar, you will need to re-add it.
- Ever since version 4.0.0 I have had a combination of JS and CSS3 multi-columns to balance the widths and margins of blocks of text, such as the Custom Layout widget areas. I have now moved to a pure CSS solution that works on all browsers and is much more robust and stable.
- This is more techno-speak than anything else. I had some static markup calls in the main sidebar, which I have now replaced with calls to
the_widget. - I used to use an online PO file generator to build the theme’s PO file. But I realized that this generator tended to drop quite a few strings. So starting from this release I am using a different PO file generation technique. Naturally this has caused a spike in the number of strings that are to be translated.
Do bear in mind that I am not a fan of the common interpretation of “responsive” design – it only adds a lot more page weight for the measly benefit of showing your site differently on a device not capable of handling the extra page weight. However, there are times when ideology takes a backseat and one has to adapt. This happens to be one of those times. Personally I am still a fan of a dedicated mobile site for handling mobile requirements – responsive designs are a fad in this regard. Of course, you could still establish server-side controls for a lot of these things. E.g. The code could be made to detect a mobile browser behind the scenes and automatically give out an image with a lower resolution. Unfortunately such techniques haven’t been perfected yet.
So here’s hoping that you enjoy this release. For support continue using the forum, and please feel free to rate Suffusion or Photonic or FontMeister.
My background is back to grey and I cannot override it. Help!
I am seeing it in pink.
Hi Sayontan,
I’m a bit sad reading this post. I precise beforehand that I haven’t tried the new version yet (I can’t for a few days), but based on what you write honestly the last thing that Suffusion needed was extra weight.
I’m a big fan of responsive designs, but “responsive” in my mind means not waiting forever on a lousy connection to load unnecessary stuff or, worse, stuff that breaks. This goes through detecting the browser and serving a different wrapper for the same content, that given the current crop of 300 dpi screen doesn’t really need to be scaled down. I see there are plug-ins like “mobile-theme-switcher” to do that so I think it can be done inside a single theme too (actually two themes in one).
Just to make one working example, skitour.fr automagically redirects to “www” or “m” domains that share the same content, but with the second domain optimized for use with mobiles. It’s not just a matter of sidebars, but specific optimization: it’s blazing fast and I can write there with no problems. On this very website I really couldn’t, I had to switch to the PC to write this comment because the text went crazy with weird zooming each time that I went back to correct something (Android Chrome on Jelly Bean). I suppose this has to do with the JS that resizes the text box that doesn’t degrade gracefully, just like all the “hover” stuff breaks on mobiles since you don’t have that concept on touch screens (yet, Sony’s arriving).
I’m sure you had your reasons to surrender, but IMHO you took the wrong direction in doing this. I hope you reconsider it because mobile and tablet browsing are going to gain more and more market share in the next years but they cannot share the same interface with PCs.
I hope this is taken as constructive criticism, I love Suffusion and really appreciate your hard work.
The responsive facets are purely “opt-in”. So the theme is not going to be responsive by default. Only if you decide to explicitly make it responsive will it add all the additional styles.
Regarding serving different content to mobiles and PCs, the prevalent way at present is to use the browser’s “user agent”, which is currently passed with a request. This approach has its limitations because it is very easy to change the user agent for a browser and pretend to be some other browser. The other approach is more fancy and involves the use of non-standard HTML attributes: http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
Also, I don’t have an Android device, but I have never had a problem using an IOS device with this site. This comment is being typed on an iPhone. Moreover this site doesn’t use the responsive features, so an error you are seeing has nothing to do with responsive design.
I wasn’t implying that this site has the responsive features on and/or that it was causing issues. Just that responsive means taking off stuff rather than adding, like the JS and CSS that does nothing here and there and can, like in my case, break.
Your site actually browses just fine in Android, if I want to hide the sidebar I just have to double tap or pinch zoom in a bit. I only had that problem trying to write in Chrome, I tried now with Firefox and it doesn’t zoom wildly but the text inside is really small.
Hi Sayontan,
I have an unrelated question. For some reason, when I have a regular page that I make a Home Page, widgets that normally would appear do not appear. Then, when I take the page and remove it from being the home page, the widgets show up. I am also using Widget Logic for placement of widgets. Can you tell me what I am doing wrong?
Hi Sayontan,
I just wanted to say what an impressive job you are doing with Suffusion. After 6 years I am looking to re-design the website for a sailing club (voluntary work!), and although I am only just getting into the theme it seems awesome!
If Suffusion becomes the basis for the new website, as looks likely, then I will happily buy you some coffee!
The “Responsive” option is good, as club committee are keen on this (although personally I agree with your thoughts above). With the “Magazine” template it should help, as otherwise the 3 column + sidebar layout the columns do become very narrow!
Best Wishes, and please keep up your amazing work and the Suffusion theme!
[…] Suffusion Responsive Layouts. The “responsive” version of Suffusion, Version 4.4.0 was release back on 9th November 2012, but due to the upcoming release of WordPress 3.5, and […]
I’m using wampserver to build a suffusion site. I’ve run into a problem where every browser but internet explorer displays my media query custom css. I think it is blocking some of the suffusion and plugin options as well. It’s sort of partly responsive. Is there some code or something or some plugin I should add to make it work for ie?