New Tool: Responsive Image Breakpoints Generator

Responsive Image Breakpoints Generator

A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.

For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.

A Talk About Nothing

Lena Reinhard
Lena Reinhard

You may have watched this elsewhere, but I found it impressive enough to add here as well. Its a very fine talk about the tech industry by Lena Reinhard at the first ever .concat() web development conference on March 7th 2015.

Here’s the abstract of the talk.

And, yes, literally nothing. Together we’ll take a look behind the curtains of reality and explore some of the underlying rules that shape our existence. We will dig into ancient philosophy, the history and today’s status physics and maths, look into the origins of computing, programming and analyse the way we develop software today. We’ll see how nothing influences us, how it shapes our behaviour every day and how nothing can help us grow – in our professions and, even more, as humans.

“Nothing really matters,”, Freddie Mercury wrote in a song that was released 40 years ago. I want to show you how right he is.

The talk is nominated for the “Conference Talk of the Year” in the .net awards 2015. Listen to it carefully as she builds her message and listen all the way to the end.

Useful Links: Usability, Text resize, Twitter IPO, Siri

The ABC’s of Usability, Part 9 is at Usabilla. They are defining terms in a move to teach you the basics.

Support a user’s ability to resize text. This is from Simply Accessible. One thing it talks about is the uselessness of text resize widgets.

Twitter loses money, as many have reported. Yet it’s going to try to raise a billion dollars in an IPO. In a lot of ways that doesn’t make sense, but I recall Amazon losing money for many years before it started turning a profit.

The voice talent behind Siri has spoken out. Her name is Susan Bennett. She’s going public now in an effort to make sure the right person is recognized for the famous voice.

Htaccess Magic: 4 Tips for a Better Website

 Congratulations! You have a website! Now that you have one, you also have the responsibility of taking care of one. Website optimization is not always easy, but it can be with basic knowledge of how they work. One tool you can use to optimize your website is an .htaccess file.

Web servers that use Apache HTTP Server to publish websites have an override feature that allows web hosting users, even ones with shared hosting accounts, to change some web server settings on a local level. If the host has the AllowOverride setting enabled on the web server, the user can use .htaccess files to enable any desired Apache directives. The following are four directive types that can bring a little magic to your website.

1. Custom error docs

When a user mistypes a URL to a page on your site or visits one for a page that no longer exists, one of two things will happen. Either the user will end up at a plain white page with the words “404 Error. File Not Found” or at an error page created by your web host, promoting their services. Neither is good for your services or your site.

By creating custom error documents, you can let users know they did actually make it to your site but might have made a wrong turn. You can also use it to suggest a better starting point for them to navigate through your site.

To create custom error docs, the first step is easy. Make normal HTML files for each error you want to include. You can find a list of Apache error codes on the web.

The next step is to create a file called .htaccess and place it in the root directory of your website – the directory that holds your HTML files. In the .htaccess file, place the error code redirects:

ErrorDocument 500 http://your-domain.tld/docs/500error.html
ErrorDocument 404 http://your-domain.tld/docs/404error.html
ErrorDocument 403 http://your-domain.tld/docs/403error.html
ErrorDocument 401 /local/path/401error.html

As you see, you can use a local path or full URL to each error HTML file that you have created.

2. Rewrite rules

You can use rewrite rules for a wide variety of purposes, the most common purpose is for search engine optimization. Dynamic web apps use very long URLs, and you can use Apache’s mod_rewrite engine to make them shorter. If you are running a content management system like WordPress or Joomla, it will likely add the correct rewrite rules to your .htaccess file for you. If, however, you are creating your own web app, you should also create some rewrite rules.

Rewrite rules follow a simple pattern:

RewriteRule Pattern Substitution [Flag]

For example, a simple rewrite rule is:

RewriteRule ^killer-whales.html$ orcas.html

In this example, people who access the page “killer-whales.html” will be redirected to the actual page: “orcas.html”. Apache also offers many more rewrite options you can try to make your site easier to access.

