    
|
Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that's the user's preference) when that link is clicked.
This used to be "invalid" in HTML (maybe only XHTML?) but people used it anyway since it worked. It's now perfectly valid in HTML5. But are there good reasons to do so?
Like it or not, target="_blank" is a change in default behavior. Links opening within the same page is the default behavior (as if the link had target="_self" on it).
Perhaps you've developed a personal taste for opening all links in new windows/tabs. That's wonderful for you, but it is safe to assume most users are most comfortable with the default behavior. And thus less comfortable with your forcing of a different behavior.
If it's an internal tool just for you, do whatever you want. If other people use the site, leave it be.
It is also worth noting that users can force a link to open in a new window/tab by [Meta Key]-clicking a link. That means both behaviors are available to them for links. That also means that if you like opening new tabs, you can, and you don't have to impart that behavior on anyone else.
By using target="_blank", only that behavior is available.
Branding branding branding! Eyeballs baby. Metrics. ENGAGEMENT.
Other sites should have normal-style links, but our site is special. Our site is more important and should never be left behind.
We'll have "internal" links (links that point to our own site) behave normally, but "external" links (links that point to other sites) open in a new window/tab.
This is related to the above two reasons, only perhaps worse. You understand that normal style links are ideal, but if that means a user leaves your site, you're willing to break that ideal.
I've heard from a lot of people that this is "a convention." As in the way it's supposed to be done. It's not.
Or any other type of non-web resource. Why should that be so different? You can still use the back button to come back from it. If you want to help users download it without actually opening it, that's a worthy UX goal but can be approached differently. For starters, using the download attribute.
I get the "I don't want to pick this fight" thing, since we only have so much energy. But it's weird this has to be a fight at all. If they don't trust you with this, what do they trust you about?
I might approach it like this:
The default behavior is for links to open normally. There are some reasons why we might want to break that behavior, and we can go over those, but for most links we don't. We don't want to force our desires on users and potentially frustrate them for such a small thing. We want our users to feel good about us.
And hopefully your calm and educated approach will help your client feel good about you.
Infinite scrolling is tricky. It can be good UX in one sense because it can deliver content without interruption. It can be bad UX if not handled well. Coming "back" to an infinite scroll page should take you to where you left off in most cases. Handling that tricky problem is your job. Just forcing links to open in new tabs so that problem never comes up is avoiding your job.
For instance: music, video, a podcast...
The user started it. Moving pages would stop it. At that point, either have links open in new tabs or ask them if they are sure they want to leave the page. At that point you are trying to do right by them and have them not leave their place.
We've covered this idea before here. If the media is playing, handle links in a special way. When the media isn't playing, links are in their normal state.
Although as I say that, I check YouTube, and they don't bug you about it2 when changing videos.
Perhaps a user is writing something. Or arranging something. Doing any kind of work. Clicking a link and changing pages can be a heart-pounding, awful moment on the web. Did I just lose everything I was doing?
Even if you do something to ensure they don't lose that work, putting someone through that panic may as well be avoided.
I think of CodePen where users are often writing code. We do several things to help:
Checkout is another case here. Of course you don't want to lose customers during their checkout process. A link to something like "shipping information" should be openable without them losing their place in checkout.
"Reading an article", in my opinion, doesn't qualify here. Since it's (generally) so easy to get back to (most browsers even scroll down to where you were), there is no risk of real loss, and readers are really skimmers anyway.
I'm building an email where people in Outlook Kangaroo 2009 Enterprise Edition need to open it but links need to have target="blank" on them otherwise they open in the sidebar viewing panel and ...
Fine.
In case you have to...
Forcing user to verify they want to leave page:
window.onbeforeunload = function() {
return "Two buttons will be below this message asking if user wants to stay on this page or leave.";
}I realize I've been pretty opinionated here. This is one of those topics where everyone has an opinion. Feel free to share those opinions of course but lets keep things cool and focus on situations, solutions, and data if we can.
1 <form>s can have target="_blank" too. I would think it's a more uncommon use case, but the same type of thinking in this article would hold true.
2 If you choose another video you go right to it. But in that case I wonder if that was a UX choice or an advertising choice. If you're half-way through a video, click to another video (say by accident) then click the back button right away, your place is lost. Perhaps having as little friction transitioning from video to video is important for them, but it would be nice if they offered a bit of help there. Perhaps a small arrow beneath the timeline that was like a "You've watched this video this far before" link.
When to use target=”_blank” is a post from CSS-Tricks
]]>Anthony T. Browder is an author, publisher, cultural historian, artist, and an educational consultant. He is a graduate of Howard University’s College of Fine Arts and has lectured extensively throughout the United States, Africa, Caribbean, Mexico, Japan and Europe, on issues related to African and African American History and Culture.
Mr. Browder is the founder and director of IKG Cultural Resources and has devoted 33 years researching ancient Egyptian history, science, philosophy and culture.
He has traveled to Egypt 49 times since 1980 and is currently director of the ASA Restoration Projectwhich is funding the excavation and restoration of the 25th dynasty tomb of Karakhamun in Luxor, Egypt.
Browder is the first African American to fund and coordinate an archeological dig in Egypt and has lead five archeological missions to Egypt since 2009. His archeological work in Egypt has been acknowledged by former President Mohamed Morsi, the Minister of Tourism and various Ministers of the Supreme Council of Antiquities.
Mr. Browder’s three decades of study have lead him to the conclusion that ancient Africans were the architects of civilization and developed the rudiments of what has become the scientific, religious, and philosophical backbone of mankind. It is from this framework that IKG has concentrated its research and disseminated its findings.
Through IKG, Mr. Browder sponsors lectures, seminars, cultural field trips of Washington, D.C., publishes his research, and has conducted study tours to Egypt, West Africa, South Africa and Mexico since 1987. He has been featured in 5 documentaries and has produced dozens of DVD’s of his numerous lectures.
He is the author of six publications (including the best sellers, From the Browder File and Nile Valley Contributions to Civilization) and the co-author of four publications, including two written with his daughter, Atlantis Tye.
All of Mr. Browder’s publications, DVD’s and documentaries are currently being used in classrooms around the world.
“Tony” describes himself as a chronicler of facts and information relative to the positive portrayal of the worldwide African experience.
]]>From phages to phylogenies, bacteria to the biosphere, molecules to mice, and everything in between, The Helix covers current happenings in the Department of Biological Sciences at UMBC. Initially, a new spotlight on a project in our research labs will be posted biweekly. Reports on department-sponsored seminars given by outside scientists will be posted periodically.
Science works best when results are shared, supported, and critiqued in a community. The goal of The Helix is to promote communication across labs, perhaps facilitating heretofore unconsidered collaborations. A second goal is to inform those outside the department about all the amazing things happening here. Questions and comments are strongly encouraged. Perhaps all a research project needs is the perspective of an outsider to make its next leap forward.
By communicating up-to-date information about projects online, there is no excuse for not knowing what's going on in the department. Students and faculty can peruse the posts on their own time and follow up with in-house researchers and/or outside speakers if a topic sparks their interest.
If you would like your project to be featured in The Helix, please contact me at sarah54@umbc.edu. I will visit your lab to conduct an interview, and you will have the chance to review my report before it is posted. I created The Helix to help the department communicate better about current research, and it will also help me reach my career goal of becoming a science writer/journalist.
Please enjoy, share with others, and contribute to the conversation! The first reporting post should be up soon!
--Sarah Hansen, Biological Sciences graduate student
]]>|
|
[1-8-2014] UMBC has earned the distinction of being named as one of the Top 20 best online programs for the master’s degree in Information Systems, according to U.S. News & World Report.
For the 2014 edition of the Best Online Graduate Computer Information Technology Programs rankings, U.S. News incorporated program ratings by peer institutions. Only regionally accredited schools that met the federal standard of 100 percent online course delivery were evaluated.
For a list of admission requirements, visit U.S. News & World Report. To learn more about applying to graduate programs at UMBC, visit the UMBC Graduate School webpage or the Information Systems webpage, or e-mail onlinems@umbc.edu.
|
|
[1-2-2014] Congratulations to the latest winners of the UMBC Idea Competition!
As part of the Alex. Brown Center for Entrepreneurship's Fall 2013 Idea Competition, student entrepreneurs pitched their ideas to a panel of seasoned entrepreneurs, all UMBC Alum, and a full house at the Sportzone on November 11, 2013. Many of the ideas were developed by students in the College of Engineering and Information Tecnology.
There were two first place winners:
Best Idea: Kryan Richardson (Financial Economics) & Percy Addo (Information Systems) with InSOURCE
Best Presentation: Perry Ogwuche (Computer Science), HACKaTHON
2nd Place: Titus Jones (Graduate Non-Degree), Chatseats
3rd Place: Jennifer Lasbury (Biological Sciences), Speakedu
Other ideas included:
• Markus Proctor (Mechanical Engineering) with BrainCAD, a thought driven CAD program
• Emily Schultheis (Chemical Engineering) trying to make 3D printing available to students
• Mohammed Danish Akbar (Biochemistry and Molecular Biology) with Instaride, a carpooling alternative for students
• Abdulhadi Al Ruwaithi (Emergency Health Services) with the SJ Helmet, an airbag motorcycle helmet
• Cody Kenlak (Information Systems) with Dynamik Beats, a mood & activity driven music player
Stay up-to-date with where these ideas are headed by joining the UMBC Entrepreneurs Facebook and Twitter pages.
]]>
 |
