All posts tagged “Base”

Specifying Document Base URL With HTML <base> Element

Websites are built with a series of links, pointing to pages and sources like images and stylesheets. There are two ways to specify the URL that links to these sources: either use an absolute path or relative path.

The absolute path refers to specific destination, typically it’s started with the domain name (along with HTTP) like www.domain.com/destination/source.jpg. The relative path is the opposite: the link destination depends on the root location or in most cases the domain name of your website.

A typical relative path would look like this below:

 <img src="/assets/img/image.png" alt=""> 

If your website domain is, for example, hongkiat.com the image path would resolve to hongkiat.com/assets/img/image.png. You should understand this if you have been developing website for a while.

But most of you probably have not heard about the <base> element. This HTML tag has been around since HTML4, yet very little is seen of its implementation in the wild. W3C describes this element as:

“The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks.”

This <base> element basically decides the base URL for relative path in web pages. Instead of depending on the root location or the domain of your website, you can point it out to somewhere else, perhaps like the URL where your resources reside in CDN (Content Delivery Network). Let’s see how that actually works.

Using the Base Element

The <base> is defined along side the <meta> and <link> tags within the <head>. Given the following example, we set the base URL to Google.

 <base href="http://hongkiat.maxcdn.com/assets/"> 

This specification will affect all the paths within the document, including one that is specified within the href attribute and the src of the images. So, assuming we have a stylesheet, images, and links in the document set with a relative path like this, for example:

 <link rel="stylesheet" href="path/main.css"> <a href="path/page/sub-page/">Anchor Link</a> <img src="path/image.jpg"> 

Even though our web page is under demo.hongkiat.com the relative path will refer to hongkiat.maxcdn.com, following the base path specified in the <base> tag. Try hovering over the link, and the browser will show you where the path is exactly heading to.

All the relative paths will eventually be:

 <link rel="stylesheet" href="http://hongkiat.maxcdn.com/assets/path/main.css"> <a href="http://hongkiat.maxcdn.com/assets/path/page/sub-page/">Anchor Link</a> <img src="http://hongkiat.maxcdn.com/assets/path/image.jpg"> 

Setting the Default Link target

Aside from defining the base URL, the <base> tag can also set the default link target through the target attribute. Say you want all the link in the document to open in the browser new tab, set the target with _blank, like so.

 <base href="http://hongkiat.maxcdn.com/assets/" target="_blank"> 

Limitations

The <base> tag, however, holds a couple of caveats in some circumstances:

First, the <base> browser support is great; it works in IE6. But, IE6 thinks that it requires a closing tag </base>. This could cause a hierarchy issue in the document, if the closing tag is left unspecified. A simple quick way to address this issue is by adding </base> closing within a comment, <!--[if lte IE 6]></base><![endif]-->.

If you are using # in conjunction with the <base> to link to sections within the document, you may potentially encounter an issue in Internet Explorer 9. Instead of jumping to the referred section, Internet Explorer 9 will reload the page.

Furthermore, a blank href will result in the base URL instead of linking to the current directory where the page resides (this is default browser behavior), which could cause unexpected referencing issues.

Wrap Up

The <base> is a handy HTML feature that may simplify link referencing in a web document. Use the tag considerately to minimize the pitfalls. Follow these reference below for more on the <base> tag:





hongkiat.com

Mountain-Inspired North Drinkware: A handblown pint glass with the real 3D data of Mt Hood molded into the base

Mountain-Inspired North Drinkware

Straddling both premium hand-crafted value and advanced technological innovation, the Oregon Pint Glass from North Drinkware offers a drinking vessel worthy of all those tasty Pacific Northwest craft beers. Launching on Kickstarter today, this handblown……

Continue Reading…


Cool Hunting

Liang Shi Restaurant, Beijing: Contemporary design aesthetics provide the base for this 798 Art District eatery

Liang Shi Restaurant, Beijing


In the last 10 years, Beijing’s 798 art district has been progressively transforming from a quiet epicenter of Chinese contemporary art into a mainstream leisure and tourist spot. In a city where development doesn’t often make aesthetics…

Continue Reading…


Cool Hunting

BASE Bar, Tokyo: A venue interior that tells a long, insightful story—because nothing has ever been taken off the walls