3. Restrict access

Htaccess files can also have security benefits. One example is that you can restrict access to a particular file or directory. For example, to deny access to a single IP address, you would enter:

Order Allow,Deny
Deny from 155.55.555.5.
Allow from all

Anyone attempting to access your site from that IP address will be denied. More information about mod_access is available in the Apache documentation.

4. Allow or Prevent Directory Browsing

When an index file is not present in a directory, Apache will display the contents of the directory. Many file repositories will use something like this by default to make it easy for people to browse the files. If, however, you do not want people to browse the files in a directory, you can easily disable browsing.

Options All -Indexes

On the other hand, if your web host has disabled browsing but you want it enabled, you do so with this directive:

Options All +Indexes

Taking Control

The whole point of .htaccess is to give the user some limited control over the server without affecting the other users who share it. This is only possible if your web host has enabled the “AllowOverride” setting in the web server’s configuration. The best hosting providers usually do, but even if yours does not, you may be able to convince them to make special arrangements for you. It will make your website better and make your job as web administrator easier.

Guest Author Tavis J. Hampton is the author of the upcoming book KDE for the Graphical User. You can find more of his writing at TavisOnline.com.

Review: Moodle for Dummies

Moodle For Dummies (For Dummies (Computer/Tech), written by Radana Dvorak is aimed at the institutional user who is required to use Moodle instead of one of the education management systems like Blackboard. It is not meant for the individual user who might want to set up Moodle on his or her own server.

The book consists of screen by screen and menu by menu explanations of Moodle and its capabilities. It covers creating and managing courses, adding modules to courses, administering courses, setting up questions, grading, and more. There are explanations of how to add chat, blogs, and wikis to a course, and of using databases to share material with your students. You can learn how to set up for different languages, set security, and change the appearance of your course. There’s a chapter on getting reports and statistics and viewing your logs.

The last chapter talks about ways to keep your learners involved, but the suggestions are pretty mundane.

There’s nothing very exciting about Moodle for Dummies, but if you need to learn to use Moodle, this book will get you there.

Summary: A utilitarian explanation of absolutely everything you can do with Moodle.

A review by Virginia DeBolt of Moodle for Dummies (rating: 4 stars)

BlueGriffon

A new web standards compliant WYSIWYG web editor is now available at bluegriffon.org. Features include that it’s open source and free, plus it does:

  • HTML5 – including forms, video and audio
  • CSS3 – including D Transforms, Transitions, Shadows, Linear/Radial Gradients and Repeating Gradients, Border Images, Columns, Flex Box Model
  • SVG
  • MathML
  • a user interface to work with some important ARIA attributes

It’s based on the Gecko rendering engine and works in Linux, Mac and Windows. Although the software is free, they are selling add ons for a few Euros each. The MathML, for example, is an add on.

You can, of course, toggle between code and design views.

A hat tip to @mollydotcom who tweeted the news.

Proud of @glazou – he made a very sweet WYSIWYG editor. x-platform, HTML5, CSS3, SVG, MathML – very cool! http://t.co/qnoV3CeWed May 11 11:54:36 via Tweet Button

How to Find the Right Online Shopping Cart for You

coins

An efficient and user-friendly online shopping cart is an essential tool for any business or website owner involved in e-commerce product sales. But with so many online shopping carts available, it can be hard to decide which cart application will be up to the task at hand.

To begin with, there is the issue of selecting a free product or opting for one that has service charges. Naturally, everyone would choose the free option if they could, but there are occasions when free software may not possess the level of sophistication required. If this is the case, then purchasing a licensed product may be necessary, but then which one will be the right shopping cart for your transactional requirements?

Free Shopping Carts versus Paid E-Commerce Platforms

There are many well designed and functional free online shopping carts available. Most of these are open-source and operate under a GPL (General Public License). A lot of high-end shopping cart designers also produce free versions for smaller businesses or individual users.

Businesses or websites that have a larger product base or high sale yield may need to opt for a more substantial e-commerce platform. This will be a commercial licensed product that has advanced features and greater transactional control. Some of these platforms will charge a reoccurring monthly fee, while others may simply charge a one-off license payment.

The first decision should be whether the online business or product-based website can justify the price of a fully-fledged e-commerce platform, or will a good free GPL product suffice? This depends on stock levels, projected sales and expected consumer interaction. Once this decision has been made, it is then time to evaluate available products that meet the necessary criteria.

Online Shopping Carts: The Essential Features

In order to clarify things, it is probably best to initially outline a few necessary features that every online shopping cart and e-commerce platform should possess. This will help eliminate some feature-deficient products and help focus on only those products that meet, or surpass, the primary criteria.

  • Catalogue Support – The ability to arrange products into accessible sections
  • Customer Database – Keep track of customer information
  • Order Management – Real-time status of current orders and refund organization
  • Payment Processing – Wide range of commercially acceptable payment options
  • Shipping & Handling – Email notification of orders and delivery fee calculation
  • Statistical Analysis – Analyze orders, sales and conversion rates
  • Multi-Lingual Capability – Translate into other languages
  • Localization – Accept foreign currency and calculate taxes
  • SEO Consideration – URL rewriting and provision for sitemap creation
  • Security Measures – Secure logins. SSL compatible.
  • Efficient Administration – User management and site maintenance
  • Optional Customization – Advert insertion and featured product options

These features should come as standard, even in free versions. The more exceptional e-commerce platforms will come incorporated with more advanced features. Many of these full-feature platforms may charge for their product.

Advanced Features

  • Additional Levels of Security – PC DSS (Payment Application Data Security Standard) compliant. This is a regulation enforced by the PCI SSC (Payment Card Industry Security Standards Council). You can find more information about these regulations and standards at the official PCI DSS website.
  • Gift Card and Coupon Facility – Customers can purchase physical cards and use coupon codes
  • Store Credit Available – Issue store credit for refunds etc.
  • Rewards Systems – Ability to encourage return custom by awarding customers with redeemable loyalty points
  • Customer Subscription – Allow customers to subscribe to newsletters, promotional emails etc.
  • Advanced Analytics – Geo-location statistics, integration with Google Analytics.
  • Social Media Compliant – Ready for integration with your favorite social media sites
  • Advanced Customer Assistance – Breadcrumb trails and one-click bookmarking features

This is not an exhaustible list. Nor should a product be penalized if it happens to neglect one or two advance features, but then excels in most of the others. These are simply guidelines to help weed out the lower-quality shopping carts and e-commerce platforms.

Recommended Shopping Carts and E-Commerce Platforms

Now that the required and desired features have been highlighted, here are a few products that readily possess the above features and functions. (Note: Some of the free versions may not possess advanced features).

Shop Around to Find Your Ideal Cart

The selections above are an ideal place to start looking for an online shopping cart. But there are many alternative options. For anyone that has never used e-commerce software, it may be prudent to start with one of the free platforms and see what features and functions are preferred.

Every platform will have its own user interface and different modules and sometimes finding the best online shopping cart is a matter of locating a respectable product that you feel comfortable with. It is true that some versions will require more interaction and individual development while others will be more novice-friendly and possess almost one-click functionality. Finding a platform that you can use with ease is a large part of the selection process.

Don’t be afraid to try before you buy. Many paid versions will offer limited-time trials and even if that option does not appear available, in many cases the designers will gladly allow you a free test if you contact them directly.

Finding the right e-commerce platform will optimize you online business, help you to organize your storefronts, generate return business, and efficiently process and manage sales and transactions.

About the Author: This guest post is contributed by Roko Nastic of WebmasterFormat.com, a website focused on delivering advice and actionable tips on writing, website promotion techniques, best web hosts and the latest trends in web development technologies.