Mobile-First Design: Where to Start
Stop designing for desktop first. Learn the principles of mobile-first responsive design and why it’ll make you a better designer.
Read Article14 years of responsive design experience, now teaching Singapore’s next generation of web professionals at PixelFlow Academy.
Back in 2010, I was a junior web developer at a small digital agency in Singapore. The job was straightforward enough — build websites, meet deadlines, collect paycheck. But something felt off. We’d spend weeks perfecting desktop layouts, then panic when we realized nobody was testing on phones. It was chaos.
That’s when I got serious about responsive design. Not because it was trendy, but because clients were losing money to poor mobile experiences. I spent the next few years learning everything about fluid grids, flexible images, media queries. The technical side clicked pretty fast. But here’s what surprised me — most developers and freelancers I met weren’t struggling with the concepts. They were struggling with where to start .
Around 2018, I started mentoring freelancers in the Singapore community. I’d sit down with someone building their first e-commerce site and realize they’d never been taught semantic HTML or why accessibility actually matters to business. Not because they weren’t smart — they just hadn’t had someone break it down practically. That gap bothered me enough to build a whole methodology around teaching responsive fundamentals in a way that sticks.
When PixelFlow Academy reached out in 2021, I knew it was the right move. Teaching isn’t just about transferring knowledge. It’s about giving people the confidence to build things that work. And that’s what I do now.
Everything’s built on these fundamentals. Master them, and you’ll understand responsive design at a deeper level.
Start small, scale up. We design for phones first, then enhance for larger screens. It’s the most practical approach for modern web work.
Good HTML is the foundation. Semantic elements aren’t just about validation — they matter for accessibility, SEO, and maintainability.
Flexbox, Grid, and the fundamentals. Not just syntax — understanding when to use each approach and why.
WCAG compliance, ARIA, keyboard navigation. Accessibility isn’t a feature to bolt on — it’s built into good design from day one.
Fast sites are better sites. Responsive images, lazy loading, and CSS optimization techniques that actually make a difference.
Git, browser DevTools, testing strategies. The practical skills that turn hobby projects into professional freelance work.
You don’t need to memorize every CSS property. You need to understand the principles and know where to find the rest. Real work is messy — courses should reflect that.
Singapore’s freelance market is different. SME budgets, local client expectations, competition from global agencies. Everything we teach connects to what you’ll actually face.
Not dummy projects. We work with real design briefs, real constraints, real clients. By the time you finish, you’ve got a portfolio piece that actually matters.
Building for everyone isn’t extra work — it’s good design. Sites that work for people with disabilities also work better for everyone else.
“Good web design shouldn’t be gatekept by expensive agencies. Every freelancer in Singapore should have access to the tools and knowledge to compete at the highest level.”
Bachelor of Science in Information Systems from the National University of Singapore (NUS). Focused on web technologies and human-computer interaction.
2010–2016: Junior to Senior Developer at a Singapore-based digital agency. Led responsive redesigns for e-commerce and service-based businesses.
2016–2021: Worked directly with 200+ freelancers and small businesses throughout Singapore, building and optimizing responsive websites. Developed teaching methodology during this period.
2021–Present: Senior Web Design Instructor & Course Developer at PixelFlow Academy Pte Ltd. Designed curriculum for responsive web design fundamentals and mentors students through real-world projects.
Practical guides on responsive design, front-end fundamentals, and freelancer strategies.
Stop designing for desktop first. Learn the principles of mobile-first responsive design and why it’ll make you a better designer.
Read ArticleBoth are powerful. Neither is a silver bullet. Understand when to use Grid, when to use Flexbox, and why it matters for responsive work.
Read ArticleYou don’t need every device. Learn practical testing strategies that catch responsive issues without expensive device labs.
Read ArticleResponsive images aren’t just about sizing. Learn how to optimize for different devices and connection speeds without sacrificing quality.
Read ArticleWhether you’re just starting out or looking to deepen your responsive design skills, we’ve got courses and resources for you. Let’s build something great.