Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 25 2014


February 07 2014


Responsive Images: Still Waiting for a Standard? Try Rwd.Images.Js Instead!


Responsive Images is a topic far from resolved. Will it be the picture element as proposed by the W3C or will it be the srcset attribute as proposed by WHATWG in the end? No matter what time will bring, responsive images are a problem that needs to be solved today and not sometime in the future. No wonder that JavaScript is the remedy of choice. There are quite a few scripts targeting responsive imaging, quality varies though. A brand-new script by Matt Stow from Australia shows the potential to become the best available client-side interim solution…

Sponsored post

January 27 2014


Slip.js: Small Script Touch-Optimizes Lists in Web Apps


Slip.js is not exactly new to me. I stumbled upon it a few weeks ago, yet didn’t get impressed at first sight. These days I had a real life usecase and faintly remembered Slip.js. Now, having worked through a real project with the help of that small script, I have to admit that Slip.js really is a clever tool for the creation of touch-sortable or – more general – editable lists in web apps.

January 23 2014


Styling SVG with CSS: Capabilities and Limitations


SVG is the new standard for vector images in the browser. Vector editors such as Adobe Illustrator allow to directly save to that format and modern browsers have no problems to properly display SVG. As SVG graphics consist of markup, they can be created and maintained using your favorite text editor, just as you do with your HTML. It is even possible to style SVG with CSS, though you’ll need to know about quite a few differences in doing so, compared to styling HTML.

January 06 2014


Summernote: Powerful WYSIWYG-Editor for Bootstrap 3


Today I stumbled upon a fresh JavaScript, which I think you will like, too. This little tool helps you integrate a feature-rich WYSIWYG editor into your next Bootstrap project. And it is entirely free. Summernote – say hi – is under ambitious development and bound to reach version 1 in the course of the next few weeks. You need not wait, though, as Summernote is perfectly ready for prime time just yet.

October 11 2013


Google Web Designer: No Less than No More Flash in Banner Ads


Google’s newest free project carries a promising title. With a name like that, what would you expect? Will it be a competitor to Dreamweaver or any other classical HTML editor? Well, theoretically you could create HTML content of any purpose. Practically you’ll rather sooner than later return to your former solution. Yet, if you’re into creating banner ad campaigns, Google Web Designer is the place to go.

October 10 2013


IcoMoon, Fontello and Best of Icon Fonts


Icons are the best invention since canned beer, at least designers might agree. They are definitely on the rise in popularity. Mobile devices with their comparably small screens boost the use of icons as natural choices for navigation menus in modern web design. New icon sets get created by the hour. Especially mobile design is the trigger for a new breed of icons. These are no longer implemented in the form of individual PNGs or so-called sprites. Icon’s successor is the icon font. Iconfonts have many advantages with the biggest being their free scalability to any size, while at the same time reducing server requests to an absolute minimum. The downside of icon fonts is, that in most cases you will not need the whole font set or – even worse – need icons from different font sets. Font generators have come to deal with both of these problems. Today we’ll take a look at three of the best generators the web has to offer…

August 01 2013


Best of July 2013: 30+ Brand-New HTML/PSD Themes & UI Elements


This is the second compilation in our monthly series of brand-new HTML/PSD themes and UI elements. All the works exposed here are fresh resources from the month of July 2013. You will find another big set of ready to use themes, templates and elements for the web as well as completely editable files for your favorite image or vector editor. We got something for everybody…

July 19 2013


Tablet Web Design Best Practices: Free Ebook Offers Loads of Useful Tips


Who would dare to not call the guys and girls of Canadian Mobify experts in mobile web design? They actually are. Though not everyone will find their cloud-based design concepts appealing. A short while ago the people at Mobify decided to publish an ebook on the best practices in tablet-focused web design. They titled the 25-pager "Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets". Even more amazing, they give it away for free…

July 09 2013


HTML5up: 14 Totally Free and Modern Templates Made With HTML5