BASE Bar, Tokyo


by James Rodrigues BASE Bar’s walls are thick with layers of posters, pictures, license plates and business cards; the ceiling is draped in faded flags. Wu-Tang posters are hung opposite of signed Uruguyan soccer jerseys. This bar’s incredibly storied design has been created…

Continue Reading…


Cool Hunting

Top commander at US nuclear missile base resigns in wake of cheating scandal

The US Air Force has fired nine commanders and accepted the resignation of a senior officer following a scandal involving systemic cheating on proficiency exams at a nuclear missile base in Montana. In January, investigators first stumbled across evidence that officers were using text messages to cheat on exams designed to ensure that they were prepared to handle “emergency war orders” that detail nuclear strike targets.

Since then, the Pentagon has revealed that the cheating involves far more Air Force personnel than first thought: 82 officers are now implicated, according to the Associated Press, though not all participated in cheating. Some were merely aware of the text messages and chose not to reveal it to superiors. Four…

Continue reading…

The Verge – All Posts

2014 Ski Clothing: From base layers to multi-sport capable outerwear, here’s what kept us dry and warm this season

2014 Ski Clothing


Though the calendar might suggest warmer temperatures, here in NYC and from the Alps to the Rockies, the snow continues to fall. After testing outerwear and base layer pieces across a full range of conditions–from frigid blustery days at high elevations to…

Continue Reading…


Cool Hunting

Making the Ugly Site Base Work for Your eCommerce Store Without Making It Too Ugly

One of the surprising discoveries that PC World published involved the effect of ugly websites and customer responses. Often times, people assume that attractive sites gain greater favor with viewers…

For full article and other interesting tech related stuff visit the website.
SkyTechGeek

Interview: Base

This week we present to you our interview with Jean-Marc Joseph, Creative Director of Base Motion, the audio-visual department at Base Design.

A design agency with offices in Barcelona, Brussels, Madrid, New York & Santiago, Base “specializes in not specializing” which is certainly evident in their broad range of work in graphic design, art direction, audiovisuals, copywriting, and typeface design (an example of which is Baseville featured in this weeks header graphic).

Jean-Marc answered a few of our questions during the OFFF in Barcelona. He tells us about the working process at base and how the different offices and departments collaborate, but also about his love for the Brompton Bike… which I apologise for not knowing about 😉

FormFiftyFive – Design inspiration from around the world » Features

Aggrandize the Customer Base with Advertising

There has been a profusion of business advertising tactics round the world to outshine the ever accelerating rivals. The only way to grab the maximum share in the market arenaRead More

You can visit the website for the full article and other interesting articles.


Blogger’s Path

The Power of the Niche: What You Didn’t Know About Narrowing Down Your Client Base

Here’s a scenario for you. You’re out with your friends, and you’re getting hungry. The members of your group start suggesting places where you can go and grab some dinner. There are a lot of eclectic suggestions being thrown about – Chinese, Mexican, Thai, Greek – and none of you is sure what you’re going to choose. Here’s one thing you probably won’t do, however: go to an “all-purpose” restaurant which serves all of the above types of food, plus about 10 more.

Image Source: Niche Market via Shutterstock

Does that kind of restaurant even exist? Probably not, and that’s exactly my topic for today’s article. When you have too broad a reach with your design work, providing service to a range of clients who have little to nothing in common, you not only dilute the quality of service you’re able to provide each one individually, you also shortchange your own credibility and hamper the progress of your freelancing career. Carving out a niche for yourself as a designer isn’t just an overused cliché; it’s an extremely valuable tool which will help you strengthen your personal brand and attract highly targeted, highly desirable clients.

First Rule Of Design Club

So, what’s the first rule of niching down your client base? Figure out exactly which kind of clients you want to work with. You might think it doesn’t matter – money is money, right? Wrong. The truth is, there are always going to be assignments which you find very enjoyable and which you excel at, and those which you loathe and couldn’t be finished with fast enough. You’re not doing yourself or your clients any favors by forcing yourself to produce work which causes you to die a little on the inside with each click of the mouse or stroke of the tablet.

Image Source: Target your customers via Shutterstock

