Stampede Rant

Get rid of unwanted space below

Syazwan Hakim — Tue, 29 May 2012 20:08:19 +0000

“For my case, line-height property is the culprit.”

Syazwan shares tip to overcome unwanted space below . Syazwan is the front-end developer at Stampede.

Unwanted space below

Image above shows the correct styling (Left Side) and unwanted space below (RightSide).

HTML Code

Style

.link {
border:1px solid red
}

Why Does It Happen?

Well, for my case, “line-height” property is the culprit. I often assign “line-height:normal;” to so, I’ll never miss any line-height. However, it will also cause the unwanted empty space below

How to fix it?

Change “line-height” value to 0 for tag.

.link {
border:1px solid red;
line-height:0
}

Showcase: Meet the Team pages

Mujib Jazmin — Sat, 12 May 2012 19:24:38 +0000

“Behind every successful project there is a set of really awesome people.”

Mujib believes that running a working team is like running a kitchen – no matter how bad the recipes are, if you own a great team of cooks and helpers, everything is going to turn out just fine.

Let me elaborate. I read an article by programmer Joel Spolsky, Big Macs vs The Naked Chef - comparing a McDonald’s cook and Jamie Oliver from the Naked Chef. A McDonald’s cook follow a set of detailed instructions whilst Jamie just pinches in a bit of salt and throws in a little bit of rosemary – within his workspace is a flurry of willy-nilly ingredients tossed aside. In the end we all would come to an agreement that Jamie’s cooking tastes a lot better and much healthier than the stuffs cooked over at McDonald’s. The same goes to running a project – if you have bad cooks no matter how good and detailed your recipes are the dishes are probably going down the drain (no pun intended).

This is why good people matter in a company – and how we showcase them to the world do too. These people need their credits and some good representation of who they are and how they look like. This is where team pages play a role. It would also give our clients an idea of how we look like (so that they can get to know us as well as not to scare them off!).

Without further ado, here I present my list of my favorite Meet the Team pages.

#1- Caxiamgroup.com

Caxiamgroup is a web design and development company located in Orlando, Florida. They have a carefully assembled team of strategists, designers, developers, programmers & marketers. Check out their Meet the Team page.

There is an attractive use of slider at the top of the page showing their team members categorized based on the transition from Creative to Technical team.

Everyone in the team is shown in three different poses as a way to show them that they are more than what they do at Caxiamgroup – for example Brian here, aside from a User Experience Designer, he is also a sweet family guy.

Everyone gets to describe themselves in a set of keywords under their profile picture(s).

… along with some extra bits of random information accompanying their profile.

#2- Nordkapp.fi

Nordkapp is a group of experienced designers, strategists and technologists from Helsinki, Finland. Even the homepage looks stunningly smart already.

Click on any of the link on top and you will be directed to the page using our favorite parallax scrolling effect.

The secret also lies in such strong copy to describe their team.

The profile info is laid out so simple yet packs a punch. Not to mention (again), nice photographs too.

#3- In2media.com

In2media is a digital agency hailing all the way from Copenhagen, Denmark. Established in 1994, the agency produces campaigns, corporate sites, brand channels, rich media sites, applications, and transaction sites as part of their solutions to strengthen the relations between clients and users.

In general, click over any of those links and you will see that they have employed some cool CSS3 animations. The same goes when you hover the images, details and sliders in their Meet The Team section.

These are just probably some of the Meet the Team pages that caught my eye, so if you have some other suggestions, feel free to drop them in the comments section.

(P/s: Check out our Meet the Team page!)

We’re Hiring

Shaza Hakim — Sat, 14 Apr 2012 00:34:14 +0000

Stampede is looking for two PHP programmers to join our team.

Fresh, bright personalities, fast learner with great attitude and productive under minimal supervision. 1 year employment or freelancing experience as programmer required. WordPress and Joomla skills preferred.

Our client list spans 4 continents and we’re getting busier every day. Do expect to hit the ground running – we have plenty of interesting work. You can work remotely too.