In this tutorial, we will use Magento’s powerful shipping-method code abstraction to create a shipping carrier. We will create two shipping methods that provide a fixed shipping price, allow for free shipping promotions, define logic based on an item’s weight and, finally, make it all configurable in the admin panel.
We will cover the following:
This tutorial assumes that you are familiar with how to create a Magento module. If you are not, please first refer to an earlier tutorial in this series, “The Basics of Creating a Magento Module.” To begin, you will need a Community or Enterprise installation of Magento, either locally or on a server that you are able to access.
The logic we will implement in this tutorial could be client-specific, so we will implement our module as a “local module” and, therefore, create it in app/code/local. Let’s start by creating the following file structure:
app
- code
- local
- SmashingMagazine
- MyCarrier
- Model
- Carrier.php
- etc
- config.xml
- system.xml
- etc
- modules
- SmashingMagazine_MyCarrier.xmlNow we can create SmashingMagazine_MyCarrier.xml:
<?xml version="1.0"?>
<config>
<modules>
<SmashingMagazine_MyCarrier>
<active>true</active>
<codePool>local</codePool>
<depends>
<Mage_Shipping />
</depends>
</SmashingMagazine_MyCarrier>
</modules>
</config>
Notice the dependency on the shipping module. This ensures that our SmashingMagazine MyCarrier module will load after the Mage Shipping module, and it will throw an error if the Mage Shipping module has been disabled.
Before continuing, we should understand the terminology that Magento uses throughout its shipping abstraction. A “carrier” represents a shipping carrier in the sense you would expect (DPD, FedEx, etc.). Each carrier has one or many shipping methods, which contain the carrier code, the carrier title, the method code, the method title, a price to be paid by the customer and a cost of shipping to the retailer (optional).
During the checkout process, Magento creates a shipping-rate “request” object that contains all of the shipping information. The request can be used to determine which rates apply. For example, an “express” shipping method might not apply to orders under $10. All applicable rates are then “appended” to a shipping-rate “result” object, which generates a list of methods for the customer to choose from.
The following list names these concepts defined above, along with their representation as Magento classes:
Mage_Shipping_Model_Rate_Request
Mage_Shipping_Model_Rate_Result
Mage_Shipping_Model_Rate_Result_Method
Mage_Shipping_Model_Carrier_Abstract and implements the interface Mage_Shipping_Model_Carrier_Interface
To create our shipping carrier, we need to extend Mage_Shipping_Model_Carrier_Abstract, implement Mage_Shipping_Model_Carrier_Interface and add the required abstract methods.
The most important method is collectRates. This is the method that receives a shipping request, appends applicable shipping methods and returns a shipping result.
Copy the following code into app/code/local/SmashingMagazine/MyCarrier/Model/Carrier.php:
<?php
class SmashingMagazine_MyCarrier_Model_Carrier
extends Mage_Shipping_Model_Carrier_Abstract
implements Mage_Shipping_Model_Carrier_Interface
{
protected $_code = 'smashingmagazine_mycarrier';
public function collectRates(
Mage_Shipping_Model_Rate_Request $request
)
{
return Mage::getModel('shipping/rate_result');
}
public function getAllowedMethods()
{
return array();
}
}
This is the skeleton for a shipping method class, but it is pretty useless because we have no shipping methods.
Let’s start by hardcoding a method. This method will be called “standard” and have a price of $9.99. For now, we will assume there is no cost to the retailer.
<?php
class SmashingMagazine_MyCarrier_Model_Carrier
extends Mage_Shipping_Model_Carrier_Abstract
implements Mage_Shipping_Model_Carrier_Interface
{
protected $_code = 'smashingmagazine_mycarrier';
public function collectRates(
Mage_Shipping_Model_Rate_Request $request
)
{
$result = Mage::getModel('shipping/rate_result');
/* @var $result Mage_Shipping_Model_Rate_Result */
$result->append($this->_getStandardShippingRate());
return $result;
}
protected function _getStandardShippingRate()
{
$rate = Mage::getModel('shipping/rate_result_method');
/* @var $rate Mage_Shipping_Model_Rate_Result_Method */
$rate->setCarrier($this->_code);
/**
* getConfigData(config_key) returns the configuration value for the
* carriers/[carrier_code]/[config_key]
*/
$rate->setCarrierTitle($this->getConfigData('title'));
$rate->setMethod('standand');
$rate->setMethodTitle('Standard');
$rate->setPrice(4.99);
$rate->setCost(0);
return $rate;
}
public function getAllowedMethods()
{
return array(
'standard' => 'Standard',
);
}
}
Now we are just one step away from a working shipping method — the module configuration file.
The module configuration has the standard structure (as detailed in “The Basics of Creating a Magento Module”). Copy the following into app/code/local/SmashingMagazine/MyCarrier/etc/config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<SmashingMagazine_MyCarrier>
<module>0.0.1</module>
</SmashingMagazine_MyCarrier>
</modules>
<global>
<models>
<smashingmagazine_mycarrier>
<class>SmashingMagazine_MyCarrier_Model</class>
</smashingmagazine_mycarrier>
</models>
</global>
<!-- Default configuration -->
<default>
<carriers>
<smashingmagazine_mycarrier>
<active>1</active>
<!--
This configuration should not be made visible
to the administrator, because it specifies
the model to be used for this carrier.
-->
<model>smashingmagazine_mycarrier/carrier</model>
<!--
The title as referenced in the carrier class
-->
<title>Smashing Magazine Carrier</title>
<!--
The sort order specifies the position that
this carrier appears relative to the other
carriers available in checkout.
-->
<sort_order>10</sort_order>
<!--
Out of the box, Magento offers shipping
carriers the ability to restrict themselves
to specific countries. For this configuration
option, 0 means allow all countries available,
and 1 means allow all countries specified
in the country list that we will add later
in system.xml
-->
<sallowspecific>0</sallowspecific>
</smashingmagazine_mycarrier>
</carriers>
</default>
</config>
This default configuration “registers” the model we have just created as a shipping carrier. As you may know, Magento merges all of its configuration XML together and caches the result (if the cache is enabled). When a customer loads the shipping-method list, Magento loops through all of the carriers in the carriers node of the configuration and loads the shipping methods from the models determined by the “active” carriers.
We should now be able to see our shipping method in the checkout.
We have already specified the default configuration for this module. So, let’s make our module configurable in the admin panel by copying the following into app/code/local/SmashingMagazine/etc/system.xml:
<?xml version="1.0" encoding="UTF-8"?>
<config>
<sections>
<carriers translate="label" module="shipping">
<groups>
<smashingmagazine_mycarrier translate="label">
<label>Smashing Magazine Carrier</label>
<frontend_type>text</frontend_type>
<sort_order>2</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<!--
The following fields are available
to modify in the admin panel.
The values are saved in the
database.
This shipping carrier abstract checks
this value to determine whether
the carrier should be shown.
-->
<active translate="label">
<label>Enabled</label>
<frontend_type>select</frontend_type>
<source_model>adminhtml/system_config_source_yesno</source_model>
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
</active>
<!--
This value can be used to specify a
custom title for our method.
-->
<title translate="label">
<label>Title</label>
<frontend_type>text</frontend_type>
<sort_order>2</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</title>
<!--
The sort order is used in Magento
to determine what order the carrier
will appear in relative to the
other carriers available.
-->
<sort_order translate="label">
<label>Sort Order</label>
<frontend_type>text</frontend_type>
<sort_order>100</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
</sort_order>
<!--
This value is used to specify whether
the carrier is available only for
specific countries or all countries
available in the current Magento
installation.
-->
<sallowspecific translate="label">
<label>Ship to Applicable Countries</label>
<frontend_type>select</frontend_type>
<sort_order>90</sort_order>
<frontend_class>shipping-applicable-country</frontend_class>
<source_model>adminhtml/system_config_source_shipping_allspecificcountries</source_model>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
</sallowspecific>
<!--
If 'specific countries' is chosen
in the previous option, then this field
allows the administrator to specify
which specific countries this carrier
should be available for.
-->
<specificcountry translate="label">
<label>Ship to Specific Countries</label>
<frontend_type>multiselect</frontend_type>
<sort_order>91</sort_order>
<source_model>adminhtml/system_config_source_country</source_model>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
<can_be_empty>1</can_be_empty>
</specificcountry>
</fields>
</smashingmagazine_mycarrier>
</groups>
</carriers>
</sections>
</config>
These fields are visible in the admin panel by navigating to System → Configuration → Shipping Method → Smashing Magazine Carrier.
So far, we have added a standard shipping method for the price of $9.99. However, the customer may wish to pay more to receive their order faster. The following code creates a shipping rate with a higher price and different shipping code:
protected function _getExpressShippingRate()
{
$rate = Mage::getModel('shipping/rate_result_method');
/* @var $rate Mage_Shipping_Model_Rate_Result_Method */
$rate->setCarrier($this->_code);
$rate->setCarrierTitle($this->getConfigData('title'));
$rate->setMethod('express');
$rate->setMethodTitle('Express (Next day)');
$rate->setPrice(12.99);
$rate->setCost(0);
return $rate;
}
To make this shipping rate appear next to the standard rate that we created earlier, we will need to modify the code in the collectRates method to append the new rate. Add the following before the return statement:
$result->append($this->_getExpressShippingRate());
Finally, add the shipping method to the allowed methods array in getAllowedMethods:
public function getAllowedMethods()
{
return array(
'standard' => 'Standard',
'express' => 'Express',
);
}
Many websites offer free shipping when a customer spends over a certain amount or satisfies certain conditions. We need to be able to do the same here. In Magento, you can set up a “Shopping Cart Rule.” With it, you can specify a set of conditions and define actions if those conditions are met; one of those actions is free shipping.
If free shipping is available for a customer, then the request object will populated with is_free_shipping set to 1. We need to check for and handle this possibility in our shipping method. Add the following before the return statement in the collectRates method:
if ($request->getFreeShipping()) {
/**
* If the request has the free shipping flag,
* append a free shipping rate to the result.
*/
$freeShippingRate = $this->_getFreeShippingRate();
$result->append($freeShippingRate);
}
Add the following code to app/code/local/SmashingMagazine/MyCarrier/Model/Carrier.php:
protected function _getFreeShippingRate()
{
$rate = Mage::getModel('shipping/rate_result_method');
/* @var $rate Mage_Shipping_Model_Rate_Result_Method */
$rate->setCarrier($this->_code);
$rate->setCarrierTitle($this->getConfigData('title'));
$rate->setMethod('free_shipping');
$rate->setMethodTitle('Free Shipping (3 - 5 days)');
$rate->setPrice(0);
$rate->setCost(0);
return $rate;
}
Remember to add the method to the allowed methods array:
public function getAllowedMethods()
{
return array(
'standard' => 'Standard',
'express' => 'Express',
'free_shipping' => 'Free Shipping',
);
}
Tracking numbers may be added to shipments through either the admin panel or an API. But to make our shipping methods visible in the admin panel, we will have to overwrite the isTrackingAvailable method in the abstract to return true.
Add the following method to the end of SmashingMagazine_MyCarrier_Model_Carrier.
public function isTrackingAvailable()
{
return true;
}
You should now see the shipping carriers and methods available in the delivery courier drop-down menu when you try to place a shipment in the admin panel.
Earlier, we added a more expensive express shipping method. But heavier items that require complex shipping arrangements might not be available for next-day delivery. We can check for this using the weight attribute of the request object by wrapping the code that appends the shipping method to the shipping result:
// ...
$expressWeightThreshold =
$this->_getConfigData('express_weight_threshold');
$eligibleForExpressDelivery = true;
foreach ($request->getAllItems() as $_item) {
if ($_item->getWeight() > $expressWeightThreshold) {
$eligibleForExpressDelivery = false;
}
}
if ($eligibleForExpressDelivery) {
$result->append($this->_getExpressShippingRate());
}
// ...
Notice that we have added a reference to the configuration. To make this appear in the admin panel, we need to add the following XML to the app/code/local/SmashingMagazine/MyCarrier/etc/system.xml file in the fields node:
<express_weight_threshold translate="label">
<label>Express Weight Threshold</label>
<frontend_type>text</frontend_type>
<sort_order>100</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>0</show_in_store>
</express_weight_threshold>
With a relatively small amount of code, we have been able to define our own shipping logic that integrates with checkout, the admin panel and even the shopping-cart promotions. You can learn much more about creating shipping modules in Magento by looking at the examples in the core files — namely, Mage_Usa and Mage_Shipping.
I welcome any questions and would love to hear your feedback in the comments area below.
(al, ea)
© Matthew Haworth for Smashing Magazine, 2014.
]]>