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!

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

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.)

“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?

“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)

“God is in the details.”

Zana had the chance to sit with her awesome team throughout the 30-hour deployment for the new look of Go Eastern Eagles & is now stoked to share the nitty-gritty details of what makes the site so special. Zana is the Project Manager at Stampede.

I probably quote people way too much in each of the blog posts I have written, but you could not deny the truth behind the German born American architect, Ludwig Mies van der Rohe’s quote. Let me elaborate it further in the post.

A little bit of background for Go Eastern Eagles and the project itself: Go Eastern Eagles is a an athletic division for Eastern University in Pennsylvania. The website facelift  is part of a rebranding effort for the university, done in collaboration between Stampede Design and our partner, Farotech. The deliverables for this second phase include web design, Joomla restructuring and XHTML/CSS styling.

Then:

… and NOW!

Having had the chance to sit throughout 30 hours with the team to deploy the new look, I decided to interview them to find out of the new features as well as challenges and the new things they learned and implemented along the way. I was even more delighted (the client loves it too!) to discover that the website is packed with minute details of UI and features – the little touches that made all the difference. Here I list them all according to the scope of work.

“Rebrand and realign.”- Shaza Hakim, lead designer.

I sat down with Shaza to chat on the new design features for the website. “The primary purpose of the redesign is to employ Eastern’s new branding while introducing improvements to the 4-year old UI.” she chirped as I was typing away her comments. “The new design amplifies the website’s core purpose, which is to deliver sport updates to Eastern fans, real time. We make better use of space above the fold, so when people first lands on the homepage, they are able to navigate quickly to a particular sport, pull latest game results, plan for the next game, and read most recent article and media highlights.”

“The bigass menu – as christened by the programmers – is actually something pretty challenging to design from a UI perspective. How do you maintain a information-laden panel accross 11 different sports, some further divisible into men/women categories? We went through quite a number of iteration with the client before finally decided on the tab-within-a-tab interface. It works because it follows a natural order of sports categorization – something fans are already familiar with.”

“My favourite part of the bigass menu is how it quickly defines a sport. As you move from one sport menu to the other, you’ll see that your eyes become trained at the near-center piece – article image unique to each sport. This is the identifier user subconsciously seek for when rapidly switching between the tabs. And because all Eastern news come with at least one image, empty thumbnail will not be an issue that breaks the rhythm.”

“Weight distribution is also important here, cause you don’t want everything to end up feeling awfully heavy on the left, especially when schedules are not posted for seasonal sports. Having schedule framed in an Eastern maroon tint gives a the entire menu an ideal visual balance.”

I had to tell her to slow down as she pointed me out to this – a much better UI for switching between sports. “All it takes is a glide of your finger on your trackpad or just to move your mouse around.”

Shaza added, “A new section called news and highlights is introduced for each sport – as you can see here.”

“.. also the media section – video and latest photo gallery for each sport – is now more accessible.”

“Another exciting part of my job is to extend Eastern’s branding as identifiers to both women and men’s sports.” Shaza said. “There are now a number of visual distinctions between the two. We maintain the same layout for each sport’s homepage with two visible difference – the logo now reflects the sports you’re viewing – so you’ll always retain a sense of structure throughout your entire visit (and Eastern has thousands of pages worth of game details)…”

“…and the second is we also introduced two color scheme by sampling the two extremes of Eastern’s original maroon. Men’s sports now dons a muted, almost grey maroon and Women’s sports a flash of hot pink. Just so befitting to each gender’s personality, don’t you think?”

E.g. Men’s soccer:

Women’s soccer:

“As a designer, I know I can count on Shaiful and Syazwan to carry through the smallest design details and decisions. It’s a tall order but they did a really excellent job with the build.”

“Ain’t no magic trick.”- Shaiful Borhan, lead programmer.

“No biggie,” Shaiful said when I asked him to elaborate on his deets in the development of Go Eastern Eagles website.

“The new section – as mentioned by Shaza – will also mention articles which are non sports-related. Things like new coach for a team as well as alumni updates.”

“Since we have made media section more widely accessible, I have set up a system on how the photos in the photo gallery are pulled. It will scan the latest articles in each sports for 8 images, which will then check for duplicate images so they will not appear twice in the series and render the thumbnails from there. These photos will be cached so in the future if they are to be read again, it will compare with this cache and will load a lot faster.”

“The scroller on top of the site itself is packed with delicious little big details,” Shaiful added in his usual casual manner.

1. The team logos in the scroller are linked to the relevant teams – hence while cooking up my programming brew, I must make sure that the spelling of the teams’ names must be accurate.

2. The scoreboard not only lists the results, but also the dates of the future games in home and away format. The team who is on top of the list or whose logo appeared first represents the home team.

3. If you could see from the scoreboard, for the results for the past games – the team who won has an arrow to the left of team name.