As you can see, our requirements are pretty loose. That’s because we know great people when we see them. Call it good vibes, witchcraft. Wonderful attracts.

Write to jobs@stampede-design.com and furnish us the necessaries.

Why Stampede?

Our work

We designed and built app exclusively for our project manager

EST makes the team say the darndest things

We take zombie apocalypse survival seriously

We celebrate awesome clients

Our p4wning sessions are legendary

Join us!

What a sound advice.

Zana Fauzi — Thu, 29 Mar 2012 20:55:40 +0000

“Do good work and share it with people.” – Austin Kleon, Steal Like An Artist. via

Vote for Langkawi LASSie!

Zana Fauzi — Tue, 14 Feb 2012 22:59:46 +0000

If you only have once chance to make the world a better place with one vote at a time, please take the time to vote for Langkawi LASSie in Sunsuper Dreams and help to save and protect abandoned cats and dogs in Langkawi. Every month, Sunsuper Dreams is awarding a £5,000 grant to a dream with the most votes to help make it come true.

Doing good does not take much these days, don’t you have to agree with that?

The Year of the Dragon

Shaza Hakim — Mon, 23 Jan 2012 05:39:21 +0000

To our very own walking-wiki Guo Lin and all our Chinese friends, have a grand and prosperous Chinese New Year!

Parallax is the new black

Mujib Jazmin — Sat, 21 Jan 2012 19:07:38 +0000

“It’s the ‘in’ thing. Every web folk should know it.”

Mujib took the time to dissect three of his favorite websites with the infamous parallax scrolling effect. Mujib is Junior Web Designer at Stampede.

It’s official: all the guys (and the girls) in Stampede are crazy about parallax scrolling effect. It has found its way into almost every requirement and statement of work we have – it is almost like we are trying to find an excuse to use and experiment with its capability. Furthermore, it’s the in thing. Every web folk should know it.

Parallax? Well son, elaborate.

If you must know, parallax scrolling effect is like the coolest magic trick to hit the web design shores at the moment. Before this it was used widely in video games for years. According to Line25, the effect became popular when it was implemented in the background of Silverback app website. Back then it was only used as an Easter egg – visible only when the browser is resized. Now the effect has since evolved and seen as part of a scrolling feature of a web site, where multiple backgrounds seem to move at different speeds.

Hm, I am intrigued. Can you show me how it works?

You are lucky. Here I have in my sleeve is a showcase of three of my favorite websites with this effect – let me show you how awesome it is. Don’t only take my word for it – please also click on the links and experience it for yourself.

#1 – 360 Long Street Zurich

URL. Concept and design by Hinderling Volkart, Zürich, Switzerland.

If you are being observant after you are done picking your jaw off the floor, you would notice that 360 Long Street Zürich is filled with eye-catching elements. It is another one of those little big details discovery in user experience.

These bubbles in red animate as you encounter them by scrolling through the street along the way. Click on the information underlined and you will be taken to another realm – for example, another person’s room where you can further explore his/her room by more scrolling and listen to his/her favorite music.

The icon on the top right of the browser will let you experience the street life in Zürich whether it is day or night. And if you are careful enough to notice, every people we see on the streets have their faces blurred.

The parallax utilization in this website is made by extracting images from a video scene. When scrolling started, the menu on the right screen will fade out and animated video images will appear until video ends. A high resolution image will appear when scrolling stops.

As you scroll, flying bubbles will move from the bottom to the top, in left and right curve directions.

#2 – Cultural Solutions UK

URL. Concept and design by Hoohaa Design.

Cultural Solutions UK is one of the websites with parallax scrolling effect that I had my eye on. Staying true to the nature of a designer, I could not help noticing some eye-catching elements implemented in this website.

… like these cute icons distribution to the buttons.

Or the fact that the animated background will follow the cursor along the header. (You have to give this a try yourself to see how it works.)

Not to forget the noticeable heading designed with good color contrast and excellent choice in typography.