And believe it or not, once you begin narrowing down your client outreach and increasing the value you provide to your specific corner of the market, you’ll find you’ll still have plenty of prospects who will be thrilled to hire you. Why? Because you’re no longer just a generic designer – you’re a designer who caters specifically to their needs. People find much greater value in a service that seems tailor-made for them, versus someone who will take money from anyone and everyone. Remember, freelancing is like an exclusive club – the more you restrict entry, the more enticing it becomes to those who actually do qualify, and the more you can charge as a result.

Staying on Brand

After you’ve determined which clients would be best suited to your services, it’s time to start building a consistent brand. There have been entire books written on branding itself, but I’ll say simply that it’s extremely important that your brand have consistency and that your work always be a reflection of your brand. If you cater to two completely different markets with your work, it might be helpful to simply separate them in different corners of the web to avoid confusion.

Also remember that your brand is not you specifically (if it is, you might want to consider a career in reality television). No potential client wants to hear about your dog-washing escapades or that crazy house party you attended when they’re reading your professional design blog. Keeping your personal and professional life mostly separate will ensure that your clients will only have positive things to say about you as a businessperson.

The Market Within the Market

It’s not only your clients who will benefit from your services as a designer – it’s also, and even more so, the markets they serve with their businesses. That lawyer client you’re designing for has clients of his or her own; that shop owner has a entire community full of regular and new customers. It’s important for you, as a designer, to get to know those user markets – conduct research to find out what they’re buying and why. If you’re a designer who mainly services clients in the independent medical practice field, get to know some of the patients who will be accessing those websites, reading those brochures, or taking those business cards you design.

Knowing your niche market’s market will greatly improve your accuracy when you set out to design for them. If you haven’t taken the time to talk to these people and collect data on their consumer habits, even your most educated guesses will be filled with inaccuracies, and your clients will lose business if they’re too far off the mark. Which, of course, probably means that you’ll lose business as well.

Hard Numbers

You might think that narrowing down your client base too much will cause too many people to dislike your work or discount the services you provide, since they’ll not be seeing anything which caters to them. And you’d be right – you can’t appeal to everyone, and you shouldn’t even be trying. But is it a bad thing that you can’t appeal to everyone? Consider your last year as a freelancer for a moment. (If you’re new to freelancing, just pretend you’ve had a successful year of working with clients.) How many clients did you have on your ‘would like to work with’ list? 50? 100? Even more? How many did you actually work with? Probably a lot less. Did you go bankrupt? The truth is, we always want to take on more clients than we are physically able to, which is harmless until we actually start attempting to do it.

Image Source: Niche Market via Shutterstock

In order to successfully focus on a niche, it’s important to think about the number of clients you actually need in order to have a financially successful year. If that number is 10, then it’s 10. If it’s 15, or 20, or 30, well, that’s all it is. If you don’t need 100 potential clients to be successful (and you don’t if you’re conducting business properly), it’s pointless to try to appeal to 100 different kinds of people. 100 people will have 100 different opinions on what a good designer should provide; 10 people only have 10 different opinions. Which do you think is easier to cater to?

Conclusion

When you figure out how to provide the exact kind of value your clients need, as well as the value their end users are looking for, you have the ability to drive the strength of their customer outreach. Your intimate, insider knowledge will allow you to zoom in on the likes and dislikes of your clients and their users – what they’re looking for, what they most want to avoid. You can literally create the world in which they do business. That’s the power of niching it down.

What Do You Think?

Do you cater to a specific niche market of clients? What ways do you find the most effective in connecting with them and their own audiences?

You may also like…

Good Old Static HTML Sites Aren’t Dead Yet. Should They Be? →
Should You Keep Your Website Open Source? →
Should Designers know how to code? What do you think? →
Is a Design House-Style Really Necessary? →
Ode To a Wooden Spoon – How The Right Tool Can Help You Design Better →
10 Things Designers Can Learn From Pastry Chefs →
Apple Pie Appeal: How Simple, Classic Design Works →
Repeat Work and the Search For The Holy Grail →
Thoughts and Considerations for Freelancing on a Part-Time Basis →
Is Working Freelance Really Worth It? Pros and Cons →
Tips for Converting Your Freelance Operation into a Business →
Thoughts on why Spec Work is Bad and Why You Shouldn’t Do It →
Technostress – The Freelancers Disease? →



Speckyboy Design Magazine