RWD Interview with Murad Bushnaq
This week we interview Murad Bushnaq, owners and founder of a company called Morad Media. They successfully designed, developed, hosted and provided on-going support to hundreds of websites, for businesses ranging from start-ups, to large corporations and have created Morweb CMS.
Q. For those readers that might not know who you are can you give everyone a bit of an overview as to who you are and what you do?
Almost 10 years ago I founded a digital design agency, Morad Media & more recently launched Morweb CMS – a responsive design CMS & Blog Software specifically for non-technical users and designers to create any website without compromising their creativity.
Q. What was the best implementation of responsive design you’ve seen in 2013/2014 and why?
I love the big, high traffic sites that have transitioned to a responsive design. I know first hand how much work is involved and the amount of planning to create a truly responsive site without compromising content and functionality. Some sites I frequent which have nice RWD
http://thenextweb.com – I like this site because it has a very unique and powerful menu on the left side. It includes latest posts, most popular posts, ads and has a very obvious ALL CHANNELS red button at the top where you can bounce around channels quickly and easily. The menu is not compromised at all when viewing on smaller resolutions and overall the site is very fluid. However, I did notice their search field doesn’t work on smaller resolutions, easy fix but thought I would point it out :)
http://www.lexus.com/ – A unique page for me is http://www.lexus.com/models As you scroll down, the sticky menu changes depending on the model line up you are viewing. For example, once you scroll past Sedans it changes to Convertibles and then SUVS. The sticky menu is actually the parallax of the site, so you can quickly jump around a really long page. Once you click on a model, you can see exterior, interior and wheels easily in a very intuitive manner. Love the F-sport cars too! :)
http://www.smashingmagazine.com – it has a ton of content but handles it very well. It also doesn’t just optimize down but up to larger screen sizes. One example, you’ll see notice the Books/Ebooks/Workshop/JobBoard menu move from the left of the logo to below the logo on wider screen which allows the content in the middle to bump up which adds more spacing so everything looks cleaner.
Q. What is the one thing with RWD you would like to see improved?
Better load times, better optimization of images. The majority of websites are loading images that are too big (file size) for desktops, when these images are viewed on a mobile device they can take significant amount of time to view a page.
Q. If you could offer one piece of advice around RWD, what would it be?
Don’t compromise. In many instances creating a RWD is challenging especially when taking into account other technologies, content, images and client demands. It’s much easier to give in but the struggle is what makes us better and evolves the industry as a whole. Also, keep your layouts simple, use media queries for the most common resolutions, make your layout flexible, optimize your images, and remove unnecessary content.
Q. We talk a lot about building responsive websites, but what about maintaining and debugging existing responsive websites?
Really if a responsive website has been built correctly, maintenance and debugging should be minimal. They are plenty of great resources out there for debugging and testing your websites. Chrome Developer Tools is a great tool for debugging. Debugging a page that has too much html and content can be a nightmare. Try condensing the file to its smallest possible version that creates the problem, then meticulously add and remove scripts,css,and html elements until you can track down your specific issue.
Q. What are your maintenance tips and hints for keeping a responsive website lightweight and still be able to add new features quickly?
The fact of the matter is responsive websites are overweight, in reality all web pages are overweight, performance should be prioritized and not be an afterthought. Expandable code and a custom framework help make adding new features quick and easy.
Q. How do you organize media query to care for that?
Starting with your base stylesheet, define all your design styles before ever getting to your media queries. Using percentages for widths helps with fluidity, and will scale your website seamlessly. RWD should really follow the less is more mentality. Limit the number of media queries to cover the largest possible resolution, without hindering the design.