You gotta love the scrolling news ticker for its Twitter feed too!

Unlike 360 Long Street Zürich website, the parallax utilization for Cultural Solutions UK is not that heavy and complicated. The effect is mostly applied to the menu buttons, but it is enough to add that wow factor to the website.

#3 – Smart USA

URL. Concept and design by Smart USA itself.

I believe this is my favorite out of all three. Everything in the website – the title, the description and the visuals are so appealing you wish you had worked in this.

How the parallax effect works in here that as you scroll in the homepage, the car would zoom in closer to you. In fact, most of the navigations are done by scrolling, but if you get tired of doing so, you can always click the buttons in dots at the right corner of the site.

Cool! So, how do I learn how to achieve this effect?

Parallax scrolling effect is done with the help of well-defined images, jQuery and CSS3. There are many tutorials you could find around the web – among these are ones done by WebDesign Shock, Richard Shepherd and Theme Forest. You could also go see behind-the-scene works that goes into the making of Nike Better World website, the pioneer of parallax scrolling effect in web design.

Awesome! I will go create one now!

Good luck!

A City of Our Own Part V: Ipoh

Syazwan Hakim — Sat, 14 Jan 2012 20:05:29 +0000

“My town is famous for its numerous tourist attractions and not to forget, various local delicacies. Yum.”

Syazwan, as an ‘Ipoh Mali’ boy, is excited to share about his little town. Syazwan is the front-end developer at Stampede.

I hail all the way from Ipoh, the capital city of Perak. The name came from a local tree called “pokok ipoh” of which their poisonous sap was used for local people hunting darts. Ipoh is also known as “San Seng” or “Pa-loh” in Cantonese was founded by Dato’ Panglima Kinta. The town was well known in Tanah Melayu (Malaysia) for the precious source of metal in late 1800 – this is for tin ore. The establishment of British tin mining companies at the turn of the 20th century created a golden economic age as large financial institutions such as The Chartered Bank of India, Australia and China Ltd set up shops in the town. The tin ore mining is the main reason for the arrival of vast number of Chinese people. Ipoh obtained the status as Perak capital ever since the World War II had been taking place. During that time, the Japanese people had established Ipoh as Administrative center of Perak with their Grand Colonial Building named as St. Michael’s which now had become St Michael’s Institution secondary school.

As for now, Ipoh is the 4th main city in Malaysia along with Kuala Lumpur, Penang and Johor Bahru at the top. Ipoh is famous for its numerous tourist attractions and not to forget, various local delicacies. Ipoh itself as a city is worthwhile to visit as the Old town of Ipoh is filled with various shop houses and buildings which date back to more than one hundred years ago. Isn’t that amazing?

Ipoh Field

Locally known as Padang Ipoh, the field is located on Jalan S.P. Seenivasagam. The field is very well kept and surrounded by many historic buildings which feature classic colonial architecture, including the mock-tudor style Ipoh Club, FMS Bar, HSBC Building and the magnificent St Michael’s Institution secondary school.

Ipoh Railway Station

Located near the Ipoh field, it is not only a railway station – it also have its first class hotel accommodation on the upper floor, which gives the stranger a hint as to the wealth and importance of the town of Ipoh. An automobile guide of 1925 stated that “The railway hotel at Ipoh supplies the best accommodation to be found in Perak – nice airy rooms, up-to-date sanitary arrangements, the best of food”. Today the Ipoh Railway Station houses the Majestic Hotel – previously known as the Station Hotel Ipoh. To the locals, the neo-classical/Edwardian Baroque structure is the “Taj Mahal of Ipoh”. The landscaped garden in front of the Railway Station accentuates its sense of grandeur.

Darul Ridzuan Museum

Constructed 80 years ago by a tin miner. It has the most interesting collection of artifacts on tin mining in Malaysia. Visitors also can explore an underground shelter within its premises which was built by the owner as a hideout from air raids during World War II. The museum is open daily except for Hari Raya Puasa and Hari Raya Haji at 9.30 a.m. – 5.00 p.m with free admission fee.