4. Another thing to highlight is that certain sports like Golf and Cross Country use a different score and schedule format. Basically there is no opponent involved so the scores that appear is only for the Eastern team for that particular tournament. Case in point is for Golf over here.

Shaiful made programming sounds cool all over again when he said, “You see the top headlines here? They are all searchable by sports – brought to you by the power of Ajax pull, homie.”

“And you don’t want to live without social media nowadays, so we pull Twitter feed very nicely on top, as well as some social bookmark buttons from AddThis.com in every sports page.”

“Let me show you a little magic trick, Zana,” Shaiful said, snatching my laptop away from me. He opened the baseball roster page and placed the laptop in front of me. “As you hover over a player’s name, his photo will appear on the right.”

“As you scroll down to the bottom the list (and the site) and hover on their names, you will see that the picture follows you too.”

Shaiful added, “Actually this is not that hard to do, but it improves user experience a lot. Imagine having sports like baseball that keeps a big roster. There’s no practical way to view a player’s image as you move down the list. Having the pictures displayed at the same level where user’s attention is currently focused IS the way to go. This particular quirk was not apparent during build phase, but we keep open channels with our end user after deployment, both on the website and Facebook, to solicit feedback and one user pointed this to us. We rolled out the updated code quickly and was surprised that people notice the improved interaction.” Shaza finally butted in, “And as a designer, it makes me happy to hear back from user who pays just as much attention to details.”

“Another gem,” Shaiful says, grinning, “is the editor now have the option to link a highlighted article to player’s profile or any other information relevant to the article like sport stats or player’s past game. This makes a far richer audience engagement to the website. Like this case of lovely Kelby Bolton here.”

Shaiful put on his serious face back again. “In RSS Newsfeed section, you can get the links to add to your RSS reader so you will be updated without having to visit the website.”

“But anyway, these are no magic tricks. It takes a whole loads of focus, hard work, attention to details and of course team camaraderie to make all this happen.” Shaiful concluded.

“Pixel perfect.”- Syazwan Hakim, front end developer.

Syazwan took a long time to figure out his most significant tasks for Go Eastern Eagles project, although he spent many hours hunching over his desk coding it. It is a common practice to glorify designers and programmers in a project, but truthfully, the front end guy should be given credits as well for being able to bring web design to life in sync with the programming codes. That isn’t any easy task.

“If you may know,” Syazwan began, “the entire page is run on Google Web Fonts. Arial for body tag (which means the default text for the entire site is in Arial), Play for main navigation and headings and Droid for sports navigation.”

“The entire site needs to be able to run on every browser there is out there except Internet Explorer 6 and below. This is where I need to pull out everything I have learned out of my pocket over all these years to make it cross-browsing without having to modify some HTML structures. These includes the sliders, the bigass menu, tabbing hover effect according to shapes and stuffs like that.”

“Because the HTML element is not consistent, the hardest part in my task would be to apply styling as per PSD to article page. What I did was to find the most reliable CSS selector across the article pages for styling and I found this to work quite well.”

“Needless to say teamwork plays a huge role in this project. Shaiful and I spent countless hours discussing the classes declaration over Skype to get this done. There is a hefty amount of back and forth work just to make sure the cross-browsing is executed very well. It was not easy to archive for the updated HTML version, but we have worked on this with the previous project before and we were determined to get this done.”

Syazwan tapped the end of his pencil against his laptop screen and continued, “As far as details go, I must make sure this site is as pixel perfect as possible to the PSD designed by Shaza, down to the tiniest details. I have to thank her for designing something so packed, so detailed yet very nicely organized – this makes the styling task a whole lot easier.”

Any other challenges? “On top of it all, the most important thing is the race against time as well as making sure my tasks are done within the estimation time. I don’t know if I have ever poured it all into a single project like this.”

“On a lighter note, my favorite detail implemented would be the transition of hover effect on thumbnail on homepage slider. I enjoy the little arrows in the thumbnails indicating that this is the picture on display. Aren’t they cute?”

“Other than that, everything else is pretty much a breeze.” Syazwan said, fixing his shirt collar.

What do you think?

We would always love to hear your feedback of the brand spanking new Go Eastern Eagles, as well as things you would like us to feature on Stampede blog. Do drop your suggestions in the comments section or send them over to zana@stampede-design.com.

Help employees get their bearing back, send them out there again, then get the hell out of the way.

Shaza shares her take on why companies should permit employees to fail. Shaza is the Creative Lead at Stampede.

Zana wrote a brilliant post earlier today about nurturing creative culture at workplace. Her posts are always very insightful and I want to extend that with how we do things at Stampede.

When we started Stampede some good 5 years ago, Dov and I were still cringing at our share of bad workplace experience. Our goal then was to create a working environment where people not unlike us can do stuffs they really like while actually enjoying each others’ company. My litmus test when I wake up every morning is almost always – “Do I want to go to work today?”