If you happen to be looking for ready-made website-templates you need not search for long. Google brings up a bunch of sites, here at Noupe we don’t abandon you on that search either. When it comes to Google findings, chances are, you will, in most cases, not really be satisfied by the available quality of code or layout. In these case, read: in any case, you should visit the new service HTML5up. What you will find here are really elegant and modern templates for contemporary websites based entirely on HTML5 and CSS3, with a bit of JavaScript, obviously. These templates are not only entirely beautiful, they are also completely free.

July 02 2013


Create The Future: Common Techniques in Responsive Web Design


In this article, I’ll dive into some of the most common practices for building responsive site layouts and experiences. I’ll describe the emerging and available techniques for site layouts that flexibly resize based on screen real estate (referred to as “fluid grids”) so as to ensure that users get complete experiences across whatever screen size they are using. Additionally, I’ll show how to present rich media, especially images, and how developers can ensure that visitors on small-screen devices do not incur additional bandwidth costs for high-quality media.

June 28 2013


10 Killer Resources To Rock Your Next Bootstrap Project



Bootstrap is the young star that is getting all the attention lately. Released in August of 2011, even Twitter may not have known how big it would get. As of June 2013, it is still the most popular GitHub development project with over 52k stars and over 16k forks. Bootstrap can be mind-blowing when you consider how easily it incorporates so many complex things on a website. But can it get improved upon? Are there tools to make it even more astounding? Yes. Here’s 10 resources to help you on your Bootstrap journey.

June 26 2013


From 4-Inch Phones to 40-Inch TVs: Designing Responsive Websites


It’s worth taking a step back, to think through your site’s experience and understand whether the device with which a user accesses your site changes the user’s expectations of the site’s functionality. Is the user checking your site for quick updates with her cellphone while she’s on the go? Is he sitting down, 10 feet away from a large TV screen, looking to immerse himself in a relatively passive consumption experience of rich content, videos and games? Are other users sitting down at their PCs, looking to get the most from your site content? Most of all, how do these expectations affect the site layout and functionality that you provide at those corresponding screen sizes?

June 05 2013


Freebie of the Day: Spice Up Your Website With Live HTML5 Device Mockups


This is great, I promise. We know Finland for a lot of things, rubber boots for instance or - ehm - Helsinki. Angelos Arnis and Tomi Hiltunen want to add to this ample variety. They just published a set of device mockups, all in PNG and CSS, that you can actually bring to life with real content. You've got a web app for mobile clients you want to show on your website? Not very impressive, unless you present it inside the frames of its mobile boundaries. That's what Arnis and Hiltunen have built...

May 30 2013


Fries: Free Framework for Developing Android Apps Using HTML, CSS and JavaScript


Fries by Jaune Sarmiento just reached version number 1.0. The project offers a framework for the development of web apps in the look and feel of native Android apps. If you are familiar with Android’s UI from version 4 on, you will definitely know your ways around, once you get a hold of Fries. In its current iteration, Fries is optimized to cooperate with PhoneGap, thus letting you build native Android experiences.

May 10 2013


Glimpse, a Chrome Extension for Mobile Web Developers


Mobile web development is lots more demanding than classical desktop design, because it extends the stage to screen sizes you usually do not have at hand while developing. Of course you might be able to do proper testing on target devices, but doing so on every step of the way would blow up the efforts unbearably. Glimpse, a Chrome extension, does especially come in handy in those frequently occurring cases where you just tweaked that tiny bit and want to see if it totally breaks things or not.

May 03 2013


No Matter of Luck: What To Consider In Mobile App Development [Infographic]


There are gazillions of mobile apps out there. If you are looking for a specific use case or - not - you won't see any shortage in what you will be able to find. Thus, releasing a mobile app is not without risks. You need to create something outstanding to attract the users. But how do you know? How can you improve? Sure, you can always wait for shit storms to wipe away your Facebook page or you can rely on these nice one-star-ratings in app stores. Did you know, that 60 % of all apps in Apple's App Store have not once been downloaded. If I were you, I'd try to find alternatives to hoping and waiting (and failing) ;-)

April 14 2013


Leaflet: Interactive Maps with JavaScript and OpenStreetMap