MBI City Square

Known for its clock tower, the city square is the focal point of the Ipoh New Town. It usually used for the festival such as TV3′s Jom Heboh and anniversary gathering (Independence Day, New Year etc.). When not in festival mode, you can see a lot of stall at one of the streets here selling various local delicacies such as Char Kuey Teow, Mee Udang and Mee Kicap.

Kek Lok Tong Temple

In English it is dubbed as the “Cavern of Ultimate Bliss”. The temples was first opened to the public in late 70s. Just like other temples which placed various statue of Buddha and the impressive rocky formations, it also have what local people called as “a portal of a different world”. This is because the stunning panoramic park behind the cave which is completely separated from the outside world and only surrounded by numerous tall mountains. The only way to reach the park is through cave itself.

The Lost World of Tambun

The water theme park is the latest attraction of Ipoh located at Tambun. It is fully managed by The Sunway Group. There’s a lot of activities you can do here – among others are Adventure River, Jungle Wave Bay, Tube Raiders, Cliff Racer, Tambun Hot Springs and Explorebay. For animal lovers, you would not want to miss an opportunity to go to Tiger Valley, home of Siberian and Bengal Tigers. If you’re lucky, you can watch their staffs feeding the tigers. Don’t forget to drop by their petting zoo which is a home to a 4000 animals from 55 species.

Gerbang Malam

Gerbang Malam is a local flea market located at the middle of Ipoh. The market operates at 7PM until 3AM with the peak hour at 11PM – 1 AM daily. The streets along Gerbang Malam will be filled up with temporary night hawkers that sells food and general item in the cheapest prices possible. This is the main attraction for nightlife at Ipoh. Whenever there are big festivals,Gerbang Malam is the busiest place in Ipoh.

As for travelers visiting Ipoh, there are quite a few reputable accommodations such as the Syuen Hotel, the Heritage Hotel and the Casuarina Parkroyal Hotel. Do drop by, and I will show you around!

(P/s: A little trivia on Ipoh – did you know that actress Michelle Yeoh, the butt-kicking Bond girl also hails from Ipoh? Well, now you do.)

Stay tuned

Zana Fauzi — Mon, 09 Jan 2012 11:25:03 +0000

“Pixel perfect vector nudging. Now say it fast.”

In between managing the team, cycling around her neighborhood and coping up with recent losses (both father and father-in-law), Zana is ready to lead the team to face 2012 with all our awesomeness. Zana is the Project Manager at Stampede.

I could say that 2011 was a crazy fun year for the team. A hefty load of projects landed on our laps – the team worked hard day and night (in between cracking jokes and devising tomfoolery, well of course.). Hence the lack of blog posts. But fret not, we have got a couple of posts lined up for the coming weeks – so stay tuned!

In the meantime, check out this fantastic post on pixel perfect vector nudging for Photoshop – try saying it a couple of times – pixel perfect vector nudging pixel perfect vector nudging – fast!

And does anyone fancy making some ice cream clouds?

S in iOs5 stands for ‘sweet’!

Mujib Jazmin — Fri, 04 Nov 2011 18:35:50 +0000

“I ♥ iOS5, I’m OK.”

Resident Apple fanboy, Mujib was stoked with the roll-out of iPhone 4S and iOS5. Mujib Jazmin is the Junior Web Designer at Stampede.

You know it was meant to be the day I decided to acquire my first iPhone ever. It was a beautiful sunny day somewhere in 2009 and I was queueing up with a handful of others at the Apple store, giddy to own a newly launched iPhone 3G. Once the shiny new wonder machine found its place in the curves of my palms, I was at awe. I spent hours testing out the features, guided with the instructions manual (which was pretty brief anyway) and many many bytes of Googled web pages. I slept clutching it to sleep. It was love at first touch.