You cannot underestimate the power of working with people you like. If you are an entrepreneur and have the choice, this should be high on your list. Not profit, not product. People.

Which brings me to my next point. So you found a person who is a perfect fit to your company culture. What next?

I think that it is crucial to build a company culture that allows employee to fail and fail fast. Everyone fails. You shouldn’t tiptoe and delay the inevitable. Only by throwing away your reservations and trying things and risking failure, you are able to learn new things. The key point here is moving forward – not to dwell on your failures or repeating the same mistakes. The former is denying yourself of further greatness (and I mean this in every sense of the word) and the latter is just, well, plain lazy. We abhor lazies.

At the speed in which this industry thrives, failing and moving on is a ubiquitous advantage. Never before an outcome of failure can be rectified almost immediately. If it’s beyond repair, be genuine and honest about it. Clients appreciate transparency and only know too well that everyone is fallible to some degree. Get it out of your system, step back and think of another way around it. Nip the negativity in the bud and move the project, and yourself, into positive territory again.

My take – everyone should be permitted to fail. I fail on daily basis, as few dozens half-finished artworks can testify. Dov’s intensity of hacking at his keyboard multiplies when he couldn’t get some code to work. Failure is an acceptable by-product of actually doing something. A good team is built to weather, nay encourage, the education of failures. People will be too scared to try new things if they’re too busy dodging toes.

On the other side of the coin, a company should have a failure-handling mechanism well-oiled and ready. Assure employees that failure is acceptable, help them get their bearing back, send them out there again, then get the hell out of the way.

So fail and fail fast. Then dust yourself off and move on. Rinse and repeat.

“Hire weird people. Interesting.”

Zana is a firm believer in a controlled chaos, a beautiful mess – a situation where everyone is allowed to experiment and fail as long as they get up and learn quickly from it. Zana is the Project Manager at Stampede.

Internet is a fascinating place. It can be where people lurk for prey, scour for a suitor, make new friends, get in touch with people all over the place, or just basically, just to do some plain work – like we at Stampede do. Not having a physical place to work together do not essentially limit our abilities. With all the communication avenues provided over Internet right now, most of the time they make us more productive than the time being concealed inside some office cubes – as long as the culture cultivated is right.

Here are some guidelines by Ben Chestnut, founder of Mailchimp where he grants his employees the permission to be creative:

1. Avoid rules. Avoid order. Don’t just embrace chaos, but create a little bit of it. Constant change, from the top-down, keeps people nimble and flexible (and shows that you want constant change).

2. Give yourself and your team permission to be creative. Permission to try something new, permission to fail, permission to embarrass yourself, permission to have crazy ideas.

3. Hire weird people. Not just the tattoo’d and pierced-in-strange-places kind, but people from outside your industry who would approach problems in different ways than you and your normal competitors.

4. Meetings are a necessary evil, but you can avoid the conference room and meet people in the halls, the water cooler, or their desks. Make meetings less about delegation and task management and more about cross-pollination of ideas (especially the weird ideas). This is a lot harder than centralized, top-down meetings. But this is your job — deal with it.