leaflet-w550 What crosses your mind first, when you think about embedding maps into a website? I am pretty sure the answer is: Google Maps. And this is perfectly understable as the easy to use JavaScript API allows for simple and flexible addition of custom content such as markers and overlays to the maps. The free alternative OpenStreetMap has nothing similar to offer and thus is often turned down as the valid choice it could otherwise be. There is hope, though. The JavaScript library Leaflet allows for the addition of lots of Google Maps features to maps based on the Open Source project OpenStreetMap.

August 22 2012


High Quality Responsive and Retina Display Ready WordPress Themes


Mobile web traffic is growing at a rapid rate. According to The Next Web, mobile web traffic has risen as much as 35% since July 2011. What will that mean for 2013 and 2014? We’re sure you can guess. The web is propelling forward at warp speed, such that the weight sitting upon the shoulders of web designers and developers has never been greater. Mobile web consumers expect to view web content on the device of their choosing without straining their eyes — and rightfully so.

Whether you’re an online store, real estate firm, antique shop, restaurant or university it’s time to start thinking about how you can revamp your site to be as user-friendly as possible. We’ll stress the word “revamp” as it’s not about jamming your current content structure into a responsive design but rather thinking outside the box to determine how you can best serve information to consumers in a way that makes sense in a responsive environment. That may mean focus groups, market research and a lot of trial and error, but in the end it will be worth it.

Also keep in mind that smartphones have become quite accessible to those with hearing and/or vision impairments, and guess what? They’re your web consumers, too. Wouldn’t it be nice to give them a site they could easily navigate without having to zoom-in over and over, possibly getting lost in the process?

As if that wasn’t enough to think about, there’s one more thing to keep in mind — the Retina display. Just as HD televisions became the norm over time, the Retina display is following in its footsteps. The better of an image we see on our desktops and laptops the better of an image we’ll want to see on our smartphones. Ask yourself this: What happens when the current Retina display on an iOS device gets two times better? Five times better? Your slightly-blurred image will really be in rough shape then.

So let’s get to it! After viewing hundreds of responsive and Retina display ready WordPress themes on our MacBook Pro’s, iPad’s and iPhone’s we’ve compiled a list of 50 for you to check out. The majority are business and portfolio themes with a few e-commerce mixed in, but with a little tweaking these could suit just about any industry or profession.

Responsive Retina Display Ready WordPress Themes

Appster ($40) | Business and Portfolio Theme by Prothemeus


Info | Demo

Camp ($55) | eCommerce Theme by Prothemeus


Info | Demo

Entity ($40) | Portfolio Theme by SwiftPSD


Info | Demo

Fresco ($45) | Portfolio Theme by Contempo


Info | Demo

Kingdom ($40) | Portfolio Theme by SwiftPSD


Info | Demo

Lattice ($45) | Portfolio Theme by Contempo


Info | Demo

OrganicWeb ($40) | Environmental Theme by Colibri Interactive


Info | Demo

Outreach ($40) | Charity/Nonprofit Theme by Design Crumbs


Info | Demo

SneakPeek ($40) | Portfolio Theme by Add Two More


Info | Demo

Stacker ($30) | Portfolio Theme by xRicrdx


Info | Demo

Responsive WordPress Themes

Agenci ($40) | Creative Agency Theme by Purty Pixels


Info | Demo

AREA53 ($50) | Creative Agency/Portfolio Theme by AREA53


Info | Demo

Aware ($45) | Portfolio Theme by Andre Gagnon


Info | Demo

Bruan ($40) | Creative Agency/Portfolio Theme by Jonathan Atkinson


Info | Demo

CleanR ($35) | Creative Agency Theme by Zen Themes


Info | Demo

Contrast ($40) | Creative Agency Theme by First Base Design


Info | Demo

Cotton Candy ($40)| Portfolio Theme by Pixelous


Info | Demo

Cubano ($40) | Portfolio Theme by MushinDesign


Info | Demo

Desat ($40) | Portfolio Theme by Themnific


Info | Demo

Float ($35) | Blog Theme by myTheme


Info | Demo

Fluid ($59) | Creative Agency/Portfolio Theme by Theme Fit


Info | Demo

Gigawatt eCommerce ($55) | eCommerce Theme by Obox Themes