When you fell in love and the feeling was reciprocated (yes the iPhone loved me back, I was sure of it), you began the stage of getting to know each other. As with many other Apple devotees, the collection would extend. I got myself a Macbook Pro 15″, an iPhone 4 (in yet another lengthy queue outside the Apple store), an iPad 2, an iPod Nano as well as a couple of other accessories. I once had a sleek iMac 21″ and traded it for my stark gorgeous Macbook Pro, which further enabled me to go as mobile as possible with its durability and brilliant battery life, not to forget its steely performance.

What made me would never turn back was when I surprised my girlfriend with an iPod Nano for her birthday present. The look on her face was priceless – and I knew I had a friend for life in Apple – both the products and its vision.

My journey as an Apple fanboy began!

But what am I rambling about – of course, this is not about me. What I initially wanted to convey was the introduction of iOS5 and how it changed my life. Much to the chagrin of my fellow teammates who are mostly Androiders, I kept chattering about the features until Zana the project manager twisted my arm and told me to pen this blog post down to share my take on iOS5. A little bit late to the iOs5 blog updating bandwagon, but here goes.

iCloud? iLike!

1. Notifications center

Notifications used to be sent in a popup window in the middle of the device – and there was no collation of all notifications. With notifications center placed on top of the screen (you can customize this in Settings) I will no longer miss any notifications. With a single swipe on the top of the screen, all the notifications for my chosen applications will be shown there.

2. iCloud

iCloud refers to Apple’s newest cloud service of which you could store your music, apps, photos, calendars, documents and many more. The service then will wirelessly push all of these to every device you own – no more cables needed. And it comes with a free 5 GB account!

3. iMessage

Move over, BBM – here comes iMessage! Much like BBM, iMessage is messaging application between iPhone/ iPod/ iPad users. For interaction between iPhone users, you can use the phone number of your iPhone and the Apple ID linked to the device, while for iPod and iPad, you can use the Apple ID – much like the existing Facetime.

4. Twitter integration

My traditional way of sharing articles from mobile Safari to Twitter is by having to copy the URL first and then paste it into the Twitter status update field. With this feature, I can share articles to Twitter in a single click.

5. Safari Reader

Safari Reader feature offers a less-distraction reading experience on my Apple devices. Mobile Safari now also has Tab options on much like the traditional web Safari.

6. Wireless sync to Macbook/PC over wifi connection

Perhaps this is my most favorite of all. Let’s say when I update my music library, I don’t have to plug in my iPhone/iPad to my Macbook/PC to sync the files, instead I would just leave and it will automatically sync – for example during overnight charging, so next morning I will have my music library updated in my iPhone/ iPad. Yay!

7. Multitasking gestures on iPad

By just using four or five fingers, swipe up to reveal the multitasking bar, pinch to return to the Home screen, and swipe left or right to switch between apps. Isn’t it cool? You can see it in action here.

8. Reminder app

I have been told I forget a lot, with the reminder app on iOs5, I can keep track of every tasks complete with alarms. This actually helps a lot especially to remind me about my design milestones.

9. Maps with alternate routes

I no longer have to stick to just one route to drive to one place, the new map which comes in iOs5 offers a couple of alternate routes for me to choose.

10. Camera

Now you can pinch-to-zoom gestures, and single-tap focus. Then press the volume-up button to snap your photo in the nick of time. No more fiddling with just one button to take pictures and whatnot.

Battery consumption is… meh.

While all things may seem all rainbow and ponies, a couple of things do come up in my cons list for iOs5.

First would be the noticeable, significant battery drain than during the usage in the previous operating systems (here’s something which could help). Second would be lack of design change – the iOs interface is looking really long in the tooth. The last one would be that there is no improvement in voice control at all, and I say this is a shame.

Other than that, everything works pretty much dandy for me.

“Siri, can you do the designing for me while I go play Battlefield 3?”

Last but no least, here comes the personal assistant with attitude named Siri on iPhone4s. Siri could be a reason enough to buy the new iPhone 4S. Watch Siri in action and read her antics at Shit Siri Says.

( Photo credits: 1, 2, 3, 4, 5, 6, 7)