5. Structure your company to be flexible. Creativity is often spontaneous, so the whole company needs to be able to pivot quickly and execute on them (see #1)

We might not have any written manifesto at Stampede (perhaps we should) but I can confirm that we have done all of these. Especially #3. Yes, that’s right – you should have seen our verbal artistry nearing the end of EST.

(Photo is of Slipknot frontman, Corey Taylor giving a talk to the students at the Oxford Union’s grand hall.)

There is a reason Leo Tolstoy came up with that aphoristic brilliance of a first line in his novel, Anna Karenina.

Zana loves her new family so much she bugs for their status updates every single day without fail. Zana is the Project Manager at Stampede.

Here’s one thing about me – the day before joining a new company I would always establish the idea that my team members are like my family. That way, in times of those affectionate points of brushing past each other purring contently or during those fraught moments of tearing each other’s hair apart, I will be obliged to love and protect them, come high or low.

I carried the same notion with me the day I joined Stampede as a Project Manager. And just like all families, every member has their own quirkiness which makes every one of us unique. Here’s how I see them:

Dov

Let’s start with Dov. He is The Man, that’s how the boys call him. He’s the male parental unit of the family, generally taciturn, only speaks when he needs to. And when he does, his words are worth quoted and framed. The boys look up highly to him, at some point they fear him but often it is for a good cause. He never needs to speak much to convey his message, just a little sideswipe glance and the boys would scramble out of their seats, jostling against each other to finish their homework so that they could gain extra gaming hours.

Shaiful ‘Holmes’ Borhan

And then there’s the big brother, Shaiful. As opposed to Dov (but just as awesome), he is very laid-back, speaks in a pleasant drawl and regards everyone as his ‘homies’. Despite that, he’s whom everyone runs to when Daddy gives that fearful sideswipe glance. A few reassuring words, and we would be on the right track back again.

Guo Lin

There would always be a nerd in the family – here is our very own Guo Lin. Despite always racking his brain with what-to-do-next’s and here’s-what-I-think lists which never failed to blow our mind, he is often highly critical of himself. At the risk of sounding like a hypocritical mission statement for a tire & rubber company, he strives to be the best among the best among the best. We all love him for his competence and awesomeness, but often never admit because when every time we say “Congratulations, GL!” after a victorious feat, he would go, “Er, OK?”

The Twins

In real life, they are not one – but we have the twins, Syazwan and Mujib. Just like every pair of twin, although they might be identical there will be always be opposing traits that the family always welcome with open arms (although sometimes we leave them debating with each other in the distant corner of the video call). Syazwan is an Android enthusiast, while Mujib is devoted to Team iOs – so we often see them bashing each other about their perennial partialities to their favorite operating systems.

Shaza

Of course we shall not forget about our female parental unit, Shaza. Just like every mother, she is just as protective and wants the best for everybody. Analogically speaking, it’s like as she was trying to let us cross the street after a number of hours of road safety lessons at school, in an instant her mind would go, “It’s OK, Shaza, let go, let them explore on their own.” and after a few seconds she would go again, “Don’t go too far, come back! Let me show you how!” Of course, just like every mother, she has the ability to multitask like a bawse, and escapes unhurt every single time.

Zana

Then there’s me – the crazy, domineering sister.

There will always be one in the family – when the father’s scary sideswipe glance, the mother’s comforting words and the big brother’s reassuring pat won’t work – here’s where the bossy sister comes in. She reminds you every 5 minutes when you forget to clean up after your sleepover. She sticks Post-It notes all over your corkboard (of which she installed for you in your room) reminding you to do your own laundry. And when you forget to do so, she does it for you. Just when you are about to be grateful, she sends you a text message reminding you to walk the dog, when you are about to do so.

Nevertheless, this is what family is about. Some may drive everyone off the wall more than the others, some may be the instant family favorite, some may be just sitting on the fence watching the conversation over family dinner evolves from kindergarten to puberty – in the end, as I was saying, when you are a family, you are obliged to love and protect for each other come high or low.

Stampede team is made of this, amongst many other beautiful traits, and I am so grateful to join this family. (I hope the feeling is mutual).

(Pic: The Winslows of Family Matters, remember them?)

]]> http://www.stampede-design.com/blog/2011/07/all-happy-families-are-alike/feed/ 2 http://www.stampede-design.com/blog/2011/06/dropdown-menu-hidden-behind/ http://www.stampede-design.com/blog/2011/06/dropdown-menu-hidden-behind/#comments Thu, 09 Jun 2011 17:32:31 +0000 Syazwan Hakim http://www.stampede-design.com/blog/?p=1185 “First thing come into my mind when this problem occur is the z-index issue.”

Syazwan shares tip to overcome dropdown menu hidden behind <iframe> . Syazwan is the front-end developer at Stampede.

Have you even been caught by a dropdown navigation that stubbornly hides itself? Well, I found that while it normally works fine with Firefox, this problem usually occurs in Chrome and IE browser.

Dropdown menu comparison

As you can see in the image above, the dropdown on the left works while the one on the right is hidden behind <iframe>. The first thing that came into my mind when this problem occur is the z-index property. But after some debugging, I found that it has nothing to do with z-index since the error does not occur when I changed <iframe> to <img> element.

Is This Related to CSS?

The answer is no. So, how to fix? I am using a video embedding code from YouTube as example.

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/rLVCjnEGrqQ” frameborder=”0″ allowfullscreen ></iframe>

To fix the hidden dropdown issue, what you need is just a simple wmode=transparent code.

What Is WMODE?

WMODE is the Window Mode setting for Flash/SWF. Its possible values are “window”, “opaque” or “transparent”.

• wmode=transparent: sets the Flash/SWF background to be transparent. This allows the background color or image of the content page behind to show through. This is required for overlay (such as jQuery Overlay) contents to show the Flash/SWF.
• wmode=opaque: hides everything on the page behind Flash.
• wmode=window: plays in its own rectangular window on a web page

How Do I Use WMODE?

What you need to do is simply add the “?wmode=transparent” at the end of src parameter and “wmode=transparent” at the end of <iframe>

<iframe width=”560″ height=”349″ src=”http://www.youtube.com/embed/rLVCjnEGrqQ?wmode=transparent” frameborder=”0″ allowfullscreen wmode=”transparent”></iframe>

Hope this helps!

]]> http://www.stampede-design.com/blog/2011/06/dropdown-menu-hidden-behind/feed/ 22