Gigawatt eCommerce

Info | Demo

Hero ($49) | Portfolio Theme by Theme Trust


Info | Demo

Jigsaw ($45) | Creative Agency Theme by Adaptive Themes


Info | Demo

Magic Space ($40) | Business Theme by HawkTheme

Magic Space

Info | Demo

Kinetico ($55) | eCommerce Theme by XThemes


Info | Demo

Knead ($35) | Portfolio Theme by Obox Themes


Info | Demo

KnowHow ($45) | Knowledge Base/Wiki Theme by Chris Mooney


Info | Demo

Mindful ($49) | Creative Agency Theme by Theme Trust


Info | Demo

Plug ($40)| Creative Agency/Business Theme by jdsans


Info | Demo

Radius | Creative Agency Theme by Okay Themes


Info | Demo

Reach ($40) | Creative Agency/Portfolio Theme by EugeneO


Info | Demo

Reason ($45) | Portfolio Theme by MDNW


Info | Demo

Responser ($45) | Portfolio Theme by 70kilo


Info | Demo

Reveal ($49) | Portfolio Theme by Theme Trust


Info | Demo

Rime ($50)| Creative Agency/Portfolio Theme by imaginem


Info | Demo

Ruskin ($40) | Creative Agency Theme by United Themes


Info | Demo

Shelflife ($70) | eCommerce Theme by Woo Themes


Info | Demo

Shiny ($45) | Creative Agency/Portfolio Theme by MC Studios


Info | Demo

Simflex ($40) | Blog/Portfolio Theme by Pablo Fierro


Info | Demo

Size Mttrs ($40) | Portfolio Theme by HappyCom


Info | Demo

Slick ($45) | Creative Agency/Portfolio Theme by Mattia Viviani


Info | Demo

SmartStart ($45) | Creative Agency Theme by Samuli Saarinen


Info | Demo

Spacing ($45) | Creative Agency/Portfolio Theme by Tauris


Info | Demo

Stilo ($40) | Portfolio Theme by Purty Pixels


Info | Demo

Submarine ($45) | Portfolio Theme by Pressly Themes


Info | Demo

Travel ($40) | Fullscreen Travel Theme by UIUXUX Studio


Info | Demo

Uber ($49) | Creative Agency Theme by Theme Trust


Info | Demo

Viewport ($50) | Blog Theme by ThemeZilla


Info | Demo

William ($40)| Portfolio Theme by nistic


Info | Demo

Wrapping Up

Change is never easy. We’re with you on that. But this is one change you should consider making for your website and the sites of your clients. Granted, there will be some exceptions — if you’re working in IT with complex networking software maybe you don’t need a responsive site — but the rest of us likely fall within the consumer web market and would be more than fine on a responsive platform. It will mean rethinking your content strategy, including marketing and adspace, but as the saying goes — “content is king” — and it should be your top priority to focus on delivering it well to as wide an audience as you can.

Helpful Resources


December 24 2011


Advantages of Converting Your Blog into an App and How To Do It

Mobile Media is trending for those who live on Internet Marketing. If you create a website but forget to test it on various mobile platforms then you simply ignored a huge chunk of your visitors. Users using mobile phones to visit various websites and catch up with the latest updates online has resulted in a new business focus which runs solely on Mobile compatibility of websites. An industry that grew simultaneously along with the increased mobile traffic was the App development industry. Today, there is an app for almost everything. I mean you might even stumble on an app that helps you search for dentists in your city. Crazy!

This discussion will focus more on the advantages of having a mobile app for your blog. Later, I will introduce you to few online services that help you generate a mobile app for your blog. Remember, an app for your blog is important because you cannot afford to scare away your blog’s visitor just by pushing a crappy looking mobile design of your blog.

Keeps the readers engrossed

I agree that most readers use RSS feeds, but your updates tend to get lost in between the multiple feed updates. This is when a dedicated app for your blog will keep the readers engaged with your blog only. One can design an app which pushes updates to a reader’s mobile after every new blog update which multiplies the user engagement level with that app.

Increase blog’s visibility

All that you have to do is generate engaging content and then let your app do the rest for you. Options like recommend the app to a friend increases the visibility of your blog if current users start recommending the app to others. This will increase your blog’s visibility among those readers who will stick with you for long.

Another added feature of having an app comes in when your app is listed in various app worlds (like that of Apple, Android and BlackBerry). Users usually tend to search for new apps in such app worlds and if your app is listed then be rest assured that it will be downloaded by many. Remember, after the download it is good content that will prevent the users from uninstalling the app. So, make sure you generate great content.

Give readers the “special” feeling

There are zillions of blogs and soon there will be an equivalent number of apps. This is when you get to do something different in order to keep the readers engaged. How about you give away special content only for those who use your app? Push content which will be visible only to readers who use your app. This will keep your readers engrossed and make them feel special. Remember to make that special content actually special.

Recognize readers for special suggestions

Request reader feedback to improve your blog’s app and, if possible, implement those suggestions. After successful implementation push a message to all the users of the app which will recognize the special contribution of one user. It will surely make the user feel important and increase your credibility in the community.

It is wonderful to see what we can do if we have an app for our mobile readers. It is just a matter of time before having an app for a blog will become as normal as having a custom theme designed for a blog. Just a matter of time. You can choose to flow with the tide or get ahead of it.

Now, let me list a few services that will help you generate an app for your blog. We haven’t tested them all but we can (hopefully) rely on their words. Let us know your view in comments below.

App Maker for Android

I thought that I should start with something android specific as it is the best known mobile platform (or not?) at present. Also, I don’t want to start the Apple vs Android (and if possible add “vs BlackBerry”) war here so please keep such comments away from this article. Coming back to what we were discussing. App Maker for Android creates an Android App for free within minutes. Try them and have fun.


Mippin takes your app to the next level and creates one for Android as well as Apple iPhone. Mippin is smart enough to keep your app in sync on both the platforms and uses HTML5 in order to produce an app that fits with almost all platforms.


Conduit happens to be one of the most famous services to create mobile apps for various platforms. Conduit creates an app which is compatible with almost every mobile platform and the reviews backing them seem to be very satisfactory.


AppsGeyser seems to take the mobile app creation business to a whole new level. After you are done creating your app, AppsGeyser will help you get traffic to your app, help you engage your audience and monetize your blog’s app for the best possible returns. Money well spent.

Shout Em

Shout Em seems to be the big dog in the market. With strong reviews from the likes of Mashable and The Next Web, Shout Em is rolling high on confidence. Their app creation process helps you create apps for iPhone and Android platforms. Also, they will help you push the apps into the respective market places which is surely a plus.


GENWI is another big player in the market with reviews from the likes of Forbes. GENWI might charge you for specific services but the value is amazing. GENWI gives you apps for iPad, iPhone and Android. The HTML5 based apps are compatible with almost all platforms and will surely attract the mobile user.


Another famous (and well respected) app developer is Zubibu. They too support the iPhone and Android platforms. Zubibu smartly provides services that not just help you create an app but also analyze the results and improve on them. Zubibu is one of the very few services out their that provide mobile e-commerce solutions which will be an advantage for bloggers who tend create an e-commerce platform.


TapLynx follows a different approach towards the app development market. TapLynx gives away an SDK which can be used by bloggers to create apps in no time. The SDK comes loaded with multiple features that can be used by bloggers to enhance their TapLynx app which will be compatible with iPhone and Android based phones. Later on TapLynx will help you monetize your apps for better returns.

Mother App

Mother App is one of the few in this list that provide a custom app development which helps them focus on clients and their minute needs. Mother App has been in business for over 5 years and they have some really satisfied clients. You will have to get in touch with them in order to get a quote and understand how they will satisfy your requirements.

Phone Gap:Build

Phone Gap is another sleek service that keeps aside SDKs to create apps. They provide the blogger with the liberty to create apps using HTML, CSS and JavaScript. Design your own simple looking app and upload it to Phone Gap. The service will return you with a working app that will work with iPhone, Android, BlackBerry (finally!) and lot of the other platforms. Upload them to the respective app worlds and you are ready to roll.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...